JavaScript and Frames, Part II: The Famous Memory Game - | WebReference

JavaScript and Frames, Part II: The Famous Memory Game -

JavaScript and Frames, Part II - The Famous Memory Game

In this column we continue the theme of the previous one - frames. Frames are easier to use than Dynamic HTML because they are browser-independent, simpler in syntax, and easier to program in JavaScript. We demonstrate the simplicity of frame-programming by showing you how to program the famous Memory game. Go ahead and play a few turns of Memory. As you can see, the game has two modes: single-player and double-player. The objective of the single-player version is to match all 32 pairs of images with the least number of attempts. The objective of the double-player version is to match more cards than your opponent.

We use frames in this Memory game for two reasons. First, we want to show you a simple usage of frames and JavaScript. Secondly, using frames makes the JavaScript script relatively short (under 200 lines) and fairly straightforward. The script does not have to check for the browser type, maker, or version -- it's all pure algorithms.

In this column we'll lead you through the design and implementation of the Memory game script, emphasizing the demonstrated usage of frames. The script includes ten functions and a global-variables section. We'll go through each one of them and explain their content in detail. In particular, we'll show you:

You can also view the full listing of the script and its zipped version.

Produced by Yehuda Shiran and Tomer Shiran

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