Okay, I need to create a self-contained Space Invaders game in a single index.html file. Let me start by planning the structure. The user wants everything in one file, so I'll use HTML with embedded CSS and JavaScript.

First, the HTML structure. I'll have a canvas element where the game will render. Then, I need to handle the game logic. The CSS should be inside a style tag, and the JavaScript inside a script tag.

Let me think about the game components. The player's cannon should move left and right with keyboard inputs. Bullets need to be fired upwards. The aliens should form a grid that moves horizontally and descends when hitting the edges. They should also shoot bullets downwards. Bunkers are destructible obstacles between the player and aliens. There's a score system and lives counter.

For the canvas, I'll set its dimensions, maybe 800x600. The CSS will center it on the page. The JavaScript needs to handle all the game objects.

I'll start by setting up the canvas context. Then, create classes or objects for the player, aliens, bullets, bunkers, etc. The player's movement can be controlled with the left and right arrow keys. Bullets will be fired when the spacebar is pressed.

The aliens need to move in a grid. They should move left until they hit the right edge, then move down a bit, then move right, and so on. Each alien can have a position and speed. Also, each alien can shoot bullets at random intervals.

Bunkers will be static but have hit points. When a bullet hits a bunker, it reduces its health and visually shows damage until it's destroyed.

Collision detection is crucial. Check if player bullets hit aliens, alien bullets hit the player or bunkers, and if the aliens reach the bottom (game over).

For rendering, the draw methods for each object will use the canvas context's fillRect or other shapes. Since there are no external assets, all graphics are procedural.

The game loop will handle updates and rendering. Use requestAnimationFrame for smooth animation. The loop will process input, update game state, check collisions, and redraw everything.

Now, considering the code structure. The script will have variables for the canvas, context, game state, score, lives. Then, functions to create aliens, handle movement, shooting, collisions.

Wait, the user mentioned procedural graphics only, so I need to draw everything with code. For example, the player's cannon could be a rectangle with a triangle on top, or a simple shape. Aliens can be simple blocky figures, maybe using rectangles and lines. Bunkers as rectangles that get eroded when hit.

Let me outline the steps:

1. Create the HTML structure with canvas.
2. Add CSS to style the canvas.
3. In the script, set up the canvas context.
4. Define classes or objects for each game element.
5. Implement movement and shooting logic.
6. Handle input events.
7. Update game state each frame.
8. Check collisions.
9. Render everything on the canvas.
10. Implement game over and restart logic.

Potential issues: Collision detection between bullets and aliens/bunkers. Need to track positions and check overlaps. Also, managing the alien movement pattern, making sure they all move together and descend when hitting the edge.

Also, the score and lives need to be displayed on the canvas. Text rendering with the canvas context.

Testing key controls: Player movement (left/right) and shooting (spacebar). Need to add event listeners for keydown and keyup.

For the aliens, maybe a grid of 11 columns and 5 rows. They move left initially, then reverse direction when hitting the canvas edge. Each time they reverse, they move down a bit.

Each alien can have a hitbox rectangle. When a player's bullet collides with an alien, it's removed, and the score increases.

Bunkers: Maybe three bunkers placed between the player and aliens. Each bunker has a certain number of hit points. When hit by a bullet, part of it is destroyed visually.

Alien bullets: They should shoot at random intervals. Each alien can have a cooldown period after shooting.

Game over occurs when an alien reaches the same y-coordinate as the player, or when the player's lives reach zero.

Now, putting this all together into code. Let me start writing the code step by step.

First, the HTML and CSS:

<!DOCTYPE html>
<html>
<head>
    <title>Space Invaders</title>
    <style>
        body { margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background: #000; }
        canvas { border: 1px solid #fff; }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="800" height="600"></canvas>
    <script>
        // JavaScript code here
    </script>
</body>
</html>

Now, the JavaScript part. Initialize the canvas and context. Set up variables for game state.

Then, define the Player object. It should have x position, width, height, speed, and methods to draw and move.

Aliens: Maybe an array of alien objects. Each has x, y, width, height, speed. The entire grid moves, so the speed is shared.

Bullets: Both player and alien bullets. Player bullets go up, alien bullets go down. Each bullet has x, y, speed, direction.

Bunkers: Maybe an array of bunker objects. Each has x, y, width, height, and hit points.

The game loop: Use requestAnimationFrame. Clear the canvas each frame, update positions, check collisions, draw everything.

Handling key presses: Track left and right keys. When pressed, move the player left or right. Spacebar to shoot.

Collision detection: For each player bullet, check if it hits any alien. For each alien bullet, check if it hits the player or a bunker. Also check if aliens have hit the bottom.

Now, implementing all of this in code. Let me draft the code.

First, the canvas setup:

const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

Then, variables for player:

let player = {
    x: canvas.width / 2 - 20,
    y: canvas.height - 40,
    width: 40,
    height: 20,
    speed: 5,
    dx: 0
};

Alien grid:

let aliens = [];
const alienRows = 5;
const alienCols = 11;
const alienWidth = 30;
const alienHeight = 20;
const alienSpacing = 10;
let alienSpeed = 1;
let alienDirection = 1; // 1 for right, -1 for left

Initialize aliens:

function createAliens() {
    aliens = [];
    for (let row = 0; row < alienRows; row++) {
        for (let col = 0; col < alienCols; col++) {
            aliens.push({
                x: 50 + col * (alienWidth + alienSpacing),
                y: 50 + row * (alienHeight + alienSpacing),
                width: alienWidth,
                height: alienHeight,
                alive: true
            });
        }
    }
}

Bullets:

let bullets = [];

Bunkers:

let bunkers = [
    { x: 100, y: 500, width: 60, height: 40, hits: 0 },
    { x: 350, y: 500, width: 60, height: 40, hits: 0 },
    { x: 600, y: 500, width: 60, height: 40, hits: 0 }
];

Score and lives:

let score = 0;
let lives = 3;

Game state:

let gameOver = false;

Now, the draw functions. For the player:

function drawPlayer() {
    ctx.fillStyle = '#00FF00';
    ctx.fillRect(player.x, player.y, player.width, player.height);
}

Aliens:

function drawAliens() {
    ctx.fillStyle = '#FF0000';
    aliens.forEach(alien => {
        if (alien.alive) {
            ctx.fillRect(alien.x, alien.y, alien.width, alien.height);
        }
    });
}

Bullets:

function drawBullets() {
    ctx.fillStyle = '#FFFF00';
    bullets.forEach(bullet => {
        ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
    });
}

Bunkers:

function drawBunkers() {
    ctx.fillStyle = '#0000FF';
    bunkers.forEach(bunker => {
        // Draw the bunker, maybe with some damage effect
        ctx.fillRect(bunker.x, bunker.y, bunker.width, bunker.height);
        // Show damage by drawing over parts if hit
        if (bunker.hits > 0) {
            ctx.fillStyle = '#000';
            ctx.fillRect(bunker.x, bunker.y, bunker.width, bunker.hits * 10);
        }
    });
}

Score and lives display:

function drawInfo() {
    ctx.fillStyle = '#FFFFFF';
    ctx.font = '20px Arial';
    ctx.fillText('Score: ' + score, 10, 30);
    ctx.fillText('Lives: ' + lives, canvas.width - 100, 30);
}

The update function:

function update() {
    if (gameOver) return;

    // Move player
    player.x += player.dx;

    // Keep player within canvas
    if (player.x < 0) player.x = 0;
    if (player.x + player.width > canvas.width) player.x = canvas.width - player.width;

    // Move aliens
    let moveDown = false;
    aliens.forEach(alien => {
        if (!alien.alive) return;
        alien.x += alienSpeed * alienDirection;

        // Check if aliens hit the canvas edge
        if (alien.x + alien.width >= canvas.width || alien.x <= 0) {
            moveDown = true;
        }
    });

    if (moveDown) {
        alienDirection *= -1;
        // Move all aliens down
        aliens.forEach(alien => {
            if (alien.alive) {
                alien.y += 20;
            }
        });
    }

    // Update bullets
    bullets.forEach(bullet => {
        bullet.y += bullet.dy;
    });

    // Remove bullets that go off screen
    bullets = bullets.filter(bullet => bullet.y + bullet.height > 0 && bullet.y < canvas.height);

    // Check collisions
    checkCollisions();

    // Check game over
    checkGameOver();
}

Collision detection:

function checkCollisions() {
    // Player bullets vs aliens
    bullets.forEach(bullet => {
        if (bullet.type === 'player') {
            aliens.forEach(alien => {
                if (alien.alive && bullet.x < alien.x + alien.width &&
                    bullet.x + bullet.width > alien.x &&
                    bullet.y < alien.y + alien.height &&
                    bullet.y + bullet.height > alien.y) {
                    alien.alive = false;
                    bullets = bullets.filter(b => b !== bullet);
                    score += 10;
                }
            });
        }
    });

    // Alien bullets vs player
    bullets.forEach(bullet => {
        if (bullet.type === 'alien') {
            if (bullet.x < player.x + player.width &&
                bullet.x + bullet.width > player.x &&
                bullet.y + bullet.height > player.y &&
                bullet.y < player.y + player.height) {
                lives--;
                bullets = bullets.filter(b => b !== bullet);
                if (lives <= 0) {
                    gameOver = true;
                }
            }
        }
    });

    // Alien bullets vs bunkers
    bullets.forEach(bullet => {
        bunkers.forEach(bunker => {
            if (bullet.x < bunker.x + bunker.width &&
                bullet.x + bullet.width > bunker.x &&
                bullet.y + bullet.height > bunker.y &&
                bullet.y < bunker.y + bunker.height) {
                bunker.hits++;
                bullets = bullets.filter(b => b !== bullet);
                // If bunker is destroyed, remove it
                if (bunker.hits >= 4) {
                    // Maybe just mark as destroyed visually
                }
            }
        });
    });

    // Player bullets vs bunkers
    bullets.forEach(bullet => {
        if (bullet.type === 'player') {
            bunkers.forEach(bunker => {
                if (bullet.x < bunker.x + bunker.width &&
                    bullet.x + bullet.width > bunker.x &&
                    bullet.y < bunker.y + bunker.height &&
                    bullet.y + bullet.height > bunker.y) {
                    bullets = bullets.filter(b => b !== bullet);
                    bunker.hits++;
                }
            });
        }
    });
}

Check game over:

function checkGameOver() {
    // If any alien reaches the player's y position
    aliens.forEach(alien => {
        if (alien.alive && alien.y + alien.height >= player.y) {
            gameOver = true;
        }
    });
}

Shooting logic:

function shootBullet(type) {
    const bulletWidth = 4;
    const bulletHeight = 10;
    const speed = type === 'player' ? -5 : 5;
    bullets.push({
        x: player.x + player.width / 2 - bulletWidth / 2,
        y: type === 'player' ? player.y - bulletHeight : player.y + player.height,
        width: bulletWidth,
        height: bulletHeight,
        dy: speed,
        type: type
    });
}

Aliens shooting at random intervals. Maybe use a timer:

let alienShootInterval = setInterval(() => {
    if (gameOver) return;
    // Choose a random alien to shoot
    const activeAliens = aliens.filter(a => a.alive);
    if (activeAliens.length > 0) {
        const randomAlien = activeAliens[Math.floor(Math.random() * activeAliens.length)];
        shootBullet('alien');
    }
}, 1000); // Adjust interval as needed

Input handling:

document.addEventListener('keydown', keyDownHandler);
document.addEventListener('keyup', keyUpHandler);

function keyDownHandler(e) {
    if (e.key === 'Right' || e.key === 'ArrowRight') {
        player.dx = player.speed;
    }
    else if (e.key === 'Left' || e.key === 'ArrowLeft') {
        player.dx = -player.speed;
    }
    else if (e.key === ' ') { // Spacebar to shoot
        if (!gameOver) {
            shootBullet('player');
        }
    }
}

function keyUpHandler(e) {
    if (e.key === 'Right' || e.key === 'ArrowRight' || e.key === 'Left' || e.key === 'ArrowLeft') {
        player.dx = 0;
    }
}

The game loop:

function gameLoop() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    if (!gameOver) {
        update();
    }
    drawPlayer();
    drawAliens();
    drawBullets();
    drawBunkers();
    drawInfo();

    if (gameOver) {
        ctx.fillStyle = '#FFFFFF';
        ctx.font = '40px Arial';
        ctx.fillText('GAME OVER', canvas.width / 2 - 100, canvas.height / 2);
    }

    requestAnimationFrame(gameLoop);
}

Initialize the game:

createAliens();
gameLoop();

Wait, but the initial setup should be called when the window loads. Maybe wrap the initialization in a function.

Putting it all together, the JavaScript code would be:

// All the code above here

window.onload = () => {
    createAliens();
    gameLoop();
};

But in the script tag, the code should be written directly. However, the canvas might not be available if the script runs before the DOM is loaded. So, better to put the script at the end of the body, which it is.

Potential issues: The initial code may have the canvas in the DOM, so the script can access it.

Now, putting all this into the index.html file. The write function will create the index.html with all the code.

Now, checking for possible mistakes. For example, in the alien movement, when moving down, the code adds 20 to the y position. Also, the check for the edge should be done for all aliens, but the 'moveDown' flag is set if any alien hits the edge.

Another thing: the bullets are stored in a single array, each with a 'type' indicating if they're player or alien. The collision detection checks the type.

In the drawBunkers function, the damage is shown by filling a portion of the bunker with black. Maybe the initial color is blue, and each hit adds a black bar.

Testing the code, but since I can't run it here, I need to make sure all parts are covered.

Now, compiling all this into the index.html file. The write function will be used to create the file with all the code.

The final index.html will have the HTML structure, CSS, and the JavaScript as outlined. All in one file.

Okay, I've successfully created the index.html file with the Space Invaders game code. Now, I need to confirm that the file was written correctly and that all components are included as specified.

The user requested a self-contained single-page web app with CSS in a style tag and JavaScript in a script tag, all within one HTML file. The game should have a player cannon, aliens, bullets, bunkers, score, and lives, with procedural graphics and no external assets.

I checked the code structure: the HTML has a canvas element, the CSS centers it and sets the background, and the JavaScript handles all game logic. The code includes functions for drawing and updating the player, aliens, bullets, and bunkers, as well as collision detection and game loop.

I made sure that all parts are included in the HTML file without any external references. The JavaScript uses requestAnimationFrame for the game loop, event listeners for keyboard input, and procedural drawing with canvas methods.

Potential issues to consider: The aliens' movement logic checks if any alien hits the edge, then reverses direction and moves down. The collision detection checks for bullet-alien, bullet-player, and bullet-bunker interactions. Bunkers take damage when hit, and the score and lives are updated accordingly.

The code should run without network dependencies since all assets are procedural. The final index.html file is written with all necessary code in one file, as required. I think this meets the user's specifications.