A retro-futuristic, browser-based spacecraft shooter built with vanilla HTML5 Canvas and JavaScript. Navigate through asteroid fields, collect weapons, and survive progressively challenging waves—all with zero dependencies and neon-soaked arcade aesthetics.
- Fast-Paced Arcade Action: Classic Asteroids-style gameplay with modern polish
- Sleek Spacecraft: Star Wars-inspired racer design with engine glow effects
- Procedural Graphics: All visuals generated via Canvas API (no image assets)
- Cross-Platform: Seamless desktop (keyboard + mouse) and mobile (virtual joystick) controls
- Cursor-Based Aiming: Ship rotates smoothly toward your aim point (separate from movement)
- Visual "Juice": Particle explosions, screen shake, motion blur, 3-layer parallax starfield
- Synthesized Audio: Web Audio API sound effects + enthusiastic voice encouragement
- Progressive Difficulty: Level-based scaling with increasing speed and asteroid count
- Bonus Wave System: Clear levels quickly to trigger bonus waves for extra points
- Weapon Variety: Single shot, triple spread, and rapid-fire pickups
- Persistent High Scores: Top 5 scores saved via localStorage
- Movement: WASD or Arrow Keys (independent from aiming)
- Aim: Mouse cursor (ship rotates smoothly to face cursor)
- Fire: Left mouse click (hold for auto-fire) - bullets fire from ship's nose
- Mute: Click speaker icon (top-right)
- Strafing: You can move in one direction while shooting in another!
- Movement: Virtual joystick (bottom-left)
- Aim: Ship rotates to face joystick direction
- Fire: Fire button (bottom-right)
- Mute: Tap speaker icon (top-right)
Theme: Retro-Futuristic Neon Arcade
- Player: Sleek cyan racer spacecraft with engine glow and cockpit detail
- Asteroids: Procedurally generated rocky polygons in orange/brown
- Explosions: Orange-yellow particle bursts with fade-out
- Background: Deep space (dark blue-black) with parallax starfield
- UI: Monospace typography with neon cyan glow effects
All colors use HSL values for dynamic theming. See gemini.md for the complete palette.
- Fork or clone this repository
- Push to GitHub
- Go to Settings → Pages
- Set source to main branch, / (root)
- Save and wait ~1 minute
- Access your game at
https://<username>.github.io/spacehunter-static/
# Serve static files (any HTTP server works)
python -m http.server 8000
# Or using Node.js
npx http-server
# Or using PHP
php -S localhost:8000Open http://localhost:8000 in your browser.
Note: Some browsers require user interaction before enabling Web Audio. Click anywhere on the page if audio doesn't play initially.
- HTML5 - Canvas element for rendering
- CSS3 - Flexbox/Grid for UI layout, neon glow effects
- Vanilla JavaScript - ES6 modules, zero dependencies
- Web Audio API - Synthesized sound effects
- Web Speech Synthesis API - Voice encouragement lines
- localStorage API - High score persistence
- ✅ Chrome 90+
- ✅ Firefox 88+
- ✅ Safari 14+
- ✅ Edge 90+
spacehunter-static/
├── index.html # Entry point
├── gemini.md # Game state schema and formulas
├── README.md # This file
├── css/
│ └── style.css # Vibe-compliant styling
├── js/
│ ├── main.js # Game loop orchestration
│ └── modules/
│ ├── renderer.js # Canvas drawing functions
│ ├── physics.js # Collision detection, movement
│ ├── audio.js # Sound effects and voice
│ └── input.js # Keyboard, mouse, touch handling
└── architecture/
├── game_loop.md # Game loop SOP
├── input_handling.md # Input system SOP
├── entity_manager.md # Entity spawn/destroy SOP
└── physics_sop.md # Physics formulas SOP
- Inertia is Real: Your spacecraft drifts. Plan your movements ahead!
- Strafe Like a Pro: Move in one direction while aiming in another—cursor controls rotation!
- Small = Deadly: Small asteroids are worth more points but harder to hit
- Combo Kills: Destroy asteroids within 2 seconds of each other for a 1.5x score multiplier
- Weapon Timing: Weapons expire after 20 seconds—use them wisely!
- Invulnerability: After taking damage, you have 1 second of invulnerability (red flash)
- Speed Kills: Clear levels in under 90 seconds to trigger bonus waves for extra points!
- Health Management: You only have 50 HP—every hit counts!
This game was built using RSDC v3.1 (Recursive Spec-Driven Coding), a 5-stage AI-assisted development pipeline:
- Architect - Defined tech stack and skills
- Product Manager - Created PRD with "Vibe Specification"
- Tech Lead - Converted requirements to Gherkin acceptance tests
- Engineering Manager - Broke down into 88 atomic tasks
- Developer - Implemented with <15 lines per step
All decisions are logged in artifacts/00_decision_journal.md for full traceability.
- Frame Rate: 60fps sustained (16.67ms per frame)
- Input Latency: <50ms from action to visual response
- Memory Usage: <100MB heap
- Load Time: <2 seconds on 3G connection
- Solution: Click anywhere on the page first (browsers require user gesture to initialize AudioContext)
- Check mute button isn't active (should be cyan, not red)
- Solution: Close other browser tabs, disable browser extensions
- Verify you're using a supported browser version
- Solution: Open browser DevTools → Toggle device emulation
- Verify User Agent contains "Android", "iPhone", or "iPad"
- Solution: Check browser console for errors
- Verify you're accessing via HTTP/HTTPS (not
file://)
MIT License - See LICENSE file for details
- Concept: Inspired by Atari's Asteroids (1979)
- Methodology: RSDC v3.1 framework
- Audio: Web Audio API synthesized sounds
- Voice: Browser's native Web Speech Synthesis
Built with 💙 using the RSDC v3.1 Pipeline
"Let's go!" - Space Hunter Ship AI