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

JavaScript and Frames, Part II (2)

The Overall Design

Our version of the Memory game consists of 32 pairs of cards, 64 cards in all. We chose to represent each card via a single frame, consisting of a single image. We organize the frameset in a hierarchical fashion; We position 8 columns at the top level, and 8 rows in each column.

The script resides at the top level HTML file. Whenever a mouse click is detected in one of the 64 frames, an event handler is called at the top level. All processing is triggered by these mouse clicks and the script's global variables serve as a depository for common information such as the 64 positioned images, the number of matched pairs, the attempt count, etc.

We initialize the game by loading the 64 images into place and then covering them with our own Doc JavaScript logos. We put their names into an array and then randomly mix them. It is extremely important to preload the images into the browser cache, as otherwise the browser will have to access the server for each image clicked, causing the script to fail occasionally.

The user is asked to provide the number of players at the beginning of the game. The single-player version is different from the double-player version in the way scoring is done. In the single-player version, we track the number of matches and the number of attempts. These two numbers are displayed in the status line during the game. The single player can try to match all 32 pairs with lower number of failed attempts. In the double-player version, we track the matches of the left and right players. The left player should start and a player gets another turn following a successful match.

We design the script to work in two modes. We distinguish between the two modes according to whether there is a revealed card on the board or not. We switch into the first mode when no card is currently revealed, i.e., all cards are covered. (The number of cards may vary between 64 at the beginning of the game, and two at the last turn of the game.) When all cards are covered and the user clicks one of the cards, we switch into the second mode. We first load the clicked image and then check if its name is identical to the one previously revealed. If there is a match, we update the scoring and remove both cards from the game by loading two blank images. We also switch to the first mode, waiting for the player to uncover the first card. When we detect a mouse click, we load the clicked image, and just wait for the second click. The game ends when all 32 pairs have been matched. A new game starts immediately.

Produced by Yehuda Shiran and Tomer Shiran

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

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