A DOM-Based Snakes Game, Part II: Loading the Game's Objects

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

Loading the Game's Objects

Once the static board is loaded, we need to load the snake itself and its target. In fact, these two objects are loaded every time the game restarts (due to the snake's collision with the borders or with itself). Here is how we load the snake:

function loadSnake() {
  var snakeRow =  maxRowCount - 2;
  for(var i = 1; i 

This function is very simple. We first initialize the snake's row to be adjacent to the bottom border:

var snakeRow =  maxRowCount - 2;

We then set the row and column position of every one of the eight snake's squares, as well as their image files:

for(var i = 1; i 

Notice that the row position stays the same, while the column position increases, creating a horizontal initial snake. We want the snake to go to the right, so we initialize its head changes per step:

headColumnChange = 1;
headRowChange = 0;

Once the snake is in its place, we need to position its target (an apple). The algorithm is to position the target randomly somewhere on the board. We just need to verify that the target does not overlap the snake. If it does, we pick another random position. Here is the whole function:

function loadTarget() {
  while(true) {
    targetColumn = 1 + Math.round(Math.random() * (maxColumnCount - 4));
    targetRow = 1 + Math.round(Math.random() * (maxRowCount - 3))
	if (!(targetOverlapsSnake())) break;
  }
  divNode.childNodes[domIndex(targetColumn, targetRow)].src = targetGif;
}

Notice that we also set the target image file. Here is how we check if the target overlaps the snake:

function targetOverlapsSnake() {
  for (var i = 1; i <= snakeLength; i++) {
    if (targetRow == snakeRowPos[i] && targetColumn ==
      snakeColumnPos[i]) return true;
  // (The above two lines should be joined as one line.
  // They have been split for formatting purposes.)
  }
  return false;
}

We just keep trying in the while(true) loop above to find a random position that does not overlap the snake. We exit the loop once it is found. Statistically, the odds for picking up one of the snake's squares for the target position are 8 to 220.

We load the game's snake and target every time we start the game:

function startGame() {
  score = 0;
  scoreThisLevel = 0;
  window.status = "Turn with (u, h, n, k) or with NumLock (8, 4, 2, 6);
    Your score is " + score;
  // (The above two lines should be joined as one line.
  // They have been split for formatting purposes.)
  loadSnake();
  loadTarget();
}

Before we restart the game we need to clear the now-long snake and its target:

function restartGame() {
  for (var i = 1; i <= snakeLength; i++) {
    replaceObj = divNode.childNodes[domIndex(snakeColumnPos[i],
     snakeRowPos[i])];
  // (The above two lines should be joined as one line.
  // They have been split for formatting purposes.)
    replaceObj.src = coreGif;
  }
  replaceObj = divNode.childNodes[domIndex(targetColumn, targetRow)]
  replaceObj.src = coreGif;
  if (score > 3) alert("You scored " + score + " points on that game.
    You can do better.");
  // (The above two lines should be joined as one line.
  // They have been split for formatting purposes.)
  startGame();
}

The loop above clears the snakes's squares. The target is cleared at the exit from the loop. Clearing the board is done via assignment to the coreGif file.

Produced by Yehuda Shiran and Tomer Shiran

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

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