lesson-2.step

markdown <<-MARKDOWN
  To get started, we want to create a `variable` that represents the
  snake. Add the following line to the beginning of game/snake.js:

  ```js
  var snake = [{ top: 0, left: 0}];
  ```

  <p>Now that we have this amazing snake we want to show it off, right?  The
  CHUNK game engine makes it easy to draw objects on the screen. Let's tell CHUNK
  to `draw` our `snake`!</p>

  ```js
  var drawableSnake = { color: "green", pixels: snake };
  var drawableObjects = [drawableSnake];
  CHUNK.draw([drawableSnake]);
  ```

  CHUNK's `draw` function expects to be given a collection of objects. This
  means we must create an array and place the drawableSnake inside of it. Then we
  can pass that array into `CHUNK.draw`

  To see what your code does you'll need to save your `snake.js` file and
  refresh the browser window that has your index.html in it. We recommend doing
  this early and often!

  Congratulations! You've drawn a (very short!) snake on the screen.
MARKDOWN

js_expected_results 'lesson-2'

markdown <<-MARKDOWN
  ### Play Time!

  * Add comments underneath each line explaining what it does in plain old
  english.
  * Change the color of the snake.
  * Make the snake longer than just 1 segment!
  * Draw something in addition to the snake. Perhaps an apple or a wall? Make
  sure it's a different color!

  ### What is CHUNK?
  When programming, you'll frequently need to solve problems that have been
  solved before. In many cases someone who solved the problem already has
  packaged their code into a `library`.

  Good libraries tend to:

  * Help you think about the problem you're solving more clearly
  * Be well documented
  * Solve a small set of closely related problems

  We'll be using the CHUNK library throughout this tutorial. CHUNK is an
  example of a library whose job is to:

  * Draw chunky-pixels on the screen!
  * Respond to user input
  * Start and end a game
  * Check for things running into each other
  * Be reasonably approachable for novice developers

  ### Syntax Breakdown

  `var` tells the computer to create a variable (in this case named `snake`)
  that we can assign a value to.

  `=` (single equals sign) tells the computer to assign the value on the
  right of the `=` to the variable on the left of the `=`.

  `[` and `]` (square brackets) come in pairs. They wrap around one or more
  values to make a list (often called an array).

  `{` and `}` (curly braces) also come in pairs. In this case they wrap around
  pairs of names and values to create an `object` (sometimes called a
  `hashmap`). (Note: There is another use of curly braces which we will see
  later.)

  `:` (colon - when creating an object) says to create a variable within the
  object. It's name (or key) is on the left side of the `:` and it's value is
  on the right.

  `,` (comma - when creating an object or map) is used to separate key/value
  pairs on the object.

  `;` (semicolon) says "This line is over. Thanks!"

  `.` (period) is used to get the value stored at a key inside an object.
  `drawableSnake.color` says "get me the value of the color key in the
  drawableSnake variable." What do you think that value is?

  `(` and `)` (parenthesis) also come in pairs. When they come after a
  variable, they are saying "run the code stored in this variable." A variable
  that stores code that can be run is called a `function`. Values held within
  the parenthesis are given to the `function` for whatever it's purpose may
  be.  In this case, we want to give a collection of drawable things to
  CHUNK's draw function so it can draw them on the screen.
MARKDOWN

next_step "lesson-3"