Setting up the user interface

In this task, we will get started with the project by setting up the structure and the user interface.

Prepare for lift off

In this project, we will try a different method of using the graphical assets. We will include the assets.js file, which you can find in the code bundle. This is the file generated by the CreateJS toolkit from Adobe Flash. The following screenshot shows that we lay out the graphical symbols on the stage inside the Flash IDE. The assets.js file includes background, buildings, enemies, and the wave-cleared message. They all come with a name that we can reference and instantiate in our game.

Engage thrusters

The following steps build the foundation of our project:

1. First, we only show the core part of the index.html file in the following code. When we deploy the code, we always want to have the entire HTML structure:

   ...
   <section id="game" class="row">
     <canvas id="canvas" width="640" height="1000"></canvas>
     <div id="hud"...