JavaScript and Frames, Part II: Global Variables Section - www.docjavascript.com

JavaScript and Frames, Part II (3)

The Global Variables Section

We introduce you to the script internals through a quick overview of the global variables. Here is the section:

 
pictures = new Array("hose.gif", "propellorairplane.gif", 
    "motorcycle2034.gif", "thunderbird.gif",
    "jeep.gif", "z.gif", "wagon.gif", "clock.gif",
    "house.gif", "mustang.gif", "bike.gif", "antique.gif", 
    "fuse.gif", "gargage.gif", "citroen.gif", "baloon.gif", 
    "cabriolet.gif", "tractortrailer.gif", "housefly.gif", "tractor.gif",
    "doubledeckbus.gif", "boat.gif", "officechair.gif", "schoolbus.gif",
    "ferrari.gif", "plumbing.gif", "semitrailer.gif", "radio.gif",
    "unmbrella.gif", "vase.gif", "airplane.gif", "apple.gif"
   );
var dim1 = 8;
var dim2 = 8;
var mixIteration = 500;
var source, target;
var rowFound, colFound;
var nowRevealed = false;
var revealedLocation, revealedRow, revealedCol;
var tobeRevealedLocation, tobeRevealedRow, tobeRevealedCol;
var tobeCoveredLocation, tobeCoveredRow, tobeCoveredCol;
var bingos = 0;
var leftBingos = 0;
var rightBingos = 0;
var attempts = 0;
var cover = "doc50x50.gif";
var blank = "blank.gif";
var coverPause = 1000;
var blockClicking = false;
var minPause = 4000;
boardLength = dim1 * dim2;
halfBoardLength = boardLength/2;
assignAr = new Array(boardLength);
var players = 0;
while (players  2)
  players = prompt("Enter number of players (1 or 2)", 1);
if (players == 2) alert("Rule 1: The player on the left starts. 
                         Rule 2: The match maker gets to go next");
var nowPlaying = "left";
 

The pictures array holds 32 names of the GIF files to be used as the 32 different images of the game. Of course, we have 64 cards, two of each.

Next we define the board's dimensions. We made an extra effort to make the script as flexible as possible. You can change the board size by changing its dimensions, dim1 and dim2. Initially, we start with an 8x8 board, so we set the dimensions as follows:

var dim1 = 8; 
var dim2 = 8;

As we explain later in this column, the initial setup of the board is random. The way we chose to do it is by keep switching cards, a pair of cards at a time. Each pair consists of a source and a target. We switch mixIteration number of random pairs. In our script, mixIteration is set to 500. The variables rowFound and colFound denote the clicked card's row and column.

The assignAr array is created as follows:

assignAr = new Array(boardLength);

and it holds the name assignment of the 64 actual GIF images initially positioned on the board. (We use an 8x8 board in the rest of this column as an example.) We denote each card on the board by three positional parameters. The col and row parameters represent a card's column and row numbers, respectively. They both range from 0 to 7 in our 8x8 board. If, for example, the third from the left card on the fifth row is clicked, we get row = 4 and col = 2. The location variable is the card's index into the assignAr array. There is a simple mapping between a card's column and row numbers and its index into the array:

location = row * 8 + col

The location of the card from the example above can be computed as 4*8+2=34. Throughout the script we use derivatives of these three variables to denote a card: col, row, and location.

The trio revealedCol, revealedRow, and revealedLocation relate to the card that is currently revealed. The board is ready for a player to reveal a second, matching card. Similarly, the trio tobeRevealedCol, tobeRevealedRow, and tobeRevealedLocation denote the card that is about to be revealed, and the trio tobeCoveredCol, tobeCoveredRow, and tobeCoveredLocation relate to a card that is about to be covered back, as it failed to match the previously-revealed card.

The game is designed for either one or two players. We count the number of matches by a single player in bingos. If there are two players, right and left ones, their matches are counted in rightBingos and leftBingos, respectively. A single player can compete against his or her previous negative record of attempts.

Besides the 32 different card images, there are two other images we use. We display the image blank.gif instead of those cards that have been matched and are supposed to be removed from the board. We display the image doc50x50.gif as the default one for all unmatched cards. As in the real Memory game, you see the cards' real images only between a turn's first and second card flipping.

We use two time-related variables. We wait minPause number of milliseconds before covering all images in the beginning of the game. We wait coverPause number of milliseconds before covering or removing a revealed card.

Once a player reveals two cards, we need to protect all cards from being clicked again, until after both cards are either removed (a successful attempt to match them) or covered (an unsuccessful attempt). The blockClicking variable holds the current status. It can be either true or false.

The board dimension is computed as boardLength = dim1 * dim2. The half-board length is computed as half of the board: halfBoardLength = boardLength / 2.

The players variable holds the number of players. It can be either 1 or 2. We prompt the user for the actual number of players, and echoed him or her the game's two simple rules (if two players):

while (players  2)
  players = prompt("Enter number of players (1 or 2)", 1);
if (players == 2) alert("Rule 1: The player on the left starts. 
                         Rule 2: The match maker gets to go next");

Following the above rule that the left player starts, we initialize the nowPlaying variable to "left", no matter if it is a one-player or double game.

Produced by Yehuda Shiran and Tomer Shiran

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

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