Creating a Health Bar class
In this recipe, we'll create a Health Bar class which is used to update and render the hero's health display.
How to do it...
Follow these steps to create a health bar class:
- Define the
HealthBar
constructor:/* * HealthBar class should have no knowledge * of the Actor or Level classes to * keep it decoupled */ function HealthBar(config){ this.controller = config.controller; this.maxHealth = config.maxHealth; this.x = config.x; this.y = config.y; this.maxWidth = config.maxWidth; this.height = config.height; this.health = this.maxHealth; }
- Define the
setHealth()
method which sets the health value:HealthBar.prototype.setHealth = function(health){ this.health = health; };
- Define the
draw()
method which draws the health bar: ...
Get HTML5 Canvas Cookbook now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.