JavaScript and Frames, Part II: The Famous Memory Game - www.docjavascript.com

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:

• How to design the overall structure of the game using frames.
• How to set the global variables section.
• How to initialize the game board before the game.
• How to handle mouse clicks.
• How to reveal a card.
• How to remove and cover back a card.
• How to write the frames.

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