The Essential Guide to HTML5

THE MEMORY (AKA CONCENTRATION) GAME

secondcard = i;

ctx.drawImage(card.img,card.sx,card.sy,card.swidth,card.sheight)
;

Draw the photo

if (card.info==deck[firstcard].info) { Check if there
s a
match

matched = true;

count++; Increment count^

ctx.fillStyle= tablecolor;

ctx.fillRect(10,340,900,100); Erase area where
text will be

ctx.fillStyle=backcolor; Reset to the color
for text

ctx.fillText("Number of matches so far: "+String(count),10,360); Write out count^

if (count>= .5*deck.length) {

var now = new Date();

var nt = Number(now.getTime());

var seconds = Math.floor(.5+(nt-starttime)/1000);

ctx.fillStyle= tablecolor;

ctx.fillRect(0,0,900,400); Erase the whole
canvas

ctx.fillStyle=backcolor; Set for drawing

out="You finished in "+String(seconds)+
" secs.";

Prepare the text

ctx.fillText(out,10,100); Write the text

ctx.fillText("Reload the page to try again.",10,300); Write the text

}