Memory

Demo

A demo of Memory is available.

Installation Instructions

To work on this assignment, you will need a copy of the Memory template that we have created for you, as well as the colored square images that make up the Memory cards. Copy these over into your home directory by typing install memory from any shell. Then open the file ~/projects/memory/memory.html in XEmacs.

The Assignment

You may remember playing the game Memory when you were little. In the game, which can be played with any number of players, you put out little cards face down. The cards come in pairs, so you might have two cards with dogs on them, two cards with cats on them, and so on. In each turn, the player turns over two cards. If they match -- if both the cards have dogs on them, for example -- the player gets to keep those two cards, and they are removed from the playing surface. Otherwise, the player flips the cards back over, and the next player gets a chance to flip two cards. The object of the game is to get the most number of matches.

Your implementation of Memory will be a single-player game, so you do not need to keep track of the scores of multiple players. The "cards" in this game are simply colored squares. The game board should start with sixteen cards, all face down. When the user clicks on a card, that card should "flip over," revealing a color. The user should then be able to select another card. If the two cards selected are the same color, a message should be displayed saying that the user made a match and the cards should become "matched" cards (the equivalent, in this implementation, of removing cards from the playing surface). Otherwise, a message should be displayed saying that the cards do not match. If the user selects a "matched" card or if the user selects the first card as the second card (that is, if the user clicks on the same card twice in one turn), an error message should be displayed and the user should be allowed to choose a different card. Once the user has successfully matched all the cards, a message should be displayed saying that s/he won.

When the user successfully makes the last match, you need to prepare the board so that the user can play a new game of Memory. You can do this in one of two ways:

1. You can reset the board when the user clicks anywhere on the board OR
2. You can reset the board immediately after displaying the "you won" message, so the user can begin playing as soon as s/he dismisses that message.

Getting Started

Since this assignment is an introduction to programming and not to HTML or graphics, we are giving you the HTML page and graphics that your Memory game should use. The HTML page lays out the sixteen image which compose your game board and specifies a function, pickCard, which is called when the user clicks on one of these images. The pickSquare function will be passed the number of the image that was clicked on as a parameter. This function serves as a starting point for you to begin your program; you will need to define this function to do something useful, and you will have to define additional functions, variables, etc. as necessary.

We are providing ten graphics that you can use to display the components of your game board:

• black.gif, cyan.gif, darkblue.gif, green.gif, orange.gif, purple.gif, red.gif, yellow.gif: The colored squares that should be displayed when the user flips a card over
• blank.gif: The "card back," displayed when the user hasn't flipped a card over
• match.gif: A "matched" card, displayed in place of the colored squares when the user has successfully matched two cards

We are also providing a JavaScript tutorial which you can refer to for help on JavaScript syntax.

Designing your program

Before writing any code, it is important that you fully design your program. The more time you put into program design, the less time you will spend writing the program. For instructions, see the Design documentation.

Examining the program specifications closely is vital to getting started on the right track. Look for nouns in the specification that may represent variables or objects in your program. Verbs often represent functions, and there are even if-then clauses right in the specification that can help you design your program's flow of control. In addition, look for places where loops can be used to factor out similar commands in few steps.

When thinking about your design, you should consider the following:

• How to remember which color is assigned to which square
• How to "turn over" a card -- how to change a square from being blank to being a color
• How to know whether this is the first or the second card that the user has turned over
• How to keep track of which two cards have been turned over in this turn
• How to check if the user has clicked on a card that has already been turned over or that has already been matched
• What is involved in resetting the board when the game ends

You should be coding your program incrementally. Go for small victories instead of trying to write it all in one sitting.

Good luck!

HOME