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

this.progressBar = new createjs.Shape();
this.progressBar.graphics.beginFill('#c14545').drawRect(0, 0,
enemyBarBounds.width - barXOffset,
enemyBarBounds.height);
this.progressBar.x = barXOffset;
this.addChild(barBG, this.progressBar, enemyBar);
}
p.addHP = function () {
var txtXOffset = 8;
var yPOs = 13;
this.hpTxt = new createjs.BitmapText(this.HP.toString(),
spritesheet);
this.hpTxt.letterSpacing = 2;
this.hpTxt.x = this.getBounds().width / 2 - txtXOffset;
this.hpTxt.y = yPOs;
this.addChild(this.hpTxt);
}
p.updateHP = function (HP) {
var perc;
this.HP = this.HP - HP < 0 ? 0 : this.HP - HP;
perc = this.HP / this.maxHP;
this.removeChild(this.hpTxt);
this.addHP();
createjs.Tween.get(this.progressBar).to({scaleX:perc}, 400);
}
window.game.EnemyHealthBar = EnemyHealthBar;
}(window));
Some properties are set to reference the hit points and display objects in the class. Moving right into the
addHealthBar method, a sprite is created using the graphic created for the outline of the progress bar. Next, a few
shapes are created for the actual progress bar: one shape for behind the bar and another for the bar itself. This bar is
set to the progressBar property and its scale will be adjusted as the hit points are adjusted. These display objects are
positioned accordingly and added to the container in the correct order so that sprite is on top, preserving the inner
drop shadow created to overlap the progress bar.
A bitmap font is next created and added to health bar container. Its initial value is set to the HP property and is
positioned to the center of the bar. The updateHP method is called from the game when then enemy is attacked, and
will update the bar and create a new bitmap text object to represent the new hit point value. A quick check is placed
to assure that the text or the scale of the bar will not go below 0. A tween is then applied for effect when updating the
scale of the progress bar.
Creating the Hero Class
The Hero class is created to represent the current state of the player. The Hero class does not need to extend a display
object. Since the game is played in first person, there is no actual graphical content for the hero attacking or being
attacked. Although this is true, you still need to create an instance of something that can represent the player stats
during battle. In typical, classic RPG form, losing a battle will simply end the game, as if the losing battle never took
place. Because of this, a temporary holder of current player stats is needed during battle. The Hero class is used for
exactly that. If the player should win, the values stored in the hero instance will be saved to local storage. Listing 14-18
shows the entire Hero class.