Professional HTML5 Mobile Game Development

Adding a Protagonist

The first step to turn Alien Invasion into an actual, playable game is to add a player-controlled ship. This is the first sprite that you add to the game. In the next chapter, you create a GameBoard class to manage the many sprites that are on the page at once during normal gameplay, but for now a single sprite is enough to start.

Creating the PlayerShip Object

The first step is to get a ship created and drawn on the page. Open up game.js and add the player ship class to the bottom:

var PlayerShip = function() { 
   this.w =  SpriteSheet.map['ship'].w;
   this.h =  SpriteSheet.map['ship'].h;
   this.x = Game.width/2 - this.w / 2;
   this.y = Game.height - 10 - this.h;
   this.vx = 0;
   this.step = function(dt) {
     // TODO – added the next section
}
   this.draw = function(ctx) {
     SpriteSheet.draw(ctx,'ship',this.x,this.y,1);
   }
}

Much like a game screen, a sprite has the same two external methods: step and draw. Keeping the interface consistent allows sprites and game screens to be mostly interchangeable. In initializing the sprite, a few more variables are set that give the sprite a position on the page and a height and a width. (The next chapter uses the position and height and width to do simple bounding box collision detection.)

The width and height of the sprite are pulled from the sprite sheet. Although you could hard-code the width and height here, using the dimensions from the sprite sheet mean there is only one location that needs to be changed if the dimensions need to be changed. ...