JavaScript and Frames, Part II: The Overall Design - www.docjavascript.com | 2

JavaScript and Frames, Part II (4)

Initializing the Game Board

A significant part of the script is dedicated to board initialization. There are two key actions we take before the game starts. First, we load the images into memory. It is absolutely essential that all images will be loaded a priori. Synchronizing the image loading during the game itself is very tricky and error prone. The second action we take is mixing the cards so the game board is initialized as randomly as possible. Here is the initialize() function that we invoke before the first game starts and after every subsequent game ends:

function initialize() {
  fillBoard();
  loadPictures()
  setTimeout("coverBoard()", minPause);
  mix();
  revealedNow = "false";
  attempts = 0;
  bingos = 0;
  leftBingos = 0;
  rightBingos = 0;
  nowPlaying = "left";
  if (players == 1) top.status = "You have tried 0 times"
  else top.status =   "Left:0  Right:0";
}

The fillBoard() function assigns the 64 GIF files, as we explain later in this page. The loadPictures() function loads the images into memory. The coverBoard() function covers back the images after minPause milliseconds delay. The mix() function mixes between the images as randomly as possible. The rest of the statements initialize the game. The variable revealedNow is set to "false" as no cards are revealed in the beginning of the game. The number of attempts is zero, and so are the number of total matches (bingos), the number of matches for the left player (leftBingos), and the number of matches for the right player (rightBingos). The variable nowPlaying is set to "left", as the left player starts the game. We assume the players are keeping their turns according to the rules. The left player starts and the one who wins a match is awarded an immediate turn. Finally, we reset the status bar to show the score "Left:0 Right:0" in case of a double player, or the number of attempts in case of a single-player game.

The function fillBoard() fills the assignAr array. This array is 64-long and holds indices into the 32-long pictures array. The function just fills the assignAr with two identical blocks of indices that start at 0 and ends at 31. The element assignAr[5], for example, is equal to the element assignAr[37], and both of them are equal to 5. Here is the fillBoard() function:

function fillBoard() {
  for (var i = 0; i < halfBoardLength; i++) {
    assignAr[i] = i;
    assignAr[halfBoardLength + i] = i;
  }
}

The loadPictures() function loads the 64 images into memory by setting the src property of the 64 images:

function loadPictures() {
  for (var i = 0; i < dim1; i++) {
    for (var j = 0; j < dim2; j++) {
      var location = i * dim1 + j;
      top.frames[j].frames[i].document.images[0].src = pictures[assignAr[location]];
    }
  }
}

The variable i denotes the row of the frame and the variable j denotes its column. The location variable we have discussed in a previous page denotes the position of the frame in the 64-long assignAr. As explained above, the content of assignAr[location] is the index of the image in the pictures array. Notice how we access the images. The top frame is the highest in the hierarchy. The column frame is top.frames[j]. The target frame is top.frames[j].frames[i]. All images are positioned within the document object. In our case, there is a single image per frame, so it is top.frames[j].frames[i].document.images[0].

Once the images are loaded, we want to cover them with the doc50x50 image (through the cover variable). We go over the frames and set their images accordingly:

function coverBoard() {
  for (var i = 0; i < dim1; i++) {
    for (var j = 0; j < dim2; j++) {
      top.frames[j].frames[i].document.images[0].src = cover;
    }
  }
}

Finally, the mix() function randomizes the board. Until now, all images are positioned according to their order in the pictures array, repeating itself twice. We randomize the board by switching images around. For a mixCounter number of iterations, we randomly select a source and target locations, and switch their images around. Of course, we don't actually switch images; we just switch their indices into the pictures array:

function mix() {
  for (var j = 0; j <= mixIteration; j++) {
    source = Math.round(Math.random() * (boardLength-1));
    target = Math.round(Math.random() * (boardLength-1));
    temp = assignAr[source];
    assignAr[source] = assignAr[target];
    assignAr[target] = temp;
  } 
}

Produced by Yehuda Shiran and Tomer Shiran

Created: April 5, 1999
Revised: April 5, 1999

URL: https://www.webreference.com/js/column37/initialize.html