HTML5 Canvas Cookbook

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:

1. 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;
   }

2. Define the setHealth() method which sets the health value:

   HealthBar.prototype.setHealth = function(health){
       this.health = health;
   };

3. Define the draw() method which draws the health bar: ...