HTML5 Canvas Cookbook

Creating a Level class

In this recipe, we'll create a Level class which will be used to render the level and provide an API to the bundary map.

How to do it...

Follow these steps to create a Level class:

1. Define the Level constructor:

   /*
    * Level class should have no knowledge
    * of the Actor or HealthBar classes to
    * keep it decoupled
    */
   function Level(config){
     this.controller = config.controller;
       this.x = config.x;
       this.y = config.y;
       this.leftBounds = config.leftBounds;
       this.rightBounds = config.rightBounds;
     this.boundsData = null;
       this.GRAVITY = 3; // px / second^2
       this.MID_RGB_COMPONENT_VALUE = 128; 
       this.LEVEL_WIDTH = 6944;
     
       this.setBoundsData();
   }

2. Define the setBoundsData() method which extracts the zone data from the boundary map image:

   Level.prototype.setBoundsData ...