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

After enabling the targets on each enemy, they become click-enabled. Once clicked, the attackEnemy method
is called. Remember, these click event listeners were created on each enemy when creating them. As with a potion
action, the current button is retrieved and its quantity is updated. The enemy targets are then disabled by calling
the disableEnemyTargets method, and the battle panel buttons are also disabled. Finally, the enemy is attacked by
calling the takeDamage method on the targeted enemy. The method takes the hero's power and the type of attack
used. The Enemy class takes care of the rest. This might be a good time to revisit that class in the “Creating the Enemy
Class” section.
The game sets two listeners on itself at the beginning of the class. As a recap, Listing 14-36 shows these event
listeners being added to the game container.
Listing 14-36. Game.js - The Event Listeners Set on the Game
p.setListeners = function () {
this.on(events.ENEMY_ATTACKED_COMPLETE, this.onEnemyAttackedComplete,
this);
this.on(events.ENEMY_DESTROYED, this.onEnemyDestroyed, this);
}
The enemy will dispatch these events when certain animations are complete. These two events were dispatched
with bubbling, which means the event will travel up the entire display list. Because of this, the game is able to listen
for these events directly, without having to attach a listener to each enemy object. After an enemy does its animation
to show it being attacked, the onEnemyAttackedComplete method will be called. This will essentially reset the turn
by setting the attackSelected property back to false and resetting the battle panel. The checkLevel method is then
called, which will check the progress of the battle. If the enemy was destroyed, it will also do an animation, after
which the onEnemyDestroyed method is called. The primary purpose of this function is to remove it from the enemies
array. This array is what is used to check on the level's progress, so the destroyed enemy needs to go. Since there is
no elegant way to find this object in the array, a loop is created to find the appropriate index for splicing. The display
object is removed from the stage, and onEnemyAttackedComplete is called to wrap up the turn.
One final enemy-attacking method needs to be reviewed. The updateHeroInventory method is called after any
action has been taken by the player. It takes the attack type that was used and passes it along to the updateInventory
method on the hero instance, along with a value of -1 for quantity. Like the other classes that have been written for the
game, the hero instance will take care of the rest.
Attacking the Hero
The game would be no fun if all you did was attack and destroy enemies. The enemies will attack in streaks when it
is time for an enemy attack to begin. This streak can be a number between 1 and 3, depending on the level difficulty.
In a streak, the enemies will attack in sequence along the grid. When this attack should take place is determined in
the game loop and the checkEnemyAttack method, which will be written in the “Creating the Check Level Functions”
section. When the time comes for the enemy to attack, the beginEnemyAttack method is executed (see Listing 14-37).
Listing 14-37. Game.js - The Enemy Attack Methods
p.beginEnemyAttack = function () {
var enemy;
this.enemiesAreAttacking = true;
this.battlePanel.disableButtons();
this.currentEnemyAttackIndex = this.currentEnemyAttackIndex >=
this.enemies.length ?
this.currentEnemyAttackIndex - 1 : this.currentEnemyAttackIndex;