Controlling the tiles creation in JavaScript
In the previous task, we placed the tile elements directly in HTML. In this task, we will change the placement of tiles using JavaScript.
Prepare for lift off
At first, we remove the dummy tiles in HTML. We put those tile elements in HTML just to test whether the CSS visual part works. After getting rid of the temporary code for dummy HTML tiles, 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...