HTML and CSS Reference
In-Depth Information
To make a complex task somewhat easier, we've broken the work down into three groups
of steps.
Group 1: Engine and basic object
setup
Group 2: Complex objects and over-
lap
Group 3: The UFO flock
• Step 1: Set up basic game
utilities, metadata, and
XML naming schemes.
• Step 2: Integrate screen
transitions.
• Step 3: Create the big UFO.
• Step 4: Create the player's
ship.
• Step 5: Make the player re-
spond to keyboard input.
• Step 6: Capture keyboard
and mouse controls.
• Step 1: Create shields for
defense.
• Step 2: Construct lasers.
• Step 3: Integrate laser colli-
sion detection.
• Step 4: Create the heads-up
display.
• Step 1: Set up the UFO
flock.
• Step 2: Generate paths for
the UFOs.
• Step 3: Animate the UFOs.
• Step 4: Make the UFOs ran-
domly shoot.
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
JavaScript variables from leaking into the global scope. The following provides everything
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.
