Welcome to the Asteroids Game

Embark on an intergalactic adventure in this classic asteroid game, where you control a spaceship, navigate through space, and blast away asteroids. With dynamic physics, intuitive controls, and a constant stream of new challenges, the game keeps you on your toes as you dodge, shoot, and survive. How long can you last in the vast expanse of space?


Canvas Setup

  • The game takes up the entire browser window when opened separately (canvas.width = window.innerWidth), but here it is displayed within a div container with a specific size.
  • A 2D rendering context (c) is used for drawing.

Game Elements

  • Player: A triangular spaceship that can rotate and move forward with inertia. Its position and vertices are updated based on velocity and rotation.
  • Projectile: Circular bullets that shoot from the player's ship in the direction of its nose.
  • Asteroids: Circular shapes with random sizes, velocities, and spawn locations around the screen.

Controls

  • W: Thrust forward.
  • A/D: Rotate left/right.
  • S: Decelerate.
  • Space: Shoot projectiles.

Physics and Logic

  • Friction: Gradually reduces velocity when not thrusting.
  • Collision Detection:
    • circleTriangleCollision: Detects collision between the player (triangle) and asteroids.
    • circleCollision: Handles projectile-asteroid collision.
  • Game Loop: The animate function redraws the canvas and updates game elements every frame.

Asteroid Spawning

  • New asteroids appear every 1 seconds (setInterval).
  • They spawn off-screen and move toward the screen with random velocities.