Chapter 5
The Memory (aka Concentration) Game
In this chapter, we will cover
- drawing polygons
- placing text on the canvas
- programming techniques for representing information
- programming a pause
- calculating elapsed time
- one method of shuffling a set of card objects
Introduction .................................................................................................................................................
This chapter demonstrates two versions of a card game known variously as memory or concentration.
Cards appear face down, and the player turns over two at a time (by clicking on them) in an attempt to find
matched pairs. The program removes matches from the board but [virtually] flips back cards that do not
match. When players make all the matches, the game shows the elapsed time.
The first version of the game I describe uses polygons for the face cards; the second uses family photos.
Youll notice other differences, which were made to illustrate several HTML5 features, but I also urge you
to think about what the versions have in common.
Figure 5-1 shows the opening screen of version one. When a player completes the game, the form that
keeps track of matches also shows the elapsed time.