HTML and CSS Reference
In-Depth Information{ height: 20, bottom: 0 }).show();
return this;
update: function(sprite) {;;
var p = sprite.p;
var width = Math.round( / p.maxHealth * 100);'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) {
sheet: 'characters',
z: 10,
health: 10,
maxHealth: 10,
damage: 5,
xp: 100
this.add('tiled, transition, healthbar');
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.
Search WWH ::

Custom Search