HTML and CSS Reference
In-Depth Information
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.
