Space Runner - HTML5 Game Development - page 86

4. In the setting.js ile, we set the width and height of each ile for the
JavaScript logic:
;(function(){
var game = this.spaceRunner || (this.spaceRunner = {});
game.TILE_HEIGHT = game.TILE_WIDTH = 100;
}).call(this);
Objective complete - mini debriefing
We have accomplished the task by puing the essenial game objects in the game scene,
and created related CSS visual styles.
The tiles
We use JavaScript to create iles on the loor dynamically. Before creaing the iles in logic,
let's create some dummy iles to explore how we present the iles.
The tile pattern
We will use tile-<id> to represent a speciic ile patern. The following screenshot shows
the ile paterns we have in the game. Here, ile-0 is an empty ile, ile-1 and ile-2 are used
for the runway, ile-10 is for decoraion, and ile-100 is the obstacle.
We will use the class atribute so that it is easy to change the ile graphics in the CSS
styling ile. In addiion, on the logic side, it is easy to use classList to switch the ile ID.
For example, if we want to set a ile to the patern ile-10 in JavaScript, we can use the
following code:
tileElement.classList.add('tile-10');