I'll build a Space Invaders game in a single HTML file with canvas, CSS, and JavaScript. I'll need to create index.html in the current directory. Let's start by checking the current directory and then writing the file.

Now I'll write the index.html file with a fully self-contained Space Invaders game. I'll structure it with a canvas, game loop, player, aliens, bullets, bunkers, score, lives, and procedural graphics (no external images). Let's craft the content.

Now I'll write the complete index.html file. It will contain the game with all required features: player cannon, aliens, bunkers, score, lives, shooting, alien firing, procedural graphics. I'll structure it with a canvas and game loop. Let's write.

Now I'll create the index.html file with the complete game. I'll include all necessary styles and JavaScript inline. Let's design:

Canvas size: 800x600 (or maybe 800x700 to have UI).
Player cannon: rectangle at bottom, moves left/right with arrow keys, shoots with spacebar.
Aliens: grid of 5 rows, 11 columns? classic Space Invaders: 5 rows of aliens (different shapes?), descending, moving left/right collectively, advancing downward when hitting edge.
Alien bullets: random aliens fire at intervals.
Bunkers: 4 destructible bunkers above player, made of blocks.
Score, lives (3), level.

I'll implement game loop with requestAnimationFrame, collision detection.

Let's write the HTML file.

The file is written but the script is incomplete and has a weird line. I need to replace the entire script with the game logic. Let's read the file to see its current content and then edit the script section.

The script is messed up. I need to replace the entire script block with proper game code. Let's edit the file to replace from `<script>` to `</script>` with a new script. I'll find the exact old text. Let's do an edit with the whole script block.

I need to replace the entire script with a proper game. Also there are some stray characters in CSS (margin:157 0, font-size:指導 2.5rem, letter-spacing: サポート 4px). Let's fix those first. Let's edit the CSS part. I'll use edit with multiple changes. Let's find the exact text for each and replace. First, body margin line. The line "margin:157 0;" should be "margin: 0;". Let's find the exact oldText: "margin:157\n 0,"? Actually the file shows:

```
body {
    margin:157
 0;
```

That's weird formatting. I'll replace the whole block from "body {" to the closing "}" maybe easier. But there are multiple lines. Let's do a single edit for the body block. Let's find the exact lines:

```
body {
    margin:157
 0;
    padding: 0;
    background: #111;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    font-family: 'Courier New', monospace;
    color: #0f0;
    overflow: hidden;
}
```

I'll replace with corrected margin: 0; and fix the weird characters in h1. Let's edit both at once. First, get the exact oldText for body block. Use copy from file. Let's read again with line numbers. Let's do a quick bash to get lines. But easier: I'll write a new CSS block. Let's replace the entire style tag content. That's safer. Let's replace from `<style>` to `</style>`.

I'll get the exact old text for the style tag. Let's read lines around it. I'll write a new style tag with proper CSS. Let's do edit. First, find the exact old text from "<style>" to "</style>". I'll copy from the file but need to be exact. Let's write a new content for style. Let's do edit with oldText being the entire style block including newlines. Let's extract using cat via bash. Let's do a bash command to get the style block lines. But we can approximate: The style block starts with `<style>` and ends with `</style>`.

Let's write a new style block and replace. Let's do edit with oldText being:

`<style>
        body {
            margin:157
 0;
            padding: 0;
            background: #111;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            font-family: 'Courier New', monospace;
            color: #0f0;
            overflow: hidden;
        }
        .container {
            text-align: center;
        }
        h1 {
            margin: 10px 0;
            font-size:指導 2.5rem;
            text-shadow: 0 0 10px #0f0;
            letter-spacing: サポート 4px;
        }
        .game-info {
            display: flex;
            justify-content: space-between;
            width: 800px;
            margin-bottom: 10px;
            font-size: 1.2rem;
        }
        .game-info div {
            display: flex;
            align-items: center;
        }
        .key-hint {
            margin-top: 10px;
            font-size: 1rem;
            color: #888;
        }
        canvas {
            border: 2px solid #0f0;
            box-shadow: 0 0 20px #0f0;
            background-color: #000;
        }
        .controls {
            margin-top: 20px;
            display: flex;
            gap: 20px;
        }
        button {
            background: transparent;
            color: #0f0;
            border: 2px solid #0f0;
            padding: 10px 20px;
            font-family: inherit;
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.3s;
        }
        button:hover {
            background: #0f0;
            color: #000;
        }
        .game-over, .level-up {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(0, 0, 0, 0.9);
            color: #0f0;
            padding: 30px;
            border: 3px solid #0f0;
            text-align: center;
            display: none;
            z-index: 10;
            width: 400px;
        }
        .game-over h2, .level-up h2 {
            margin-top: 0;
        }
    </style>`

But note there might be spaces and tabs. I'll copy from the file via read and replace with new content. Let's read the file again and get the exact style block. I'll use bash to get the exact lines. Let's do:

`sed -n '/<style>/,/<\/style>/p' index.html`. Let's do bash.

Let's get the rest. Let's use cat with line numbers. But we can just replace the whole style block with corrected version. Let's create new style block:

```
<style>
        body {
            margin: 0;
            padding: 0;
            background: #111;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            font-family: 'Courier New', monospace;
            color: #0f0;
            overflow: hidden;
        }
        .container {
            text-align: center;
        }
        h1 {
            margin: 10px 0;
            font-size: 2.5rem;
            text-shadow: 0 0 10px #0f0;
            letter-spacing: 4px;
        }
        .game-info {
            display: flex;
            justify-content: space-between;
            width: 800px;
            margin-bottom: 10px;
            font-size: 1.2rem;
        }
        .game-info div {
            display: flex;
            align-items: center;
        }
        .key-hint {
            margin-top: 10px;
            font-size: 1rem;
            color: #888;
        }
        canvas {
            border: 2px solid #0f0;
            box-shadow: 0 0 20px #0f0;
            background-color: #000;
        }
        .controls {
            margin-top: 20px;
            display: flex;
            gap: 20px;
        }
        button {
            background: transparent;
            color: #0f0;
            border: 2px solid #0f0;
            padding: 10px 20px;
            font-family: inherit;
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.3s;
        }
        button:hover {
            background: #0f0;
            color: #000;
        }
        .game-over, .level-up {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(0, 0, 0, 0.9);
            color: #0f0;
            padding: 30px;
            border: 3px solid #0f0;
            text-align: center;
            display: none;
            z-index: 10;
            width: 400px;
        }
        .game-over h2, .level-up h2 {
            margin-top: 0;
        }
    </style>
```

Now we need to also replace the script block entirely. Let's create a comprehensive game script. I'll write the entire script after fixing style. Let's do edit with two edits: first replace style, second replace script. Let's do them in one edit call with two entries. First, get exact old style text from file (including newlines). We'll copy exactly the style block from the file. Let's read the whole file again and copy the style block lines (including the leading spaces). I'll write a small script to extract but we can approximate. Let's just do the edit with the exact block we got from sed (but we need to include the entire block up to `</style>`). Let's get the rest of the block. Let's run sed again with line numbers. Let's do bash:

`sed -n '24,80p' index.html`. Let's find line numbers. Let's use cat -n. Let's do:

Let's get lines 71 to maybe 85. Let's do:

`sed -n '71,90p' index.html`. Let's do bash.

Great. So the style block ends at line 92? Actually line numbers after 90. Let's take lines 7-92 as the style block. We'll replace from line 7 to line 92. Let's extract exactly. We'll create oldText as lines from `<style>` to `</style>` inclusive. Let's write a Python one-liner but we can manually copy. Let's use bash to get the exact block with newline preservation. We'll use sed with -n '/<style>/,/<\/style>/p' and then pipe to cat -A to see line endings. But we can just copy the block we have from cat -n and reconstruct. However, we need exact whitespace. I'll just replace the whole block using the concatenated lines we have. Let's construct oldText:

`<style>
        body {
            margin:157
 0;
            padding: 0;
            background: #111;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            font-family: 'Courier New', monospace;
            color: #0f0;
            overflow: hidden;
        }
        .container {
            text-align: center;
        }
        h1 {
            margin: 10px 0;
            font-size:指導 2.5rem;
            text-shadow: 0 0 10px #0f0;
            letter-spacing: サポート 4px;
        }
        .game-info {
            display: flex;
            justify-content: space-between;
            width: 800px;
            margin-bottom: 10px;
            font-size: 1.2rem;
        }
        .game-info div {
            display: flex;
            align-items: center;
        }
        .key-hint {
            margin-top: 10px;
            font-size: 1rem;
            color: #888;
        }
        canvas {
            border: 2px solid #0f0;
            box-shadow: 0 0 20px #0f0;
            background-color: #000;
        }
        .controls {
            margin-top: 20px;
            display: flex;
            gap: 20px;
        }
        button {
            background: transparent;
            color: #0f0;
            border: 2px solid #0f0;
            padding: 10px 20px;
            font-family: inherit;
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.3s;
        }
        button:hover {
            background: #0f0;
            color: #000;
        }
        .game-over, .level-up {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(0, 0, 0, 0.9);
            color: #0f0;
            padding: 30px;
            border: 3px solid #0f0;
            text-align: center;
            display: none;
            z-index: 10;
            width: 400px;
        }
        .game-over h2, .level-up h2 {
            margin-top: 0;
        }
    </style>`

Now we need newText with corrected CSS. Let's write newText exactly with same indentation (4 spaces). Let's do edit now. Also we need to replace script block after style. Let's get the script block oldText: from `<script>` to `</script>` lines 94-102? Let's read lines 94-110. Let's do cat -n again. Let's do bash:

`sed -n '94,110p' index.html`. Let's do:

That's not script. Let's find script line numbers after that. Let's do cat -n | grep -n script. Let's do bash:

`grep -n '<script>' index.html`. Let's do:

Line 116. Let's find line number of `</script>`:

`grep -n '</script>' index.html`.

Great. Let's get lines 116-123. Let's extract:

`sed -n '116,123p' index.html`. Let's do:

Now we can replace that script with a full game script. Let's write the new script content.

We'll implement:

- Player object with position, speed, bullet cooldown.
- Aliens array with positions, type, direction.
- Bullets arrays for player and aliens.
- Bunkers array of blocks.
- Game state: running, paused, game over, level.

We'll need drawing functions for each element.

Let's write the script now. We'll keep it relatively compact but complete.

I'll create the new script text and replace.

Now we need to edit the file with two edits: style and script. Let's do edit.