A classic arcade-style asteroid blaster game built with HTML5 Canvas and JavaScript. Navigate your ship through space, blast asteroids into smaller pieces, and survive as long as possible while your score climbs higher.
Asteroid Blaster is a retro-style space shooter game where players:
- Control a triangular spaceship in 2D space
- Shoot lasers to destroy asteroids that spawn from screen edges
- Break large asteroids into smaller fragments for points
- Survive increasingly difficult waves of asteroids
- Compete for high scores with progressive difficulty scaling
- Realistic Physics: Ship movement with momentum, friction, and thrust mechanics
- Dynamic Asteroids: Procedurally generated asteroid shapes with realistic textures, craters, and surface details
- Fragmentation System: Large asteroids break into 2-3 smaller pieces when hit
- Particle Effects: Explosion particles when asteroids are destroyed
- Progressive Difficulty: Asteroid spawn rate increases over time
- Score System: Different point values for different asteroid sizes (Large: 50, Medium: 25, Small: 10)
- Responsive Controls: Smooth ship rotation and thrust with visual flame effects
- Arrow Keys:
- Left/Right: Rotate ship
- Up: Thrust forward
- Spacebar: Fire laser
- Play Again Button: Restart after game over
The game is built as a single HTML file containing:
-
HTML Structure (
asteroid_blaster.html:70-81)- Canvas element for game rendering
- Score display and game over overlay
- Responsive layout with space-themed styling
-
CSS Styling (
asteroid_blaster.html:7-67)- Dark space theme with gradient backgrounds
- Responsive design centered on screen
- Game UI elements (score, controls, game over screen)
-
JavaScript Game Engine (
asteroid_blaster.html:83-576)- Object-oriented design with ES6 classes
- Game loop with requestAnimationFrame for smooth 60 FPS
- Collision detection and physics simulation
- Position, velocity, and rotation tracking
- Physics properties (thrust, friction, max speed)
- Wrapping screen boundaries
- Projectile physics with lifetime management
- Screen wrapping behavior
- Collision detection with asteroids
- Generational System: 3 generations (Large → Medium → Small)
- Procedural Generation: Random sizes, velocities, and rotations
- Realistic Rendering: Irregular shapes with gradients, craters, and surface textures
- Fragmentation Logic: Breaks into 2-3 smaller asteroids when destroyed
- Explosion effects with physics simulation
- Lifetime management and alpha blending
- Movement: Velocity-based movement with friction
- Collision Detection: Circle-based collision between all objects
- Screen Wrapping: Seamless world boundaries
- Canvas 2D Context: Hardware-accelerated graphics
- Procedural Art: Asteroids with unique shapes and textures each game
- Visual Effects: Gradient lighting, particle systems, thrust flames
- Input Handling: Keyboard event listeners with key state tracking
- Game Loop: Update → Physics → Collision → Render cycle
- Difficulty Scaling: Dynamic asteroid spawn rate adjustment
- Object Pooling: Efficient memory management for particles and projectiles
- Boundary Culling: Objects removed when off-screen too long
- Collision Optimization: Early exit conditions and radius-based detection
- Rendering Efficiency: Minimal canvas state changes and optimized drawing calls
- Open
asteroid_blaster.htmlin any modern web browser - Use arrow keys to move and spacebar to shoot
- Survive as long as possible and achieve a high score!
- Chrome, Firefox, Safari, Edge (all modern versions)
- Requires HTML5 Canvas support
- No external dependencies or libraries needed