Game Project: Space Hero - Beginning HTML5 Games with CreateJS - page 248

p.meter = null;
p.maxDamage = null;
p.damage = 0;
p.empty = false;
p.Container_initialize = p.initialize;
p.initialize = function () {
this.Container_initialize();
this.x = this.y = 5;
this.buildMeter();
}
p.buildMeter = function () {
var health = new createjs.Sprite(spritesheet, 'healthHUD');
this.meter = new createjs.Sprite(spritesheet, 'progessHUD');
this.maxDamage = this.meter.spriteSheet
.getAnimation(this.meter.currentAnimation)
.frames.length - 1;
this.meter.paused = true;
this.addChild(health, this.meter);
}
p.takeDamage = function (damage) {
this.damage += damage;
var perc = this.damage / this.maxDamage > 1 ? 1 : this.damage /
this.maxDamage;
var frame = (this.maxDamage * perc);
createjs.Tween.get(this.meter)
.to({currentAnimationFrame:frame}, 100)
.call(this.checkHealth, null, this);
}
p.checkHealth = function (e) {
if (this.meter.currentAnimationFrame == this.maxDamage) {
this.empty = true;
}
}
p.reset = function (e) {
this.damage = 0;
this.empty = false;
this.meter.currentAnimationFrame = 0;
}
window.game.HealthMeter = HealthMeter;
}(window));
The meter property holds the meter animation, which will be updated when the hero ship takes damage. The
maxDamage property will be set in the buildMeter method and will match the total frames of the meter animation.
The damage value will be incremented on hero hits and will be used to determine what frame in the meter
sequence the animation should advance to. The empty property will be set to true when the final frame in the
sequence is reached and will be used to tell the game that the ship should explode. How this works will be closely
looked at next in the buildMeter method. Lastly, the meter animation is paused, and both sprites are added to the
container and positioned.