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.
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> </section> ...
Just before closing the body tag, we include the libraries and the game.js JavaScript files:
... <script src="vendors/easeljs-0.7.1.min.js"></script> <script src="vendors/tweenjs-0.5.1.min.js"></script> <script src="scripts/game.js"></script> ...
Inside...
