Crafting a CSS3 RPG - HTML5 Mobile Game Development - page 252

Listing 13-14: The Stat sprite
Q.Stat = Q.Sprite.extend({
init: function(props) {
this._super(_(props).extend({
w: 100, h: 20, z: 100
}));
this.el.css({color: 'white', fontFamily: 'arial' })
.text(this.p.text + ": 0");
},
update: function(data) {
this.el.text(this.p.text + ": " + data.amount);
}
});
Q.PlayerHealth = Q.Sprite.extend({
init: function(props) {
this._super(_(props).extend({
w: Q.width / 4, h: 20, z: 100
}));
this.add('healthbar');
this.healthbar.large();
},
update: function(sprite) {
this.trigger('health',sprite);
}
});
As you can see these two sprites are simple. The first sets some CSS on its element and then uses the jQuery
text method to set the content of the div . The second Q.PlayerHealth sprite cheats a little bit by reusing
the healthbar component from the last section but calls the helper method large to resize the bar larger. It
then passes any update events it receives through to the health bar by triggering a health event.
Now for the grand finale: A new scene called hud must be set up that creates the HUD elements and binds
the update methods so that they are updated. Next, the level1 scene needs to launch the HUD scene when it
is created and bind the appropriate events on the player to events fired on the HUD stage.
This all sounds more complicated than it actually is. Modify the code at the bottom of rpg.js to match the
highlighted code, as shown in Listing 13-15 , and you should get the wanted effect.
Listing 13-15: The HUD scene
Q.scene('hud',new Q.Scene(function(stage) {
var health, gold, xp;
health = stage.insert(new Q.PlayerHealth({ x: 0, y: 10 }));
stage.bind('health',health,'update');
gold = stage.insert(new Q.Stat({
text: "gold", x: Q.width-100, y: 10
}));