HTML and CSS Reference
In-Depth Information
Engage thrusters
The following steps build the foundaion 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 enire HTML structure:
...
<section id="game" class="row">
<canvas id="canvas" width="640" height="1000"></canvas>
<div id="hud">
<div>Lives: <span id="lives"></span></div>
<div>E: <span id="energies"></span></div>
<div>Waves: <span id="waves"></span></div>
</div>
<div class="add-buttons">
<a class="add-button" title="Space Junk" data-
type="SpaceJunk">J</a>
<a class="add-button" title="Satellite" data-
type="Satellite">S</a>
<a class="add-button" title="Satellite+" data-
type="Satellite2">S+</a>
<a class="add-button" title="Castle" data-type="Castle">C</a>
<a class="add-button" title="Castle+" data-type="Castle2">C+</
a>
</div>
</section>
...
2. We will separate our game code into different files in this project for each script file,
and we will need to include them in the HTML file:
...
<script src="vendors/easeljs-0.7.1.min.js"></script>
<script src="vendors/tweenjs-0.5.1.min.js"></script>
<script src="vendors/movieclip-0.7.1.min.js"></script>
<script src="scripts/assets.js"></script>
<script src="scripts/hud.js"></script>
<script src="scripts/board.js"></script>
<script src="scripts/game.js"></script>
...
