Animation - Building JavaScript Games for Phones, Tablets, and Desktop - page 316

Chapter 25
Animation
In this chapter, you see how to add animations to your game. In the games you've developed until
now, game objects could move around on the screen, but adding something like a running character
to a game is slightly more challenging. In this chapter, you write a program that contains a character
walking from left to the right on the screen. The character is controlled by the player pressing the left
and right arrow keys. You don't add touch-interface control in this particular example, but later you
see how to control a moving character on touch devices as well.
Another thing that isn't explicitly covered in this topic is using the accelerometer that is built into
most modern devices. You have access to this data in JavaScript by dealing with events such as
ondeviceorientation (or onmozorientation in Firefox) and ondevicemotion , which provides data
relating to the device's current acceleration. If you feel you're up to it, you can try to extend the
example in this chapter such that it reacts to these events in a meaningful way.
What Is Animation?
Before you look into how to program a character walking around on the screen, you first have
to think about what animation is. To grasp this, you have to go back to the 1930s, when several
animation studios (among them Walt Disney) produced the first cartoons in black and white.
A cartoon is actually a very fast sequence of still images, also called frames . A television draws
these frames at a very high rate, about 25 times per second. When the image varies each time, your
brain interprets this as motion. This special feature (also called the phi phenomenon ) of the human
brain is very useful, especially when you want to program games that need to contain moving or
animated objects.
You've used this feature in the previous games you developed in this topic. Every time the draw
method is called, you draw a new “frame” on the screen. By drawing sprites at different positions
every time, you give the impression that the sprites move. However, this isn't really what is
happening: you're simply drawing the sprite at different positions many times per second, which
makes the player think the sprite is moving.
329