Asteroids · gemma-4-26b-a4b-it

The objective is to create a single-file `index.html` containing a playable Asteroids-style game using procedural vector graphics on a canvas.

    *   Controls: Left/Right (rotate), Up (thrust), Space (fire).
    *   Physics: Ship has momentum, screen wrapping for ship and asteroids.
    *   Gameplay:
        *   Large asteroids split into smaller pieces when hit.
        *   Smallest pieces disappear when hit.
        *   Score increases on hits.
        *   Three lives.
        *   Collision (ship/asteroid) -> lose life, respawn ship, temporary invincibility.
        *   Waves: Clearing asteroids starts a new wave.
        *   Game Over: Losing all lives shows Game Over and Restart.
        *   Projectile lifetime is bounded.
        *   Prevent scrolling with keys.
    *   No external assets/CDNs.
    *   Single file `index.html` (CSS/JS inline).

    *   `canvas` for rendering.
    *   Game loop (`requestAnimationFrame`).
    *   Classes/Objects: `Ship`, `Asteroid`, `Bullet`, `Game`.
    *   Game State: `lives`, `score`, `gameState` (playing, gameover), `wave`.
    *   Input handling: Keyboard events.
    *   Collision detection: Circle-based (simplest and effective for Asteroids).
    *   Procedural graphics: Use canvas `beginPath`, `moveTo`, `lineTo` for the ship and asteroids.

    *   `Ship`: position, velocity, rotation, thrusting state, invincibility timer.
    *   `Asteroid`: position, velocity, size (large, medium, small), shape (randomly generated points).
    *   `Bullet`: position, velocity, life (frames/time).

    *   *HTML/CSS*: Basic structure, full-screen canvas, UI overlays (Score, Lives, Game Over).
    *   *JavaScript*:
        *   Setup canvas and context.
        *   Input listener (keydown/keyup) with `preventDefault` for arrows/space.
        *   `update()` function: handle movement, wrap-around, collisions, bullet lifetimes.
        *   `draw()` function: clear canvas, draw ship, asteroids, bullets, UI.
        *   Collision logic:
            *   Bullet vs Asteroid.
            *   Ship vs Asteroid.
        *   Asteroid splitting logic.
        *   Wave management.

    *   Ship: Triangle.
    *   Asteroids: Irregular polygons. Generate them once when created and store their vertices.

    *   *Wrapping*: If `x < 0` then `x = width`, etc.
    *   *Asteroid Shapes*: Array of offsets from center to create "jagged" look.
    *   *Invincibility*: A flickering effect or just a timer.

    *   Ship rotation: `rotation += rotationSpeed`.
    *   Ship thrust: `velocity.x += Math.cos(rotation) * thrust, velocity.y += Math.sin(rotation) * thrust`.
    *   Friction/Damping: Apply a small damping factor to velocity to prevent infinite acceleration if desired, though original Asteroids has almost none, just momentum. I'll use a very small damping or none at all.
    *   Asteroid Splitting:
        *   `Large` -> 2 `Medium`.
        *   `Medium` -> 2 `Small`.
        *   `Small` -> Remove.

    *   *Wait, "no external assets"*: I must generate all graphics using code.
    *   *Single file*: Everything in one `index.html`.

    *   *Canvas sizing*: Handle window resizing or fixed size. Let's go with a fixed-ish ratio or full window.
    *   *Asteroid generation*: Randomize number of vertices and offsets.

Let's write the code.

Okay, the game is written. Now I need to run it in the browser and verify the requirements.
The requirements are:
- Left/Right to rotate, Up to thrust, Space to fire.
- Ship momentum and screen wrap.
- Asteroids wrap.
- Asteroids split on hit (large -> medium -> small -> removed).
- Hits increase score.
- Three lives.
- Ship-asteroid collision removes life, respawns ship, briefly protects (invincibility).
- Clearing all asteroids starts another wave.
- Game Over and Restart on loss of lives.
- Bounded projectile lifetime.
- Prevent gameplay keys from scrolling.

I will use the `browser` tool to check it.
I'll first open the page and then interact with it.
I'll check:
1.  Initial state.
2.  Rotation/Thrust/Fire.
3.  Asteroid splitting/Score.
4.  Screen wrapping.
5.  Lives/Collision/Invincibility.
6.  Game Over/Restart.

Since I can only do a few actions, I'll try to do a representative sample.
I'll check if the ship moves and rotates.
I'll check if I can fire.
I'll check if asteroids split.

Let's start by just opening it and seeing if it renders.