The user wants a complete, self-contained Space Invaders game in a single index.html file.
I need to create a comprehensive HTML document with:
1.  A canvas element for rendering.
2.  CSS for styling (centering the canvas, dark background, etc.).
3.  JavaScript for the game logic, all within one file.

**Game Requirements:**
1.  **Player Cannon**: Moves left/right, shoots projectiles upward.
2.  **Aliens**: Descending grid, move horizontally, advance downward when hitting edges, fire back at the player.
3.  **Destructible Bunkers**: Player can shoot them, aliens can shoot them (or they degrade over time/hit by anything). Actually, classic Space Invaders bunkers are destructible by both player and alien fire.
4.  **Score**: Tracks points for killing aliens.
5.  **Lives**: Player has a limited number of lives.
6.  **Procedural Graphics**: Draw shapes using canvas API (rectangles, circles, pixels), no images, no external assets.
7.  **No network requests**: Everything self-contained.
8.  **Playable**: Needs game loop, input handling, collision detection, game states (start, play, game over).

**Design & Implementation Plan:**

*   **HTML Structure**:
    *   Basic HTML5 boilerplate.
    *   `<canvas id="gameCanvas" width="800" height="600"></canvas>`.
    *   `<style>` block:
        *   Body: dark background (`#000` or very dark), flexbox centering, margin 0, overflow hidden.
        *   Canvas: border, maybe a subtle glow or retro font styling if I add UI overlays (but drawing on canvas is easier for retro feel). Let's keep it simple: canvas with a border, background black.
    *   `<script>` block:
        *   Game constants (canvas width/height, player size, alien grid size, speeds, colors).
        *   Game state variables (score, lives, game over, paused, level).
        *   Input handling (keyboard listeners: ArrowLeft, ArrowRight, Space, Enter).
        *   Classes/Objects:
            *   `Player`: x, y, width, height, color, dx, cooldown. Methods: `draw()`, `update()`, `shoot()`.
            *   `Bullet`: x, y, width, height, dy, color (player = green/yellow, alien = red). Methods: `draw()`, `update()`.
            *   `Alien`: x, y, width, height, color, type (for slight visual variation?), alive status. Methods: `draw()`, `update()`.
            *   `Bunker`: x, y, width, height, health/pixels. Methods: `draw()`, `takeDamage()`. Bunkers need destructible pixel blocks.
            *   `Particle`: For explosion effects (optional but nice). x, y, vx, vy, life, color.
            *   `AlienGrid`: Manages rows and columns of aliens, movement direction, speed increase as fewer aliens remain.
        *   Game Loop: `requestAnimationFrame`.
        *   Collision Detection: AABB (Axis-Aligned Bounding Box) for most things. Bunker collision might need pixel-perfect or block-based.
        *   Rendering: Clear canvas, draw player, bullets, aliens, bunkers, particles, UI (score, lives).

**Detailed Mechanics:**

*   **Player**:
    *   Position: Bottom center. Width ~40, Height ~20.
    *   Movement: Constant speed while key held.
    *   Shooting: Bullet travels up. Cooldown to prevent spam (e.g., 300ms).

*   **Aliens**:
    *   Grid: 5 rows, 11 columns (classic) or 6x10. Let's do 6 rows x 11 columns = 66 aliens.
    *   Layout: Start at top, move right. When the rightmost alien hits the right edge, they all move down and reverse direction.
    *   Speed: Starts slow. Increases as aliens are killed (classic mechanic).
    *   Appearance: Simple rectangles with maybe "eyes" or antenna details drawn procedurally. Different colors for different rows.
    *   Firing: Random chance per frame for any alive alien at the bottom of its column to fire.

*   **Bunkers**:
    *   4 bunkers, evenly spaced near the bottom, above the player.
    *   Each bunker is a 2D array of blocks (e.g., 15x15 pixels per block, bunker size ~45x30 = 3x2 blocks? No, classic is bigger). Let's make bunkers made of small 3x3 or 4x4 pixel blocks. Total bunker size ~44x32 pixels, made of 11x8 small blocks. When a bullet hits, it removes the block(s) it overlaps.
    *   Drawing: Iterate through the block array and draw small rectangles for each alive block. This is "destructible" and "procedural".

*   **Collision**:
    *   Bullet vs Alien: Alien destroyed, bullet destroyed, score +, maybe spawn particles.
    *   Bullet vs Bunker: Bullet destroyed, remove bunker block(s) hit. If bullet hits bottom of bunker, maybe create a "hole".
    *   Bullet vs Player: Player loses a life, bullet destroyed. Brief invulnerability or respawn.
    *   Alien vs Player / Aliens reaching bottom: Game Over.
    *   Alien vs Bunker: Aliens don't usually destroy bunkers by contact in the original, but let's keep it simple—bullets only for bunker destruction, or aliens destroy bunker upon reaching it. Actually, classic game: aliens can destroy bunkers just by moving into them, but it's rare. Let's just have bullets destroy bunkers.

*   **Game States**:
    *   Menu / Start Screen: "Press Enter to Start".
    *   Playing: Main loop.
    *   Game Over: "Game Over. Score: X. Press Enter to Restart".
    *   Win (all aliens dead): Increase level, respawn aliens faster.

*   **Drawing - Procedural Graphics**:
    *   *Player*: A green cannon shape—base rectangle, a thin barrel, maybe some details using `fillRect`.
    *   *Aliens*:
        *   Type 1 (Squid): Small, complex shape using small rectangles (like pixel art).
        *   Type 2 (Crab): Medium.
        *   Type 3 (Octopus): Large.
        *   Use a predefined 2D array of 0s and 1s for each alien type, then draw filled rects for the 1s. This is very procedural and retro.
    *   *Bunkers*: Green blocky structures.
    *   *Bullets*: Simple 2x4 rectangles.
    *   *Particles*: Small squares/circles fading out.

*   **Code Structure (Single File)**:
    *   `<style>`: Centered layout, retro font (`'Courier New', Courier, monospace`), canvas styling.
    *   `<canvas>`
    *   `<script>`
        *   `const canvas = ...`
        *   `const ctx = ...`
        *   Input keys object.
        *   `gameState` object.
        *   Helper functions (`rectIntersect`, `aabb`).
        *   Classes.
        *   `init()`, `reset()`, `update()`, `draw()`, `loop()`.

**Refining the Bunker Logic:**
A common way to implement classic destructible bunkers:
Each bunker is a grid of small cells (e.g., 3px wide, 3px high).
When a bullet hits, we calculate which cell(s) are hit and set them to "dead" (0).
To draw, loop through all cells in the grid and draw a small rect if alive.
This looks very authentic to the original.

Let's define:
`bunkerWidth = 44`, `bunkerHeight = 32`
`blockSize = 4`
Grid: `width/blockSize = 11` cols, `height/blockSize = 8` rows.
Total cells: 88 per bunker. Manageable.

**Refining Alien Sprites (Pixel Art via Arrays):**
I'll define binary maps for each alien type.
Example Squid (11x8):
```
[0,0,1,0,0,0,0,0,1,0,0],
[0,0,0,1,0,0,0,1,0,0,0],
[0,0,1,1,1,1,1,1,1,0,0],
[0,1,1,0,1,1,1,0,1,1,0],
[1,1,1,1,1,1,1,1,1,1,1],
[1,0,1,1,1,1,1,1,1,0,1],
[1,0,1,0,0,0,0,0,1,0,1],
[0,0,0,1,1,0,1,1,0,0,0]
```
Then `drawAlien(ctx, x, y, color, map)` draws small rects at positions where value is 1.
This is purely procedural and looks great.

**Refining Game Loop:**
Use `requestAnimationFrame`. Track deltaTime to make movement speed independent of frame rate, or keep it simple with fixed steps. Given the retro nature, a fixed step (or simply using a speed multiplier per frame) is fine, but deltaTime is better practice. I'll use a simple timestamp-based deltaTime to ensure smooth movement across refresh rates.

**AI/Firing Logic:**
- Aliens move as a group.
- Every frame, for each alien, there's a tiny chance (e.g., `(globalAlienSpeed / 1000) * 0.02`) to fire? Or simply a timer: every X milliseconds, a random bottom-most alien in a random column fires.
- Let's do the random bottom-most alien timer. It's more authentic.

**Input Handling:**
- `keydown` / `keyup` listeners tracking `keysPressed`.
- Player movement checks `keysPressed['ArrowLeft']` and `keysPressed['ArrowRight']`.

**Collision Logic:**
- AABB function: `function isColliding(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; }`
- Bunker collision is slightly different because bullets are small and might pass through between blocks if using AABB loosely. However, if block size is large enough (4px) and bullet is 2px wide, a bullet might miss. Better: check bullet center point against bunker block grid, or check bullet against each alive block. Since there are only ~350 alive blocks total per frame (4 bunkers * 88 blocks, less as they degrade), checking bullet against all alive blocks is fine.

**Let's draft the code mentally:**

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

// Input
const keys = {};
window.addEventListener('keydown', e => keys[e.key] = true);
window.addEventListener('keyup', e => keys[e.key] = false);

// Game State
let state = {
    mode: 'MENU', // MENU, PLAYING, GAMEOVER
    score: 0,
    lives: 3,
    level: 1,
    lastTime: 0,
    // entities
    player: null,
    bullets: [],
    alienBullets: [],
    aliens: [],
    bunkers: [],
    particles: []
};

// Player
class Player {
    constructor() {
        this.w = 40; this.h = 20;
        this.x = canvas.width/2 - this.w/2;
        this.y = canvas.height - 40;
        this.speed = 300; // px per sec
        this.cooldown = 0;
        this.color = '#00ff00';
    }
    update(dt) {
        if (keys['ArrowLeft'] && this.x > 0) this.x -= this.speed * dt;
        if (keys['ArrowRight'] && this.x < canvas.width - this.w) this.x += this.speed * dt;
        if (this.cooldown > 0) this.cooldown -= dt;
        if (keys[' '] && this.cooldown <= 0) {
            state.bullets.push(new Bullet(this.x + this.w/2 - 1, this.y, -600, '#ffff00'));
            this.cooldown = 0.3;
        }
    }
    draw() {
        ctx.fillStyle = this.color;
        // Cannon base
        ctx.fillRect(this.x, this.y + 10, this.w, this.h - 10);
        // Barrel
        ctx.fillRect(this.x + this.w/2 - 2, this.y, 4, 12);
        // Turret top
        ctx.fillRect(this.x + 8, this.y + 6, this.w - 16, 6);
    }
}

class Bullet {
    constructor(x, y, dy, color) {
        this.x = x; this.y = y;
        this.w = 2; this.h = 8;
        this.dy = dy; this.color = color;
    }
    update(dt) { this.y += this.dy * dt; }
    draw() {
        ctx.fillStyle = this.color;
        ctx.fillRect(this.x, this.y, this.w, this.h);
    }
}

// Alien Sprites (binary maps)
const alienSprites = {
    squid: [ /* ... 1s and 0s ... */ ],
    crab: [ /* ... */ ],
    octopus: [ /* ... */ ]
};

class Alien {
    constructor(x, y, type) {
        this.x = x; this.y = y;
        this.w = 30; this.h = 24; // scaled
        this.type = type;
        this.alive = true;
        this.color = type === 'squid' ? '#ff00ff' : type === 'crab' ? '#00ffff' : '#ff8800';
    }
    draw() {
        if (!this.alive) return;
        ctx.fillStyle = this.color;
        const map = alienSprites[this.type];
        const pixelW = this.w / map[0].length;
        const pixelH = this.h / map.length;
        for(let r=0; r<map.length; r++) {
            for(let c=0; c<map[r].length; c++) {
                if(map[r][c]) ctx.fillRect(this.x + c*pixelW, this.y + r*pixelH, pixelW, pixelH);
            }
        }
    }
}

class Bunker {
    constructor(x, y) {
        this.x = x; this.y = y;
        this.w = 44; this.h = 32;
        this.blockSize = 4;
        this.cols = this.w / this.blockSize;
        this.rows = this.h / this.blockSize;
        // Initialize as a solid shape (maybe slightly arched top like classic)
        this.grid = [];
        for (let r=0; r<this.rows; r++) {
            this.grid[r] = [];
            for (let c=0; c<this.cols; c++) {
                // Make classic bunker shape with arches
                // Top 3 rows full.
                // Middle rows: no side corners? Actually classic has a specific shape.
                // Let's just keep it simple rectangle for now, maybe cut corners later.
                this.grid[r][c] = 1;
            }
        }
    }
    draw() {
        ctx.fillStyle = '#00ff00';
        for (let r=0; r<this.rows; r++) {
            for (let c=0; c<this.cols; c++) {
                if (this.grid[r][c]) {
                    ctx.fillRect(this.x + c*this.blockSize, this.y + r*this.blockSize, this.blockSize, this.blockSize);
                }
            }
        }
    }
    // damage at pixel x,y
    damage(px, py) {
        if (px < this.x || px >= this.x + this.w || py < this.y || py >= this.y + this.h) return false;
        const c = Math.floor((px - this.x) / this.blockSize);
        const r = Math.floor((py - this.y) / this.blockSize);
        if (r >= 0 && r < this.rows && c >= 0 && c < this.cols) {
            if (this.grid[r][c]) {
                this.grid[r][c] = 0;
                // Also potentially damage neighbors for explosion hole
                return true;
            }
        }
        return false;
    }
}
```

**Alien Grid Movement:**
```javascript
let alienDir = 1; // 1 = right, -1 = left
let alienMoveTimer = 0;
let alienMoveInterval = 1.0; // seconds between moves, decreases as aliens die
const alienDrop = 20; // pixels down

function updateAliens(dt) {
    alienMoveTimer += dt;
    // Current interval based on remaining aliens? Or speed of individual aliens?
    // Classic: move step by step. Let's use a timer that decreases as count goes down.
    let currentInterval = Math.max(0.05, 1.0 - (1 - getAliveCount()/totalAliens)*0.9); // 1.0 down to 0.1

    if (alienMoveTimer >= currentInterval) {
        alienMoveTimer -= currentInterval;
        let hitEdge = false;
        for (let a of state.aliens) {
            if (!a.alive) continue;
            a.x += alienDir * 10; // step size
            if (a.x + a.w > canvas.width - 10 || a.x < 10) {
                hitEdge = true;
            }
        }
        if (hitEdge) {
            alienDir *= -1;
            for (let a of state.aliens) {
                a.y += alienDrop;
            }
            // Check if any alien reached player level
            for (let a of state.aliens) {
                if (a.y + a.h >= state.player.y) {
                    state.mode = 'GAMEOVER';
                }
            }
        }
        // Random firing: if any alien is at the bottom of its column, chance to fire
        // This is easier: just pick a random side-most alien that is alive and at the bottom of its column
        let bottomAliens = getBottomAliensPerColumn();
        let shooter = bottomAliens[Math.floor(Math.random() * bottomAliens.length)];
        if (shooter) {
             state.alienBullets.push(new Bullet(shooter.x + shooter.w/2, shooter.y + shooter.h, 400, '#ff0000'));
        }
    }
}
```

**Actually, a better way for alien firing:**
Instead of firing every step, have a separate `alienFireTimer`. Every X seconds, a random bottom alien fires. The speed of the *movement* and the speed of *firing* can independently increase as aliens die.

**Bunker Pixel-Destruction:**
```javascript
function checkBulletBunkerCollision(bullet, bunker) {
    if (!isColliding(bullet, bunker)) return false;
    // Bullet hit bunker bounding box, now do pixel damage
    let hit = false;
    // Determine entry point or just damage center
    let cx = bullet.x + bullet.w/2;
    let cy = bullet.y + bullet.h/2;
    if (bunker.damage(cx, cy)) {
        hit = true;
        // Also damage a small area around center for bigger holes
        bunker.damage(cx - 2, cy);
        bunker.damage(cx + 2, cy);
        bunker.damage(cx, cy - 2);
        bunker.damage(cx, cy + 2);
    }
    return hit;
}
```

**Rendering UI:**
Draw text directly on canvas for score and lives.
`ctx.fillStyle = 'white'; ctx.font = '20px Courier New'; ctx.fillText('SCORE: ' + state.score, 10, 30);`

**Particles:**
Simple array of small squares that expand and fade.

**Game Loop:**
```javascript
function loop(timestamp) {
    let dt = (timestamp - state.lastTime) / 1000;
    if (dt > 0.1) dt = 0.1; // Cap dt to avoid jumps
    state.lastTime = timestamp;

    ctx.clearRect(0, 0, canvas.width, canvas.height);

    if (state.mode === 'MENU') {
        drawMenu();
    } else if (state.mode === 'PLAYING') {
        update(dt);
        draw();
    } else if (state.mode === 'GAMEOVER') {
        drawGameOver();
    }

    requestAnimationFrame(loop);
}
```

**Wait, I need to make sure the player movement feels smooth.**
Using `requestAnimationFrame` and `dt` based movement is good. Bounds checking: `this.x = Math.max(0, Math.min(canvas.width - this.w, this.x));`

**Alien Grid Logic Details:**
I'll create a 2D array of Alien objects.
Rows: 5 (to fit 3 types nicely: 1 row squid, 2 rows crab, 2 rows octopus). Or 6 rows.
Columns: 11.
Starting pos: let's say top-left at `(50, 50)`.
Spacing: `alienW = 30`, `alienH = 24`. Gap between: `gapX = 10`, `gapY = 10`.

**Alien Sprite Maps:**
Let's make them 11 wide x 8 high.
*Squid (Top row):*
```javascript
[
  [0,0,0,1,1,0,0,0],
  [0,0,1,1,1,1,0,0],
  [0,1,1,1,1,1,1,0],
  [1,1,0,1,1,0,1,1],
  [1,1,1,1,1,1,1,1],
  [0,0,1,0,0,1,0,0],
  [0,1,0,1,1,0,1,0],
  [1,0,1,0,0,1,0,1]
]
```
Wait, 11 wide.
Let's do 11x8 arrays.
Squid:
```
0 0 1 0 0 0 0 0 1 0 0
0 0 0 1 0 0 0 1 0 0 0
0 0 1 1 1 1 1 1 1 0 0
0 1 1 0 1 1 1 0 1 1 0
1 1 1 1 1 1 1 1 1 1 1
1 0 1 1 1 1 1 1 1 0 1
1 0 1 0 0 0 0 0 1 0 1
0 0 0 1 1 0 1 1 0 0 0
```
(Formatted as arrays of arrays).
Crab:
```
0 0 1 0 0 0 0 0 1 0 0
0 0 0 1 0 0 0 1 0 0 0
0 0 1 1 1 1 1 1 1 0 0
0 1 1 0 1 1 1 0 1 1 0
1 1 1 1 1 1 1 1 1 1 1
1 0 0 1 1 1 1 1 0 0 1
0 1 1 0 0 1 0 0 1 1 0
0 0 1 1 0 0 0 1 1 0 0
```
Octopus:
```
0 0 0 0 1 1 1 0 0 0 0
0 1 1 1 1 1 1 1 1 0 0
1 1 1 1 1 1 1 1 1 1 0
1 1 1 0 0 1 0 0 1 1 1
1 1 1 1 1 1 1 1 1 1 1
0 0 0 1 0 0 0 1 0 0 0
0 0 1 0 1 1 1 0 1 0 0
1 1 0 0 0 0 0 0 0 1 1
```

**Bunker Shape:**
Classic bunkers are sort of mushroom-shaped or parabolic with a hole at the top.
To make it simple but good looking, I'll define a 2D shape for the bunker too.
Block size: 3px. Grid: 15x12 = 45x36 pixels.
Or just use `arc` or manually cut corners.
Actually, a simpler way for "procedural graphics" is to draw the bunker on a hidden offscreen canvas initially, then use that as an image, but the prompt says no external assets and procedural graphics. Using a small array for bunker shape is very procedural.
Let's do bunker size 48x32, block size 4 -> 12x8 grid.
Shape:
```
0 0 1 1 1 1 1 1 1 1 0 0
0 1 1 1 1 1 1 1 1 1 1 0
1 1 1 1 1 1 1 1 1 1 1 1
1 1 1 0 0 1 1 0 0 1 1 1
1 1 1 0 0 1 1 0 0 1 1 1
1 1 1 1 1 1 1 1 1 1 1 1
1 1 0 1 1 1 1 1 1 0 1 1
0 0 1 1 0 0 0 0 1 1 0 0
```
Wait, usually the "hole" is near the top, not bottom. Classic arcade: a big overhang with a hole in the top center.
Let's adjust:
```
Row 0: 0 0 1 1 1 1 1 1 1 1 0 0
Row 1: 0 1 1 1 1 1 1 1 1 1 1 0
Row 2: 1 1 1 1 1 1 1 1 1 1 1 1
Row 3: 1 1 1 1 1 0 0 1 1 1 1 1
Row 4: 1 1 1 1 1 0 0 1 1 1 1 1
Row 5: 1 1 1 1 1 1 1 1 1 1 1 1
Row 6: 0 1 1 1 1 1 1 1 1 1 1 0
Row 7: 0 0 0 1 1 1 1 1 1 0 0 0
```
This looks more like the classic bunker with a hole. I'll use this map.
Block size: 4px. Width = 48, Height = 32. Perfect.

**Collision Details:**
The bullet is 2x8. When it overlaps a bunker, I should damage multiple cells. The bullet can be treated as a small line or point for simplicity. I'll take the bullet's leading edge center point (for upward bullet: `(x + w/2, y)`) and damage the cell there, plus maybe a small radius.

**Enemy Bullets vs Bunkers:** Yes, in the original, alien bullets can also destroy bunkers.

**Player Death:**
If hit, lose a life. Player disappears briefly. Spawn particles.
I'll make the player "flash" or just not be drawn for 1 second, but bullets can still hit the player during this time. Actually, invulnerability is better. 2 seconds of invulnerability after death.

**Restart:**
Reset all arrays and variables. Restore player position.

**Level Progression:**
When all aliens dead:
- Increase level.
- Increase base speed slightly.
- Reset aliens, bullets, bunkers (maybe bunkers regenerate? In original they don't. Let's give new clean bunkers each level).
- Score bonus or just keep going.

**Responsiveness:**
Canvas is 800x600. Fixed size is fine for this request. Centering with flex.

**Color Palette:**
Background: `#000000`
Player: Green `#33ff33` or `#00ff00`
Bullets: Player = Yellow `#ffff00`, Alien = Cyan/Red? Classic is white/green for player, red for aliens. Let's do Player Bullet = `#ffff00`, Alien Bullet = `#ff0000`.
Aliens: White `#ffffff` (classic white), or multi-colored. Let's do alien rows: Magenta, Cyan, White, Cyan, Magenta.
Bunkers: Green `#00ff00`.

**Drawing the Menu:**
```javascript
function drawMenu() {
    ctx.fillStyle = '#ffffff';
    ctx.font = '40px Courier New';
    ctx.textAlign = 'center';
    ctx.fillText('SPACE INVADERS', canvas.width/2, canvas.height/2 - 50);
    ctx.font = '20px Courier New';
    ctx.fillText('Press ENTER to Start', canvas.width/2, canvas.height/2 + 20);
    ctx.fillText('Arrow Keys to Move | Space to Shoot', canvas.width/2, canvas.height/2 + 60);
    ctx.textAlign = 'left';
}
```

**Let's refine the bunker damage logic.**
Bunker class has `grid`.
`damage(px, py)`:
Bounds check.
`col = floor((px - this.x) / blockSize)`, `row = floor((py - this.y) / blockSize)`.
If grid[row][col] is 1, set to 0 and spawn 2-3 particles.
Caller should pass the bullet's leading edge.
Also, since bullet has non-zero width/height, I could loop over cells that overlap the bullet rect, but center damage is sufficient and performant.

**Particle System:**
```javascript
class Particle {
    constructor(x, y, color) {
        this.x = x; this.y = y;
        this.vx = (Math.random() - 0.5) * 100;
        this.vy = (Math.random() - 0.5) * 100;
        this.life = 0.5; // seconds
        this.color = color;
        this.size = 2;
    }
    update(dt) {
        this.x += this.vx * dt;
        this.y += this.vy * dt;
        this.life -= dt;
    }
    draw() {
        ctx.globalAlpha = Math.max(0, this.life / 0.5);
        ctx.fillStyle = this.color;
        ctx.fillRect(this.x, this.y, this.size, this.size);
        ctx.globalAlpha = 1;
    }
}
```

**Alien Grid Definition:**
5 rows.
Row 0 (Squid): 11 aliens.
Row 1-2 (Crab): 11 each.
Row 3-4 (Octopus): 11 each.

Wait, I should make sure the overall alien grid fits nicely at the top.
`alienW = 30`, `alienH = 24`.
`startX = 40`, `startY = 60`.
Spacing: `gapX = 15`, `gapY = 15`.
Total width = 11*30 + 10*15 = 330 + 150 = 480. Good.
Total height = 5*24 + 4*15 = 120 + 60 = 180.
Right edge = 40 + 480 = 520. Well within 800.

**Alien Movement Step:**
When an alien step happens, they all shift by `dx = alienDir * stepSize`.
`stepSize` should scale with grid size? Classic doesn't, it's fixed pixel steps (e.g., 1px or 2px or 10px). Let's do 10px per step.
Speed of steps: `moveInterval` starts at `1.0s` and decreases to `0.05s`.
Wait, if step size is 10px, and interval is 1s, speed is 10px/s. That's way too slow.
Let's make `stepSize = 8` pixels.
Initial `moveInterval = 0.8` -> 10 px/s.
Bottom `moveInterval = 0.05` -> 160 px/s.
This feels right.

**Alien Firing:**
Let's have a separate `alienFireTimer`.
Initial `alienFireInterval = 1.5` seconds. Decreases to `0.3` seconds as aliens die.
Every time it fires, pick a random column that has at least one alive alien at the bottom. Then the lowest alive alien in that column fires. This prevents aliens from firing "through" other aliens, which is authentic.

**function getBottomAliens():**
Group aliens by column, find max y for each column with alive aliens, return the alien object. Pick one randomly.

**Collision between bullets and aliens:**
Standard AABB. If hit, `alien.alive = false`, bullet `active = false` (or remove from array), score++, spawn particles.

**Collision between bullets and player:**
Same AABB. If player is not dead/invulnerable, lives--, bullet destroyed, spawn particles, reset position.

**Collision between alien and player:**
If alien rect intersects player rect -> Game Over.
Also, if any alien's y + h >= canvas.height (descent too far) -> Game Over.

**Win Condition:**
Count alive aliens. If 0, go to next level.

**Level Reset:**
`state.level++`.
Recreate `state.aliens`, `state.bullets`, `state.alienBullets`, `state.particles`.
Reset `alienDir = 1`, `alienMoveTimer = 0`.
Recreate bunkers (clean).
Keep player, score, lives.
Increase `alienMoveInterval` divisor slightly.

**score tracking:**
Squid: 30 points.
Crab: 20 points.
Octopus: 10 points.

**Implementing the full thing in one file.**
I will write the full HTML.

Let me double-check the prompt requirements:
- Single-page web app (index.html).
- CSS in `<style>`, JS in `<script>`, inline.
- No external resources, CDNs, or network requests.
- Fully sandboxed, runs without network.
- Player cannon: moves, shoots.
- Descending grid of aliens: advance, fire back.
- Destructible bunkers.
- Score, lives.
- Procedural graphics only.

All good.

**Self-Correction/Edge Cases:**
- `requestAnimationFrame` needs to be called with a DOM element or just the callback function. `requestAnimationFrame(loop)`.
- `dt` unit: seconds. Speeds in px/s.
- Boundary checking for player: `this.x < 0 ? 0 : this.x > canvas.width - this.w ? canvas.width - this.w : this.x`.
- Bunker pixel damage: I must ensure the bullet's position passed to `bunker.damage()` is in canvas coordinates. Yes, bullet is updated in canvas space.
- Drawing order: Bunker background? No, just draw bunkers, then aliens, then bullets, then player, then particles, then UI on top. Or: Bunkers, Aliens, Player Bullets, Alien Bullets, Player, Particles, UI. Player bullets should be on top of aliens. Player on top. UI on top.

**Bunker Shape Generation:**
I'll define the map directly in the constructor.
```javascript
// 8 rows, 12 cols, blockSize = 4
const shape = [
    [0,0,1,1,1,1,1,1,1,1,0,0],
    [0,1,1,1,1,1,1,1,1,1,1,0],
    [1,1,1,1,1,1,1,1,1,1,1,1],
    [1,1,1,1,1,0,0,1,1,1,1,1],
    [1,1,1,1,1,0,0,1,1,1,1,1],
    [1,1,1,1,1,1,1,1,1,1,1,1],
    [0,1,1,1,1,1,1,1,1,1,1,0],
    [0,0,0,1,1,1,1,1,1,0,0,0]
];
for (let r=0; r<8; r++) {
    this.grid[r] = [];
    for (let c=0; c<12; c++) {
        this.grid[r][c] = shape[r][c];
    }
}
```
When drawing, use `ctx.fillStyle = '#00ff00';`
When hit, spawn particle of green.

**Alien Sprite Generation:**
I need to define the arrays.
Squid:
```javascript
[
  [0,0,0,1,0,0,0,1,0,0,0],
  [0,0,1,1,1,1,1,1,1,0,0],
  [0,1,1,1,1,1,1,1,1,1,0],
  [1,1,0,1,1,1,1,1,0,1,1],
  [1,1,1,1,1,1,1,1,1,1,1],
  [1,0,1,1,1,1,1,1,1,0,1],
  [1,0,1,0,0,0,0,0,1,0,1],
  [0,0,0,1,1,0,1,1,0,0,0]
]
```
Crab:
```javascript
[
  [0,0,1,0,0,0,0,0,1,0,0],
  [0,1,1,1,0,0,0,1,1,1,0],
  [1,1,1,1,1,1,1,1,1,1,1],
  [1,0,1,1,1,1,1,1,1,0,1],
  [1,0,1,0,0,0,0,0,1,0,1],
  [1,0,0,1,1,0,1,1,0,0,1],
  [0,1,1,0,0,0,0,0,1,1,0],
  [0,0,1,1,0,0,0,1,1,0,0]
]
```
Octopus:
```javascript
[
  [0,0,0,0,1,1,1,0,0,0,0],
  [0,1,1,1,1,1,1,1,1,0,0],
  [1,1,1,1,1,1,1,1,1,1,0],
  [1,1,1,0,0,1,0,0,1,1,1],
  [1,1,1,1,1,1,1,1,1,1,1],
  [0,0,1,1,0,0,0,1,1,0,0],
  [0,1,1,0,1,1,1,0,1,1,0],
  [1,1,0,0,0,0,0,0,0,1,1]
]
```

**Drawing Player:**
```javascript
draw() {
    ctx.fillStyle = this.color;
    // base
    ctx.fillRect(this.x, this.y + 10, this.w, this.h - 10);
    // middle section
    ctx.fillRect(this.x + 6, this.y + 6, this.w - 12, 4);
    // barrel
    ctx.fillRect(this.x + this.w/2 - 2, this.y, 4, 8);
    // treads
    ctx.fillStyle = '#008800';
    ctx.fillRect(this.x, this.y + 10, 6, this.h - 10);
    ctx.fillRect(this.x + this.w - 6, this.y + 10, 6, this.h - 10);
}
```

**Start/Game Over screens:**
In the main loop, clear the screen. If state.mode is not PLAYING, draw the appropriate screen and handle Enter key to start/reset.

**Alien Collision Bounds:**
Aliens only move horizontally and in steps. Their individual `x` and `y` are updated. Perfect for bounding boxes.

One issue: if I update alien positions in a step, and check collisions against player/bullets mid-step, it could cause frame-skipped collisions. But since bullets and player move smoothly and aliens move discretely every 0.8s (or whatever), we need to handle the case where a fast-moving bullet passes through an alien between steps. However, bullet speed is moderate (600 px/s), and step time is min 0.05s. Max step displacement: 8px. Bullet moves 30px in 0.05s. So a bullet can definitely skip over an alien if an alien is small. To fix this, ideally I'd use continuous collision detection or simply check bullets vs aliens more aggressively (e.g., check against the interpolated positions or check against the step vector).
Simpler fix: Make alien bullets and player bullets small, and perhaps use larger bounding boxes? Or, just increase the step size and make the alien hitboxes slightly larger? No, that's hacky.
Another approach: update aliens in small increments (e.g., 1px per frame) instead of 8px steps. This is smoother and less likely to skip collisions. Let's do that.
Instead of a step-based movement, I can make aliens move continuously but change direction at edges, and have a global `alienSpeed` that increases.
Actually, the classic "step" feel is iconic. Let's keep the step, but check collisions between alien step positions by sweeping the bullet against the alien's previous and new positions. Or just rely on the fact that alien step size (8px) is small enough that bullets won't skip easily if I do `rectIntersect` with the *whole* bullet path.
Wait, 8px steps over a 30px wide alien is fine. A 2px bullet moving 30px might skip. The chance is low but possible.
I'll just increase the step size? No.
Alternative: run the alien step, then in the next frames until the next step, use the *current* alien position for collision. Since the step is 8px, and the bullet speed is 600px/s (10 px/frame), it might skip.
I can just do continuous movement for aliens, but sync their x positions so they all move in unison. No stepping.
Let's do continuous movement for aliens. It's smoother and avoids tunneling issues without complex logic.
Continuous alien movement:
- Global `alienSpeed` (pixels per second). Starts at 20, increases.
- `alienDir` (1 or -1).
- Alien grid moves `alienSpeed * dt * alienDir` each frame.
- Check if *any* alien hits the edge. If so, shift all aliens down by 20px and flip `alienDir`.
- This naturally avoids discrete steps.
- Firing: `alienFireTimer` independent of movement. Fires a bullet from the lowest alien in a random column.
- This is much better for modern frame-based rendering and collision detection.

**Revised Alien Logic:**
```javascript
let alienSpeed = 20; // px/s
let alienDir = 1;
let alienDropAmount = 24; // px
let alienFireTimer = 0;
let alienFireInterval = 1.5;

function getAliveAliens() { return state.aliens.filter(a => a.alive); }

function getBottomAlienInColumn(colX) {
    let candidates = state.aliens.filter(a => a.alive && Math.abs(a.x - colX) < 5); // mismatch due to movement? They are in columns.
    // Actually, maintain column index in Alien.
    candidates.sort((a,b) => b.y - a.y);
    return candidates.length > 0 ? candidates[0] : null;
}
```
Wait, defining columns explicitly is hard if aliens are in a smooth grid. It's easier to just say: when an alien needs to fire, pick a random X-position that corresponds to an alien column, then find the lowest alien with an `x` near that column.
Let's just initialize aliens in a structured 2D array, and track their logical column/row.
```javascript
let alienGrid = []; // [col][row] or [row][col]
for (let r=0; r<5; r++) {
    alienGrid[r] = [];
    for (let c=0; c<11; c++) {
        alienGrid[r][c] = new Alien(...);
    }
}
```
Then movement: shift all `alienGrid[r][c].x += alienDir * alienSpeed * dt`.
Check edges: find the min `x` and max `x` among *alive* aliens.
If `max.x + w > canvas.width - 20` then hit right edge. If `min.x < 20` then hit left edge.
If hit, `alienDir *= -1`, and `alien.y += alienDropAmount` for all alive aliens.
Reset edge flags.

This is robust. The `alienDropAmount` can be the alien height (e.g., 24px).

**Alien Firing:**
`alienFireInterval` can be based on the number of aliens. `max(0.2, 2.0 - aliveAliens/66 * 1.8)`.
Wait, 2.0 to 0.2.
When timer fires:
```javascript
let aliveAliens = getAliveAliens();
if (aliveAliens.length > 0) {
    // Find the lowest alien in each column, pick a random one among those
    let bottomAliens = [];
    for (let c=0; c<11; c++) {
        for (let r=4; r>=0; r--) {
            if (alienGrid[r][c] && alienGrid[r][c].alive) {
                bottomAliens.push(alienGrid[r][c]);
                break;
            }
        }
    }
    let shooter = bottomAliens[Math.floor(Math.random() * bottomAliens.length)];
    state.alienBullets.push(new Bullet(shooter.x + shooter.w/2 - 1, shooter.y + shooter.h, 300 + state.level * 20, '#ff0000'));
}
```
Note: `300 + level * 20` means alien bullets get faster.

**Bunker Collision Logic (V2):**
Instead of just damaging the center, damage all cells that overlap the bullet rect.
```javascript
function damageBunkerAt(bunker, bx, by, bw, bh) {
    let startCol = Math.max(0, Math.floor((bx - bunker.x) / bunker.blockSize));
    let endCol = Math.min(bunker.cols - 1, Math.floor((bx + bw - bunker.x) / bunker.blockSize));
    let startRow = Math.max(0, Math.floor((by - bunker.y) / bunker.blockSize));
    let endRow = Math.min(bunker.rows - 1, Math.floor((by + bh - bunker.y) / bunker.blockSize));
    if (startCol > endCol || startRow > endRow) return false;
    for (let r=startRow; r<=endRow; r++) {
        for (let c=startCol; c<=endCol; c++) {
            if (bunker.grid[r][c]) {
                bunker.grid[r][c] = 0;
                spawnParticles(bunker.x + c * bunker.blockSize + bunker.blockSize/2, bunker.y + r * bunker.blockSize + bunker.blockSize/2, '#00ff00', 3);
                return true;
            }
        }
    }
    return false;
}
```
This is better. It destroys the first cell it encounters, or should it destroy all cells? Classic behavior is that the bullet punches through, but since the bullet is removed on hit in my code, destroying the first encountered cells (from top-left) is sufficient. Or just the center? No, looping is better.

Wait, my loop destroys all cells the bullet overlaps! That would make a bullet punch through a whole wall in one shot. That's not right. It should remove the cells it hits and stop. I can just remove the first set and return. Or remove cells along the bullet's path. To simplify and remain authentic: the bullet destroys the block(s) it is currently overlapping and is then destroyed. If multiple blocks overlap, they all get removed. Yes, that's fine. It creates a larger hole.

```javascript
function checkBulletBunker(bullet, bunker) {
    if (!isColliding(bullet, bunker)) return false;
    let startCol = Math.floor(Math.max(0, (bullet.x - bunker.x) / bunker.blockSize));
    let endCol = Math.floor(Math.min(bunker.cols, (bullet.x + bullet.w - bunker.x) / bunker.blockSize));
    let startRow = Math.floor(Math.max(0, (bullet.y - bunker.y) / bunker.blockSize));
    let endRow = Math.floor(Math.min(bunker.rows, (bullet.y + bullet.h - bunker.y) / bunker.blockSize));
    if (startCol > endCol || startRow > endRow) return false;
    for (let r = startRow; r <= endRow; r++) {
        for (let c = startCol; c <= endCol; c++) {
            if (bunker.grid[r][c]) {
                bunker.grid[r][c] = 0;
                spawnParticles(bunker.x + c*bunker.blockSize + 2, bunker.y + r*bunker.blockSize + 2, '#00ff00', 2);
            }
        }
    }
    return true;
}
```
This destroys all blocks the bullet rectangle touches. It's slightly generous but looks cool and is true to "destructible bunkers".

**Game States and Resetting:**
I'll create a `resetGame()` function.
```javascript
function resetGame() {
    state.score = 0;
    state.lives = 3;
    state.level = 1;
    state.mode = 'PLAYING';
    initLevel();
}

function initLevel() {
    state.bullets = [];
    state.alienBullets = [];
    state.particles = [];
    state.player = new Player();
    state.bunkers = [];
    // create 4 bunkers
    let bunkerSpacing = canvas.width / 5;
    for (let i=1; i<=4; i++) {
        state.bunkers.push(new Bunker(i * bunkerSpacing - 48/2, canvas.height - 120));
    }
    state.aliens = [];
    let rows = [0,1,2,3,4]; // 5 rows
    let rowTypes = ['squid', 'crab', 'crab', 'octopus', 'octopus'];
    for (let r=0; r<rows.length; r++) {
        for (let c=0; c<11; c++) {
            state.aliens.push(new Alien(30 + c * 45, 40 + r * 40, rowTypes[r]));
        }
    }
    alienSpeed = 20 + state.level * 5;
    alienFireInterval = Math.max(0.3, 1.5 - state.level * 0.1);
    alienMoveDir = 1;
}
```
Wait, `state.aliens` can be a flat array, but it's easier to use a 2D grid `alienGrid` for firing logic.
```javascript
state.alienGrid = [];
for (let r=0; r<5; r++) {
    state.alienGrid[r] = [];
    for (let c=0; c<11; c++) {
        let a = new Alien(30 + c * 45, 40 + r * 40, rowTypes[r]);
        state.alienGrid[r][c] = a;
    }
}
```
Edge detection for continuous movement:
```javascript
function getAliveAlienBounds() {
    let minX = canvas.width, maxX = 0, maxY = 0;
    let hasAlive = false;
    for (let r=0; r<5; r++) {
        for (let c=0; c<11; c++) {
            let a = state.alienGrid[r][c];
            if (a && a.alive) {
                hasAlive = true;
                if (a.x < minX) minX = a.x;
                if (a.x + a.w > maxX) maxX = a.x + a.w;
                if (a.y + a.h > maxY) maxY = a.y + a.h;
            }
        }
    }
    return { minX, maxX, maxY, hasAlive };
}
```

**Bunker Positioning:**
`canvas.width = 800`.
Bunker width = 48.
4 bunkers.
Spacing = 800 / 5 = 160.
Positions: x = 160 - 24 = 136, 320 - 24 = 296, 480 - 24 = 456, 640 - 24 = 616.
y = `canvas.height - 100` (so 500).
This gives plenty of room for the player at `canvas.height - 40 = 560`.

**Alien Movement:**
```javascript
let bounds = getAliveAlienBounds();
if (bounds.hasAlive) {
    if (alienMoveDir > 0 && bounds.maxX > canvas.width - 30) {
        // shift down and reverse
        for (let r=0; r<5; r++) for (let c=0; c<11; c++) {
            if (state.alienGrid[r][c].alive) state.alienGrid[r][c].y += alienDropAmount;
        }
        alienMoveDir = -1;
    } else if (alienMoveDir < 0 && bounds.minX < 30) {
        for (let r=0; r<5; r++) for (let c=0; c<11; c++) {
            if (state.alienGrid[r][c].alive) state.alienGrid[r][c].y += alienDropAmount;
        }
        alienMoveDir = 1;
    } else {
        let dx = alienSpeed * dt * alienMoveDir;
        for (let r=0; r<5; r++) for (let c=0; c<11; c++) {
            state.alienGrid[r][c].x += dx;
        }
    }
    // check invasion
    if (bounds.maxY >= state.player.y) {
        state.mode = 'GAMEOVER';
    }
}
```
Hmm, using flat `state.aliens` is fine, but `alienGrid` is easier for firing. Let's just maintain both or only use `alienGrid` and flatten when needed for drawing/iteration.
I'll iterate `alienGrid` for movement and firing, and draw everything in one loop.

**Firing Logic (continuous movement):**
```javascript
alienFireTimer += dt;
if (alienFireTimer >= alienFireInterval) {
    alienFireTimer -= alienFireInterval;
    // get bottom aliens per column
    let candidates = [];
    for (let c=0; c<11; c++) {
        for (let r=4; r>=0; r--) {
            if (state.alienGrid[r][c] && state.alienGrid[r][c].alive) {
                candidates.push(state.alienGrid[r][c]);
                break;
            }
        }
    }
    if (candidates.length > 0) {
        let shooter = candidates[Math.floor(Math.random() * candidates.length)];
        state.alienBullets.push(new Bullet(shooter.x + shooter.w/2 - 1, shooter.y + shooter.h, 300 + state.level * 30, '#ff0000'));
        // Maybe add a second bullet if level high?
    }
}
```

**Score Display:**
`ctx.fillStyle = 'white'; ctx.font = '20px Courier New'; ctx.textAlign = 'left'; ctx.fillText('SCORE: ' + state.score, 20, 30);`
Lives: Draw small player cannons on the right side, or just text. `ctx.textAlign = 'right'; ctx.fillText('LIVES: ' + state.lives, canvas.width - 20, 30);`

**Screens:**
When `mode === 'MENU'`, draw centered text.
When `mode === 'GAMEOVER'`, draw game over + final score + press enter.
When `state.mode === 'PLAYING'`, run update/draw.
If all aliens dead in update: `state.level++`; `initLevel()`.

**Particle Management:**
In update, filter out dead particles.

**Drawing Order:**
1. Clear.
2. Draw player (if alive).
3. Draw bunkers.
4. Draw aliens.
5. Draw player bullets.
6. Draw alien bullets.
7. Draw particles.
8. Draw UI.

**Wait**, bullets should be drawn over aliens. Player over bullets. Bunkers behind everything? No, bullets between aliens and player looks best. Actually, in Space Invaders, bullets pass *over* aliens and *in front of* the shield. Player is at the bottom. So:
Bunkers (background-ish) -> Aliens -> Bullets -> Player -> Particles -> UI.

**Wait, Bunkers are destroyed by bullets.**
If bullets are drawn over aliens, and bunkers are drawn behind aliens, it looks okay. But bullets passing over aliens is fine.

**Fixed array maps:**
I'll embed the alien and bunker sprite maps directly in the code as JS arrays.

**One more check on bounds:**
Bunker `y`: `canvas.height - 100`.
Player `y`: `canvas.height - 40`.
So bunker bottom is at 400. Player top is at 560. There is 160px gap. Classic is tighter, but this is fine. Let's make bunker y = `canvas.height - 90`. Bottom = 390. Player y = `canvas.height - 40` = 560. Gap = 170. Still fine. Maybe `canvas.height - 80`. Bottom = 380. Player at 520. Gap 140. Better.
Actually, classic has bunkers just in front of player. Let's do `canvas.height - 90` for bunkers, player `canvas.height - 40`. Works.

**Input for menus:**
```javascript
window.addEventListener('keydown', (e) => {
    keys[e.key] = true;
    if (state.mode === 'MENU' && (e.key === 'Enter' || e.key === ' ')) {
        resetGame();
    }
    if ((state.mode === 'GAMEOVER' || state.mode === 'WIN') && (e.key === 'Enter' || e.key === ' ')) {
        resetGame();
    }
});
```
I'll combine Game Over and Win states, or just call them all PLAYING/MENU/GAMEOVER.

**Final Polish:**
- Add a simple starfield background? That's procedural. I could populate an array of stars with random x, y, size and blink them. It's pure canvas drawing. It adds a nice touch. Let's add it.
```javascript
let stars = [];
for (let i=0; i<50; i++) {
    stars.push({x: Math.random()*canvas.width, y: Math.random()*canvas.height, size: Math.random()*2, blink: Math.random()});
}
starTimer += dt; // etc.
```
I'll skip stars to keep it focused, or add a very simple one. It takes a few lines. Let's add stars for polish.
```javascript
let stars = Array.from({length: 60}, () => ({x: Math.random()*800, y: Math.random()*600, s: Math.random()*1.5, b: Math.random()}));
```
Draw them before everything.

**Alien sprite render function:**
```javascript
function drawAlienSprite(x, y, map, color, w, h) {
    ctx.fillStyle = color;
    let pw = w / map[0].length;
    let ph = h / map.length;
    for (let r=0; r<map.length; r++) {
        for (let c=0; c<map[r].length; c++) {
            if (map[r][c]) ctx.fillRect(x + c*pw, y + r*ph, pw, ph);
        }
    }
}
```

**Bunker render function:**
Already covered in the class, but ensure `blockSize = 4`.

**Code completeness check:**
- `Player`: exists.
- `Bullet`: exists.
- `Bunker`: exists with destructible pixels.
- `Alien` class? I might just map them in the grid and keep them lightweight. A class isn't strictly necessary but cleaner.
- Score/Lives: tracked and drawn.
- Game Loop: complete.
- Canvas: centered, styled.
- No externals.

I think this is solid. I'll write the file now.

One detail: `ctx.textAlign = 'center'` for menu screens. Reset to `'left'` for UI.

Also, prevent default on arrow keys and space to stop scrolling.
```javascript
window.addEventListener('keydown', e => {
    if (['ArrowLeft','ArrowRight',' ','Space'].includes(e.key)) e.preventDefault();
    keys[e.key] = true;
    // ...
});
```

Let's write it.

The file has been written. I should verify it looks correct by reading it back or checking if it exists. Let me do a quick read to make sure it's complete and well-formed, then inform the user.

The file starts correctly. I should provide a concise summary to the user, highlighting that the single-file game is complete and ready to play.