Space Invaders · grok-4.20
Build a playable Space Invaders game on a canvas: a player cannon that moves and shoots, a descending grid of aliens that advance and fire back, destructible bunkers, score, and lives. Procedural graphics only, no external assets.
transcript · 4 messages
Build a playable Space Invaders game on a canvas: a player cannon that moves and shoots, a descending grid of aliens that advance and fire back, destructible bunkers, score, and lives. Procedural graphics only, no external assets.
thinking
The task is to build a playable Space Invaders game as a single self-contained index.html file with CSS in <style> and JS in <script>. It must use a canvas, no external resources.
The task is to build a playable Space Invaders game on a canvas using only procedural graphics in a single index.html file with CSS and JS.
I need to create an HTML file with a canvas, some styles, and JavaScript code that implements the game.
Key features:
- Player cannon at the bottom that can move left/right and shoot upwards.
- Grid of aliens (e.g., 5x11) that move left/right, descend when reaching edge, shoot downwards randomly.
- Destructible bunkers at the bottom.
- Score and lives display.
- Game over when lives=0 or aliens reach bottom.
- Start and game over screens.
- Use requestAnimationFrame for loop.
- Keyboard events for controls: left/right arrows or A/D, space to shoot.
- No external assets, so draw everything with canvas API: lines, rects, etc.
I need to implement this in code.
Since this is a response, I have to provide the full code for index.html.
The user says "Build a playable Space Invaders game", so the answer is the code.
Confidence high as I know how to do it.
But I need to write the code carefully.
Let me outline the code structure.
First, HTML:
<!DOCTYPE html>
<html lang=" en">
<head>
<meta charset="UTF-8">
<title>Space Invaders</title>
<style>
body { margin:0; background:black; }
canvas { display:block; margin:auto; }
</style>
</head>
<body>
<canvas id="gameCanvas" width="800" height="600"></canvas width="800" height="600">
<script>
// JS code here
</script>
</body>
</html>
Then in script:
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
canvas.width = 800;
canvas.height = 600;
// Game variables
let player = {
x: 375,
y: 550,
width: 50,
height: 20,
speed: 5
};
let bullets = [];
let alienBullets = [];
let aliens = [];
let bunkers = [];
let score = 0;
let lives = 3;
let gameOver = false;
let started = false;
let alienDirection = 1;
let alienSpeed = 1;
let alienDrop = false;
let lastAlienMove = 0;
let alienMoveInterval = 1000 // ms
// Define alien types
const alienTypes = [
// row 0: 30pts
{width:40, height:30, color:'#ff0', points:30, shape: 'saucer'},
{width:40, height:30, color:'# 0f0', points:20, shape: 'crab'},
{width:40, height:30, color:'#f0f', points:20, shape: 'crab'},
{width:40, height:30, color:'#0f0', points:10, shape: 'squid'},
{width:40, height:30, color:'#0f0', points:10, shape: 'squid'}
];
// Initialize aliens
function initAliens() {
aliens = [];
for(let row=0; row<5; row++) {
for(let col=0; col<11; col++) {
let x = 50 + col * 60;
let y = 50 + row * 40;
aliens.index.html (31535 bytes)Successfully wrote 31535 bytes to index.html
thinking
The game has been built as a single self-contained index.html file with everything inline. It includes:
The game has been built as a single self-contained `index.html` file (with all CSS, JS, and procedural Canvas graphics embedded). Open it in a modern browser to play. **Controls** - ← / → (or A/D): Move cannon - SPACE: Fire - P: Pause - R: Restart after game over Features a full classic experience: moving/shooting player, descending alien grid (with 3 enemy types + bonus UFO), destructible bunkers, lives, scoring, escalating speed per wave, explosions, sound FX (via Web Audio), particles, and win/lose conditions. Purely procedural—no images, fonts (beyond system), or network calls.
TAKE IT TO CODE
A single self-contained HTML file — copy it and open in any browser, or reuse the prompt with your own pi-agent run.
RUN
EVALUATION
Space Invaders clone with menu, aliens, bunkers, and lives; keyboard starts game, ship moves, aliens fire back.
Vision grade · anthropic/claude-sonnet-5
MEASUREMENTS
Raw readings from the capture, not a verdict — the grade above is the only judgement. Percentages are how much of the screen changed; the measure under-reports sparse motion on a dark background.