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

Defining the floor and tiles in the game

In this task, we would like to define an essential game object—tiles. We use tiles to construct the running floor, and the types of tiles 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:

  • setting.js
  • tile.js
  • 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 tiles, these are given in more detail in the following steps:

  1. The tile elements come with an inline style for placement on the floor:
    <div id="game-scene" class="scene"> ...

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