Chapter 6. Sprites

In the last chapter you learned how to implement animations in a canvas. You saw how to use requestAnimationFrame() to implement smooth animations, and you saw how to incorporate clipping and offscreen canvases into your animations. You also learned how to implement time-based motion and how to time animations with stopwatches and animation timers.

Now that you know the fundamentals of implementing Canvas-based animations, it’s a good idea to encapsulate those fundamentals in some JavaScript objects so that you don’t have to start from scratch every time you implement an animation. This chapter explores the implementation of sprites, which are graphical objects that you can incorporate into animations. You’ll see how to move sprites without disturbing the background underneath and how to give them behaviors; for example, you could add a bouncing behavior to a ball or an exploding behavior to a bomb. You’ll see how to implement behaviors that repeat indefinitely and behaviors that persist only for a specific amount of time.