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

This line of code triggers an exit from the for statement if the index value ( i ) is fine, which happens when
either: 1) this is a first pick or 2) this isnt a first pick and i doesnt correspond to the first card chosen.

Preventing the second problem—clicking on a “ghost” card—requires more work. When the application
removes cards from the board, in addition to painting over that area of the canvas, we can assign a value
(-1, say) to the sx property. This will mark the card as having been removed. This is part of the flipback
function. The choose function contains the code that examines the sx property and does the checking
(only if sx is >= 0). The function incorporates both cheating tests in the following for loop:
for (i=0;i<deck.length;i++){
var card = deck[i];
if (card.sx >=0)

if
((mx>card.sx)&&(mx<card.sx+card.swidth)&&(my>card.sy)&&(my<card.sy+card.sheight)) {
if ((firstpick)|| (i!=firstcard)) break;

}

}
In the three if statements, the second is the whole clause of the first. The third has the single statement
break , which causes control to leave the for loop. Generally, I recommend using brackets (for example:
{ and }) for if true and else clauses, but here I used the stripped-down format for single statements
to show you that format and also because it seemed clear enough.
Now let's move on to building our two memory games.

Building the application and making it your own

This section presents the complete code for both versions of the game. Because the applications contain
multiple functions, the section provides a table for each game that tells what each function calls and is
called by.

Table 5-1 is the function listing for the polygon version of the memory game. Notice that some of the
invocation of functions is done based on events.

Table 5-1. Functions in the Polygon Version of the Memory Game

Function Invoked By/Called By Calls

init

Invoked in response to the
onLoad in the body tag

makedeck
shuffle

choose Polycard

drawpoly (invoked as the draw
method of a polygon)

Invoked in response to the
addEventListener in init

flipback

Invoked in response to the
setTimeout call in choose