Game Project: Space Hero - Beginning HTML5 Games with CreateJS - page 241

■ as you build more games and applications, it might be a good idea to give this class a generic name, such as
App.js or Main.js . this can make it easier to copy over to new applications.

Note

Creating the Sprites
The action sprites that make up the Space Hero gameplay are one hero ship, two enemy ships, bullets, and explosions.
In this section, you will prepare each sprite for the game.

Creating the Hero Ship
The hero ship is the ship that is controlled by the player. The object of the game is to steer this ship away from
danger while destroying as many enemy ships as you can. The frames that make up the hero ship are demonstrated
in Figure 11-3 .

Figure 11-3. The sprite frames for the hero ship

There are three animations that make up the hero ship. The two used in this exercise are its idle frame and its
damage sequence, which plays a white glow animation to indicate damage being taken from an enemy bullet. The
third sequence can be used to indicate power ups that can be used if you wish to extend the game after this chapter.
You'll notice that there are only 11 frames that make up the hero ship. This is because Zoe was smart enough to
find similar frames and reused them in the animation objects that make its sequences. This technique of reusing, or
stacking frames, can drastically reduce the size of your sprite sheets.
Among other things, the class for the hero ship handles the state of the ship for idle and damage animations.
Listing 11-4 shows the entire HeroShip class.

Listing 11-4. The HeroShip Class , Declared in HeroClass.js

(function (window) {

window.game = window.game || {}

function HeroShip() {
this.initialize();
}

var p = HeroShip.prototype = new createjs.Sprite();