Game Development Reference
In-Depth Information
Orb Destroyer
Orb Destroyer is a very simple game, but it will be used to put the state machine pattern into practice. You will
complete the following procedures in this exercise:
Create an application that consists of two menus and a game level.
•
•
Use a state machine to control the state of the application.
•
Create and dispatch events within the scenes to communicate back to the main application,
which will change states.
Keep the entire application out of global scope by utilizing the
on
method to control scope and
•
pass values.
Setting Up the Game Files
Set up the HTML document that includes a
canvas
element, the necessary CreateJS files, the
PulsingOrb
class, and
the
SimpleButon
component. You'll also create the following JavaScript files:
state.js
•
GameMenu.js
•
Game.js
•
GameOver.js
•
OrbDestroyer.js
Listing 10-10 shows the inclusion of all JavaScript files and their locations, as well as the HTML and
init
function
that fires when the body has loaded.
•
Listing 10-10.
The index.html for Orb Destroyer Includes All JavaScript Files and Initializes the Application
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="js/lib/easeljs-0.7.1.min.js"></script>
<script src="js/lib/soundjs-0.5.2.min.js"></script>
<script src="js/lib/preloadjs-0.4.1.min.js"></script>
<script src="js/state.js"></script>
<script src="js/SimpleButton.js"></script>
<script src="js/PulsingOrb.js"></script>
<script src="js/scenes/GameMenu.js"></script>
<script src="js/scenes/Game.js"></script>
<script src="js/scenes/GameOver.js"></script>
<script src="js/OrbDestroyer.js"></script>
</head>
<body onload="init();">
<canvas id="canvas" width="800" height="600" style="border: black solid
1px"></canvas>
</body>
