Mobilizing Games with PhoneGap - HTML5 Canvas - page 545

The drawScreen() function
This function loops through the buttons two-dimensional array and draws the initial
25 buttons with text onto the canvas.
The onMouseClick() function
When the user clicks the mouse on the game screen, this event listener function deter-
mines which of the 25 squares was clicked. It calls the appropriate TextButton instance's
pressDown() function and then its draw() function, passing in the context.
The onMouseMove() function
When the mouse is moved, this event listener function will set the mouseX and mouseY
values to the current mouse position on the canvas.
The Application Code
Once all the functions and the TextButton object prototype are created, the actual ap-
plication code is very simple. Because this is a completely event-based application, we
don't need a main loop. We also have not put in any other states or buttons, such as a
title screen or a reset button. This makes the app less user-friendly, but it is fine for this
simple example. It also makes the application code very simple:
//**** start application
var gr = context.createLinearGradient(0, 0, 100, 100);
// Add the color stops.
gr.addColorStop(0,'#ffffff');
gr.addColorStop(.5,'#bbbbbb');
gr.addColorStop(1,'#777777');
theCanvas.addEventListener("mousemove", onMouseMove, false);
theCanvas.addEventListener("click", onMouseClick, false);
initSounds();
initButtons();
initLists();
chooseButtonsForCard();
drawScreen();
First, we create a shared linear gradient that can be used by all the TextButton instances.
Next, we add the mouse event listeners for click and move. Finally, we run through our
functions to set up the card, and then we simply wait for the user to click a button.
That's all there is to it. We haven't even added a way to announce that the player has
won. Extending this into a full-fledged application would be very simple, so we leave
this task up to the reader if you have the desire to do so.
Figure 10-1 shows the screen for the finished application.