Instant HTML5 2D Platformer - Instant HTML5 2D Platformer - page 7

var deltaTime = (frame - this.terminalFrame) / 1000;
this.terminalFrame = frame;
this.context.clearRect(0, 0, this.canvas.width, this.
canvas.height);
for (obj in this.objects) {
if (this.objects[obj].Draw) {
this.objects[obj].Draw(deltaTime, this.context, this.deltaX, this.
deltaY);
}
this.context.drawImage(this.canvas, 0, 0);
};
Downloading the example code
You can download the example code iles for all Packt topic you have
purchased from your account at http://www.PacktPub.com . If you
purchased this topic elsewhere, you can visit http://www.PacktPub.
com/support and register to have the iles e-mailed directly to you.
How it works...
The irst object we created is responsible for executing the application. Within this object,
a number of variables are declared that are responsible for creating a new instance of the
object manager as well as the time it takes to update each frame per second. The execution
of the application is done irstly by loading the HTML ile. Once loaded, the onload function
within Main is called, and as a result a new object manager is initialized.
The object script within the framework is responsible for initializing a new game object such
as a player sprite, or level tile. These objects consist of a series of components that represent
the x, y, and z positions of an object on the screen. As we are creating a 2D game the z
coordinate represents the draw order of objects, for example, if an object has a z value of zero
then that object would be drawn in front of all others thus giving the illusion of depth.
The last object within our game framework is used to load a texture that will represent a game
object and then draw that texture to the canvas. This object also has access to the methods
and properties of the object and as a result each drawable object is drawn to the positions
passed to it via the object script.
Drawing objects to the canvas is achieved through means of the Draw function within
the object manager. This function begins by clearing all objects from the canvas and then
updating the next frame and drawing this frame to the canvas. This is done at a rate of 30
frames per second.