Game Development Reference
In-Depth Information
Building the Game Menu
The menu screen will be the first scene loaded into the application. It will extend
Container
; it also will contain
a simple play button, which will call back to the application and change the state. Listing 10-12 shows the entire
GameMenu
class.
Listing 10-12.
GameMenu.js - The Main Game Menu Class
(function (window) {
window.game = window.game || {}
function GameMenu() {
this.initialize();
}
var p = GameMenu.prototype = new createjs.Container();
p.Container_initialize = p.initialize;
p.titleTxt = null;
p.count = 0;
p.initialize = function () {
this.Container_initialize();
this.addBG();
this.addTitle();
this.addOrbs();
this.addButton();
}
p.addBG = function () {
var bg = new createjs.Shape();
bg.graphics.beginFill('0').drawRect(0, 0, canvas.width, canvas.height);
this.addChild(bg);
}
p.addTitle = function () {
this.titleTxt = new createjs.Text("ORB DESTROYER!", '40px Arial',
'#FFF');
this.titleTxt.x = canvas.width / 2;
this.titleTxt.y = 200;
this.titleTxt.textAlign = 'center';
this.addChild(this.titleTxt);
}
p.addOrbs = function () {
var i, orb;
var orbContainer = new createjs.Container();
var numOrbs = 5;
var orbSize = 20;
var orbPadding = 10;
var orbsPosition = 300;
for (i = 0; i < numOrbs; i++) {
