HTML5 Game Development by Example(Second Edition)

Time for action – making a game guide animation

There is a graphics file named guide_sprite.png in the images folder. It is a game guideline graphic that contains each step of the animation.

Let's draw this guide into our game with animations:

1. Open the untangle.drawing.js JavaScript file in the text editor.
2. In the untangleGame.loadImages function, add the following code:

   // load the guide sprite image untangleGame.guide = new Image(); untangleGame.guide.onload = function() { // setup timer to switch the display frame of the guide sprite untangleGame.guideFrame = 0; setInterval(untangleGame.guideNextFrame, 500); } untangleGame.guide.src = "images/guide_sprite.png"; ...