Core HTML5 2D Game Programming

Chapter 3. Graphics and Animation

Topics in This Chapter

• 3.1 Draw Graphics and Images with the HTML5 canvas Element

• 3.2 Implement Smooth HTML5 Animations

• 3.3 Implement a Game Loop

• 3.4 Calculate Frame Rates

• 3.5 Scroll the Background

• 3.6 Create Time-Based Motion

• 3.7 Reverse Scroll Direction

• 3.8 Draw Animation Frames

• 3.9 Use Parallax to Create the Illusion of Depth

• 3.10 Conclusion

• 3.11 Exercises

Graphics and animation are the most fundamental aspects of any video game. The ability to draw images and shapes and to create smooth, flicker-free animations are the most important skills a game developer must possess.

Animations continuously draw animation frames, typically between 30 and 60 times per second. That rate is known as ...