A DOM-Based Snakes Game, Part II: Moving the Snake

A DOM-Based Snakes Game, Part II (6)

Moving the Snake

The snake is moving one square every interval milliseconds. The movement is done in the moveOne() function which is set to run every interval:

cycleObj = setInterval("moveOne()", interval);

Here is the moveOne() function:

function moveOne() {
  readyForNextEvent = false;
  if (processBorderCases()) restartGame();
  var tailRowPos = snakeRowPos[snakeLength];
  var tailColumnPos = snakeColumnPos[snakeLength];
  updateSnake(); 
  var headRowPos = snakeRowPos[1];
  var headColumnPos = snakeColumnPos[1];
  divNode.childNodes[domIndex(headColumnPos, headRowPos)].src = snakeGif;
  divNode.childNodes[domIndex(tailColumnPos, tailRowPos)].src = coreGif;
  readyForNextEvent = true;
}

The first line sets readyForNextEvent to false. This variable makes sure that we don't start handling the user's next input before we complete handling the current input. The second line checks for border cases and restarts the game if the snake's head hits one of the invalid edges: the four borders around the board and the snake's body itself. The next two lines set the tail coordinates:

var tailRowPos = snakeRowPos[snakeLength];
var tailColumnPos = snakeColumnPos[snakeLength];

The tail is where a square is added when the snake eats the target. We then do the actual change in the snake's coordinates in updateSnake(). Once the coordinates are up to date, we can redraw the snake's head and tail which are the only squares that change during an interval:

var headRowPos = snakeRowPos[1];
var headColumnPos = snakeColumnPos[1];
divNode.childNodes[domIndex(headColumnPos, headRowPos)].src = snakeGif;
divNode.childNodes[domIndex(tailColumnPos, tailRowPos)].src = coreGif;

Finally, we set readyForNextEvent to true, enabling handling for the next input. Let's look now at the updateSnake() function:

function updateSnake() {
  afterTailRow = snakeRowPos[snakeLength];
  afterTailColumn = snakeColumnPos[snakeLength];
  for(var i = snakeLength; i >= 2; i--) {
    snakeRowPos[i] = snakeRowPos[i - 1];
    snakeColumnPos[i] = snakeColumnPos[i - 1]
  }
  snakeRowPos[1] += headRowChange;
  snakeColumnPos[1] += headColumnChange;
}

The function starts with setting the global variables afterTailRow and afterTailColumn. These are the coardinates of the last square which is going to be vacated in the current move:

afterTailRow = snakeRowPos[snakeLength];
afterTailColumn = snakeColumnPos[snakeLength];

The main loop above updates the coordinates of the snake's squares. Except for its head and tail, the snake's position on the board does not change. We just need to shift the squares' indexing in the snakeRowPos and snakeColumnPos arrays. If the snake's length is 10, for example, the coordinates of the new snake's 10th square are equal to the coordinates of the old snake's 9th square, and so on:

for(var i = snakeLength; i >= 2; i--) {
    snakeRowPos[i] = snakeRowPos[i - 1];
    snakeColumnPos[i] = snakeColumnPos[i - 1]
}

Finally, the coordinates of the snake's head are set by adding headRowChange and headColumnChange to its current coordinates.

snakeRowPos[1] += headRowChange;
snakeColumnPos[1] += headColumnChange;

Produced by Yehuda Shiran and Tomer Shiran

Created: August 30, 1999
Revised: August 30, 1999

URL: https://www.webreference.com/js/column47/move.html