Professional HTML5 Mobile Game Development

Representing Levels

Alien Invasion now has all the mechanics necessary to play the game. The only missing component is to put together some level data and a mechanism for adding enemy ships onto the screen.

Before getting into the levels, add a few more enemy types to give some variety to the page.

Setting Up the Enemies

You could create an endless number of variations of enemy movement, but for this game you’ll set up five different types of enemy behavior using the various enemy sprite types as a start. You can play with the definitions and add more if you like. You could make a number of other variations, but this set of five is a good start. Replace the enemies definition at the top of game.js with Listing 2-11.

Listing 2-11: Enemy Definitions

var enemies = {
  straight: { x: 0,   y: -50, sprite: 'enemy_ship', health: 10, 
              E: 100 },
  ltr:      { x: 0,   y: -100, sprite: 'enemy_purple', health: 10, 
              B: 200, C: 1, E: 200  },
  circle:   { x: 400,   y: -50, sprite: 'enemy_circle', health: 10, 
              A: 0,  B: -200, C: 1, E: 20, F: 200, G: 1, H: Math.PI/2 },
  wiggle:   { x: 100, y: -50, sprite: 'enemy_bee', health: 20, 
              B: 100, C: 4, E: 100 },
  step:     { x: 0,   y: -50, sprite: 'enemy_circle', health: 10,
              B: 300, C: 1.5, E: 60 }
};

With just a variation on the movement parameters, the enemies have wildly differing movement styles. The straight enemy has only vertical velocity parameter E, so it moves downward at a constant rate.

The ltr enemy (short for left-to-right) has a constant vertical velocity, but then a ...