Space Runner - HTML5 Game Development - page 88

Controlling the tiles creation in
JavaScript
In the previous task, we placed the ile elements directly in HTML. In this task, we will
change the placement of iles using JavaScript.
Prepare for lift off
At irst, we remove the dummy iles in HTML. We put those ile elements in HTML just
to test whether the CSS visual part works. Ater geing rid of the temporary code for
dummy HTML iles, the #floor HTML element reverts to the following state with just
the #player element:
<div id="game-scene" class="scene">
<div id="floor" class="floor">
<div id="player"></div>
</div>
</div>
We are going to need the reference of the floor element. Let's put the following code in the
runway.js file. It creates a new view object and refers to the #floor element with an
object property:
// runway view
;(function(){
var game = this.spaceRunner || (this.spaceRunner = {});
game.view = game.view || {};
game.view.floor = document.getElementById('floor');
}).call(this);
Engage thrusters
We wish to have lexibility in terms of how the iles are placed on the runway. To do that, we
will dynamically create the ile's DOM element in JavaScript using the following steps:
1. There are many ile instances in a runway. Let's deine the following ile deiniion in
the tile.js file:
;(function(){
var game = this.spaceRunner || (this.spaceRunner = {});
function Tile(element, type, x, y){
this.x = x || 0;
this.y = y || 0;