HTML5 Games: Creating Fun with HTML5, CSS3 and WebGL, 2nd Edition

Chapter 9

Animating Game Graphics

In This Chapter

• Creating animation cycles

• Making animations for game actions

• Adding score and level UI elements

• Animating the game timer

YOUR GAME IS now developed to the point that a player can select and swap jewels. It still needs a lot of polish, though, and in this chapter, I show you how to spruce up the game display with some animated effects. First, you find out how to create a basic animation cycle using the animation timing API and its requestAnimationFrame() function.

With the basics in place, you see how to implement animations in the canvas display module, including animations for moving and removing jewels and refilling the jewel board.

In the latter part of the chapter, you implement some of the game's missing parts—namely, the points and the game timer. These additions allow you to create the level up and game over events and their animations.

Making the Game React

So far, you've dealt with only the player's actions. In addition, the game must react to what the player does. Most importantly, the display needs to be updated so the player can make her next move. Although you're able to make all the changes instantly, the game is more visually pleasing if the changes are animated so that jewels move smoothly around the board.

Animation timing

The general idea when creating JavaScript-based animations is to set up a function so that it's called repeatedly and quickly enough for the movement to appear smooth. In JavaScript, ...