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:
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...
