Loading the Game's Board

Now that the DOM is ready, we need to assign the right images to the right nodes. We first define the row loading function:

function loadRow(rowNum, gif) {
  for(var i = 0; i < maxColumnCount - 1; i++) {
    divNode.childNodes[domIndex(i, rowNum)].src = gif;
  }
}

Notice how easy it is to assign an image file name to a DOM's node. You just use an HTML attribute of the relevant tag (IMG's SRC for example) as a property of the node (always in lower case):

divNode.childNodes[domIndex(i, rowNum)].src = gif;

Notice the domIndex() function above. It converts a 2-D position (row and column) to an index into a 1-D array of divNode's childNodes. Here is the function:

function domIndex(x, y) {
  return (y * maxColumnCount + x);
}

The loadColumn() function is very similar to the loadRow() function:

function loadColumn(colNum, gif) {
  for(var i = 0; i < maxRowCount; i++) {
    divNode.childNodes[domIndex(colNum, i)].src = gif;
  }
}

We build the rectangular board area by calling the loadRow() method, once per row:

function loadBoardCore() {
  for(var i = 0; i < maxRowCount; i++) {
    loadRow(i, coreGif);
  }
}

Finally, 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();
  }
}