HTML and CSS Reference
In-Depth Information
Defining the floor and tiles in the
game
In this task, we would like to deine an essenial game object—iles. We use iles to construct
the running loor, and the types of iles include the runway terrain and obstacles.
Prepare for lift off
We will put our code in several places. Make sure that you have the following files ready
before you start:
F
setting.js
F
tile.js
F
player.js
Engage thrusters
First, let's put the game objects inside the game scene in the HTML file. There is an element
that represents the floor, an element that represents the player, and a few temporary elements
that represent the iles, these are given in more detail in the following steps:
1. The ile elements come with an inline style for placement on the loor:
<div id="game-scene" class="scene">
<div id="floor" class="floor">
<div id="player"></div>
<!-- temporary code to be removed in next task -->
<div class='tile tile-1' style=
'transform: translate3d(100px, 0, 0)'></div>
<div class='tile tile-2' style=
'transform: translate3d(200px, 0, 0)'></div>
<div class='tile tile-1' style=
'transform: translate3d(100px, 100px, 0)'></div>
<div class='tile tile-100' style=
'transform: translate3d(200px, 100px, 0)'></div>
<div class='tile tile-1' style=
'transform: translate3d(100px, 200px, 0)'></div>
<div class='tile tile-2' style=
'transform: translate3d(200px, 200px, 0)'></div>
<!-- end temporary code -->
</div>
</div>
