lesson-4.step

# Lesson 4 - Moving a Single Segment Snake

markdown <<-MARKDOWN
  Now that we have a function to draw the snake, we want to move the snake.
  Let's write a function which takes a snake and changes its segment's top and left
  values.

  To make our lives easier, let's make some assumptions:

  * The snake is only 1 segment long
  * The snake always moves down

  By making these assumptions it keeps the code clear and makes it easy to
  take small steps. Add the following code to your snake.js file:

  ```js
  var moveSnake = function(snake) {
    var oldSegment = snake[0];
    var newSegment = { top: oldSegment.top + 1, left: oldSegment.left };
    var newSnake = [newSegment];
    return newSnake;
  }
  ```

  Once we have this `moveSnake` function, we can call it and it will give us a
  snake whose segment's location has changed. We can then call `drawSnake` with
  that snake and see it move across the screen!

  Type the following lines into your javascript console a few times:

  ```
  snake = moveSnake(snake);
  drawSnake(snake);
  ```
MARKDOWN

js_expected_results 'lesson-4'

markdown <<-MARKDOWN
  ### Play Time!

  * Why does adding 1 to a segment's top value move it down?
  * Can you make the snake move right instead of down?
  * What happens to the newSnake variable? Can you use it outside of the
  moveSnake function body (within the curly braces)?
  * Why are we re-assigning snake the results of moveSnake?

  ### Syntax Breakdown

  `return value` - Tells the function to immediately respond with whatever
  value it is given. In this case, the newSnake.

  `array[location]` -"Get the value at this location in the array." Arrays in
  most programming languages are "zero-indexed" i.e. the first element is at 0,
  the second is at 1, and so on.

  `+` adds the values on the left and right together. Surprise, eh?
MARKDOWN

next_step 'lesson-5'