HTML and CSS Reference
Understanding the Game
Alien Invasion is a top-down 2-D shooter game built in the spirit of the game 1942 (but in space) or a simplified
version of Galaga . The player controls a ship, shown at the bottom of the screen, flying the ship vertically
through an endless space field while defending Earth against an incoming hoard of aliens.
When played on a mobile device, control is via left and right arrows shown on the bottom left of the screen,
and a Fire button on the right. When played on the desktop, the user can use the keyboard's arrow keys to fly
and the spacebar to fire.
To compensate for all the different screen sizes of mobile devices, the game resizes the play area to always
play at the size of the device. On the desktop it plays in a rectangular area in the middle of the browser page.
Structuring the Game
Nearly every game of this type consists of a few of the same pieces: some asset loading, a title screen, sprites,
user input, collision detection, and a game loop to tie it all together.
The game uses as few formal structures as possible. Instead of building explicit classes, you take advantage
such as C, C++, and Java are called “strongly typed” because you need to be very explicit about the type of
parameters that you pass around to method. This means you need to explicitly define base classes and interfaces
typed because the language doesn't enforce the types of parameters. This means you define your objects more
loosely, adding methods to each object as needed, without building a bunch of base classes or interfaces.
Image asset handling is dead simple. You load a single image, called a sprite sheet , that contains all your
game's sprite images in a single PNG and execute a callback after that image loads. The game also has a single
method for drawing a sprite onto your canvas.
The title screen renders a sprite for the main title and shows the same animated starfield from the main game
moving in the background.
The game loop is also simple. You have an object that you can treat as the current scene, and you can tell that
scene to update itself and then to draw itself. This is a simple abstraction that works for both title and end game
screens as well as the main part of the game.
User input can use a few event listeners for keyboard input and a few “zones” on your canvas to detect touch
input. You can use the HTML standard method addEventListener to support both of these.
Lastly, for collision detection, you punt the hard stuff and just loop over the bounding boxes of each of the
objects to detect a collision. This is a slow and naive way to implement collision detection, but it's simple to
implement and works reasonably well as long as the number of sprites you check against is small.
The Final Game
To get a sense of where the game is headed, check out Figure 1-1 , and visit http://cykod.github.com/AlienIn-
vasion/ on both a desktop browser and whatever mobile device you have handy. The game should run on any
smartphone that supports HTML5 canvas; however, canvas performance on Android versions before Ice Cream
Sandwich is poor.