Professional HTML5 Mobile Game Development

Setting the Stage with Scenes

Looking at the gameLoop in the example from the last section, it’s easy to see how unwieldy the code for an actual game could become if each object needed to be individually updated and drawn on each step. Add in collision detection and suddenly things could get complicated quickly. The solution, as you saw in the GameBoard object in Chapter 2, “Making It a Game,” is the idea of an object that manages the updating and drawing of many sprites. Quintus will call this object a Stage. Quintus will add the additional concept of a Scene object that will be used to set up a stage object into a particular stage. One use of a Scene would be to make it easy to set up levels and then switch between levels.

Creating the Quintus.Scenes Module

To start with the scene functionality, Quintus adds a new module called Quintus.Scenes to encompass the Q.Stage and Q.Scene classes. The Q.Scene object is actually going to be incredibly simple. Its only purpose is to wrap a function that sets up a passed-in stage object.

Q.Stage will be a bit more complicated, but it will look similar to the GameBoard from Chapter 2 with some extra functionality for events.

Create a new JavaScript file called quintus_scenes.js and put the code from Listing 11-7 in it.

Listing 11-7: Scenes functionality

Quintus.Scenes = function(Q) { Q.scenes = {}; Q.stages = []; Q.Scene = Class.extend({ init: function(sceneFunc,opts) { this.opts = opts || {}; this.sceneFunc = sceneFunc; } }); // Set up or ...