CSC 551: Web Programming
Spring 2002

JavaScript Project


For your class project, you are to write an interactive Web page that allows the user to play the game Memory (often referred to as Concentration). In the game, 15 pairs of matching cards are displayed in a 6x5 grid face down and players take turns flipping two cards. If the cards match, then the pair is credited to that player and they get another turn. If the cards don't match, then the cards are returned face down and the other player gets a turn. The player with the most pairs at the end of the game (when all pairs have been found) is the winner.

Your page must provide a reasonable interface for the game. There should be a grid of images that represent the backs of the cards. When a player clicks on a card, its face should be revealed (i.e., replace the back image). If the second card selected by a player matches the first card, then the cards should be removed and the score for that player updated on the page. If the cards do not match, they should be replaced with the back image after a reasonable delay (say 1 second) and the other player should be notified of their turn. In addition, your page should allow for a 1-player mode, where a single player makes all of the selections while trying to minimize the number of card flips. In 1-player mode, the number of flips should be maintained and displayed on the page.

The user must be able to choose between a 2-player or 1-player game within the page, and should be able to play multiple games in succession (without reloading the page). To make the page user-friendly, it should provide help facilities that describe the rules and give instructions on how to interact with the page. Part of the grade for the project will be based on the elegance of the page design and its overall usability.


You may work with a partner in developing this project. In fact, working as a team is encouraged, since discussions about design and debugging often lead to a more robust, user-friendly application. If you do work in a team, only one program need be submitted for the team. To allow plenty of time for collaboration and feedback from the instructor, this assignment will be spread over the rest of this semester.

Part 1: Design, due 3/27 (50 pts.)
At this point, you must turn in an on-paper design for your page. You should draw a picture of your page, with comments to describe the interface and the behavior of each of the page elements. You do not need to provide implementation details -- simply describe the behavior of each page element and the interactions that must occur with the user as a game is played.

Part 2: Prototype, due 4/8 (50 pts.)
At this point, you must have the core of the page working. That is, you must have a working page in which the randomly-arranged cards are displayed and the user can select pairs of cards. The page should correctly identify a match, and either remove the cards (if they match) or flip them back over after a reasonable delay (if they don't match). Your prototype page does not need to keep score or differentiate between 2-player or 1-player mode.

Part 3: 2-player mode, due 4/22 (100 pts.)
At this point, the page must fully implement the 2-player game, alternating between players and displaying the number of pairs found by each. The mechanism for selecting between 2-player and 1-player mode must be present, but the page is not required to implement 1-player mode. Instead, an alert box stating that "1-player mode is not yet implemented" is sufficient.

Part 4: 1-player mode, due 5/1 (100 pts.)
For the final version of the program, you are to support both 2-player and 1-player games. For EXTRA CREDIT, you may add additional features to your page. For example, you might add a timer to the 1-player game, so that the amount of time required to complete the game is displayed as well as the number of flips. You might also add a best score feature to the 1-player game, so that the best score for an individual player is remembered (using cookies from www.creighton.edu/~csc551/JavaScript/cookie.js).


Reminder: You are expressly forbidden to look at anyone else's source code for a comparable game.