The State Machine and Scenes - Beginning HTML5 Games with CreateJS - page 224

Figure 10-1. The main game menu includes the title, graphics, and a play button
Building the Game
The game in this exercise really isn't much of a game, but it will demonstrate a working example of a state machine
and how the game will communicate back to the main application. The key concept to take from the game in this
exercise is that it is encapsulated within a class. This drastically alters the approach that is taken when handling scope.
The games written in this topic so far have been written in the global scope of window , meaning the functions and
variables were accessible from anywhere. This prevented us from running into scope issues when writing the game
logic, but working directly within window is widely frowned upon for a variety of reasons. It becomes extremely easy
to override properties and functionality throughout your application, and your code will quickly becomes messy and
hard to debug.
The game class will simply be named Game and will extend Container (see Listing 10-13).
Listing 10-13. Game.js - The Game Scene
(function (window) {
window.game = window.game || {}
function Game() {
this.initialize();
}
var p = Game.prototype = new createjs.Container();
p.Container_initialize = p.initialize;