Combining events and animation
This is one of the simplest possible games to start with. It's a recipe that combines events with animation. The output is as follows:
![](https://static.packt-cdn.com/products/9781785284892/graphics/B04673_05_06.jpg)
How to do it
The recipe is as follows:
The HTML code:
<html> <head> <title>Event Handling example</title> <script src="simplegame.js"></script> </head> <body onload=animate()> <h1>Score Area</h1> <canvas width="300" height="100" id="MyScoreArea" style="border:2px solid green;" tabindex="0"> Canvas tag is not supported by your browser </canvas> <br> <h1>click the yellow circle to score</h1> <canvas style="background-image:-webkit-canvas(mask);" width="800" height="500" id="MyCanvasArea" style="border:2px solid blue;" tabindex="0"> Canvas tag is not supported by your browser </canvas> </body> </html>
The JavaScript code:
var can; var ctx; var isAnimating=true; var cd; var flag=1; var cd; var...