Instant HTML5 2D Platformer - Instant HTML5 2D Platformer - page 5

3. However, in order to make use of these objects and render them to the canvas, we

will require an object that handles the drawing of game objects. For this we will create
an object called DrawableObject . Once the object has been created, we can then
move on to writing the contents of the object as follows:
function DrawableObject() {
this.texture = null;

this.InitDrawableObject = function(texture, x, y, z) {
this.InitObject(x, y, z);
this.texture = texture;
return this;
}

this.Draw = function(deltaTime, context, deltaX, deltaY) {
context.drawImage(this.texture, this.x - deltaX, this.y -
deltaY);
}

this.DisposeDrawableObject = function() {
this.DisposeObject();
}
}

DrawableObject.prototype = new Object;

4. We must now create the inal object for our framework, which will be responsible
for pulling together each of the previously created objects in a manageable way. By
taking this approach, we are able to manage the loading and rendering of assets to
the canvas. As we did earlier, we must create a new object called ObjectManager.
js , which will irst of all contain a number of variable declarations as well as initialize
a new instance of Main.js and our canvas element.
function ObjectManager() {
this.objects = new Array();
this.terminalFrame = new Date().getTime();

this.deltaX = 0;
this.deltaY = 0;

this.main = null;
this.canvas = null;
this.context = null;

this.InitObjectManager = function() {
objectManager = this;

this.canvas = document.getElementById('canvas');