Instant HTML5 2D Platformer - Instant HTML5 2D Platformer - page 8

Scope then jumps to the object manager constructor, which irstly begins by initializing a
number of variables related to the canvas and its context. It also gives a call to update the
Draw function of the application at 30 frames per second. The constructor then makes a
call to the Main constructor, which initializes and draws all game objects to the screen.
However, in this instance we do not have any game objects to draw to the canvas.

The remainder of the object manager is responsible for adding and removing game objects
to an array of objects that are later updated and drawn to the canvas.

Creating the player (Must know)

With a basic game framework in place, we can start by developing an object that will handle
the player and any behaviors they may have. This will involve expanding upon the game
framework to handle the loading of a sprite, which will be used to represent the player within
the game.

How to do it...

1. We must irst begin by creating a new object called Player . Once created, insert the
following code into our player object. This object is responsible for initializing and
drawing the player on the canvas as well as stating the players position on the canvas.
function Player() {
this.InitPlayer = function() {

this.InitDrawableObject(player_idle, 0, 0, 0);
return this;
}
}

Player.prototype = new DrawableObject;

2. With our player object completed, we then need to load the sprite texture into

our application. In order to do this, we need to edit the Main.js object we created
previously, open Main.js and before the Onload function we will declare a new
image object, which will be used to hold our sprite texture.
var player_idle = new Image();
player_idle.src = "idle_left.png";

3. The inal step is to initialize our player object by calling the player constructor and
passing the player sprite to it.
this.player = new Player().InitPlayer(player_idle);

4. If we were to open the application's HTML ile in any modern browser we would see
the player sprite drawn in the top-left corner of the canvas.