El Pop

My personal interests, reflections, and thoughts


Make a Space Invaders Game in a single HTML file

One way to test LLM’s capabilities is creating retro games. I tested two local models: Gemma4:31b and Qwen3.8:27b (boot dense models) and one frontier model: Claude Opus5.5

The Prompt (Markdown format)

Act as an expert frontend game developer specializing in retro arcade mechanics.

## TASK

Build a complete, polished, fully playable Space Invaders clone as a single self-contained `.html` file. Everything listed below is a requirement, not a suggestion — including the bunkers, UFO, pause state, and CRT overlay.

## HARD CONSTRAINTS

1. **Single file** — all HTML, CSS, and JS inline. Save it in path space_invaders.html
2. **Zero dependencies** — no CDN, images, fonts, audio files, or frameworks. System font stacks only.
3. **All graphics via Canvas 2D** — programmatic pixel-art sprites defined as bitmap arrays in code, not drawn with paths. Pre-render each sprite to an offscreen canvas once (color baked in) and blit the cached copy, rather than re-plotting pixels every frame.
4. **All audio via Web Audio API** — oscillators and generated noise buffers only. Create the AudioContext on the first user gesture to satisfy autoplay policy. Reuse one shared noise buffer for every percussive effect instead of allocating per shot.
5. **No placeholders** — no `// TODO`, no truncation, no "rest of logic omitted."
6. **No browser storage** — keep the high score in memory for the session only.

## CANVAS & LOOP

- Fixed logical resolution (e.g. 800×600), CSS-scaled to fit the viewport while preserving aspect ratio, `image-rendering: pixelated`.
- Fixed-timestep accumulator loop; all motion must be frame-rate independent. Clamp the max frame delta so a tab-out cannot fast-forward the simulation, and cap the catch-up iterations so the loop can't spiral.

## GAMEPLAY — PLAYER

- Bottom center, 3 lives. Smooth continuous horizontal movement on Left/Right (and optionally A/D).
- Spacebar fires a vertical laser with a fire-rate cooldown and a cap on concurrent player shots on screen.
- On respawn after a hit: brief invulnerability window with a blink effect so the player can see it.
- **Input robustness**: track held keys in a Set via keydown/keyup, ignore `e.repeat`, call `preventDefault` on game keys so the page doesn't scroll, and clear the whole key Set on window `blur` (losing focus mid-hold must not leave movement stuck on). No sticky or stuttering movement.
- Optional pointer/touch control: drag to move, hold to fire — but keyboard is the primary path and must be flawless.

## GAMEPLAY — INVADERS

- 11×5 grid, step-based march (discrete hops, not a smooth glide), flipping between two animation frames on each step.
- March interval accelerates as invaders are destroyed, so the final survivors move fast; also scale starting speed up per wave.
- On reaching a horizontal boundary: drop the whole grid down one row and reverse direction on the next step.
- Only the lowest living invader in each column may fire. Bias firing somewhat toward the player's current column so pressure feels deliberate.
- Invaders reaching the player's row is an instant game over.

## REQUIRED FEATURE — DESTRUCTIBLE BUNKERS

- Place 4 shield bunkers in a row between the player and the invaders.
- Model each bunker as a grid of small cells (not a single sprite), with a classic arch/notch silhouette generated procedurally.
- Both player lasers and invader bombs chew localized holes in the bunker on impact — damage a small radius of cells around the hit point, and consume the projectile.
- Give cells a few health tiers so damage visibly erodes the material through intermediate colors before a cell is gone.
- Invaders that physically descend into a bunker erase the cells they overlap.
- Optional: partially repair surviving bunker cells between waves (a small gift, not a full rebuild).

## REQUIRED FEATURE — MYSTERY UFO

- Periodically a UFO flies across the top band of the playfield, entering from a random side.
- It is worth a bonus value chosen from a small set (e.g. 50 / 100 / 150 / 300), shown as a floating score popup when destroyed.
- It emits a distinct looping blip while on screen and a separate explosion sound when hit.
- Spawn on a randomized timer; suppress it when too few invaders remain.

## REQUIRED FEATURE — PAUSE STATE

- A dedicated pause key (P) toggles a `paused` state during play.
- While paused: freeze all simulation (invaders, projectiles, timers, the march) and show a clear "PAUSED — press P to resume" overlay. The starfield may keep drifting for ambiance, but nothing that affects gameplay advances.
- Losing window focus mid-game should auto-pause rather than let the swarm march on unseen.

## REQUIRED FEATURE — CRT OVERLAY

- A pure-CSS overlay above the canvas (no images): horizontal scanlines plus a soft radial vignette darkening the corners, using `pointer-events: none` so it never intercepts input.
- Respect `prefers-reduced-motion`: drop any animated/flicker component of the overlay for users who ask for reduced motion, keeping a static, calm version.

## COLLISIONS & SCORING

- Player shots destroy invaders and the UFO and add their point values; different invader rows are worth different amounts.
- Invader bombs cost a life on hitting the ship.
- A player laser and an invader bomb colliding mid-air annihilate each other.
- Floating score popups at the point of each kill.

## PROGRESSION

- Escalating waves that get harder (faster march, more aggressive fire, grid starting lower).
- Define an explicit win condition — clearing the final wave ends the run as a victory, with its own end screen distinct from a loss.

## UI & STATE

- States: start → playing → paused → dying → game over. Enter starts and restarts; restart fully wipes score, lives, wave, bunkers, projectiles, and every persistent object.
- Persistent HUD: score, session best, lives (as ship icons), and current wave (e.g. "WAVE 2 / 5").
- Start screen: title, a "Press Enter to Start" prompt, a scoring chart showing each enemy's value with animated sprites, and a control legend.
- Game over screen: win vs. lose status, final score, best-this-session, and a "Press Enter to Restart" prompt. State plainly that restarting wipes the game state.
- Mute toggle (M) for all audio, with a visible indicator when muted.

## VISUAL FLAIR

- Deep black background with a procedural multi-layer scrolling starfield that twinkles; nearer layers move faster and brighter (parallax).
- Particle burst with a little gravity on invader destruction; a larger burst plus brief screen shake on player death.
- Short screen flash / shake accents on big hits, kept subtle.

## AUDIO (ALL SYNTHESIZED)

Distinct effects for: player fire, invader death, player death, invader fire, the four-note descending march step (advancing with the swarm), UFO loop blip, UFO explosion, wave clear, victory, and game over.

## AFTER BUILDING

Verify the JS parses, check functionality and test game flow and ability, then give a short summary of the design decisions you made where the brief left room — don't just dump the file.
Code language: PHP (php)

Results

  1. Opus 5.5
    This model make a great job.

  2. Gemma4:31b
    Make the most retro game in Black and White and the shots in green. Simulating an old TV.
  3. Qwen3.8
    Not fully accurate, but good velocity in game play.

The Space Invader (Opus version) HTML to download: