HTML and CSS Reference
In-Depth Information
this.bar.css({ height: 20, bottom: 0 }).show();
return this;
},
update: function(sprite) {
this.bar.show();
this.bg.show();
var p = sprite.p;
var width = Math.round(p.health / p.maxHealth * 100);
this.bar.css('width',width + "%");
}
});
You can see this component creates two
<div>
s and then an
update
method that sets the width of the inner
<div>
based on the health that the sprite in question has left. Both
<div>
s are hidden in the beginning be-
cause it's usual not to show a health bar unless the sprite has less than full health to keep the screen uncluttered.
To add an animated effect to the bar decreasing, the
Q.transitionDOM
method is called on the bar to add a
transition to its width.
To see the bar in action, add the health bar component to the
Q.Enemy
sprite as highlighted here:
Q.Enemy = Q.Sprite.extend({
init: function(props) {
this._super(_({
sheet: 'characters',
z: 10,
health: 10,
maxHealth: 10,
damage: 5,
xp: 100
}).extend(props));
this.add('tiled, transition, healthbar');
this.bind('interact',this,'interact');
this.hide();
},
If you now go around the dungeon attacking enemies, you should see the health of enemies decrease as you
attack them before they die.
The last bit of functionality needed is a HUD to display the player's health with the gold and xp that they
picked up along the way. To achieve this the game reuses the health bar you just created (in a larger form, if
you picked up on the previous
large
method) and adds in a new sprite to display stats on the screen called
Q.Stat
.
The game also launches an additional stage to be used as a container for the HUD elements so that the first
stage is moved around to follow the player as needed.
Again, because this game uses DOM elements, it's easy to add text sprites into the game by just setting the
content of the sprite's
<div>
. For the player health bar, the engine cheats by creating a dummy sprite of a set
size and calls the
large
method on the
healthbar
component to size it up.
Add the definition for the two sprites, as shown in
Listing 13-14
,
to
rpg.j
s above the
Q.load
call.