Internet Explorer 5.0, Part II: Behavior Handler's UniqueID - Doc JavaScript

Behavior Handler's UniqueID

Behavior Handlers provide a mechanism for setting and retrieving an element ID. The general syntax is as follows:

myID = object.uniqueID

where object can be any of the page objects, such as the document object, the current element that the behavior applies to (BehaviorID.element), or omitted altogether. In the latter case, the default behavior's ID is used.

When you apply the uniqueID property to an element, a new ID is generated and is assigned to that particular element. Every access to that particular element's property will return the same ID.

The algorithm we use in our Connect Three game is based on these characteristics. This is the right place to explain how our game works. When we load the game board in the scriptlet's onload() function, we assign a unique ID to each of the nine boxes and we save it in the loadEvent event object:

function onload() {
  loadEvent = createEventObject();
  loadEvent.id = uniqueID;
  fireEvent("onBoxLoad",loadEvent);
}

We then fire the onBoxLoad event and pass the loadEvent event object to the hosting page. Back at the containing page, we create a new object for each box and save it in a 3x3 array, according to the box coordinates on the game board:

function handleBoxLoad(i,j) {
  grid[i][j] = new createBoxObject(window.event);
}

We then copy each box' unique ID to the new object:

function createBoxObject(event) {
  this.id = event.id;
  this.playedBy = "";
}

When all nine boxes are in place, we have a 3x3 array, each element of the array is an object which holds its unique ID.

When a box is clicked, we pick its unique ID in the scriptlet's onclick() function:

function onclick() {
  if (src.indexOf("ibutton.bmp") < 0) return;  
  clickEvent = createEventObject();
  clickEvent.id = uniqueID;
  if (window.lastPlayedBy == "o") {
    src = "xbutton.bmp";
    window.lastPlayedBy = "x";
    clickEvent.playedBy = "x";
  }
  else {  // lastPlayedBy = "x"
    src = "obutton.bmp";
    window.lastPlayedBy = "o";
    clickEvent.playedBy = "o";
  }
  fireEvent("onBoxClick", clickEvent);
}

Player A uses "x" game pieces and is called the x-player. The other player uses "o" game pieces and is called the o-player. First we check if a valid box has been clicked, i.e. a box that was not clicked until now. We detect it by checking that the src property of the image is not the original blank one, ibutton.bmp. After passing this test, we create a new object (clickEvent) and store the element's unique ID there. The rest of the function just picks the correct GIF to change the box' src property to. If the previous player was the x-player, the current one is the o-player and we change the image accordingly. Vice versa if the previous player was the o-player. We store the player identity in the playedBy property of the new clickEvent object. Finally we fire the onBoxClick event and pass the clickEvent object to the containing page.

Back at the hosting page, we first find the coordinates of the clicked box. We do it by checking the clicked box' ID against all nine unique ID, previously saved at loading time:

function handleBoxClick() {
  for (var i = 1; i <= 3; i++)
    for (var j = 1; j <=3; j++)
      if (grid[i][j].id == window.event.id) {
        iIndex = i;
        jIndex = j;
        var lastPlayedBy = window.event.playedBy;
      }
 
  grid[iIndex][jIndex].playedBy = window.event.playedBy;
  if (rowComplete()) {
    alert("The " + lastPlayedBy + " wins");
    window.location.reload();
  }
}

Once we find the clicked box, we also keep the player identity in a local variable, lastPlayedBy, and update the relevant object in the 3x3 array, grid. What's left is to check for a connect-three edge, horizontally, vertically, or diagonally:

function rowComplete() {
  var lastPlayedBy = grid[1][1].playedBy;
  if ((lastPlayedBy != "") &&
      (grid[2][1].playedBy == lastPlayedBy) &&
      (grid[3][1].playedBy == lastPlayedBy)) return(true);
  lastPlayedBy = grid[1][2].playedBy;
  if ((lastPlayedBy != "") && 
      (grid[2][2].playedBy == lastPlayedBy) &&
      (grid[3][2].playedBy == lastPlayedBy)) return(true);
  lastPlayedBy = grid[1][3].playedBy;
  if ((lastPlayedBy != "") && 
      (grid[2][3].playedBy == lastPlayedBy) &&
      (grid[3][3].playedBy == lastPlayedBy)) return(true);
  lastPlayedBy = grid[1][1].playedBy;
  if ((lastPlayedBy != "") && 
      (grid[1][2].playedBy == lastPlayedBy) &&
      (grid[1][3].playedBy == lastPlayedBy)) return(true);
  lastPlayedBy = grid[2][1].playedBy;
  if ((lastPlayedBy != "") && 
      (grid[2][2].playedBy == lastPlayedBy) &&
      (grid[2][3].playedBy == lastPlayedBy)) return(true);
  lastPlayedBy = grid[3][1].playedBy;
  if ((lastPlayedBy != "") && 
      (grid[3][2].playedBy == lastPlayedBy) &&
      (grid[3][3].playedBy == lastPlayedBy)) return(true);
  lastPlayedBy = grid[1][1].playedBy;
  if ((lastPlayedBy != "") && 
      (grid[2][2].playedBy == lastPlayedBy) &&
      (grid[3][3].playedBy == lastPlayedBy)) return(true);
  lastPlayedBy = grid[1][3].playedBy;
  if ((lastPlayedBy != "") && 
      (grid[2][2].playedBy == lastPlayedBy) &&
      (grid[3][1].playedBy == lastPlayedBy)) return(true);
}

The function returns true when three boxes in a row were clicked by the same player (8 possibilites to check for).

When the uniqueID property is applied the the docuement object, a new ID is generated and can subsequently be assigned to an element.

Created: August 11, 1998
Revised: August 11, 1998

URL: https://www.webreference.com/js/column23/uniqueid.html