Instant HTML5 2D Platformer - Instant HTML5 2D Platformer - page 18

The constructor of the level object initializes the width and height of the tiles passed into it.
This is done by retrieving the width and height of the tile image object that was previously
loaded into the application, inside of the main object. The remainder of the constructor is
used to determine the height of each stack of terrain tiles as well as how many stacks make
up the level's terrain.

Each of these stacks of tiles are stored within an array that is passed into the AddTiles
function within the Level object. This array is then looped through and each tile within
a stack drawn on top of each other and each stack drawn next to the previous stack thus
resulting a 2D terrain the player can interact with.

Implementing a parallax background
(Must know)

In this recipe, we will implement a parallax effect for the game's background images. This
effect causes the background to move at a slower rate than the foreground, which in return
helps to give the illusion of depth within our game. More speciically this technique is achieved
by placing multiple layers in front of each other and moving them at different speeds along
the x axis.

How to do it...

1. To do this, we will need to implement a new object called ScrollingBackground

with the following code:
function ScrollingBackground() {

this.width = 0;
this.height = 0;
this.deltaScroll = 1;

this.InitScrollingBackground = function(texture, x, y, z,
width, height, deltaScroll) {
this.InitDrawableObject(texture, x, y, z);
this.width = width;
this.height = height;
this.deltaScroll = deltaScroll;

return this;
}

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