Your First Real Game: Asteroid Dodge

Here's What You'll Build

A complete game: pilot a ship through a field of drifting asteroids. Score increases over time, asteroids speed up and multiply. High score saved locally.

The Concept

This lesson puts everything together. You will combine movement (Lesson 1.3), collision detection (Lesson 1.4), animation (Lesson 1.2), and visual effects (Lesson 1.5) into a single, complete game. This is the first time you write a game design specification and ask Claude to build the entire thing.

Up to now, each lesson has given you the exact prompts to type. This lesson changes that -- you will write your own specification based on the requirements below, and Claude will build it.

The Math Behind It

Circle-circle collision: Two circles collide when the distance between their centers is less than the sum of their radii: distance < radius1 + radius2. This is used to detect the ship hitting an asteroid.

Wrapping coordinates: When the ship exits one side of the screen, it appears on the opposite side. If x > width, set x = 0. If x < 0, set x = width. Same for y.

Difficulty curves: The game gets harder over time. Asteroid speed increases linearly with score. Spawn rate increases (interval decreases) but never goes below a minimum, preventing the game from becoming impossible.

Building with Claude

Your Game Specification

For this lesson, write your own prompt based on these requirements. Here is an example specification you can adapt:

Create a single HTMLHyperText Markup Language file called asteroid-dodge.html with the following
game specification:

DISPLAY: Dark background (#0d0a1a), 800x600 canvas, starfield background
with 80 small white dots at random positions and brightnesses.

PLAYER: A small triangular spaceship (#39ff14) controlled with arrow
keys. Left/Right to rotate, Up to thrust forward. The ship has
momentum -- it keeps moving in the direction it was thrusting and
gradually slows down with friction. The ship wraps around screen edges.
Show a small orange flame behind the ship when thrusting.

ASTEROIDS: Irregularly shaped polygons (6-10 vertices with random radius
variation) that drift across the screen from random edges toward the
center area. Each asteroid rotates slowly. Asteroids vary in size from
radius 12 to 37. They are drawn with a dark fill (#1a1333) and purple
outline (#6b5b95).

SCORING: Score increases by 1 every 0.1 seconds of survival. Display
score and high score in a HUDHeads-Up Display. Save high score to localStorage.

DIFFICULTY: Asteroids spawn faster and move faster as score increases.
Start with one asteroid every 1.5 seconds, decrease to minimum 0.3
seconds. Speed multiplier starts at 1x, increases with score.

COLLISION: Circle-circle collision between ship and asteroids (use 70%
of asteroid radius for forgiveness). On death, show particle explosion,
display game over with score, and show "New High Score" if applicable.

CONTROLS: Start button. Arrow keys with preventDefault to avoid page
scrolling. Focus the canvas on game start.

Why this works: This is a complete game design document. It specifies every system: display, controls, entities, scoring, difficulty, collision, and game over. When you write a spec this detailed, Claude rarely needs follow-up prompts.

Iterating on Your Version

After Claude builds your game, play it. You might want to adjust:

• "Make the ship turn faster" or "Make the ship turn slower"
• "Make asteroids spawn less frequently at the start"
• "Add a shield powerup that appears occasionally and protects from one hit"
• "Make the explosion bigger and last longer"

Each of these is a valid follow-up prompt. The skill is identifying what feels wrong and describing the fix.

Understanding What Claude Built

Momentum-Based Movement: Unlike the simple arrow-key movement in Lesson 1.3, the ship here has velocity that persists after releasing the thrust key. Pressing Up adds to the velocity vector in the direction the ship faces. Friction multiplies velocity by 0.98 each frame, gradually slowing it.

Procedural Asteroid Shapes: Each asteroid is defined by a set of vertices at random angles with random radii. This creates the irregular, rocky look. The vertices are calculated once when the asteroid is created and reused for drawing.

localStorage: The high score persists between sessions using localStorage.setItem('key', value) and localStorage.getItem('key'). This is the simplest form of saving game data in the browser.

AIArtificial Intelligence Skill: Writing Specifications

This lesson demonstrated the most powerful AI prompting technique: writing a complete specification. Instead of building step by step, you described the entire game upfront. This is how professional game development works -- you write a design document first, then build it.