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 < maxRowCount; i++) {
    addOneRow();
    addBr();
  }
}

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 < maxColumnCount -1; i++) {
    tempSquareNode = squareNode.cloneNode();
    divNode.appendChild(tempSquareNode);
  }
}

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);
}