Space Invaders · lfm-2.5-24b-a2b

We need to build a Space Invaders-style game in a single `index.html` file with inline CSS and JS. Let me plan the requirements:

1. **Canvas-based game**: HTML canvas, draw everything procedurally (no external assets).
2. **Controls**: Left/Right or A/D to move cannon along bottom; Space to fire upward.
3. **Alien grid**: Starts as a grid of aliens that moves horizontally, reverses and descends at edges. They also fire toward the player.
4. **Bunkers**: Destructible barriers between the cannon and aliens. Hits from either side remove bunker material persistently; shots can pass through resulting gaps.
5. **Lives**: Start with 3 lives. Enemy shots cost a life with brief protection from repeated damage. Aliens reaching the player zone or zero lives = Game Over. Clearing all aliens = win state.
6. **Restart**: Reset everything.

Let me design this step by step.

**Game State:**
- Player: position (x, y) at bottom, width/height
- Aliens: array of alien objects with x, y, alive status, maybe type
- Bunkers: array of bunker segments
- Bullets: player bullets going up, enemy bullets going down
- Score
- Lives
- Game state: playing, gameover, win

**Alien movement:**
- Move horizontally across screen
- When hitting edge, reverse direction and move down one row
- Speed increases as fewer aliens remain (classic behavior)

**Firing:**
- Player fires when pressing Space (maybe limited rate)
- Enemies fire randomly toward player

**Bunkers:**
- Draw as rectangular blocks with some shape (like classic Space Invaders bunkers made of small blocks)
- Hit by bullets removes parts of them
- Persistent damage - once removed, it's gone

**Lives & protection:**
- When hit by enemy bullet, lose a life
- Brief protection from repeated hits (maybe a "invincibility" flash for a short time after taking damage)

**Win/Loss:**
- Win: all aliens destroyed
- Lose: aliens reach bottom row or lives = 0

**Visuals:**
- Procedural graphics: draw aliens as simple shapes (triangles/rectangles), bunkers as pixelated blocks, stars background
- Score display, lives display

Let me write this out. I'll create a complete single-file HTML game.

Let me think about the structure:

```html
<!DOCTYPE html>
<html>
<head>
<style>...</style>
</head>
<body>
<canvas id="game"></canvas>
<script>
// Game code
</script>
</body>
</html>
```

**Canvas size**: Let's use something like 800x600.

**Player cannon**: A rectangle at the bottom center. Moves left/right with A/D or Left/Right keys. Width ~60px, height ~20px.

**Aliens**: Grid of rows and columns. Classic: 5 rows x 10 columns or similar. Each alien is a simple drawn shape (like a little alien made of lines/rectangles).

**Bunkers**: Several rectangular blocks placed between the player and aliens. In classic Space Invaders, bunkers were made of small blocks. Here, let's make them as a few rectangular segments (e.g., 3-4 bunkers, each made of several small blocks). Actually, to keep it simpler: bunkers are rectangular regions that can be damaged by bullet hits. When a bullet hits a bunker, we remove a portion of it (like a pixel or block area).

Let me simplify: Bunkers are drawn as a series of small blocks (like 4x4 grid of blocks per bunker). When a bullet hits, it removes the block at that position. The bunker persists with holes.

Actually, for simplicity and visual clarity:
- Bunkers are drawn as a set of filled rectangles (like the classic arch shape)
- We track which parts have been destroyed
- When a bullet hits a bunker region, we check if there's a block there; if so, destroy it

Let me define bunkers as arrays of small block positions within a bunker's bounding box.

**Bullets:**
- Player bullet: starts at player position, moves upward
- Enemy bullet: starts at random alien position, moves downward
- Both have lifetime (max frames they exist)

**Enemy firing:**
- Random alien fires at random intervals
- Bullet goes straight down

**Score:**
- +10 per alien killed
- Maybe bonus for bunkers? Not required.

**Lives:**
- Start with 3
- Enemy bullet hits player → lose life
- After taking damage, player has brief invincibility (flashing)

**Game loop:**
- Update positions
- Handle input
- Check collisions
- Render

Let me start coding. I'll write it carefully.

First, let me set up the canvas and basic structure.

```javascript
const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');
canvas.width = 800;
canvas.height = 600;

// Game constants
const PLAYER_SPEED = 5;
const BULLET_SPEED = 7;
const ENEMY_BULLET_SPEED = 3;
const ALIEN_ROWS = 5;
const ALIEN_COLS = 10;
const ALIEN_WIDTH = 30;
const ALIEN_HEIGHT = 20;
const ALIEN_GAP = 10;
const BUNKER_COUNT = 3;
```

Let me think about alien grid positioning:
- Canvas width 800, alien width 30, gap 10
- Total width needed: 10*30 + 9*10 = 300 + 90 = 390
- Starting x: (800 - 390)/2 ≈ 205

Alien starting y: around 80.

Bunkers: Place between y=150 and y=200 (between player at bottom and aliens).

Player: y = canvas.height - 40, x centered.

Let me code this now. I'll write the full file.

**Alien drawing**: I'll draw them as simple alien-like shapes using canvas paths - maybe a combination of rectangles and triangles to look like an alien.

**Bunker drawing**: Rectangular blocks arranged in an arch shape (like classic Space Invaders). Each bunker could be 5x4 blocks, with some blocks missing at top corners.

For damage: track bunker as an array of small block positions. When a bullet hits within a bunker's area, find the corresponding block and mark it as destroyed.

Let me define bunkers as objects:
```javascript
{
  x: 100, y: 160,
  width: 120, height: 40,
  blocks: [[true,true,...], ...] // 2D array of booleans
}
```

When a bullet hits the bunker area, check if there's a block at that relative position; if yes, set it to false.

**Collision detection**:
- Player bullet vs alien: if bullet y <= alien.y + alien.height/2 and bullet x within alien.x + alien.width/2, kill alien
- Player bullet vs enemy bullet: no collision needed
- Enemy bullet vs player: if bullet y >= player.y - player.height/2, hit player
- Bullet vs bunker: if bullet hits bunker block area, destroy block

**Enemy firing logic**:
- Every N frames (decreasing as aliens die), a random alive alien fires
- Bullet goes straight down

**Movement**:
- Player: left/right arrow or A/D
- Boundary checks

**Game states**:
- 'playing'
- 'gameover'
- 'win'

**Restart button**: Show on game over / win screens.

Let me write the complete code now. I'll aim for a clean, working implementation.

Let me draft the JavaScript:

```javascript
(function() {
  'use strict';
  
  const canvas = document.getElementById('game');
  const ctx = canvas.getContext('2d');
  canvas.width = 800;
  canvas.height = 600;
  
  // Colors
  const COLORS = {
    player: '#00ff00',
    alien: '#ff0000',
    bunker: '#8b4513',
    bullet: '#ffff00',
    enemyBullet: '#ff4444',
    text: '#ffffff',
    bg: '#000011'
  };
  
  // Game state
  let gameState = 'playing'; // 'playing', 'gameover', 'win'
  let score = 0;
  let lives = 3;
  let frameCount = 0;
  
  // Player
  const player = {
    x: 380,
    y: 550,
    width: 60,
    height: 20,
    speed: 5,
    cooldown: 0,
    lastShotFrame: -100 // prevent rapid firing
  };
  
  // Aliens
  const ALIEN_ROWS = 5;
  const ALIEN_COLS = 10;
  const ALIEN_W = 28;
  const ALIEN_H = 20;
  const ALIEN_GAP_X = 12;
  const ALIEN_GAP_Y = 10;
  
  let aliens = [];
  let alienDirection = 1; // 1 = right, -1 = left
  let alienSpeed = 0.5;
  let alienDrop = 0;
  
  // Bunkers
  const BUNKER_W = 100;
  const BUNKER_H = 30;
  const BUNKER_Y = 170;
  let bunkers = [];
  
  // Bullets
  let playerBullets = [];
  let enemyBullets = [];
  const MAX_PLAYER_BULLETS = 5;
  const MAX_ENEMY_BULLETS = 5;
  
  // Invincibility after hit
  let invincibleTimer = 0;
  
  // Stars background
  const stars = [];
  for (let i = 0; i < 50; i++) {
    stars.push({
      x: Math.random() * canvas.width,
      y: Math.random() * canvas.height,
      size: Math.random() * 2 + 1,
      speed: Math.random() * 0.5 + 0.1
    });
  }
  
  // Input handling
  const keys = {};
  
  document.addEventListener('keydown', function(e) {
    keys[e.key] = true;
    if (e.key === ' ' || e.key === 'Space') {
      e.preventDefault();
    }
  });
  
  document.addEventListener('keyup', function(e) {
    keys[e.key] = false;
  });
  
  // Restart
  function restart() {
    score = 0;
    lives = 3;
    frameCount = 0;
    player.x = 380;
    player.cooldown = 0;
    player.lastShotFrame = -100;
    
    // Rebuild aliens
    aliens = [];
    for (let row = 0; row < ALIEN_ROWS; row++) {
      for (let col = 0; col < ALIEN_COLS; col++) {
        aliens.push({
          x: 60 + col * (ALIEN_W + ALIEN_GAP_X),
          y: 80 + row * (ALIEN_H + ALIEN_GAP_Y),
          alive: true,
          row: row,
          col: col
        });
      }
    }
    
    // Rebuild bunkers
    bunkers = [];
    const bunkerSpacing = 180;
    const startX = 100;
    for (let i = 0; i < 3; i++) {
      bunkers.push({
        x: startX + i * bunkerSpacing,
        y: BUNKER_Y,
        width: BUNKER_W,
        height: BUNKER_H,
        blocks: createBunkerBlocks()
      });
    }
    
    playerBullets = [];
    enemyBullets = [];
  }
  
  function createBunkerBlocks() {
    // Create an arch shape: full width with corners cut out
    const cols = 6;
    const rows = 4;
    const blockW = 10;
    const blockH = 10;
    const blocks = [];
    for (let r = 0; r < rows; r++) {
      for (let c = 0; c < cols; c++) {
        // Arch cutout: top corners
        if (r === 0 && (c === 0 || c === cols - 1)) continue;
        if (r === 0 && c === Math.floor(cols/2)) continue; // middle top
        blocks.push({
          x: 0,
          y: 0,
          w: blockW,
          h: blockH,
          alive: true
        });
      }
    }
    return blocks;
  }
  
  // Collision helpers
  function rectOverlap(a, b) {
    return a.x < b.x + b.width &&
           a.x + a.width > b.x &&
           a.y < b.y + b.height &&
           a.y + a.height > b.y;
  }
  
  function bulletHitTarget(bullet, targetArray, isEnemyBullet) {
    // Check against aliens
    for (const alien of aliens) {
      if (!alien.alive) continue;
      if (rectOverlap(bullet, alien)) {
        alien.alive = false;
        if (isEnemyBullet) {
          lives--;
          invincibleTimer = 120; // 2 seconds at 60fps
          if (lives <= 0) {
            gameState = 'gameover';
          }
        } else {
          score += 10;
        }
        return true;
      }
    }
    
    // Check against bunkers
    if (bullet.isEnemyBullet === false) { // player bullet
      for (const bunker of bunkers) {
        if (bullet.x >= bunker.x && bullet.x <= bunker.x + bunker.width &&
            bullet.y >= bunker.y && bullet.y <= bunker.y + bunker.height) {
          // Find block
          const relX = Math.floor((bullet.x - bunker.x) / 10);
          const relY = Math.floor((bullet.y - bunker.y) / 10);
          for (const block of bunker.blocks) {
            if (block.alive &&
                block.x === relX * 10 && block.y === relY * 10) {
              block.alive = false;
              break;
            }
          }
          return true;
        }
      }
    } else {
      // Enemy bullet hitting bunkers
      for (const bunker of bunkers) {
        if (bullet.x >= bunker.x && bullet.x <= bunker.x + bunker.width &&
            bullet.y >= bunker.y && bullet.y <= bunker.y + bunker.height) {
          const relX = Math.floor((bullet.x - bunker.x) / 10);
          const relY = Math.floor((bullet.y - bunker.y) / 10);
          for (const block of bunker.blocks) {
            if (block.alive &&
                block.x === relX * 10 && block.y === relY * 10) {
              block.alive = false;
              break;
            }
          }
          return true;
        }
      }
    }
    
    return false;
  }
  
  // Movement
  function updatePlayer() {
    if (keys['ArrowLeft'] || keys['a'] || keys['A']) {
      player.x -= player.speed;
    }
    if (keys['ArrowRight'] || keys['d'] || keys['D']) {
      player.x += player.speed;
    }
    // Clamp
    player.x = Math.max(player.width/2, Math.min(canvas.width - player.width/2, player.x));
  }
  
  function updateAliens() {
    // Move horizontally
    let hitEdge = false;
    for (const alien of aliens) {
      if (!alien.alive) continue;
      alien.x += alienDirection * alienSpeed * 2;
      if (alien.x <= 0 || alien.x + ALIEN_W >= canvas.width) {
        hitEdge = true;
      }
    }
    
    if (hitEdge) {
      alienDirection *= -1;
      for (const alien of aliens) {
        if (!alien.alive) continue;
        alien.y += 15;
      }
    }
    
    // Speed up as aliens decrease
    const aliveCount = aliens.filter(a => a.alive).length;
    const totalCount = ALIEN_ROWS * ALIEN_COLS;
    alienSpeed = 0.3 + (totalCount - aliveCount) * 0.05;
    
    // Enemy shooting
    if (frameCount % Math.max(2, Math.floor(60 - aliveCount * 2)) === 0) {
      // Pick a random alive alien
      const aliveAliens = aliens.filter(a => a.alive);
      if (aliveAliens.length > 0) {
        const shooter = aliveAliens[Math.floor(Math.random() * aliveAliens.length)];
        enemyBullets.push({
          x: shooter.x + ALIEN_W / 2,
          y: shooter.y + ALIEN_H,
          speed: ENEMY_BULLET_SPEED
        });
      }
    }
  }
  
  function updateBullets() {
    // Player bullets
    for (let i = playerBullets.length - 1; i >= 0; i--) {
      const b = playerBullets[i];
      b.y -= BULLET_SPEED;
      if (b.y < 0) {
        playerBullets.splice(i, 1);
      }
    }
    
    // Enemy bullets
    for (let i = enemyBullets.length - 1; i >= 0; i--) {
      const b = enemyBullets[i];
      b.y += b.speed;
      if (b.y > canvas.height) {
        enemyBullets.splice(i, 1);
      }
    }
  }
  
  // Rendering
  function drawStars() {
    for (const star of stars) {
      ctx.fillStyle = '#ffffff';
      ctx.globalAlpha = 0.5;
      ctx.fillRect(star.x, star.y, star.size, star.size);
    }
    ctx.globalAlpha = 1;
  }
  
  function drawPlayer() {
    // Flash when invincible
    if (invincibleTimer > 0 && Math.floor(invincibleTimer / 5) % 2 === 0) {
      return; // skip drawing (invisible)
    }
    ctx.fillStyle = COLORS.player;
    // Cannon shape: rectangle with a base
    ctx.fillRect(player.x - player.width/2, player.y, player.width, player.height);
    // Barrel
    ctx.fillRect(player.x - 4, player.y - player.height, 8, player.height + 4);
  }
  
  function drawAliens() {
    for (const alien of aliens) {
      if (!alien.alive) continue;
      ctx.fillStyle = COLORS.alien;
      // Draw a simple alien shape
      const cx = alien.x + ALIEN_W / 2;
      const cy = alien.y + ALIEN_H / 2;
      // Body
      ctx.fillRect(alien.x + 5, alien.y + 5, ALIEN_W - 10, ALIEN_H - 10);
      // Eyes
      ctx.fillStyle = '#000000';
      ctx.fillRect(alien.x + 8, alien.y + 8, 6, 6);
      ctx.fillRect(alien.x + ALIEN_W - 14, alien.y + 8, 6, 6);
      // Mouth
      ctx.fillStyle = '#000000';
      ctx.fillRect(alien.x + 10, alien.y + ALIEN_H - 6, ALIEN_W - 20, 4);
    }
  }
  
  function drawBunkers() {
    ctx.fillStyle = COLORS.bunker;
    for (const bunker of bunkers) {
      for (const block of bunker.blocks) {
        if (block.alive) {
          ctx.fillRect(bunker.x + block.x, bunker.y + block.y, block.w, block.h);
        }
      }
    }
  }
  
  function drawBullets() {
    for (const b of playerBullets) {
      ctx.fillStyle = COLORS.bullet;
      ctx.fillRect(b.x - 2, b.y - 6, 4, 12);
    }
    for (const b of enemyBullets) {
      ctx.fillStyle = COLORS.enemyBullet;
      ctx.fillRect(b.x - 2, b.y, 4, 10);
    }
  }
  
  function drawUI() {
    ctx.fillStyle = '#ffffff';
    ctx.font = '20px monospace';
    ctx.fillText('SCORE: ' + score, 10, 25);
    ctx.fillText('LIVES: ' + lives, canvas.width - 100, 25);
    ctx.fillText('UP: ARROW or A/D to move | SPACE to fire', 10, 45);
  }
  
  function drawGameOver() {
    ctx.fillStyle = 'rgba(0,0,0,0.7)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = '#ffffff';
    ctx.font = '48px monospace';
    ctx.textAlign = 'center';
    ctx.fillText('GAME OVER', canvas.width/2, canvas.height/2 - 20);
    ctx.font = '20px monospace';
    ctx.fillText('Score: ' + score, canvas.width/2, canvas.height/2 + 20);
    ctx.fillText('Click to restart', canvas.width/2, canvas.height/2 + 50);
  }
  
  function drawWin() {
    ctx.fillStyle = 'rgba(0,0,0,0.7)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = '#00ff00';
    ctx.font = '48px monospace';
    ctx.textAlign = 'center';
    ctx.fillText('YOU WIN!', canvas.width/2, canvas.height/2 - 20);
    ctx.font = '20px monospace';
    ctx.fillText('Score: ' + score, canvas.width/2, canvas.height/2 + 20);
    ctx.fillText('Click to restart', canvas.width/2, canvas.height/2 + 50);
  }
  
  // Main loop
  function gameLoop() {
    frameCount++;
    
    if (gameState === 'playing') {
      // Update
      updatePlayer();
      updateAliens();
      updateBullets();
      
      // Collisions
      for (const b of playerBullets) {
        if (bulletHitTarget(b, aliens, false)) {
          playerBullets.splice(playerBullets.indexOf(b), 1);
        }
      }
      for (const b of enemyBullets) {
        if (bulletHitTarget(b, [], true)) {
          enemyBullets.splice(enemyBullets.indexOf(b), 1);
        }
      }
      
      // Invincibility timer
      if (invincibleTimer > 0) invincibleTimer--;
      
      // Check win
      if (aliens.filter(a => a.alive).length === 0) {
        gameState = 'win';
      }
      
      // Check loss
      if (lives <= 0) {
        gameState = 'gameover';
      }
    }
    
    // Render
    ctx.fillStyle = COLORS.bg;
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    drawStars();
    drawBunkers();
    drawAliens();
    drawPlayer();
    drawBullets();
    drawUI();
    
    if (gameState !== 'playing') {
      if (gameState === 'gameover') drawGameOver();
      if (gameState === 'win') drawWin();
    }
    
    requestAnimationFrame(gameLoop);
  }
  
  // Initial setup
  restart();
  
  // Restart on click
  canvas.addEventListener('click', restart);
  
  gameLoop();
})();
```

Wait, I need to double-check a few things:

1. The bunker collision detection: I'm checking if bullet overlaps bunker rect, then finding the block. But I should only do this if the bullet is actually hitting the bunker area. The current logic looks okay.

2. The `bulletHitTarget` function signature: I pass `aliens` and `isEnemyBullet`. For player bullets, `isEnemyBullet` is false. For enemy bullets, it's true. The function checks both aliens and bunkers. For bunkers, I check `bullet.isEnemyBullet === false` — but I'm not setting that property on the bullet object. Let me fix: pass a flag or just check based on bullet source. Actually, I can simplify: the function takes `bullet` and checks whether it's a player bullet (going up) or enemy bullet (going down). Player bullets have negative y velocity, enemy have positive. Or I can add a property.

Let me restructure: pass `bullet` and determine type by its y velocity sign. Player bullets go up (y decreases), enemy go down (y increases).

Actually, in my code I have `bullet.isEnemyBullet` which isn't set. Let me change the approach: in `bulletHitTarget`, check the bullet's y velocity to determine if it's player or enemy.

Let me revise:

```javascript
function bulletHitTarget(bullet, targetArray) {
  // Check against aliens
  for (const alien of aliens) {
    if (!alien.alive) continue;
    if (rectOverlap(bullet, alien)) {
      alien.alive = false;
      if (bullet.y < 0) { // player bullet
        score += 10;
      } else { // enemy bullet
        lives--;
        invincibleTimer = 120;
        if (lives <= 0) gameState = 'gameover';
      }
      return true;
    }
  }
  
  // Check against bunkers
  for (const bunker of bunkers) {
    if (bullet.x >= bunker.x && bullet.x <= bunker.x + bunker.width &&
        bullet.y >= bunker.y && bullet.y <= bunker.y + bunker.height) {
      const relX = Math.floor((bullet.x - bunker.x) / 10);
      const relY = Math.floor((bullet.y - bunker.y) / 10);
      for (const block of bunker.blocks) {
        if (block.alive &&
            block.x === relX * 10 && block.y === relY * 10) {
          block.alive = false;
          break;
        }
      }
      return true;
    }
  }
  return false;
}
```

And call it without the extra parameter: `bulletHitTarget(b, aliens)` and `bulletHitTarget(b, null)`.

3. The alien movement: currently I'm moving all aliens together. That's correct for classic behavior.

4. Edge detection: I'm checking if any alive alien hits the edge. That works.

5. Bunkers placement: I'm placing them at y=170, which is between the player (y=550) and aliens (y=80-ish). Good.

6. The player cannon: I'm drawing it as a rectangle with a barrel. Good.

7. Controls: ArrowLeft/Right or A/D. I'm checking both.

8. Restart: clicking on the canvas restarts. Good.

Let me also add a slight delay before enemy bullets fire. The modulo condition `frameCount % Math.max(2, Math.floor(60 - aliveCount * 2)) === 0` — as aliens die, the interval gets smaller (faster firing). At 5 aliens left: 60-10=50, floor(50)=50, interval 50. At 1 alien: 60-2=58. Hmm, this makes it slower as aliens die, which is opposite of classic behavior. Classic: enemies fire more frequently as fewer remain. Let me flip it: `Math.max(2, Math.floor(aliveCount * 2))` or something. Actually, let me use a simpler approach: fire every N frames where N decreases as aliens die.

```javascript
const fireInterval = Math.max(2, Math.floor(60 - aliveCount * 1.5));
if (frameCount % fireInterval === 0) { ... }
```

At 25 aliens: interval = max(2, 60-37.5) = 22.5 → 22
At 5 aliens: interval = max(2, 60-7.5) = 52.5 → 52

That's still slower as aliens die. Let me do the opposite: interval = Math.max(2, Math.floor(aliveCount * 1.5)). At 25: 37. At 5: 7.5→7. Faster as fewer remain. Good.

Actually, let me keep it simple: `fireInterval = Math.max(2, 60 - aliveCount * 1.5)`. Wait, that's what I had. Let me recalculate:
- 25 alive: 60 - 37.5 = 22.5 → 22
- 5 alive: 60 - 7.5 = 52.5 → 52

Hmm, that's still decreasing speed. I want increasing speed. So `fireInterval = Math.max(2, Math.floor(aliveCount * 1.5))`:
- 25: 37
- 5: 7

Yes, faster as aliens die. Good.

But wait, I also need to make sure enemy bullets don't overwhelm the player. With max 5 enemy bullets on screen, that's fine.

9. Enemy bullet speed: 3 px/frame. At 800px height, it takes about 200 frames (~3.3 seconds) to cross. Reasonable.

10. Player bullet speed: 7 px/frame. Takes about 80 frames (~1.3 seconds) to cross. Good.

11. Collision with bunkers: I need to make sure the bullet actually hits the bunker block, not just the bunker rect. My current code finds the block at the bullet's position and destroys it. If the bullet passes through a hole in the bunker, it won't hit anything. Good.

12. The bunker blocks: I'm creating them with a gap pattern. Let me verify the arch shape:
- 6 columns, 4 rows
- Top corners missing: (0,0) and (5,0)
- Middle top: (2,0) also missing? In classic Space Invaders, the top row has a gap in the middle too. Let me keep it simple: just missing top corners.

Actually, let me make the bunkers more visible. I'll use a slightly larger block size or different colors.

13. The game loop: I'm using `requestAnimationFrame`. Good.

14. One issue: when I call `bulletHitTarget` for player bullets, I pass `aliens` and it checks bunkers too. For enemy bullets, I pass `null` or an empty array. The function will iterate over `aliens` (which is truthy) and then over `bunkers`. For enemy bullets, I don't want to check aliens (they're above the player, bullets come from below). Actually, enemy bullets come from above and could hit aliens? No, enemy bullets are fired downward from aliens, so they start inside alien territory. They shouldn't hit other aliens. But to be safe, I'll pass `null` for the target array for enemy bullets.

Let me adjust the function signature to accept an optional target array:

```javascript
function bulletHitTarget(bullet, targetArray) {
  // Check against aliens if targetArray provided
  if (targetArray) {
    for (const alien of targetArray) {
      if (!alien.alive) continue;
      if (rectOverlap(bullet, alien)) {
        alien.alive = false;
        if (bullet.y < 0) { // going up = player bullet
          score += 10;
        } else { // going down = enemy bullet
          lives--;
          invincibleTimer = 120;
          if (lives <= 0) gameState = 'gameover';
        }
        return true;
      }
    }
  }
  
  // Check against bunkers
  ...
}
```

This is cleaner.

Now, let me also think about the visual quality. I want it to look decent. Let me add some details:
- Stars in background
- Maybe a ground line for the player
- Alien variety: different colors per row?

Let me keep it simple but readable.

Also, I should handle the case where the player holds Space - I might want to allow continuous firing with a cooldown. I already have `player.cooldown` but I'm not using it. Let me implement a simple cooldown: after firing, set `player.cooldown = 15` frames, and only fire if `player.cooldown <= 0`.

Let me refine the code and write it to the file.

Actually, let me reconsider the overall structure. I'll write the complete index.html now.

One more thing: the requirement says "verify: test movement and firing during the opening formation. Check alien motion and inspect a shot hitting a bunker or alien for visible damage or score feedback."

So I need to make sure:
- Aliens move horizontally, reverse at edges, descend
- Shots can hit aliens (score increases)
- Shots can hit bunkers (damage visible)
- Controls work

Let me finalize the code. I'll write it carefully.

Let me also add a ground line for the player to know where to stand.

Here's my refined plan for the file:

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Space Invaders</title>
<style>
  body { margin: 0; background: #000; display: flex; justify-content: center; align-items: center; height: 100vh; overflow: hidden; }
  canvas { border: 2px solid #333; background: #000; }
</style>
</head>
<body>
<canvas id="game"></canvas>
<script>
(function() {
  'use strict';
  
  // ... game code ...
})();
</script>
</body>
</html>
```

Let me write the complete code now. I'll be careful with the JavaScript.

Actually, I realize I should double-check the bunker collision. The bullet is a point (or small rect). I'm checking if the bullet's x,y falls within the bunker's rect, then finding the corresponding block. This should work.

But there's a subtle issue: if the bullet passes through a gap in the bunker (where blocks are missing), it won't hit anything. That's the desired behavior - "shots can subsequently pass through the resulting gaps."

Let me also make sure the bunkers are positioned correctly. The player is at y=550 (bottom). Bunkers at y=170. Aliens at y=80. So there's a good gap.

Now, let me write the final code. I'll make it robust.

One more consideration: the alien grid. 5 rows x 10 columns:
- x positions: 60, 72+12=84? No: 60 + col*(28+12) = 60 + col*40
  - col 0: 60
  - col 1: 100
  - ...
  - col 9: 60 + 360 = 420
  - Total width: 420 + 28 = 448, centered in 800: starts at (800-448)/2 = 176
  - Hmm, let me recalculate. Actually, I want the grid centered. Let me compute:
    - Total width = cols * (w + gap) - gap = 10 * 40 - 12 = 388
    - Start x = (800 - 388) / 2 = 206
    - So: x = 206 + col * 40
    - col 0: 206, col 9: 206 + 360 = 566
    - Aliens fit within 206 to 566+28 = 594, leaving space at edges.

- y positions: row 0 at 80, then 80 + 20 + 10 = 110, etc.
  - Row 0: 80
  - Row 1: 110
  - Row 2: 140
  - Row 3: 170
  - Row 4: 200

Good.

Now, let me write the complete file. I'll be thorough.

Let me also add a simple ground indicator for the player.

Here's the final code structure:

```javascript
(function() {
  'use strict';
  
  const canvas = document.getElementById('game');
  const ctx = canvas.getContext('2d');
  canvas.width = 800;
  canvas.height = 600;
  
  // --- Constants ---
  const PLAYER_SPEED = 5;
  const BULLET_SPEED = 7;
  const ENEMY_BULLET_SPEED = 3;
  const ALIEN_ROWS = 5;
  const ALIEN_COLS = 10;
  const ALIEN_W = 28;
  const ALIEN_H = 20;
  const ALIEN_GAP_X = 12;
  const ALIEN_GAP_Y = 10;
  const PLAYER_W

We need to build a Space Invaders-style game in a single HTML file with inline CSS and JS. Let me plan the requirements:

1. Canvas-based game
2. Left/Right or A/D to move cannon along bottom, Space to fire upward
3. Controls displayed, cannon stays within playfield
4. Alien grid that moves horizontally, reverses and descends at edges, fires toward player
5. Player shots remove hit aliens and increase score
6. Destructible bunkers between cannon and aliens; hits from either side remove material persistently; shots can pass through gaps
7. Three lives; enemy shots cost a life with brief protection from repeated damage; aliens reaching player zone or zero lives = Game Over; clearing aliens = win state
8. Restart to restore everything; bound projectile lifetime and fire rate

Let me design this:

**Game State:**
- Cannon: position (x, y), width, height
- Aliens: grid of rows/columns, each with position, alive/dead status
- Bunkers: array of rectangles (x, y, width, height)
- Player bullets: array of projectiles with position, velocity
- Enemy bullets: array of projectiles
- Score, lives
- Game state: playing, gameover, win

**Movement:**
- Left/Right arrow keys or A/D to move
- Space to fire
- Cannon constrained within canvas bounds

**Alien movement:**
- Move horizontally across screen
- When hitting edge, reverse direction and move down one row
- Speed increases as fewer aliens remain? Classic behavior - speed up as aliens are destroyed. I'll implement a simple version.

**Firing:**
- Player bullets go upward
- Enemy bullets go downward from random aliens
- Bound projectile lifetime (e.g., 2 seconds / 60 frames)
- Fire rate limit (cooldown)

**Bunkers:**
- Array of rectangular blocks
- When hit by any bullet (player or enemy), remove some material. "Hits from either side remove bunker material persistently" - so bunkers have health. Each hit removes some portion.
- Shots can pass through resulting gaps.

**Lives:**
- Start with 3
- Enemy shots cost 1 life
- Brief protection from repeated damage (maybe a "shield" that absorbs one extra hit?)

**Win/Loss:**
- Win: all aliens cleared
- Loss: aliens reach bottom (player zone) or lives reach 0

**Restart:** Reset everything

Let me write this. I'll use a canvas element, draw everything procedurally.

Let me think about the layout:
- Canvas: maybe 800x600
- Bottom row: cannon (a rectangle)
- Above that: alien grid (say 5 rows x 8 columns)
- Bunkers placed between cannon and aliens
- Top area: empty

Let me code this step by step.

**Canvas setup:**
- Width: 800, Height: 600
- Background: dark space background with stars maybe

**Alien grid:**
- 5 rows, 8 columns
- Spacing: maybe 50px horizontal, 40px vertical
- Alien shape: simple pixel art drawn on canvas (or just colored rectangles with different colors per row)

I'll draw aliens as small pixel-art-like shapes using filled rectangles. Or simpler: colored rectangles with eyes.

**Bunkers:**
- 4-6 bunkers made of small blocks (like classic Space Invaders). Each bunker is a rectangle composed of smaller segments. When hit, remove some segments.

For simplicity, I'll make bunkers as a few rectangles (e.g., 3-4 bunkers) that take damage. Each bunker has a health value. When hit, reduce health; if health <= 0, remove it. Shots passing through gaps: if a bullet's path intersects a bunker segment that still exists, it damages the bunker.

Actually, let me simplify: bunkers are drawn as a few rectangular blocks. Each bunker has health (e.g., 2-3). When a bullet (player or enemy) hits a bunker, reduce health. If health reaches 0, remove the bunker block. The visual shows missing chunks.

**Bullets:**
- Player bullet: starts at cannon tip, moves up at speed
- Enemy bullet: starts at a random alien's position, moves down

**Projectile lifetime:** e.g., 90 frames (1.5 seconds at 60fps)

**Fire rate:** cooldown of ~15 frames between shots

**Enemy firing:** every few frames, a random alive alien fires a bullet downward

**Game loop:**
- Update positions
- Check collisions (bullet vs alien, bullet vs bunker, bullet vs player)
- Check win/loss conditions
- Render

Let me write the code now.

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Space Invaders</title>
<style>
  body { margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background: #000; }
  canvas { border: 2px solid #333; background: #000; }
  #info { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); color: #fff; font-family: monospace; font-size: 16px; }
</style>
</head>
<body>
<canvas id="game" width="800" height="600"></canvas>
<div id="info">Use ← → or A D to move | Space to fire | Restart: R</div>
<script>
// ... game code ...
</script>
</body>
</html>
```

Now let me write the JavaScript game logic.

**Constants:**
- CANVAS_W = 800, CANVAS_H = 600
- ALIEN_ROWS = 5, ALIEN_COLS = 8
- ALIEN_W = 30, ALIEN_H = 24
- SPACING_X = 55, SPACING_Y = 40
- CANNON_Y = 540 (bottom)
- CANNON_W = 120, CANNON_H = 20

**Alien colors:** different per row

**Bunkers:** Let me place 4 bunkers between cannon and aliens. Positions: x = 150, 300, 450, 600; y around 300-330.

**Lives:** 3
**Score:** start at 0

**Game states:** 'playing', 'gameover', 'win'

Let me structure the code:

```javascript
const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');

let gameState = 'playing'; // 'playing' | 'gameover' | 'win'
let score = 0;
let lives = 3;
let level = 1;

// Player
let player = {
  x: 340,
  y: CANNON_Y - CANNON_H - 10,
  width: CANNON_W,
  height: CANNON_H
};

// Aliens
let aliens = [];
let alienDirection = 1; // 1 = right, -1 = left
let alienSpeed = 0.5;
let alienMoveTimer = 0;

// Bunkers
let bunkers = [];

// Bullets
let playerBullets = [];
let enemyBullets = [];
const MAX_PLAYER_BULLETS = 5;
const BULLET_LIFETIME = 90; // frames
const FIRE_COOLDOWN = 15;

// Enemy fire timer
let enemyFireTimer = 0;

// Stars background
let stars = [];

function initAliens() {
  aliens = [];
  const startX = 60;
  const startY = 80;
  for (let row = 0; row < ALIEN_ROWS; row++) {
    for (let col = 0; col < ALIEN_COLS; col++) {
      aliens.push({
        x: startX + col * SPACING_X,
        y: startY + row * SPACING_Y,
        w: ALIEN_W,
        h: ALIEN_H,
        alive: true,
        row: row,
        col: col,
        color: ['#ff0000', '#ff9900', '#ffff00', '#00ff00', '#0000ff'][row % 5]
      });
    }
  }
}

function initBunkers() {
  bunkers = [
    { x: 140, y: 320, w: 50, h: 30, health: 2 },
    { x: 260, y: 320, w: 50, h: 30, health: 2 },
    { x: 380, y: 320, w: 50, h: 30, health: 2 },
    { x: 500, y: 320, w: 50, h: 30, health: 2 }
  ];
}

function resetGame() {
  score = 0;
  lives = 3;
  player.x = 340;
  player.y = CANNON_Y - CANNON_H - 10;
  initAliens();
  initBunkers();
  playerBullets = [];
  enemyBullets = [];
  alienDirection = 1;
  alienSpeed = 0.5;
  enemyFireTimer = 0;
  gameState = 'playing';
}

// ... etc
```

**Alien movement:**
In the update loop, increment alien position based on direction. When an alien hits the edge, reverse direction and move down.

Actually, classic behavior: the whole formation moves. All alive aliens shift together. When any alien hits the edge, reverse direction and move down one step.

```javascript
function updateAliens() {
  let hitEdge = false;
  for (let a of aliens) {
    if (!a.alive) continue;
    let newX = a.x + alienDirection * alienSpeed * (ALIEN_ROWS * SPACING_X + ALIEN_W);
    // Actually simpler: move the whole formation
  }
}
```

Let me do it properly: track formation offset. Or just move each alien individually.

Simpler approach: maintain `alienOffsetX` and `alienOffsetY`. Each frame, move the offset. When any alive alien would go out of bounds, reverse direction and decrement Y offset.

```javascript
let alienOffsetX = 0;
let alienOffsetY = 0;

function updateAliens() {
  alienMoveTimer++;
  if (alienMoveTimer >= 30) { // move every 30 frames
    alienMoveTimer = 0;
    let hitEdge = false;
    for (let a of aliens) {
      if (!a.alive) continue;
      let ax = a.x + alienOffsetX;
      let ay = a.y + alienOffsetY;
      if (ax + a.w > CANVAS_W || ax < 0) {
        hitEdge = true;
      }
    }
    if (hitEdge) {
      alienDirection *= -1;
      for (let a of aliens) {
        if (a.alive) {
          a.y += 20; // descend
        }
      }
    } else {
      for (let a of aliens) {
        if (a.alive) {
          a.x += alienDirection * alienSpeed * alienOffsetX ? alienDirection : alienSpeed;
        }
      }
    }
  }
}
```

Hmm, this is getting complicated. Let me simplify: each alien has its own position. Move all alive aliens by `alienDirection * alienSpeed`. Check if any alive alien is out of bounds. If so, reverse direction and move down.

```javascript
function updateAliens() {
  let hitEdge = false;
  for (let a of aliens) {
    if (!a.alive) continue;
    let ax = a.x + alienOffsetX;
    if (ax + a.w > CANVAS_W || ax < 0) {
      hitEdge = true;
      break;
    }
  }
  
  if (hitEdge) {
    alienDirection *= -1;
    for (let a of aliens) {
      if (a.alive) {
        a.y += 20;
      }
    }
  } else {
    for (let a of aliens) {
      if (a.alive) {
        a.x += alienDirection * alienSpeed;
      }
    }
  }
}
```

But then the offset isn't needed. Each alien's x/y is absolute. This works.

**Collision detection:**
- Player bullet vs alien: if bullet.x + bullet.w > alien.x && bullet.x < alien.x + alien.w, etc. Simple AABB.
- Bullet vs bunker: check if bullet overlaps bunker rect. If so, reduce bunker health. If health <= 0, remove bunker.
- Enemy bullet vs player: if bullet hits player rect, lose a life.

**Enemy firing:**
Every few frames (e.g., every 60 frames when there are aliens alive), pick a random alive alien and fire a bullet downward.

**Player firing:**
On Space press, if not too many bullets on screen and cooldown elapsed, create a bullet at the cannon tip going up.

**Damage to bunkers from either side:** Since bunkers are static blocks, any bullet (player or enemy) that overlaps a bunker reduces its health. That's it.

**Lives and enemy fire:**
- Enemy bullets cost 1 life
- "Brief protection from repeated damage" - maybe after taking a hit, the player gets a brief invincibility (e.g., next enemy bullet does no damage)? Or the player bullet has a chance to bounce? Let me implement: after losing a life, the player is briefly invincible (e.g., 1 second) where enemy bullets don't kill. I'll set a `invincibleTimer` that counts down.

**Win condition:** All aliens dead (alive count is 0).

**Loss condition:** 
- Any alien reaches the player's y-level (y >= CANNON_Y - CANNON_H - 10) -> game over
- Lives == 0 -> game over

**Restart:** Press R or click button.

**Display:**
- Show score, lives, and controls info
- Show game over / win overlay

Let me also add a starfield background for visual flair.

Now let me write the complete code. I'll be careful about the structure.

Let me think about the exact implementation details:

**Canvas size:** 800x600

**Alien grid:**
- 5 rows, 8 columns
- Row 0: red (#ff0000)
- Row 1: orange (#ff9900)
- Row 2: yellow (#ffff00)
- Row 3: green (#00ff00)
- Row 4: blue (#0000ff)
- Colors cycle per row

**Bunkers:**
- 4 bunkers, each 50x30 pixels, health 2
- Positioned at y=300, x = 130, 270, 410, 550

**Player cannon:**
- Width 120, height 20
- At y=560 (near bottom)
- Moves left/right within [20, 680]

**Bullets:**
- Player bullet: width 4, height 12, speed 8, color white or cyan
- Enemy bullet: width 4, height 10, speed 4, color red

**Projectile lifetime:** 90 frames (~1.5 seconds)

**Fire rate:** cooldown 15 frames

**Enemy fire interval:** every 45-60 frames

**Invincibility after hit:** 60 frames (1 second)

Let me write the full code now.

Actually, let me reconsider the alien movement. In classic Space Invaders, the whole formation moves as a block. When it hits the edge, it drops down and reverses. I'll implement it that way.

Also, I need to handle the case where aliens shoot. Each frame, with some probability (or timer), an alive alien fires an enemy bullet. The bullet goes down from that alien's position.

Let me write the complete HTML file.

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Space Invaders</title>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    background: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    font-family: monospace;
  }
  canvas {
    border: 2px solid #444;
    background: #000;
  }
  #hud {
    color: #fff;
    font-size: 18px;
    margin-top: 10px;
    text-align: center;
  }
  #overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.7);
  }
  #overlay h1 { color: #fff; font-size: 36px; }
  #overlay p { color: #fff; font-size: 20px; margin: 10px; }
  #restartBtn {
    margin-top: 15px;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    background: #444;
    color: #fff;
    border: none;
  }
</style>
</head>
<body>
<canvas id="game" width="800" height="600"></canvas>
<div id="hud">
  Score: <span id="score">0</span> &nbsp;|&nbsp; Lives: <span id="lives">3</span> &nbsp;|&nbsp; <kbd>←→</kbd> or <kbd>A</kbd><kbd>D</kbd> to move &nbsp;|&nbsp; <kbd>Space</kbd> to fire
</div>
<div id="overlay">
  <h1 id="overlayTitle">Game Over</h1>
  <p id="overlayText"></p>
  <button id="restartBtn">Restart</button>
</div>
<script>
// ... game code ...
</script>
</body>
</html>
```

Now the JavaScript. Let me write it carefully.

```javascript
const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');
const W = canvas.width;
const H = canvas.height;

// Game state
let state = 'playing'; // 'playing' | 'gameover' | 'win'
let score = 0;
let lives = 3;
let level = 1;

// Player
const player = {
  x: 340,
  y: 555,
  w: 120,
  h: 20,
  moveSpeed: 5
};

// Aliens
const ALIEN_ROWS = 5;
const ALIEN_COLS = 8;
const ALIEN_W = 28;
const ALIEN_H = 20;
const ALIEN_SPACING_X = 55;
const ALIEN_SPACING_Y = 40;
const ALIEN_START_X = 60;
const ALIEN_START_Y = 80;
const alienDir = 1;
let alienMoveTimer = 0;
let alienSpeed = 0.6;

// Bunkers
let bunkers = [];

// Bullets
const MAX_PLAYER_BULLETS = 5;
const PLAYER_BULLET_SPEED = 9;
const ENEMY_BULLET_SPEED = 4;
const BULLET_LIFE = 90;

let playerBullets = [];
let enemyBullets = [];
let fireCooldown = 0;
const FIRE_RATE = 15;

// Enemy fire timer
let enemyFireTimer = 0;
const ENEMY_FIRE_INTERVAL = 45;

// Invincibility
let invincibleTimer = 0;

// Stars
let stars = [];

function initStars() {
  for (let i = 0; i < 80; i++) {
    stars.push({
      x: Math.random() * W,
      y: Math.random() * H,
      r: Math.random() * 1.5 + 0.5,
      speed: Math.random() * 0.5 + 0.2
    });
  }
}

function initAliens() {
  aliens = [];
  for (let row = 0; row < ALIEN_ROWS; row++) {
    for (let col = 0; col < ALIEN_COLS; col++) {
      aliens.push({
        x: ALIEN_START_X + col * ALIEN_SPACING_X,
        y: ALIEN_START_Y + row * ALIEN_SPACING_Y,
        w: ALIEN_W,
        h: ALIEN_H,
        alive: true,
        row: row,
        col: col,
        color: ['#ff2a2a', '#ff9900', '#ffcc00', '#66ff33', '#3399ff'][row % 5]
      });
    }
  }
}

function initBunkers() {
  bunkers = [
    { x: 130, y: 310, w: 50, h: 30, health: 2 },
    { x: 270, y: 310, w: 50, h: 30, health: 2 },
    { x: 410, y: 310, w: 50, h: 30, health: 2 },
    { x: 550, y: 310, w: 50, h: 30, health: 2 }
  ];
}

function resetGame() {
  score = 0;
  lives = 3;
  player.x = 340;
  playerBullets = [];
  enemyBullets = [];
  fireCooldown = 0;
  enemyFireTimer = 0;
  invincibleTimer = 0;
  alienDir = 1;
  alienSpeed = 0.6;
  initAliens();
  initBunkers();
  state = 'playing';
}

function spawnAlienBullet() {
  // Pick a random alive alien
  let aliveAliens = aliens.filter(a => a.alive);
  if (aliveAliens.length === 0) return;
  let shooter = aliveAliens[Math.floor(Math.random() * aliveAliens.length)];
  let bx = shooter.x + shooter.w / 2;
  let by = shooter.y + shooter.h;
  enemyBullets.push({
    x: bx,
    y: by,
    w: 4,
    h: 10,
    speed: ENEMY_BULLET_SPEED
  });
}

function createPlayerBullet() {
  if (playerBullets.length >= MAX_PLAYER_BULLETS) return;
  playerBullets.push({
    x: player.x + player.w / 2 - 2,
    y: player.y,
    w: 4,
    h: 12,
    speed: PLAYER_BULLET_SPEED
  });
}

function damageBunker(bunker, bullet) {
  if (bullet.x + bullet.w > bunker.x && bullet.x < bunker.x + bunker.w &&
      bullet.y + bullet.h > bunker.y && bullet.y < bunker.y + bunker.h) {
    bunker.health--;
    return bunker.health <= 0;
  }
  return false;
}

function checkCollisions() {
  // Player bullets vs aliens
  for (let i = playerBullets.length - 1; i >= 0; i--) {
    let b = playerBullets[i];
    let hit = false;
    for (let a of aliens) {
      if (!a.alive) continue;
      if (b.x < a.x + a.w && b.x + b.w > a.x &&
          b.y < a.y + a.h && b.y + b.h > a.y) {
        a.alive = false;
        score += 10 * (5 - a.row); // more points for higher rows
        playerBullets.splice(i, 1);
        hit = true;
        break;
      }
    }
    if (hit) continue;
    
    // Player bullets vs bunkers
    for (let j = bunkers.length - 1; j >= 0; j--) {
      if (damageBunker(bunkers[j], b)) {
        bunkers.splice(j, 1);
      }
    }
  }
  
  // Enemy bullets vs player
  if (invincibleTimer <= 0) {
    for (let i = enemyBullets.length - 1; i >= 0; i--) {
      let b = enemyBullets[i];
      if (b.x < player.x + player.w && b.x + b.w > player.x &&
          b.y < player.y + player.h && b.y + b.h > player.y) {
        if (invincibleTimer <= 0) {
          enemyBullets.splice(i, 1);
        } else {
          lives--;
          invincibleTimer = 60; // brief protection
          updateHUD();
        }
      }
    }
  }
  
  // Enemy bullets vs bunkers
  for (let i = enemyBullets.length - 1; i >= 0; i--) {
    let b = enemyBullets[i];
    for (let j = bunkers.length - 1; j >= 0; j--) {
      if (damageBunker(bunkers[j], b)) {
        bunkers.splice(j, 1);
      }
    }
  }
}

function updateAliens() {
  alienMoveTimer++;
  if (alienMoveTimer >= 25) {
    alienMoveTimer = 0;
    let hitEdge = false;
    for (let a of aliens) {
      if (!a.alive) continue;
      if (a.x + a.w > W || a.x < 0) {
        hitEdge = true;
        break;
      }
    }
    if (hitEdge) {
      alienDir *= -1;
      for (let a of aliens) {
        if (a.alive) a.y += 20;
      }
    } else {
      for (let a of aliens) {
        if (a.alive) a.x += alienDir * alienSpeed * 2; // speed up slightly with fewer aliens? keep constant for now
      }
    }
  }
}

function updatePlayer() {
  if (keyDownLeft || keyDownRight || keyDownA || keyDownD) {
    if (keyDownLeft) player.x -= player.moveSpeed;
    if (keyDownRight) player.x += player.moveSpeed;
    player.x = Math.max(10, Math.min(W - player.w - 10, player.x));
  }
}

// Key handling
let keys = {};
window.addEventListener('keydown', e => {
  keys[e.key] = true;
  if (e.key === ' ') {
    e.preventDefault();
    if (state === 'playing') {
      createPlayerBullet();
      fireCooldown = 0;
    }
  }
  if (e.key.toLowerCase() === 'r' || e.key === 'R') {
    resetGame();
  }
});
window.addEventListener('keyup', e => {
  keys[e.key] = false;
});

function update() {
  if (state !== 'playing') return;
  
  // Player movement
  updatePlayer();
  
  // Alien movement
  updateAliens();
  
  // Enemy firing
  enemyFireTimer++;
  if (enemyFireTimer >= ENEMY_FIRE_INTERVAL && aliens.some(a => a.alive)) {
    spawnAlienBullet();
    enemyFireTimer = 0;
  }
  
  // Move player bullets
  for (let i = playerBullets.length - 1; i >= 0; i--) {
    let b = playerBullets[i];
    b.y -= b.speed;
    if (b.y + b.h < 0) {
      playerBullets.splice(i, 1);
    }
  }
  
  // Move enemy bullets
  for (let i = enemyBullets.length - 1; i >= 0; i--) {
    let b = enemyBullets[i];
    b.y += b.speed;
    if (b.y > H) {
      enemyBullets.splice(i, 1);
    }
  }
  
  // Collisions
  checkCollisions();
  
  // Check win
  if (aliens.filter(a => a.alive).length === 0) {
    state = 'win';
    showOverlay('You Win!', 'All aliens destroyed!');
  }
  
  // Check loss
  for (let a of aliens) {
    if (a.alive && a.y + a.h >= player.y + player.h) {
      state = 'gameover';
      showOverlay('Game Over', 'Aliens reached the bottom!');
      break;
    }
  }
  
  updateHUD();
}

function draw() {
  // Background
  ctx.fillStyle = '#000';
  ctx.fillRect(0, 0, W, H);
  
  // Stars
  for (let s of stars) {
    ctx.fillStyle = 'rgba(255,255,255,' + (s.r * 0.5) + ')';
    ctx.fillRect(s.x, s.y, s.r, s.r);
    s.y += s.speed;
    if (s.y > H) { s.y = 0; s.x = Math.random() * W; }
  }
  
  // Bunkers
  for (let b of bunkers) {
    ctx.fillStyle = '#33aa55';
    ctx.fillRect(b.x, b.y, b.w, b.h);
  }
  
  // Aliens
  for (let a of aliens) {
    if (!a.alive) continue;
    ctx.fillStyle = a.color;
    // Draw simple alien shape
    ctx.fillRect(a.x + 4, a.y + 6, a.w - 8, a.h - 6);
    // Eyes
    ctx.fillStyle = '#000';
    ctx.fillRect(a.x + 8, a.y + 10, 6, 6);
    ctx.fillRect(a.x + a.w - 14, a.y + 10, 6, 6);
  }
  
  // Player cannon
  ctx.fillStyle = '#ff6600';
  ctx.fillRect(player.x, player.y, player.w, player.h);
  // Cannon barrel
  ctx.fillRect(player.x + 5, player.y - 6, player.w - 10, 6);
  
  // Player bullets
  ctx.fillStyle = '#00ffff';
  for (let b of playerBullets) {
    ctx.fillRect(b.x, b.y, b.w, b.h);
  }
  
  // Enemy bullets
  ctx.fillStyle = '#ff4444';
  for (let b of enemyBullets) {
    ctx.fillRect(b.x, b.y, b.w, b.h);
  }
  
  // HUD
  ctx.fillStyle = '#fff';
  ctx.font = 'bold 18px monospace';
  ctx.fillText('Score: ' + score, 10, 20);
  ctx.fillText('Lives: ' + lives, W - 10, 20);
}

function showOverlay(title, text) {
  state = 'gameover';
  document.getElementById('overlayTitle').textContent = title;
  document.getElementById('overlayText').textContent = text;
  document.getElementById('overlay').style.display = 'flex';
}

function updateHUD() {
  document.getElementById('score').textContent = score;
  document.getElementById('lives').textContent = lives;
}

// Initialize
initStars();
resetGame();

// Main loop
function gameLoop() {
  update();
  draw();
  requestAnimationFrame(gameLoop);
}
gameLoop();
```

Wait, I need to double-check some things:

1. The `keys` object approach for movement - I'm checking individual key states but not tracking them properly. Let me use proper key state tracking.

2. The alien movement speed: I should make it increase as aliens are destroyed. Let me add a speed multiplier: `alienSpeed = baseSpeed * (aliveCount / totalCount)` or something. Actually, classic behavior: speed increases as aliens are destroyed. Let me compute: `alienSpeed = 0.3 + (1 - aliveCount / totalCount) * 1.5`.

3. The `updatePlayer` function references `keyDownLeft` etc. which aren't defined. I need to define those or use a different approach. Let me use a simple key state object.

Let me rewrite the key handling:

```javascript
const keys = {};
window.addEventListener('keydown', e => {
  keys[e.key] = true;
  if (e.key === ' ') {
    e.preventDefault();
    if (state === 'playing') {
      createPlayerBullet();
      fireCooldown = 0;
    }
  }
  if (e.key.toLowerCase() === 'r') {
    resetGame();
  }
});
window.addEventListener('keyup', e => {
  keys[e.key] = false;
});
```

And in updatePlayer:
```javascript
function updatePlayer() {
  if (keys['ArrowLeft'] || keys['a'] || keys['A']) {
    player.x -= player.moveSpeed;
  }
  if (keys['ArrowRight'] || keys['d'] || keys['D']) {
    player.x += player.moveSpeed;
  }
  player.x = Math.max(10, Math.min(W - player.w - 10, player.x));
}
```

This is cleaner.

4. The `damageBunker` function returns true if health <= 0, causing removal. But I'm calling it in a loop that iterates backwards. That should work.

5. Need to make sure the bunker damage works correctly. Bunkers are drawn as green rectangles. When hit, they get removed.

6. The alien movement: I'm incrementing `alienMoveTimer` and moving every 25 frames. On edge hit, reverse and drop down. This seems reasonable.

7. Score: 10 points per alien, with higher rows worth more (5 - row). Row 0 (top) = 50 points, row 4 (bottom) = 10 points. That's good.

8. Enemy fire: every 45 frames, a random alien fires. This might be too frequent. Let me adjust: maybe every 60-90 frames. With 40 aliens, that's about 0.5-0.7 bullets per second. Reasonable.

9. Invincibility: after losing a life, 60 frames of invincibility.

10. Game over conditions: aliens reach player's y position, or lives reach 0.

Let me also add a slight speed increase as aliens are destroyed. I'll modify `updateAliens`:

```javascript
function updateAliens() {
  alienMoveTimer++;
  if (alienMoveTimer >= 25) {
    alienMoveTimer = 0;
    let hitEdge = false;
    for (let a of aliens) {
      if (!a.alive) continue;
      if (a.x + a.w > W || a.x < 0) {
        hitEdge = true;
        break;
      }
    }
    if (hitEdge) {
      alienDir *= -1;
      for (let a of aliens) {
        if (a.alive) a.y += 20;
      }
    } else {
      for (let a of aliens) {
        if (a.alive) a.x += alienDir * alienSpeed;
      }
    }
  }
}
```

And set `alienSpeed` dynamically:
```javascript
let totalAliens = aliens.filter(a => a.alive).length;
let initialCount = 40;
alienSpeed = 0.5 + (1 - totalAliens / initialCount) * 1.5;
```

Actually, let me keep it simple. The speed is fine as is.

Let me also think about the "brief protection from repeated damage" - I implemented invincibility after losing a life. That should satisfy it.

Now, let me also make sure the bunkers are positioned correctly. They're at y=310, and the player is at y=555. So there's about 245 pixels of space between the bunkers and the player. The aliens start at y=80 and move down. When they reach y ~ 555, it's game over.

Let me finalize the code and write it to index.html.

One more thing: I should make sure the canvas resizes properly or is fixed. Fixed 800x600 is fine.

Let me also add a nice touch: draw the player cannon with a bit more detail (a triangle barrel).

OK, let me write the complete file now.

Actually, wait - I need to double-check the collision detection. For player bullets vs aliens, I'm using AABB. The bullet is at `b.x, b.y` with dimensions `b.w, b.h`. The alien is at `a.x, a.y` with `a.w, a.h`. The overlap check looks correct.

For bullet vs bunker: same AABB check. If hit, reduce health. If health <= 0, remove.

For enemy bullets vs player: same AABB check against player rectangle.

Alright, let me write the final code.

One issue: in the `checkCollisions` function, I'm iterating over `playerBul

We need to create a Space Invaders-style game in a single index.html file. Let me plan the implementation:

1. Canvas-based game
2. Player: cannon at bottom, controlled by Left/Right or A/D, Space to fire
3. Aliens: grid that moves horizontally, reverses and descends at edges, fires toward player
4. Bunkers: destructible, between cannon and aliens; hits from either side remove material persistently
5. Lives: 3 starting lives, enemy shots cost a life with brief protection from repeated damage
6. Win/lose conditions
7. Restart option

Let me build this step by step. I'll write a complete HTML file with inline CSS and JS.

Key features:
- Canvas drawing (procedural graphics - no external assets)
- Player ship/cannon at bottom
- Alien grid (e.g., 5 rows x 8 columns)
- Alien movement: horizontal back-and-forth, speed increases as aliens are destroyed
- Alien firing: random aliens shoot downward periodically
- Bunkers: rectangular blocks made of segments that can be eroded
- Shooting mechanics: bullets have lifetime, fire rate limit
- Lives system: 3 lives, enemy hits reduce life but with brief invincibility after taking a hit
- Score tracking
- Game states: playing, game over, win
- Restart functionality

Let me design the layout:
- Canvas: maybe 800x600
- HUD: score, lives, level at top
- Controls displayed

Alien grid:
- Rows: 5, Columns: 8
- Different alien types per row (classic style)

Bunkers:
- Several bunker segments arranged in a shape between the player and aliens
- When shot, segments get removed
- Can be shot from left or right side

Let me code this up.

Game state:
```javascript
const game = {
  canvas: ...,
  ctx: ...,
  width: 800,
  height: 600,
  player: { x: 400, y: 550, width: 50, height: 20, speed: 5 },
  aliens: [],
  alienDirection: 1, // 1 = right, -1 = left
  alienSpeed: 0.5,
  alienDrop: 10,
  bullet: null,
  enemyBullets: [],
  bunkers: [],
  score: 0,
  lives: 3,
  level: 1,
  gameOver: false,
  win: false,
  lastShotTime: 0,
  enemyFireTimer: 0,
  invincibleTimer: 0,
  ...
};
```

Alien grid positions:
- Row 0: top
- Each alien is about 30x20 pixels

Bunkers: I'll make them as groups of small rectangles (like classic Space Invaders bunkers). Let's say 4 bunkers, each made of 6 segments.

Let me think about the visual layout:
- Top area: score, lives
- Middle: aliens (rows 0-4)
- Bottom: bunkers (between aliens and player)
- Bottom-most: player cannon

Canvas size: 800x600

Alien positions:
- 5 rows, 8 columns
- Spacing: 60px horizontal, 40px vertical
- Row 0: y = 80
- Row 1: y = 130
- Row 2: y = 180
- Row 3: y = 230
- Row 4: y = 280
- X positions: start at 60, then 120, 180, ..., 480 (8 columns)

Actually let me calculate:
- 8 columns, each 50px wide + 10px gap = 60px per column
- Start at x=50
- Total width = 8*50 + 7*10 = 470, so start at 65 to center it

Alien size: 30x20

Bunkers: Let's place them around x=150-300, y=300-380. Classic bunker shape is like a rectangle with some internal structure. For simplicity, I'll make each bunker as a group of 4-6 small blocks.

Actually, for "destructible bunkers" where "hits from either side remove bunker material persistently", I'll make each bunker a collection of small segments (like 4x4 pixel blocks) arranged in a shape. When a bullet hits a segment, that segment is removed.

Let me simplify: each bunker is a set of small rectangles (e.g., 6 segments arranged in a 2x3 grid). When hit, one segment is removed.

For the visual, I'll draw the bunkers as gray blocks.

Player cannon: a triangle or rectangle at the bottom center.

Controls:
- A/D or Left/Right: move
- Space: fire
- R: restart

Let me write the code now.

I'll structure the HTML:
```html
<!DOCTYPE html>
<html>
<head>
<style>...</style>
</head>
<body>
<canvas id="game"></canvas>
<script>
// Game code
</script>
</body>
</html>
```

Let me write the full implementation.

Game loop:
- Update: move player, move aliens, check collisions, update bullets, update bunkers
- Draw: clear canvas, draw HUD, draw aliens, bunkers, player, bullets

Alien firing:
- Every 1-2 seconds, a random alien from the bottom row shoots a bullet downward
- Fire rate limited

Enemy bullets:
- Move upward
- If they hit player, lose a life
- After a hit, brief invincibility period (flashing effect)

Let me code this carefully.

For the alien grid movement:
- All aliens move together in the same direction
- Speed increases as aliens are destroyed
- When any alien reaches the edge, reverse direction and drop down
- Classic behavior: when hitting edge, all aliens reverse direction and move down one row

Actually, classic Space Invaders: when the formation hits a wall, it drops down one step and reverses direction. The whole formation moves as a unit.

Let me implement it that way:
- Formation position offset (dx, dy)
- Each alien's position = base position + dx, dy
- When any alien's next position would be out of bounds, reverse dx and increase dy

For simplicity, I'll track the formation's x offset and apply it to all aliens.

Let me define:
- formationX = 0
- formationY = 0 (starts at some base)
- alienDir = 1 (right)
- alienMoveX = 5 * alienDir
- alienMoveY = 10 (drop when reversing)

In update:
- Check if any alien would go out of bounds with current formationX + alienMoveX
- If so, set alienDir = -alienDir, and formationY += alienMoveY
- Then move all aliens: alien.x += alienMoveX * alienDir, alien.y += alienMoveY

Wait, actually the classic behavior is: when the edge is reached, all aliens drop down and reverse. So:
- If (formationX + alienMoveX + alien.x) >= canvasWidth - alienWidth: reverse direction, drop
- If (formationX + alienMoveX + alien.x) <= 0: reverse direction, drop

Let me keep it simpler: just check if any alien's next position exceeds bounds.

Now, for the bunkers:
- Create 4 bunkers, each composed of several segments
- Each segment is a small rectangle (e.g., 10x10 or 15x15)
- When a bullet (player or enemy) hits a segment, remove it
- Segments can only be hit from one side? "Hits from either side remove bunker material persistently" - meaning whether you shoot from left or right, the material is removed. So just remove the segment on hit.

Let me make bunkers as a grid of segments. For example, each bunker is a 3x2 grid of 12x12 blocks.

Positions for bunkers: let's place them under the aliens but above the player.
- Bunker 1: x=100, y=320
- Bunker 2: x=250, y=320
- Bunker 3: x=400, y=320
- Bunker 4: x=550, y=320

Each bunker has 6 segments in a 2x3 arrangement.

When a bullet passes through a gap (where segments were removed), it continues.

For collision detection between bullets and bunkers: check if bullet overlaps any remaining segment.

OK, let me write the code now. I'll aim for a clean, working implementation.

Let me think about the canvas size: 800x600.

HUD area: top 50px
Alien area: y=60 to y=300
Bunker area: y=300 to y=380
Player: y=540

Alien dimensions: 30x20
Alien spacing: 55px horizontal, 45px vertical

Grid: 8 columns, 5 rows
- Row 0 (top): y=70
- Row 1: y=120
- Row 2: y=170
- Row 3: y=220
- Row 4 (bottom): y=270

Alien size: 24x18

Player: width 50, height 16, at y=560, centered at x=400

Bullet: small rectangle, e.g., 4x12
Player bullet goes up
Enemy bullet goes down

Enemy firing: every 1.5 seconds, pick a random alien from the bottom row (row 4) and fire.

Player fire rate: cooldown of about 300ms (can't fire more than once per 300ms).

Invincibility after taking a hit: 1 second of blinking.

Let me write the complete code now.

Actually, let me reconsider the alien firing. In classic Space Invaders, only the bottom row aliens shoot. I'll do the same: only aliens in the bottom row (row 4) can fire.

Enemy bullet speed: slower than player bullets, maybe 3px/frame.

Player bullet speed: 7px/frame.

Bullet lifetime: 60 frames (1 second at 60fps).

Enemy bullet lifetime: 90 frames (1.5 seconds).

Let me code it up.

```javascript
const CANVAS_W = 800;
const CANVAS_H = 600;

// Game state
let state = {
  phase: 'menu', // menu, playing, gameover, win
  score: 0,
  lives: 3,
  level: 1,
  player: { x: 400, y: 550, w: 50, h: 16 },
  aliens: [],
  formationX: 0,
  formationDir: 1,
  alienMoveX: 4,
  alienMoveY: 8,
  playerBullet: null,
  enemyBullets: [],
  bunkers: [],
  bulletLifetime: 60,
  enemyFireRate: 90,
  fireCooldown: 0,
  invincible: 0,
  lastShot: 0,
};

function initAliens() {
  state.aliens = [];
  const cols = 8;
  const rows = 5;
  const alienW = 24;
  const alienH = 18;
  const gapX = 55;
  const gapY = 45;
  const startX = 60;
  const startY = 70;
  
  for (let r = 0; r < rows; r++) {
    for (let c = 0; c < cols; c++) {
      state.aliens.push({
        x: startX + c * gapX,
        y: startY + r * gapY,
        w: alienW,
        h: alienH,
        row: r,
        col: c,
        type: r // different types per row
      });
    }
  }
}

function initBunkers() {
  state.bunkers = [];
  const bunkerW = 60;
  const bunkerH = 40;
  const segSize = 12;
  const bunkerCount = 4;
  const startX = 100;
  const startY = 330;
  const yGap = 50;
  
  for (let i = 0; i < bunkerCount; i++) {
    const bx = startX + i * 160;
    const by = startY;
    // 2 rows of 3 segments each
    const segments = [
      { x: bx + 6, y: by, w: segSize, h: segSize },
      { x: bx + 54, y: by, w: segSize, h: segSize },
      { x: bx + 102, y: by, w: segSize, h: segSize },
      { x: bx + 6, y: by + 50, w: segSize, h: segSize },
      { x: bx + 54, y: by + 50, w: segSize, h: segSize },
      { x: bx + 102, y: by + 50, w: segSize, h: segSize },
    ];
    state.bunkers.push({ segments: segments });
  }
}
```

Hmm, wait. Let me reconsider the bunker shape. Classic Space Invaders bunkers look like this:

```
  ████
  ████
  ████
```

A rectangle with the middle row having fewer blocks. But for simplicity, I'll use a 2x3 grid of blocks.

Actually, let me make it look nicer. Each bunker is a rectangle of 6 segments in a 2x3 arrangement.

Now, for the player bullet:
- Position: player.x + player.w/2, player.y - player.h
- Size: 4x12
- Speed: 7 up

Enemy bullet:
- Position: random x within alien column, y = alien.y + alien.h
- Size: 4x10
- Speed: 3 down

Collision detection:
- Bullet vs alien: if bullet overlaps alien rect, destroy alien, add score
- Bullet vs bunker: if bullet overlaps any remaining segment, remove that segment
- Bullet vs player: if enemy bullet hits player, lose life

Let me also handle the "enemy firing" mechanic. Every enemyFireRate ms, an alien from the bottom row fires. The alien that fires is chosen randomly from row 4.

For the "brief protection from repeated damage": when the player takes a hit from an enemy bullet, they get a brief invincibility period (e.g., 1.5 seconds) during which enemy bullets don't hurt.

Let me now write the complete HTML file.

I'll structure the code:

1. HTML skeleton with canvas
2. CSS for styling
3. JavaScript game logic

Let me write it out.

Actually, I realize I should test the game in the browser after writing. Let me write the file first, then open it in the browser.

Let me draft the complete code:

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Space Invaders</title>
<style>
  body {
    margin: 0;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: hidden;
    font-family: monospace;
  }
  canvas {
    border: 2px solid #0f0;
    background: #000;
  }
</style>
</head>
<body>
<canvas id="game" width="800" height="600"></canvas>
<script>
// ... game code ...
</script>
</body>
</html>
```

Now the JavaScript. Let me write it all out carefully.

Game constants:
- CANVAS_W = 800
- CANVAS_H = 600
- PLAYER_SPEED = 5
- PLAYER_BULLET_SPEED = 7
- ENEMY_BULLET_SPEED = 3
- BULLET_LIFE = 60
- ENEMY_FIRE_RATE = 90 (frames)
- PLAYER_FIRE_RATE = 15 (frames)
- INVINCIBLE_TIME = 90 (frames, 1.5s)
- ALIEN_BASE_SPEED = 0.5
- ALIEN_SPEED_INCREMENT = 0.05 per alien killed? Or just increase as count decreases.

Let me make the alien speed increase as aliens are destroyed: speed = baseSpeed * (totalAliens / aliveAliens) or something similar.

Classic behavior: speed increases as aliens are destroyed. I'll do: alienMoveX = baseSpeed * (totalAliens / aliveAliens) where baseSpeed starts at 0.5.

Actually, simpler: alienMoveX = 0.5 + (initialCount - aliveCount) * 0.03

Let me implement it.

Now, the main loop:
```javascript
function gameLoop() {
  update();
  render();
  requestAnimationFrame(gameLoop);
}
```

Update:
1. Handle input
2. Update player position (clamp to bounds)
3. Update formation movement
4. Update bullets
5. Check collisions
6. Update timers
7. Check win/lose conditions

Render:
1. Clear canvas
2. Draw HUD (score, lives)
3. Draw bunkers
4. Draw aliens
5. Draw player
6. Draw bullets
7. Draw invincibility flash

Let me write the complete code now. I'll be careful with the details.

For the alien types, I'll use different colors based on row:
- Row 0: green
- Row 1: yellow
- Row 2: orange
- Row 3: red
- Row 4: cyan

Score: 10 points per alien, 30 for the bottom row? Classic is 30 for bottom row, but I'll keep it simple: 10 each.

Let me finalize the code. I'll write it all in one go.

One thing to note: the user said "verify: Test movement and firing during the opening formation. Check alien motion and inspect a shot hitting a bunker or alien for visible damage or score feedback."

So I need to make sure the game is playable and visible. Let me make sure the graphics are clear.

Let me write the complete index.html now.

I'll also add a start screen ("Press SPACE to start") and game over / win screens.

Alright, let me write the code:

```javascript
(function() {
  'use strict';
  
  const canvas = document.getElementById('game');
  const ctx = canvas.getContext('2d');
  const W = canvas.width;
  const H = canvas.height;
  
  // Game state
  let phase = 'start'; // start, playing, gameover, win
  let score = 0;
  let lives = 3;
  let level = 1;
  
  // Player
  let player = {
    x: W / 2,
    y: H - 40,
    w: 50,
    h: 16,
    speed: 5
  };
  
  // Aliens
  let aliens = [];
  let formationX = 0;
  let formationDir = 1;
  let alienMoveX = 4;
  let alienMoveY = 8;
  let totalAliens = 0;
  let aliveAliens = 0;
  
  // Bullets
  let playerBullet = null;
  let enemyBullets = [];
  
  // Bunkers
  let bunkers = [];
  
  // Timers
  let fireCooldown = 0;
  let enemyFireTimer = 0;
  let invincibleTimer = 0;
  let lastTime = 0;
  
  // Colors
  const alienColors = ['#00ff00', '#ffff00', '#ff8800', '#ff3333', '#00ccff'];
  
  function initGame() {
    resetState();
    initAliens();
    initBunkers();
    phase = 'playing';
  }
  
  function resetState() {
    score = 0;
    lives = 3;
    level = 1;
    player.x = W / 2;
    playerBullet = null;
    enemyBullets = [];
    fireCooldown = 0;
    enemyFireTimer = 0;
    invincibleTimer = 0;
  }
  
  function initAliens() {
    aliens = [];
    const cols = 8;
    const rows = 5;
    const alienW = 24;
    const alienH = 18;
    const gapX = 55;
    const gapY = 45;
    const startX = 60;
    const startY = 70;
    
    for (let r = 0; r < rows; r++) {
      for (let c = 0; c < cols; c++) {
        aliens.push({
          x: startX + c * gapX,
          y: startY + r * gapY,
          w: alienW,
          h: alienH,
          row: r,
          col: c,
          type: r
        });
      }
    }
    totalAliens = aliens.length;
    aliveAliens = totalAliens;
    formationX = 0;
    formationDir = 1;
    alienMoveX = 4;
    alienMoveY = 8;
  }
  
  function initBunkers() {
    bunkers = [];
    const segSize = 12;
    const bunkerCount = 4;
    const startX = 100;
    const startY = 330;
    
    for (let i = 0; i < bunkerCount; i++) {
      const bx = startX + i * 160;
      const segments = [
        { x: bx + 6, y: startY, w: segSize, h: segSize },
        { x: bx + 54, y: startY, w: segSize, h: segSize },
        { x: bx + 102, y: startY, w: segSize, h: segSize },
        { x: bx + 6, y: startY + 50, w: segSize, h: segSize },
        { x: bx + 54, y: startY + 50, w: segSize, h: segSize },
        { x: bx + 102, y: startY + 50, w: segSize, h: segSize },
      ];
      bunkers.push({ segments: segments });
    }
  }
  
  function spawnAlienFire() {
    // Only bottom row aliens can fire
    const bottomAliens = aliens.filter(a => a.row === 4);
    if (bottomAliens.length === 0) return;
    const shooter = bottomAliens[Math.floor(Math.random() * bottomAliens.length)];
    const bullet = {
      x: shooter.x + shooter.w / 2 - 2,
      y: shooter.y + shooter.h,
      w: 4,
      h: 10
    };
    enemyBullets.push(bullet);
    enemyFireTimer = 0;
  }
  
  function update(dt) {
    if (phase !== 'playing') return;
    
    // Input
    const keys = getPressedKeys();
    if (keys.left || keys.a) {
      player.x -= player.speed;
    }
    if (keys.right || keys.d) {
      player.x += player.speed;
    }
    // Clamp player
    player.x = Math.max(player.w / 2, Math.min(W - player.w / 2, player.x));
    
    // Player bullet
    if (fireCooldown > 0) fireCooldown--;
    if (keys.space && fireCooldown === 0) {
      if (playerBullet === null) {
        playerBullet = {
          x: player.x + player.w / 2 - 2,
          y: player.y - player.h,
          w: 4,
          h: 12
        };
        fireCooldown = 15; // ~250ms
      }
    }
    
    // Enemy fire
    enemyFireTimer++;
    if (enemyFireTimer >= 90) {
      enemyFireTimer = 0;
      spawnAlienFire();
    }
    
    // Movement
    formationX += alienMoveX * formationDir;
    
    // Check boundaries
    let hitEdge = false;
    for (const a of aliens) {
      if (a.x + a.w > W - 10 || a.x < 10) {
        hitEdge = true;
        break;
      }
    }
    
    if (hitEdge) {
      formationDir *= -1;
      formationY += alienMoveY;
    }
    
    // Move aliens
    for (const a of aliens) {
      a.x += alienMoveX * formationDir;
    }
    
    // Drop when reversing
    if (hitEdge) {
      for (const a of aliens) {
        a.y += alienMoveY;
      }
    }
    
    // Alien speed increase
    const ratio = totalAliens / Math.max(aliveAliens, 1);
    alienMoveX = 4 * ratio;
    
    // Player bullet movement
    if (playerBullet) {
      playerBullet.y -= 7;
      if (playerBullet.y + playerBullet.h < 0) {
        playerBullet = null;
      }
    }
    
    // Enemy bullet movement
    for (let i = enemyBullets.length - 1; i >= 0; i--) {
      enemyBullets[i].y += enemyBulletSpeed;
      if (enemyBullets[i].y > H) {
        enemyBullets.splice(i, 1);
      }
    }
    
    // Collisions: player bullet vs aliens
    if (playerBullet) {
      for (let j = aliens.length - 1; j >= 0; j--) {
        const a = aliens[j];
        if (rectsOverlap(playerBullet, a)) {
          // Hit!
          aliens.splice(j, 1);
          aliveAliens--;
          score += 10;
          playerBullet = null;
          // Brief invincibility
          invincibleTimer = 90;
          break;
        }
      }
    }
    
    // Collisions: player bullet vs bunkers
    if (playerBullet) {
      for (const bunker of bunkers) {
        for (let k = bunker.segments.length - 1; k >= 0; k--) {
          const seg = bunker.segments[k];
          if (rectsOverlap(playerBullet, seg)) {
            bunker.segments.splice(k, 1);
            playerBullet = null;
            break;
          }
        }
      }
    }
    
    // Collisions: enemy bullet vs player
    if (invincibleTimer <= 0) {
      for (let i = enemyBullets.length - 1; i >= 0; i--) {
        const eb = enemyBullets[i];
        if (rectsOverlap(eb, { x: player.x, y: player.y, w: player.w, h: player.h })) {
          enemyBullets.splice(i, 1);
          takeDamage();
          break;
        }
      }
    }
    
    // Collisions: enemy bullet vs bunkers
    for (let i = enemyBullets.length - 1; i >= 0; i--) {
      const eb = enemyBullets[i];
      let hit = false;
      for (const bunker of bunkers) {
        for (let k = bunker.segments.length - 1; k >= 0; k--) {
          const seg = bunker.segments[k];
          if (rectsOverlap(eb, seg)) {
            bunker.segments.splice(k, 1);
            hit = true;
            break;
          }
        }
        if (hit) break;
      }
      if (hit) {
        enemyBullets.splice(i, 1);
      }
    }
    
    // Check win
    if (aliveAliens === 0) {
      phase = 'win';
    }
    
    // Check lose
    if (lives <= 0) {
      phase = 'gameover';
    }
  }
  
  function rectsOverlap(a, b) {
    return a.x < b.x + b.w &&
           a.x + a.w > b.x &&
           a.y < b.y + b.h &&
           a.y + a.h > b.y;
  }
  
  function takeDamage() {
    lives--;
    invincibleTimer = 90;
    // Brief protection: lose a life, briefly protected
    // Already handled by invincibleTimer
  }
  
  // ... render functions
})();
```

Wait, I have a bug: `formationY` should be `formationY` but I defined `formationX`. Let me fix that. Actually, I used `formationY` in the boundary check but declared `formationX`. Let me use `formationX` as the offset and check against it.

Also, I need to be careful about the alien movement. Let me restructure:

```javascript
formationX += alienMoveX * formationDir;
```

Then check if any alien would go out of bounds:
```javascript
const nextX = formationX + alienMoveX * formationDir;
for (const a of aliens) {
  if (a.x + nextX > W - 10 || a.x + nextX + a.w < 10) {
    hitEdge = true;
    break;
  }
}
```

Hmm, this is getting complicated. Let me simplify: track the formation's absolute x position.

Actually, let me keep it simple. The formationX is the offset. Aliens' actual x = base_x + formationX.

Boundary check: if any alien's x + w > W - 5 or x < 5, then hit edge.

When hit edge: formationDir *= -1, and formationX += alienMoveX * formationDir (which effectively reverses direction and adds the step).

Let me rewrite the movement section:

```javascript
// Move formation
formationX += alienMoveX * formationDir;

// Check if any alien would go out of bounds
let hitEdge = false;
for (const a of aliens) {
  if (a.x + formationX + a.w > W - 5 || a.x + formationX < 5) {
    hitEdge = true;
    break;
  }
}

if (hitEdge) {
  formationDir *= -1;
  formationX += alienMoveX * formationDir; // reverse and move
}

// Apply formation offset to all aliens
for (const a of aliens) {
  a.x = a.baseX + formationX;
}
```

Where baseX is the original x position. Let me store baseX for each alien.

Actually, let me simplify even further. I'll store the initial positions and compute positions each frame:

```javascript
function getAlienX(a) {
  return a.startX + formationX;
}
```

And update formationX directly.

OK, let me write the final version. I'll be careful to make it work correctly.

Let me also think about the rendering. I want it to look decent:

- Background: dark space-like (dark blue/black)
- Aliens: colored rectangles with simple "face" or just colored blocks
- Player: a triangle or rectangle cannon
- Bunkers: gray rectangles
- Bullets: bright colored rectangles

For the alien, I'll draw a simple shape: a rectangle with some detail. Maybe just a colored block for now.

Let me also add a starfield or some background elements for visual appeal.

Now, let me write the complete file. I'll make it self-contained.

Here's my plan for the complete code:

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Space Invaders</title>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: hidden;
  }
  canvas {
    border: 2px solid #0f0;
    image-rendering: pixelated;
  }
</style>
</head>
<body>
<canvas id="game" width="800" height="600"></canvas>
<script>
(function() {
  'use strict';
  
  const canvas = document.getElementById('game');
  const ctx = canvas.getContext('2d');
  const W = canvas.width;
  const H = canvas.height;
  
  // --- Constants ---
  const PLAYER_SPEED = 5;
  const PLAYER_BULLET_SPEED = 7;
  const ENEMY_BULLET_SPEED = 3;
  const BULLET_LIFE = 60;
  const FIRE_COOLDOWN = 15;
  const ENEMY_FIRE_INTERVAL = 90;
  const INVINCIBLE_TIME = 90;
  const ALIEN_BASE_MOVE_X = 4;
  const ALIEN_DROP_Y = 8;
  
  // --- State ---
  let phase = 'start';
  let score = 0;
  let lives = 3;
  let level = 1;
  
  let player = { x: W/2, y: H-40, w: 50, h: 14 };
  let playerBullet = null;
  let enemyBullets = [];
  let aliens = [];
  let formationX = 0;
  let formationDir = 1;
  let alienMoveX = ALIEN_BASE_MOVE_X;
  let aliveAliens = 0;
  let bunkers = [];
  
  // --- Input ---
  const keys = {};
  
  // --- Helper ---
  function rectsOverlap(a, b) {
    return a.x < b.x + b.w && a.x + a.w > b.x && a.y < b.y + b.h && a.y + a.h > b.y;
  }
  
  // --- Initialization ---
  function initAliens() {
    aliens = [];
    const cols = 8, rows = 5;
    const alienW = 24, alienH = 18;
    const gapX = 55, gapY = 45;
    const startX = 60, startY = 70;
    
    for (let r = 0; r < rows; r++) {
      for (let c = 0; c < cols; c++) {
        aliens.push({
          startX: startX + c * gapX,
          startY: startY + r * gapY,
          x: startX + c * gapX,
          y: startY + r * gapY,
          w: alienW, h: alienH,
          row: r, col: c,
          type: r
        });
      }
    }
    aliveAliens = aliens.length;
    formationX = 0;
    formationDir = 1;
    alienMoveX = ALIEN_BASE_MOVE_X;
  }
  
  function initBunkers() {
    bunkers = [];
    const segSize = 12;
    const bunkerCount = 4;
    const startX = 100, startY = 330;
    
    for (let i = 0; i < bunkerCount; i++) {
      const bx = startX + i * 160;
      const segments = [
        { x: bx + 6, y: startY, w: segSize, h: segSize },
        { x: bx + 54, y: startY, w: segSize, h: segSize },
        { x: bx + 102, y: startY, w: segSize, h: segSize },
        { x: bx + 6, y: startY + 50, w: segSize, h: segSize },
        { x: bx + 54, y: startY + 50, w: segSize, h: segSize },
        { x: bx + 102, y: startY + 50, w: segSize, h: segSize },
      ];
      bunkers.push({ segments: segments });
    }
  }
  
  function resetGame() {
    score = 0;
    lives = 3;
    level = 1;
    player.x = W / 2;
    playerBullet = null;
    enemyBullets = [];
    formationX = 0;
    formationDir = 1;
    alienMoveX = ALIEN_BASE_MOVE_X;
    aliveAliens = 0;
    initAliens();
    initBunkers();
    phase = 'playing';
  }
  
  // --- Spawn alien fire ---
  function alienFire() {
    const bottomAliens = aliens.filter(a => a.row === 4);
    if (bottomAliens.length === 0) return;
    const shooter = bottomAliens[Math.floor(Math.random() * bottomAliens.length)];
    enemyBullets.push({
      x: shooter.x + shooter.w / 2 - 2,
      y: shooter.y + shooter.h,
      w: 4, h: 10
    });
  }
  
  // --- Update ---
  function update() {
    if (phase !== 'playing') return;
    
    // Movement
    if (keys.left || keys.a) player.x -= PLAYER_SPEED;
    if (keys.right || keys.d) player.x += PLAYER_SPEED;
    player.x = Math.max(player.w/2 + 5, Math.min(W - player.w