Game Development Reference
In-Depth Information
Setting Up the Game Files
In this section, you will set up the HTML document that includes a
canvas
element and the necessary CreateJS file
includes. A few JavaScript files will also be needed in this exercise: one for the application named
exploadingAsteroids.js
,
one for the asteroid sprite named
Asteroid.js
, and another for the asset manager named
AssetManager.js
.
Be sure to
also include the UI components
Preloader.js
and
SimpleButton.js
that were built in Chapter 8 (see Listing 9-13)
.
Listing 9-13.
index.html for Exploding Asteroids
<!DOCTYPE html>
<html>
<head>
<title>Exploding Asteroids</title>
<script src="lib/easeljs-0.7.1.min.js"></script>
<script src="lib/soundjs-0.5.2.min.js"></script>
<script src="lib/preloadjs-0.4.1.min.js"></script>
<script src="js/AssetManager.js"></script>
<script src="js/Preloader.js"></script>
<script src="js/SimpleButton.js"></script>
<script src="js/Asteroid.js"></script>
<script src="js/exploadingAsteroids.js"></script>
</head>
<body onload="init()">
<canvas id="canvas" width="800" height="600" style="background-color:
#000"></canvas>
</body>
</html>
The Complete AssetManager for Exploding Asteroids
The first thing that should be created is the
AssetManager
class. The procedures for building this class were fully
examined earlier in the “Creating an Asset Manager Class” section, so the code in this class should be easy to follow.
The complete code for
AssetManager.js
is shown in Listing 9-14.
Listing 9-14.
The AssetManager class - AssetManager.js
(function () {
window.game = window.game || {};
var AssetManager = function () {
this.initialize();
}
var p = AssetManager.prototype = new createjs.EventDispatcher();
p.EventDispatcher_initialize = p.initialize;
//sounds
p.EXPLOSION = 'explosion';
p.SOUNDTRACK = 'soundtrack';