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

Creating the HTML structure

In this task, we are going to kick-start the project by creating the file structure, ensuring that the essential files are ready.

Prepare for lift off

We need several things to get started. First, we will create an empty project directory. Then, we will create an index.html file, a folder where we will put the CSS styling files, and a folder to put the JavaScript logic files in.

During the missions, we need several graphics files, including the background and buttons; you can find the graphics from the sample code. Put all the images into a directory named images. The created file structure is shown in the following screenshot:

Engage thrusters

Use the following steps to create the basic game structure:

  1. We will enter the ...

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