The Essential Guide to HTML5

(Greg DeLong) #1

THE MEMORY (AKA CONCENTRATION) GAME


Table 5- 3. Functions in the Photo 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 Invoked in response to the
addEventListener in init
flipback Invoked in response to the
setTimeout call in choose
drawback Invoked as the draw method for a
card in makedeck and flipback
shuffle Called in init
makedeck Called in init^
Card Called by makedeck (^)
The code for the photos version of the memory game is similar to that for the polygon version. Most of the
logic is the same. But because this example demonstrates the writing of text on the canvas, the HTML
document doesnt have a form element. The code follows in Table 5-4, with comments on the lines that
are different. I also indicate where you would put in the names of the image files for your photographs.
Before looking at this second version of the memory game, think about which parts are likely to be the
same and which may be different.
Table 5- 4. Complete Code for the Photo Version of the Memory Game




Memory game using pictures Complete title
element