A DOM-Based Sliding Puzzle: The Main Script

A DOM-Based Sliding Puzzle (4)

The Main Script

Here is the main program of the puzzle application:

var divNode = document.createElement("DIV");
divNode.align = "center";
bodyNode.appendChild(divNode);
var squareNode = document.createElement("IMG");
var brNode = document.createElement("BR");
addOneRow();
addBr();
addOneRow();
addBr();
addOneRow();
loadPicture();
randomizePicture();
var goodClicks = 0;
window.status = "You made " + goodClicks + " moves";

The main program gives you a high-level abstract of the game's architecture and flow. The first line creates the root of the subtree we will deal with in the game:

var divNode = document.createElement("DIV");

The createElement method is one of the DOM's dozen methods, explained eralier in Column 43. It creates an HTML tag element. In this case we create a DIV tag node. The DIV element serves here as a container for the puzzle's nine sections. To position the puzzle in the center of the browser's window, we need to align the DIV accordingly:

divNode.align = "center";

Notice how we set the node properties. The name of the property is identical to the corresponding HTML attributes of the corresponding tag. We use the align property here, exactly as we would have used the ALIGN attribute of the DIV tag. The property should always be in lower case characters.

A DOM's subtree is not visible unless it is connected to the BODY node. Connecting our divNode node to the BODY node is simple:

bodyNode.appendChild(divNode);

The appendChild method accepts the child object as a parameter (divNode) and connects it to the method's father. As explained in Column 44, each new child is added at the end of the children list, childNodes. Our DIV container includes two types of elements: IMG and BR. We create one of each so we can clone them later:

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

The rest of the script is in a higher abstraction level. The puzzle includes three rows and three columns. Here we build it from its rows. We first build the top row by calling addOneRow(). Then we add the BR tag at the end of the row, to force the new line. We then add the second row by addOneRow(), followed by another BR tag. The last call to addOneRow() completes the puzzle's 11 DOM elements.

window.status = "You made " + goodClicks + " moves";