Asteroid Shooter Micro-Game

A classic arcade-style asteroid shooter where you pilot a ship through space, destroying asteroids to score points. Built with vanilla JavaScript and HTML5 Canvas, featuring realistic physics, particle effects, and smooth 60fps gameplay.

Game Mechanics

• Movement: Use WASD or arrow keys to rotate and thrust your ship
• Shooting: Press spacebar to fire bullets at asteroids
• Physics: Realistic momentum, inertia, and screen-wrapping
• Destruction: Large asteroids split into smaller pieces when hit
• Lives System: Start with 3 lives, lose one when hitting an asteroid
• Scoring: Earn 10 points per asteroid destroyed
• Progressive Difficulty: More asteroids spawn as your score increases

Technical Implementation

The game uses several interesting techniques:

Physics Simulation

The ship uses realistic momentum and angular movement:

// Ship physics with thrust and rotation
if (keys.has('w') || keys.has('arrowup')) {
  ship.velocity.x += Math.cos(ship.angle) * 0.3
  ship.velocity.y += Math.sin(ship.angle) * 0.3
}

// Apply friction and update position
ship.velocity.x *= 0.98
ship.velocity.y *= 0.98
ship.x += ship.velocity.x
ship.y += ship.velocity.y

Collision Detection

Uses circle-based collision detection for accurate gameplay:

function checkCollision(obj1: GameObject, obj2: GameObject): boolean {
  const dx = obj1.x - obj2.x
  const dy = obj1.y - obj2.y
  const distance = Math.sqrt(dx * dx + dy * dy)
  return distance < (obj1.radius + obj2.radius)
}

Asteroid Splitting System

Large asteroids break into smaller pieces when destroyed:

// Split large asteroids when hit
if (asteroid.radius > 25) {
  for (let i = 0; i < 2; i++) {
    objects.asteroids.push({
      x: asteroid.x,
      y: asteroid.y,
      velocity: { x: (Math.random() - 0.5) * 3, y: (Math.random() - 0.5) * 3 },
      radius: asteroid.radius * 0.6,
      angle: 0,
      rotationSpeed: (Math.random() - 0.5) * 0.2
    })
  }
}

Particle Effects

Dynamic particle system for explosions and thrust:

function createParticles(x: number, y: number, color: string, count: number) {
  for (let i = 0; i < count; i++) {
    const angle = (Math.PI * 2 * i) / count
    const speed = 2 + Math.random() * 3
    particles.push({
      x, y,
      velocity: { x: Math.cos(angle) * speed, y: Math.sin(angle) * speed },
      life: 30,
      maxLife: 30,
      color
    })
  }
}

Controls

• W/↑: Thrust forward
• A/←: Rotate left
• D/→: Rotate right
• Space: Shoot bullets

Features

• 60fps Animation: Smooth gameplay using requestAnimationFrame
• Vector Graphics: Classic arcade look rendered on HTML5 Canvas
• Particle Effects: Dynamic explosions and engine thrust trails
• Screen Wrapping: Ship and asteroids wrap around screen edges
• Progressive Difficulty: Asteroid spawn rate increases with score
• Asteroid Splitting: Large asteroids break into smaller pieces

The game demonstrates the fundamentals of web-based game development: the game loop, physics simulation, collision detection, and efficient canvas rendering.