Instant HTML5 2D Platformer - Instant HTML5 2D Platformer - page 15

In order to display an animated sprite on the canvas, we replaced the call to initialize drawing
of the player sprite within the player constructor. Previously, we passed the player texture
and position to the DrawableObject constructor. However, now that we are animating the
player we also need to pass a frame count and frame rate, that is, the number of cells within
the sprite sheet and the rate at which the animation is updated per second. Finally, we use
the prototype keyword to extend the functionality of the DrawableObject constructor to the
AnimationManager function.

Creating the level (Must know)

In this recipe, we will look at the necessary steps required to create and implement a level.
This will be done by implementing a level object and updating the games framework to handle
the loading and drawing of modular 2D tile assets. This modular construction allows levels to
be designed with varying environmental layouts and sizes.

How to do it...

1. In order to implement a level, we will need to modify both the Player and Main

objects as well as introduce a level manager object. Go ahead and open the Main
object and add the following declaration below where we declared and loaded our
player sprite:
var tile = new Image();
tile.src = "textures/tile.png";

2. This declaration creates a new image object, which will represent the terrain within

the level as well as the path to the tiles texture. Next we will initialize a new instance
of the level object we are yet to make as well as passing the level to our player object.
Modify the contents of the Initialise function in our Main object as follows:
this.level = new Level().InitLevel();
this.player = new Player().InitPlayer(this.level);

3. Next we will need to modify the Player object, which will be responsible for initializing

the level and for performing any collision detection to determine if the player is standing
on the terrain and whether or not the player has collided with any obstacles in the
player's path. Insert the following variables into the Player object and then modify the
Player constructor in order to retrieve and initialize a level object:
this.level = null;

this.InitPlayer = function(level) {
this.InitAnimationManager(player_idle_left, 300, 600 - 48 - 48, 4,
6, 20);
this.level = level;

return this;

}