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

p.initialize = function () {
this.Sprite_initialize(spritesheet);
}
I prefer to pass in all three Event properties, type , bubbles , and cancelable . Any parameters after that are my
own custom values that will be assigned to the custom event. Assigning these values to the class will make them
accessible in the handler functions that are written to handle this event. The following is an example of how this
custom event might be used within an event handler:
function onBattleButtonEvent (e){
console.log(e.attackType); // fire
}
You've already seen this custom event dispatched in the “Creating the BattlePanel Class” section, and you'll see it
in use when you get back to the game code in the “Handling Battle Button Events” section.
Adding the Battle Panel to the Game
Now that the battle panel, the battle buttons, and even a custom battle button event have been created, it's time to
jump back into the game. We last left the game after adding the enemies to the grid. An instance of the BattlePanel
class will now be added so you can start attacking bad guys. After the method addBoss , the addBattlePanel function
is written (see Listing 14-33).
Listing 14-33. Game.js - Creating and Adding a BattlePanel Instance to the Game Container
p.addBattlePanel = function () {
this.battlePanel = new game.BattlePanel(this.hero);
this.battlePanel.y = screen_height -
this.battlePanel.getBounds().height;
this.battlePanel.on(events.ATTACK_BUTTON_SELECTED,
this.onAttackButtonSelected, this);
this.addChild(this.battlePanel);
}
This method will simply create the battle panel that was just built and add it to the game. The panel then
listens for the ATTACK_BUTTON_SELECTED event, which was used as the type when dispatching the new and custom
BattleButtonEvent event. The complete level, with enemies and battle panel, is shown in Figure 14-15 .