O'Reilly logo

HTML5 Game Development HOTSHOT by Makzan

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required