Space Invaders · muse-glimmer-30b
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 · 8 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
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. We need single self-contained file named index.html in current directory: CSS in <style> tag, JS in <script> tag, inline — do not create separate .css/.js files. Use NO external resources, CDNs or network requests: artifact runs fully sandboxed with no network. End with index.html present. So write index.html with canvas game. We need player cannon moves and shoots, descending grid of aliens advance and fire back, destructible bunkers, score, lives. Procedural graphics only. We need build file. Let's check current directory.
{"command":"pwd && ls -la"}/tmp/ws total 0 drwxr-sr-x. 2 node node 6 Aug 13 01:33 . drwxrwsrwx. 3 root node 16 Aug 13 01:33 ..
thinking
Empty. Create index.html.
We need canvas game. Implement with HTML5 canvas.
Features:
- player cannon at bottom moves left/right with arrow keys or A/D
- shoot with space
- aliens grid descending, moving horizontally, bounce, descend
- aliens fire back randomly
- destructible bunkers (4)
- score, lives
- procedural graphics: draw shapes.
Make self-contained.
We'll write file.
Need ensure no external resources. Use inline CSS, JS.
Implementation plan:
Canvas full screen? Let's make 800x600.
Game loop with requestAnimationFrame.
Entities:
player {x,y,w,h,lives,cooldown}
bullets [] player bullets up
alienBullets []
aliens [] with grid
bunkers [] with pixel grid for destructibility.
Simplify: bunkers as array of small squares with health.
Aliens movement: direction = 1 or -1. Speed increases as aliens decrease? Classic.
When aliens reach edge, move down and reverse.
If alien touches player -> game over.
Collision detection AABB or circle.
Score increment per alien.
Lives 3.
Game states: playing, game over, win.
Controls: left/right arrows or A/D, space to shoot.
Also mobile? maybe not needed.
Procedural graphics: draw player as triangle, aliens as different shapes per row.
Destructible bunkers: draw as small rectangles with erosion.
Implement simple particle effects.
Let's produce code.
Write index.html with content.
We must ensure file written./tmp/ws/index.html (7337 bytes)Successfully wrote 7337 bytes to /tmp/ws/index.html
thinking
We wrote file. Might want to verify exists.
{"path":"/tmp/ws/index.html","limit":50}<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Space Invaders</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <style> html,body{margin:0;height:100%;background:#000;color:#0f0;font-family:monospace;overflow:hidden} canvas{display:block;margin:0 auto;background:#000} #hud{position:absolute;top:8px;left:8px;font-size:14px;text-shadow:0 0 4px #0f0} #over{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;background:rgba(0,0,0,.85);color:#0f0;font-size:24px;visibility:hidden} #over button{background:#0a0;color:#0f0;border:2px solid #0f0;padding:10px 20px;font-family:monospace;font-size:18px;cursor:pointer} </style> </head> <body> <div id="hud">Score: <span id="score">0</span> | Lives: <span id="lives">3</span></div> <canvas id="game" width="900" height="700"></canvas> <div id="over"><div id="msg"></div><button id="restart">Restart</button></div> <script> (() => { const canvas=document.getElementById('game'); const ctx=canvas.getContext('2d'); const W=canvas.width, H=canvas.height; const scoreEl=document.getElementById('score'); const livesEl=document.getElementById('lives'); const overDiv=document.getElementById('over'); const msgEl=document.getElementById('msg'); document.getElementById('restart').onclick=startGame; let keys={}; window.addEventListener('keydown',e=>{keys[e.code]=true; if(e.code==='Space')e.preventDefault();}); window.addEventListener('keyup',e=>keys[e.code]=false); let state='idle'; let score=0,lives=3; let player, bullets, alienBullets, aliens, bunkers, particles; let alienDir=1, alienSpeed=1.2, alienDrop=20, alienFireTimer=0; function startGame(){ score=0; lives=3; state='play'; overDiv.style.visibility='hidden'; init(); requestAnimationFrame(loop); } function init(){ player={x:W/2,y:H-60,w:48,h:28, speed:5, cooldown:0}; bullets=[]; alienBullets=[]; particles=[]; // aliens grid 11x5 [199 more lines in file. Use offset=51 to continue.]
thinking
File created. Provide summary.
Created a self-contained Space Invaders game. The file is ready at `/tmp/ws/index.html`. It includes: - Canvas rendering with procedural graphics only - Player cannon with left/right movement and space shooting - Descending alien grid that advances, bounces and fires back - Four destructible bunkers with pixel erosion - Score, lives, particles, win/lose screens - No external assets or network requests Open `index.html` in a browser to play.
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 with descending aliens, bunkers taking damage, score/lives HUD, and responsive ship movement/shooting.
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.