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

Designing the game's user interface

In this task, we will set up the project and create the essential interface elements.

Prepare for lift off

The first thing we will do is create our project directory with the following file structure:

index.html
styles/game.css
scripts/game.js
vendors/easeljs-0.7.1.min.js
vendors/tweenjs-0.5.1.min.js
images/

In this task, we need the following image files. You can get them from the code bundle.

Prepare for lift off

The index.html file is very similar to the previous examples. We'll only show the most relevant HTML code here. We have defined the following game section:

... <section id="game" class="row"> <canvas id="canvas" width="960" height="480"></canvas> ...

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