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

Building the Battle Panel
The battle panel is a container class that sits at the bottom of the screen. It will hold the attack and magic item buttons
to use during a battle and will display the current hit points of the hero. These action buttons will be custom classes
that will dispatch custom events. The panel will also contain a progress bar that will show the wait time before each
player turn. This section will break down all of these components that make up the battle panel.
Creating the BattlePanel Class
The BattlePanel class contains many elements and functionality. It is the control panel for the entire level, and it is
started in Listing 14-25.
Listing 14-25. BattlePanel.js - The BattlePanel Class Properties
(function () {
window.game = window.game || {}
function BattlePanel(hero) {
this.hero = hero;
this.initialize();
}
var p = BattlePanel.prototype = new createjs.Container();
p.Container_initialize = p.initialize;
p.SPEED = 8;
p.hero = null;
p.waitBar = null;
p.buttonHolder = null;
p.hpTxt = null;
p.waitingToAttack = null;
p.currentAttackButton = null;
p.initialize = function () {
this.Container_initialize();
this.addWaitBar();
this.addBG();
this.addHeroHP();
this.addButtons();
this.disableButtons();
}
//class methods here
window.game.BattlePanel = BattlePanel;
}());