A DOM-Based Snakes Game, Part I: Building the Game's DOM

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

Building the Game's DOM

We build the game's DOM similarly to how we did it for the sliding puzzle. The board consists of maxRowCount of rows. We append a <BR> tag to the end of each row, and thus forcing the new lines:

function buildBoard() {
  for(var i = 0; i 

We build each row by first cloning the squareNode that we create in the main script:

var squareNode = document.createElement("IMG");

and then appending all nodes to the divNode node. Here is the full function:

function addOneRow() {
  for (var i = 0; i 

Similarly, we create the <BR> node by cloning the brNode that we create in the main script:

var brNode = document.createElement("BR");

and then appending each node to the divNode node. Here is the full function for creating a single <BR> node:

function addBr() {
  tempBrNode = brNode.cloneNode();
  divNode.appendChild(tempBrNode);
}

Produced by Yehuda Shiran and Tomer Shiran

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

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