In our previous column, DHTML Behaviors, we showed you how to author a Behavior-based version of the classic Connect Three game. We use this game to demonstrate the Behavior-based persistence. In order to avoid confusion between the Behaviors from our previous column, DHTML Behaviors, and the persistence ones, we have rewritten the game so it does not use any scriptlet or non-persistence-related Behaviors. The rules of the game are very simple. There are two opponents, one playing the "x" pieces, and the other one playing the "o" pieces. They take turns in placing their pieces on a 3x3 grid. The objective of the game is to construct a row, a column, or a diagonal of identical pieces. A tie is declared when the board is fully populated.

The body of the HTML page includes nine <IMG> tags:

<IMG ID="box11" onClick="handleBoxClick(1,1)" SRC="initialbutton.gif">
<IMG ID="box21" onClick="handleBoxClick(2,1)" SRC="initialbutton.gif"> 
<IMG ID="box31" onClick="handleBoxClick(3,1)" SRC="initialbutton.gif"><BR>  
<IMG ID="box12" onClick="handleBoxClick(1,2)" SRC="initialbutton.gif">
<IMG ID="box22" onClick="handleBoxClick(2,2)" SRC="initialbutton.gif"> 
<IMG ID="box32" onClick="handleBoxClick(3,2)" SRC="initialbutton.gif"><BR>
<IMG ID="box13" onClick="handleBoxClick(1,3)" SRC="initialbutton.gif"> 
<IMG ID="box23" onClick="handleBoxClick(2,3)" SRC="initialbutton.gif"> 
<IMG ID="box33" onClick="handleBoxClick(3,3)" SRC="initialbutton.gif">

Notice the ID attribute. The ID value includes the string "box" appended to the i and j indices of the box' row and column, respectively. The grid structure is simply built by going to a new line every three boxes. The onClick event handler is handleBoxClick(i,j). Initially, all boxes have the same SRC attribute, the GIF of an empty box.

Let's look closer at the handleBoxClick() event handler:

function handleBoxClick(i, j) {
    if (eval("box" + i + j + ".src").indexOf('initialbutton.gif') < 0) return;
    if (lastPlayedBy == "o") {
      eval("document.all.box" + i + j + ".src = 'xbutton.gif'");
      lastPlayedBy = "x";
    } 
    else {  // lastPlayedBy = "x"
      eval("document.all.box" + i + j + ".src = 'obutton.gif'");
      lastPlayedBy = "o";
    }
    grid[i][j] = lastPlayedBy;
    if (rowComplete()) {
      alert("The " + lastPlayedBy + " wins");
      window.location.reload();
    }
    else if (itsAtie()) {
           alert("It's a tie");
           window.location.reload();
         }
}

The first line checks that the user did click on a non-occupied box:

    if (eval("box" + i + j + ".src").indexOf('initialbutton.gif') < 0) return;

Notice how we rebuild the ID of the <IMG> tag. Once a string is constructed ("box" + i + j + ".src"), the src property needs to be evaluated by the eval() function. A test is then conducted if this property is equal to initialbutton.gif, the GIF for empty boxes.

The global variable lastPlayedBy denotes the last player identity, "o" or "x." The new player is assigned, and the GIF is replaced, accordingly:

    if (lastPlayedBy == "o") {
      eval("document.all.box" + i + j + ".src = 'xbutton.gif'");
      lastPlayedBy = "x";
    } 
    else {  // lastPlayedBy = "x"
      eval("document.all.box" + i + j + ".src = 'obutton.gif'");
      lastPlayedBy = "o";
    }

Each element of the grid array holds the game piece currently stored in, "o" or "x." After updating it (grid[i][j] = lastPlayedBy;), the function checks for a row, column, or diagonal completion, by calling the rowComplete() function. Similarly, a tie is detected by calling the itsAtie() function.

The function rowComplete() is somewhat long but straightforward nonetheless. We pick one pivot square and compare it with the other two along its row, column, or diagonal. We show here the diagonal check:

  lastPlayedBy = grid[1][1];
  if ((lastPlayedBy != "") && 
      (grid[2][2] == lastPlayedBy) &&
      (grid[3][3] == lastPlayedBy)) return(true);

A tie is tested for by looping over all grid boxes and checking that there are no empty ones:

function itsAtie() {
  for( var i = 1; i <= 3; i++)
    for( var j = 1; j <= 3; j++)
      if (grid[i][j] == "") return(false);
  return(true);
}

The initialization section includes the arbitrary assignment of lastPlayedBy to "x," the creation of the 3x3 grid array, and the initialization of this array with empty strings:

var lastPlayedBy = "x";
var grid = new Array();
grid[1] = new Array();
grid[2] = new Array();
grid[3] = new Array();

for (var i = 1; i <= 3; i++)
  for (var j = 1; j <= 3; j++)
    grid[i][j] = "";

The full script can be found towards the end of the column, Non-persistent Connect Three game.