Asteroids · hy3
Build a playable Asteroids game on a canvas: a thrust-and-rotate vector ship that shoots and wraps around the screen edges, splitting asteroids into smaller pieces, with score and lives. Procedural vector graphics only, no external assets.
transcript · 4 messages
Build a playable Asteroids game on a canvas: a thrust-and-rotate vector ship that shoots and wraps around the screen edges, splitting asteroids into smaller pieces, with score and lives. Procedural vector graphics only, no external assets.
thinking
The user wants me to build a playable Asteroids game in a single HTML file. This needs to be a self-contained file with: - CSS in a `<style>` tag - JS in a `<script>` tag - Canvas-based game - Vector ship that can thrust and rotate - Shooting mechanics - Screen wrapping - Asteroids that split into smaller pieces - Score and lives tracking - No external resources Let me create this step by step. I'll write the complete game in one `index.html` file. Key features to implement: 1. Canvas setup 2. Ship class with rotation and thrust 3. Bullet/shooting system 4. Asteroid class with splitting mechanics 5. Collision detection 6. Screen wrapping 7. Score and lives display 8. Game loop 9. Keyboard controls (arrow keys for rotation/thrust, space for shooting) I'll use procedural vector graphics - drawing shapes using lines rather than images
I'll create a complete Asteroids game in a single HTML file with all the requested features. Let me build this step by step.
/workspace/index.html (11538 bytes)Successfully wrote 11538 bytes to /workspace/index.html
thinking
The user asked me to build a playable Asteroids game, and I've created a complete implementation. Let me review what I've built to make sure it meets all the requirements: 1. ✅ Single-page web app in one self-contained `index.html` file 2. ✅ CSS in a `<style>` tag 3. ✅ JS in a `<script>` tag 4. ✅ Inline - no separate .css/.js files 5. ✅ No external resources, CDNs or network requests 6. ✅ Thrust-and-rotate vector ship 7. ✅ Shoots (spacebar) 8. ✅ Wraps around screen edges 9. ✅ Asteroids split into smaller pieces 10. ✅ Score tracking 11. ✅ Lives system 12. ✅ Procedural vector graphics only The game includes: - Ship with rotation (arrow keys or WASD) and thrust (up arrow or W) - Shooting with spacebar - Screen wrapping for ship, bullets, and asteroids - Asteroids that split into smaller pieces when hit - Score display (different points for different sizes) - Lives system with visual indicators - Game over screen with restart button - Particle effects for explosions - Star background - Invincibility period after respawning - Increasing difficulty (asteroids respawn when few remain) The code is complete and should work as a fully functional Asteroids game. Let me verify the file was created correctly
I've created a complete Asteroids game in `/workspace/index.html`. Here's what it includes: **Features:** - **Vector ship** with rotate (arrow keys/WASD) and thrust (up/W) - **Shooting** with spacebar - **Screen wrapping** for ship, bullets, and asteroids - **Splitting asteroids** - large split into medium, medium into small - **Score tracking** - 20/50/100 points based on asteroid size - **Lives system** - 3 lives with visual indicators - **Game over screen** with restart button - **Particle explosion effects** - **Star background** for atmosphere - **Invincibility period** after ship respawns **Controls:** - Arrow keys or WASD: Rotate and thrust - Spacebar: Shoot **Technical details:** - Pure procedural vector graphics (no images) - All code in one self-contained HTML file - No external resources or network requests - Canvas-based rendering with trail effect - Proper collision detection and game physics The game is ready to play - just open `index.html` in a browser!
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
Functional vector Asteroids with ship, thrust/rotation, asteroids, score, lives, and a working game-over/play-again screen.
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.