Giter Club home page Giter Club logo

kyrel's Introduction

Kyrel

Kyrel is a simple browser-based game for learning about control flow and loops in javascript. It is reminiscent of a turing machine that manipulates a strip of tape, transforming it from an initial state to a final state.

Methods

The following special methods are available for traversing/transforming the row:

  • moveRight();
  • moveLeft();
  • useGreen();
  • useBlue();
  • draw();
  • erase();
  • onGreen();
  • onBlue();

Example Problem

Write a program which draws a green circle at the end of the row.

  function main() {
    moveRight();
    moveRight();
    moveRight();
    moveRight();
    useGreen();
    draw();
  }

This would result in the following transformation:

 ['.', '.', '.', '.', '.'] // start row (initial state)
 ['.', '.', '.', '.', 'g'] // end row (end state)

Start:

End:

Instructions

Clone this repo! (Or click "Download ZIP" on the right).

There are three problem sets, organized by difficulty: day_1, day_2, day_3.

Solutions may be found in the /solutions folder. NO PEEKING! Try your darndest before you give up. The name of the solution file will match the title of the problem. For example, the solution to turn_3rd_cell_blue can be found at challenges/solutions/turn_3rd_cell_blue.js.

Using kyrel.js

If you look in play.js you'll see this:

var initial_state = [ '.', '.', '.', '.', '.' ];

function main(n) {

  //////////////////////////////////
  ////                          ////
  //// v YOUR CODE BELOW HERE v ////
  ////                          ////
  //////////////////////////////////



  //////////////////////////////////
  ////                          ////
  //// ^ YOUR CODE ABOVE HERE ^ ////
  ////                          ////
  //////////////////////////////////

}
  • First, you need to manually configure your "starting row" (see play.js#L22) to match the initial state of the problem you're solving.

    • var initial_state = ['.', 'b', '.', 'g', '.'] // play.js#L22
      • 'b' means blue
      • 'g' mean green
      • '.' (dot) means empty
  • Next, write your instructions inside the main function in play.js.

    • TIP: If you declare your variables at the very TOP of the play.js file, your values will be in the "global scope". This can make it easier for you to see them in your console / play with them.
  • To run the program, open index.html in your browser and press "Play". This will execute the code you put in your main function in play.js#L24.

    • TIP: Make sure to refresh the page whenever you make changes to your javascript!
    • PRO-TIP: Always have your Chrome Developer Console open (here's how), and make sure to check for error messages!
  • When you've completed a problem, save your work! Make a copy of play.js and rename it e.g. solution-all-blue.js. Then, go back to play.js and clear out your main function so you can start fresh again.

Inspiration

Adapted from Kyrel.

More information about turing machines:

Possible slides: Kyrel.pdf or: google docs

kyrel's People

Contributors

awhit012 avatar benhulan avatar bgveenstra avatar ivannash23 avatar justincastilla avatar kyleschmolze avatar mnfmnfm avatar nathanallen avatar tgaff avatar

Watchers

 avatar  avatar  avatar  avatar

kyrel's Issues

disambiguate `n` argument in main function

The n argument is currently a random number between 1-10, but the row is only 5 cells long.

This creates confusion for problems 2.2, 2.5 n-in-a-row.

It would be nice for students to be directed to test their code like this (currently possible):

main(5)

Instead of this:

function main(n){
 n = 3 // override random number
 // loop n times, etc
}

Object-Orient Kyrel

Then we get to call methods on a Kyrel object, which is syntactically pretty. Later when we teach OO, we can reference Kyrel as something that had state (position, color it's using) and behaviors (moving, drawing, changing color).

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.