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

Creating the Level Select Scene
The level select screen displays buttons for all nine levels in the game. With the exception of level 1, each level
will initially be locked until the level prior to it is beaten. The player's current level is retrieved from local storage
and is called gameLevel . This represents the highest level that the player can enter. Any level that is not playable is
represented by a lock graphic. The playable levels are buttons with a text value representing that level number. These
graphics are all included as frames in the sprite sheet. The complete LevelSelect class is shown in Listing 14-20.
Listing 14-20. LevelSelect.js - The LevelSelect Class for the Level Select Screen
(function (window) {
window.game = window.game || {}
function LevelSelect() {
this.initialize();
}
var p = LevelSelect.prototype = new createjs.Container();
p.Container_initialize = p.initialize;
p.initialize = function () {
this.Container_initialize();
this.addBG();
this.addBackButton();
this.addLevelButtons();
}
p.addBG = function () {
var bg = new
createjs.Bitmap(game.assets.getAsset(game.assets.MENU_BG));
this.addChild(bg);
}
p.addBackButton = function () {
var btn = new createjs.Sprite(spritesheet, 'backBtn');
btn.on('click', this.onBackButtonClick, this);
this.addChild(btn);
}
p.addLevelButtons = function () {
var i, btn, btnBounds, level, frame;
var numLevels = data.GameData.levelData.length;
var gameLevel = data.PlayerData.player.gameLevel;
var col = 0;
var hGap = 34;
var vGap = 92;
var xPos = 50;
var yPos = 260;
for (i = 0; i < numLevels; i++) {
level = i + 1;
frame = level <= gameLevel ? 'level' + level : 'lock';
btn = new createjs.Sprite(spritesheet, frame);
btnBounds = btn.getBounds();