Professional HTML5 Mobile Game Development

Creating the GameBoard Object

The first step to turning Alien Invasion into a game is to add a mechanism that handles a bunch of sprites on the page at the same time. The current Game object can handle a stack of boards, but those boards all act independently of each other. Also, although the Game object provides a mechanism to swap boards in and out, it doesn't make it easy to add an arbitrary number of sprites onto the page. Enter the GameBoard object.

Understanding the GameBoard

The purpose of the GameBoard object is much like the game board in a game of checkers. It provides a spot to drop all the pieces and dictates their movement. In this section you break down some of the responsibilities of this object. The responsibilities of the GameBoard can be broken down into four distinct categories:

• It is responsible for keeping a list of objects and handling adding sprites to and removing sprites from that list.
• It also needs to handle looping over that list of objects.
• It needs to respond the same way as previous boards. It needs to have a step and a draw function that calls the appropriate functions on each of the objects in the object list.
• It needs to handle checking of collisions between objects.

The next few sections walk through each of the parts of the GameBoard object, which will behave like a simple scene graph. Scene graphs are discussed in detail in Chapter 12, “Building Games with CSS3.” The GameBoard class will be added to the bottom of the engine.js file.

Adding ...