HTML and CSS Reference
To make a complex task somewhat easier, we've broken the work down into three groups
Group 1: Engine and basic object
Group 2: Complex objects and over-
Group 3: The UFO flock
• Step 1: Set up basic game
utilities, metadata, and
XML naming schemes.
• Step 2: Integrate screen
• Step 3: Create the big UFO.
• Step 4: Create the player's
• Step 5: Make the player re-
spond to keyboard input.
• Step 6: Capture keyboard
and mouse controls.
• Step 1: Create shields for
• Step 2: Construct lasers.
• Step 3: Integrate laser colli-
• Step 4: Create the heads-up
• Step 1: Set up the UFO
• Step 2: Generate paths for
• Step 3: Animate the UFOs.
• Step 4: Make the UFOs ran-
First up, the core programming of the game's engine.
7.3.1. Game engine essentials and using screens
Because building SVG Aliens involves complex logic, an effective design pattern is re-
quired for organizing your code. At the core you're going to need an object called Game
that acts as an engine to manage initializing, updating objects, screen transitions, Game
Overs, removing objects, and more.
Step 1: Set up basic game utilities, metadata, and XML naming schemes
From here on out, place all of your code inside a self-executing function to prevent
your game engine needs to set up the game's basic utilities, metadata (such as width and
height), XML naming schemes, and anything extra that doesn't belong in your other ob-
jects. Place all of the following code into game.js.