Space Runner - HTML5 Game Development - page 89

this.type = type || 0;
this.element = element;
this.updatePosition();
}
//The behavior we expect from each tile is the ability to update
its own position from the x and y property. It uses the CSS
translate3d function for positioning.
Tile.prototype.updatePosition = function() {
if (this.element) {
this.element.style.webkitTransform = "translate3d(" + this.x
+ "px, " + this.y + "px, 0)";
}
}
game.Tile = Tile;
}).call(this);
2. Now, we work on the view module that manages the display and rendering of the iles
inside the runway. We put the following code inside the runway.js file. It is a runway
object that contains iles' data. It also comes with two methods — createTile
and reset :
// runway view
;(function(){
var game = this.spaceRunner || (this.spaceRunner = {});
game.view = game.view || {};
game.view.floor = document.getElementById('floor');
game.view.runway = {
tiles: [],
createTile: function(type, x, y) {
// Create tiles
var newTileDiv = document.createElement('div');
newTileDiv.classList.add('tile');
newTileDiv.classList.add('tile-' + type);
this.tiles.push( new game.Tile(newTileDiv, type, x,
y) );
game.view.floor.insertBefore(newTileDiv,
game.player.element);
},
reset: function() {
for (var i=0, len=this.tiles.length; i<len; i++) {
var tile = this.tiles[i];