Book Image

HTML5 Game Development Hotshot

By : Seng Hin Mak, Makzan Makzan (Mak Seng Hin)
Book Image

HTML5 Game Development Hotshot

By: Seng Hin Mak, Makzan Makzan (Mak Seng Hin)

Overview of this book

Table of Contents (15 chapters)
HTML5 Game Development HOTSHOT
About the Author
About the Reviewers

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>

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
  var game = this.spaceRunner || (this.spaceRunner = {});
  game.view = game.view || {};
  game.view.floor = document.getElementById('floor');