A DOM-Based Sliding Puzzle: The Main Script | WebReference

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.

We load the puzzel picture at the bottom of the main script, by calling loadPicture(). We then randomize the position of the nine sqaures with the randomizePicture() function. We then initialize the goodClicks counter and write out the status message that the user made 0 moves:

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

In summary, we first created the DOM elements and then loaded the picture and randomized it. The following pages explain how to write the functions that the main script called above.

http://www.internet.com

Produced by Yehuda Shiran and Tomer Shiran

Created: August 2, 1999
Revised: August 2, 1999

URL: http://www.webreference.com/js/column45/main.html