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

With those two changes, you can now wander around the dungeon attacking random monsters and picking
up loot. Although this works, there's a major problem because you cannot tell how much health each of the
enemies has left or how much gold and experience points (xp) you picked up. The next section remedies this
issue as the game wraps up.
Adding a Health Bar and HUD
To wrap up the simple RPG, add in some visual feedback for how much health enemies have left and how the
player is doing in terms of health, gold, and xp.
One of the nice things about building a DOM game is that it's easy to add new persistent elements onto the
game. For the case of the health bar that you are about to add, a simple set of CSS rectangles should do the trick.
To make the health bar reusable, it's going to be created as a component that can be added to sprites and
updated by listening to the health events that the sprites have strewn about.
Add the healthbar component in Listing 13-13 to the spot in rpg.js where the rest of the components
are located, below the definition for the player_input component.
Listing 13-13: The healthbar component
Q.register('healthbar', {
added: function() {
this.entity.bind('health',this,'update');
this.bg = $("<div>").appendTo(this.entity.dom).css({
width: "100%",
height: 5,
position: 'absolute',
bottom: -6,
left: 0,
backgroundColor: "#000",
border: "1px solid #999"
}).hide();
this.bar = $("<div>").appendTo(this.entity.dom).css({
width: "100%",
height: 5,
position: 'absolute',
bottom: -5,
left: 1,
backgroundColor: "#F00"
}).hide();
Q.transitionDOM(this.bar[0],'width');
},
large: function() {
this.bg.css({ height: 20, bottom: -1 }).show();