Instant HTML5 2D Platformer - Instant HTML5 2D Platformer - page 17

this.AddTiles();
return this;
};
this.AddTiles = function() {
for (var x = 0; x < this.tiles.length; ++x) {
for (var y = 0; y < this.tiles[x]; ++y)
new DrawableObject().InitDrawableObject(tile, x *
this.tileWidth, 600 - (y + 1) * this.tileHeight, 4);
}
};
this.CurrentTile = function(x) {
return parseInt( x / this.tileWidth);
};
this.TerrainHeight = function(index) {
if (index < 0 || index > this.tiles.length)
return 0;
return this.tiles[index] * this.tileHeight;
};
}
How it works...
We irst start off by creating a new image object within the Main object. This object represents
a 2D tile module that the level is made up of. Similarly, to the player sprite this object loads
an external texture into the application. We then declare and initialize a new instance of the
Level object. This Level object is also passed into the Player constructor so that it can be
accessed and utilized within the Player object.
Within the Player object, we then assign a reference to the level object, passed into the
Player constructor, to a local level object. This reference is used to check whether or not the
player is intersecting the levels terrain.
These collision detection checks are only employed when the player chooses to move left or
right. When moving in either direction if the player collides with an obstacle they are pushed
back to the point of intersection thus preventing them from passing through an obstacle.
The level object itself is made up of a constructor and a number of helper functions that
are used to add tile modules into the level thus dictate the layout of the environment. The
object also contains helper functions that are used to determine if the player is colliding
with the terrain in their current position as well as a function for checking the height for
each stack of tiles.