HTML5 Canvas, 2nd Edition

Chapter 8. Canvas Games: Part I

Games are the reason why many of us initially became interested in computers, and they continue to be a major driving force that pushes computer technology to new heights. In this chapter, we will examine how to build a mini game framework that can be used to create games on the canvas. We will explore many of the core building blocks associated with game development and apply them to HTML5 Canvas with the JavaScript API.

We don’t have the space to cover every type of game you might want to create, but we will discuss many elementary and intermediate topics necessary for most games. At the end of this chapter, we will have a basic clone of Atari’s classic Asteroids game. We will step through the creation of this game by first applying some of the techniques for drawing and transformations specific to our game’s visual objects. This will help get our feet wet by taking some of the techniques we covered in previous chapters and applying them to an arcade game application. Next, we will create a basic game framework that can be applied to any game we want to make on the canvas. Following this, we will dive into some game techniques and algorithms, and finally, we will apply everything we have covered to create the finished product.

Two-dimensional flying space shooter games are just the beginning of what can be accomplished on the Canvas. In the rest of the chapter, we will dig further into the 2D tile map structure we create in Chapter 4 and apply it ...