The Memory (aka Concentration) Game - The Essential Guide to HTML5 - page 152

The program draws the polygon as a filled-in path that starts at the point (indicated by the arrow in Figure
5-10) specified by one-half the value of angle . To get to the point, we use the moveTo method along with
the radius, Math.sin and Math.cos . We then use the lineTo method for n-1 more points, proceeding in
clockwise fashion. For the triangle, n-1 is two more points. For the octagon it would be seven more. After
running through a for loop with the lineTo points, we invoke the fill method to produce a filled-in
shape. To see the complete annotated code, go to the “Building the Application” section.”

Note: Drawing and redrawing polygons takes time, but that doesnt cause problems with this
application. If a program has a large number of intricate designs, preparing them ahead of time as
pictures may make sense. That approach, however, requires users to download the files, which can
take quite a while. You need to experiment to see which approach works better overall.

Shuffling cards
As noted previously, the memory game requires the program to shuffle the cards before each round, since
we dont want the cards to appear in the same position time after time. The best way to shuffle sets of
values is the subject of extensive research. In Chapter 10, which describes the card game called
blackjack or 21, you'll find a reference to an article that describes a technique claimed to be the most
efficient way to produce a shuffled deck.
For memory/concentration, let's implement the way I played the game as a child. I and the others would lay
out all the cards, then pick up and swap pairs. When we thought we had done it a sufficient number of
times, we would begin to play. In this section, well explore a few more concepts behind this approach. (To
examine the shuffle function, you can skip ahead to the “Building the Application” section.)

To write the JavaScript for the swap method of shuffling, we first need to define “sufficient number of
times.” Lets make that three times the number of cards in the deck, which weve represented in the array
variable deck . But since there are no cards, just data representing cards, what are we swapping? The
answer is the information uniquely defining each card. For the polygon memory game, this is the property
info . For the picture game, its info and img .
To get a random card, we use the expression Math.floor(Math.random()*dl) , where dl , standing for
deck length, holds the number of cards in the deck. We do this twice to obtain the pair of cards to be
(virtually) swapped. This could produce the same number, meaning a card is swapped with itself, but thats
not really a concern. If it happens, this step in this process has no effect. The code mandates a large
number of swaps, so one swap not doing anything is okay.

Carrying out the swap is the next challenge, and it requires some temporary storage. Well use one
variable, holder , for the polygon version of the game and two variables, holderimg and holderinfo , for
the picture case.

Implementing clicking on a card

The next step is to explain how we implement the player moves, namely the player clicking on a card. In
HTML5, we can handle the click event employing much the same approach that we took with the
mousedown event (described in Chapter 4). Well use the addEventListener method:
canvas1 = document.getElementById('canvas');

canvas1.addEventListener('click',choose,false);