HTML and CSS Reference
In-Depth Information
The Application Code
Afterallthefunctionsandthe
TextButton
objectprototypearecreated,theactualapplication
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
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
false
);
theCanvas
.
addEventListener
(
"click"
,
onMouseClick
,
false
false
);
initSounds
();
initButtons
();
initLists
();
chooseButtonsForCard
();
drawScreen
();
First,wecreateasharedlineargradientthatcanbeusedbyallthe
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.
