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:
Open the
untangle.drawing.jsJavaScript file in the text editor.In the
untangleGame.loadImagesfunction, 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";Still in the
untangleGame.drawing.jsfile, we add the following function to move the current frame to the next frame every 500 milliseconds:untangleGame.guideNextFrame = function() { untangleGame.guideFrame++; // there are only 6 frames (0-5) in the guide animation. // we loop back the frame number to frame 0 after frame...