Now that the snake is moving on it's own, let's make it so it can move in different directions!

First, we'll create a function that moves the segment based upon it's direction (down, up, right, left):

var moveSegment = function(segment) {
  if (segment.direction === "down") {
    return { top: segment.top + 1, left: segment.left }
  } else if (segment.direction === "up") {
    return { top: segment.top - 1, left: segment.left }
  } else if (segment.direction === "right") {
    return { top: segment.top, left: segment.left + 1 }
  } else if (segment.direction === "left") {
    return { top: segment.top, left: segment.left - 1 }
  }
  return segment;
}

if statements choose what code to run. Here a series of if and else ifs to return a new object with coordinates offset from the passed in segment.

When the passed in segment doesn't have a direction or it doesn't match the directions in our if/else if then we return the original segment object.

Our returned segment doesn't have a direction; which means the snake will only move once! To keep the snake moving we need to assign every newSegment a direction.

Let's change our moveSnake function to give the newSegment the same direction as the oldSegment. This will keep the snake moving in the same direction.

var moveSnake = function(snake) {
  var oldSegment = snake[0];
  var newSegment = moveSegment(oldSegment);
  newSegment.direction = oldSegment.direction;
  var newSnake = [newSegment];
  return newSnake;
}

Next add a direction to our initial snakes segments.

var snake = [{ top: 0, left: 0, direction: "down" }];

Now our snake knows where to start moving!

var drawSnake = function(snakeToDraw) {
  var drawableSnake = { color: "green", pixels: snakeToDraw };
  var drawableObjects = [drawableSnake];
  CHUNK.draw(drawableObjects);
}
var moveSegment = function(segment) {
  if (segment.direction === "down") {
    return { top: segment.top + 1, left: segment.left }
  } else if (segment.direction === "up") {
    return { top: segment.top - 1, left: segment.left }
  } else if (segment.direction === "right") {
    return { top: segment.top, left: segment.left + 1 }
  } else if (segment.direction === "left") {
    return { top: segment.top, left: segment.left - 1 }
  }
  return segment;
}
var moveSnake = function(snake) {
  var oldSegment = snake[0];
  var newSegment = moveSegment(oldSegment);
  newSegment.direction = oldSegment.direction;
  var newSnake = [newSegment];
  return newSnake;
}
var advanceGame = function() {
  snake = moveSnake(snake);
  drawSnake(snake);
}
var snake = [{ top: 0, left: 0, direction: "down" }];
CHUNK.executeNTimesPerSecond(advanceGame, 1);

Play Time!

• Use a switch statement instead of a series of ifs
• Make sure each direction works!

Syntax Breakdown

=== tells the computer to check for EXACT equality. For example: "down" === "down" will return true but "down" === "DOWN" will return false.

Helpful Links

1. switch statements
2. === vs ==