Game Project: The Villager RPG - Beginning HTML5 Games with CreateJS - page 336

btn.level = level;
btn.x = xPos;
btn.y = yPos;
btn.mouseEnabled = level <= gameLevel;
btn.on('click', this.onLevelButtonClick, this);
this.addChild(btn);
xPos += btnBounds.width + hGap;
col++;
if (col > 2) {
col = 0;
xPos = 50;
yPos += btn.getBounds().height + vGap;
}
}
}
p.onBackButtonClick = function(e){
this.dispatchEvent(game.GameStateEvents.MAIN_MENU);
}
p.onLevelButtonClick = function (e) {
var btn = e.target;
data.GameData.currentLevel = btn.level;
this.dispatchEvent(game.GameStateEvents.GAME);
}
window.game.LevelSelect = LevelSelect;
}(window));
A background graphic and back button are first added to the container. The back button will simply fire the
MAIN_MENU state event, which will bring the player back to the main menu. The addLevelButtons method is a bit
more detailed. A grid of buttons is made, and the state of each button is determined by the gameLevel property
that is stored in local storage. A loop is created to build the grid, and the appropriate frame from the sprite sheet is
used to draw each button. As previously mentioned, a level not yet playable is represented by a lock graphic, and its
mouseEnabled property is set to false to prevent it from being selected. The level buttons will be selectable and will fire
the onButtonClick method when clicked.
A simple number value was dynamically injected into each level button sprite so that it can be retrieved when
selected. The onButtonClick method uses this value to set the GameData object's currentLevel property. This value
will be used to access the level data needed to build the level. Finally, the GAME state event is dispatched, which will
build the level with a new game scene. Figure 14-10 shows this screen with five possible levels to play.