O'Reilly logo

HTML5 Game Development by Example : Beginner's Guide - Second Edition by Makzan

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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.

Time for action – making a game guide 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"; ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required