We are building a single-page web app in one file: index.html
 We have phaser.min.js already in the current directory, so we can load it with <script src="phaser.min.js"></script>
 We must use procedurally generated graphics (no external images or audio). We'll use Phaser's graphics API to draw everything.

 Steps:
 1. Create the index.html structure with a canvas element.
 2. Include Phaser from the local file.
 3. Write the game code inside a <script> tag.

 Game design:
   - Side-scrolling platformer (like Mario)
   - Player can run and jump.
   - Platforms that scroll (camera follows player)
   - Enemies that can be stomped (jumped on from above)
   - Collect coins.
   - Goal flag to reach.

 We'll use:
   - Phaser 3 (we have phaser.min.js, so we can use the global Phaser object)

 Plan:
   - Preload: nothing (since we are generating graphics)
   - Create: 
        - Use graphics to draw the player, platforms, enemies, coins, flag.
        - We'll use simple shapes (rectangles, circles) with colors.

   - Physics: Enable arcade physics.

   - Player:
        - A rectangle with controls: left, right, jump.
        - Jump only when on the ground.

   - Platforms:
        - Static bodies (rectangles)

   - Enemies:
        - Move back and forth. When the player jumps on them, they get stomped (disappear or play animation).

   - Coins:
        - Collectible items (circles) that disappear when touched.

   - Flag:
        - When the player touches it, the level is complete.

   - Camera: Follow the player horizontally.

   - Level design: We'll create a simple level with platforms, enemies, coins, and a flag.

 Since we are generating everything procedurally, we'll create functions to draw the sprites using graphics.

 Implementation:

   We can create a function to generate a sprite with a drawn graphic:

   Example:
      function createRectangleSprite(scene, x, y, width, height, color) {
          let graphics = scene.add.graphics();
          graphics.fillStyle(color, 1);
          graphics.fillRect(0, 0, width, height);
          let texture = graphics.generateTexture('rect', width, height);
          graphics.destroy();
          return scene.add.sprite(x, y, texture);
      }

   However, note: generating a texture for every single object might be heavy and we have to manage texture keys.

   Alternatively, we can use the graphics object directly and then convert to a texture only once per type? But since each platform might have different sizes, we might have to generate per platform.

   Another approach: use the same texture for same-sized objects? But platforms can vary.

   We can also use Phaser's built-in primitive shapes: `this.add.rectangle(x, y, width, height, color)` but note that rectangles are not physics bodies by default.

   Actually, we can create physics bodies from any shape:

        this.add.rectangle(x, y, width, height, color).setOrigin(0.5, 0.5);
        this.physics.add.existing(rectangle); // to add physics body

   But then we have to set the body to be static for platforms.

   Let's break down:

   Preload: nothing.

   Create:

        // Physics
        this.physics.world.setBounds(0, 0, levelWidth, levelHeight); // levelWidth and levelHeight should be larger than the screen

        // Player
        player = this.physics.add.rectangle(50, 300, 30, 50, 0x00ff00);
        player.body.setCollideWorldBounds(true);

        // Platforms
        platforms = this.physics.add.staticGroup();
        platforms.create(200, 400, 200, 20).setOrigin(0).setTint(0x8888ff); // we can use setTint to color

        // But note: the create method of a static group expects a sprite or an image. We can use a rectangle and then add it to the group?

        Actually, we can create a static physics body for a rectangle:

        let platform = this.add.rectangle(x, y, width, height, color);
        this.physics.add.existing(platform, true); // true for static

        Then we can add it to a group? Or just manage individually.

   Alternatively, we can use the group's create method and pass a config:

        platforms.create(x, y, null).setDisplaySize(width, height).setTint(color);

        But then we have no shape? Actually, we can set the body size:

        let plat = platforms.create(x, y, null);
        plat.setDisplaySize(width, height);
        plat.setTint(color);
        plat.body.setSize(width, height); // and set the body size to match

   However, note: the group's create method expects a texture. We can pass a single pixel texture? But we don't have any.

   Instead, we can generate a texture for the platform once and reuse it? Since we are generating procedurally and platforms might be different sizes, we can draw each platform individually as a rectangle and add physics.

   Considering simplicity and performance, we'll create each platform as a rectangle and add a static body.

   Steps for each entity:

     Player:
        this.player = this.physics.add.rectangle(startX, startY, 30, 50, 0x00ff00);
        this.player.body.setCollideWorldBounds(true);

     Platforms:
        let platform = this.add.rectangle(x, y, width, height, 0x8888ff);
        this.physics.add.existing(platform, true); // static

     Enemies:
        enemy = this.physics.add.rectangle(x, y, 30, 30, 0xff0000);
        enemy.body.setCollideWorldBounds(false);
        enemy.velocityX = 100; // move right
        enemy.setBounceX(1); // to turn around when hitting a wall? Or we can flip on collision?

        We'll handle enemy movement by checking when they hit a wall or a platform edge.

     Coins:
        coin = this.physics.add.rectangle(x, y, 10, 10, 0xffff00);
        coin.body.setAllowGravity(false);
        coin.setStatic(true); // so they don't fall

     Flag:
        flag = this.physics.add.rectangle(goalX, goalY, 20, 50, 0xff00ff);
        flag.body.setStatic(true);

   Then we set up collisions:

        this.physics.add.collider(this.player, platforms);
        this.physics.add.collider(enemies, platforms); // so enemies turn around when hitting a platform edge?
        this.physics.add.overlap(this.player, coins, collectCoin, null, this);
        this.physics.add.overlap(this.player, enemies, hitEnemy, null, this);
        this.physics.add.overlap(this.player, flag, winGame, null, this);

   Functions:

        collectCoin(player, coin) {
            coin.destroy();
        }

        hitEnemy(player, enemy) {
            // Check if player is above the enemy (stomping)
            if (player.body.velocity.y > 0 && player.body.bottom < enemy.body.top + 10) {
                // Stomp: enemy destroyed and player gets a bounce
                enemy.destroy();
                player.setVelocityY(-300); // bounce up
            } else {
                // Otherwise, player is hurt
                // For simplicity, reset the player
                player.setPosition(50, 300);
            }
        }

        winGame() {
            // Show win message
        }

   Controls:

        We'll set up keyboard input:

        cursors = this.input.keyboard.createCursorKeys();

        Then in update:

        if (cursors.left.isDown) {
            player.setVelocityX(-160);
        } else if (cursors.right.isDown) {
            player.setVelocityX(160);
        } else {
            player.setVelocityX(0);
        }

        if (cursors.up.isDown && player.body.touching.down) {
            player.setVelocityY(-330);
        }

   Camera:

        this.cameras.main.startFollow(player);
        this.cameras.main.setBounds(0, 0, levelWidth, levelHeight);

   Level design:

        We'll create a simple level:

        - Ground: a long platform at the bottom.
        - Some platforms above for jumping.
        - Enemies on the ground and platforms.
        - Coins scattered.
        - Flag at the far right.

   We'll define:

        const levelWidth = 2000;
        const levelHeight = 600;

        Then create:

        // Ground
        createPlatform(0, levelHeight - 20, levelWidth, 20);

        // Some platforms
        createPlatform(200, 500, 200, 20);
        createPlatform(500, 400, 200, 20);
        createPlatform(800, 300, 200, 20);

        // Enemies
        createEnemy(300, levelHeight - 50); // on ground
        createEnemy(600, 400); // on a platform

        // Coins
        createCoin(250, 300);
        createCoin(550, 350);
        createCoin(850, 250);

        // Flag
        createFlag(1800, levelHeight - 70);

   We'll write helper functions for each.

   Now, let's write the entire code in one HTML file.

   Structure of index.html:

        <!DOCTYPE html>
        <html>
        <head>
            <title>Phaser Platformer</title>
            <script src="phaser.min.js"></script>
            <style>
                body { margin: 0; }
            </style>
        </head>
        <body>
            <script>
                // Phaser game config
                var config = {
                    type: Phaser.AUTO,
                    width: 800,
                    height: 600,
                    physics: {
                        default: 'arcade',
                        arcade: {
                            gravity: { y: 300 },
                            debug: false
                        }
                    },
                    scene: {
                        preload: preload,
                        create: create,
                        update: update
                    }
                };

                var game = new Phaser.Game(config);
                var player;
                var cursors;
                var platforms;
                var enemies;
                var coins;
                var flag;
                var levelWidth = 2000;
                var levelHeight = 600;

                function preload() {
                }

                function create() {
                    // Set up the world bounds
                    this.physics.world.setBounds(0, 0, levelWidth, levelHeight);

                    // Create the ground and platforms
                    platforms = this.physics.add.staticGroup();
                    createPlatform.call(this, 0, levelHeight - 20, levelWidth, 20); // ground

                    // Other platforms
                    createPlatform.call(this, 200, 500, 200, 20);
                    createPlatform.call(this, 500, 400, 200, 20);
                    createPlatform.call(this, 800, 300, 200, 20);

                    // Player
                    player = this.physics.add.rectangle(50, 300, 30, 50, 0x00ff00);
                    player.body.setCollideWorldBounds(true);

                    // Enemies group (for physics)
                    enemies = this.physics.add.group();
                    createEnemy.call(this, 300, levelHeight - 50);
                    createEnemy.call(this, 600, 400);

                    // Coins group
                    coins = this.physics.add.staticGroup();
                    createCoin.call(this, 250, 300);
                    createCoin.call(this, 550, 350);
                    createCoin.call(this, 850, 250);

                    // Flag
                    flag = this.physics.add.staticGroup();
                    createFlag.call(this, 1800, levelHeight - 70);

                    // Collisions
                    this.physics.add.collider(player, platforms);
                    this.physics.add.collider(enemies, platforms);
                    this.physics.add.overlap(player, coins, collectCoin, null, this);
                    this.physics.add.overlap(player, enemies, hitEnemy, null, this);
                    this.physics.add.overlap(player, flag, winGame, null, this);

                    // Camera
                    this.cameras.main.setBounds(0, 0, levelWidth, levelHeight);
                    this.cameras.main.startFollow(player);

                    // Input
                    cursors = this.input.keyboard.createCursorKeys();
                }

                function update() {
                    // Player movement
                    if (cursors.left.isDown) {
                        player.setVelocityX(-160);
                    } else if (cursors.right.isDown) {
                        player.setVelocityX(160);
                    } else {
                        player.setVelocityX(0);
                    }

                    if (cursors.up.isDown && player.body.touching.down) {
                        player.setVelocityY(-330);
                    }
                }

                function createPlatform(x, y, width, height) {
                    let platform = this.add.rectangle(x, y, width, height, 0x8888ff);
                    this.physics.add.existing(platform, true); // static
                    platforms.add(platform);
                }

                function createEnemy(x, y) {
                    let enemy = this.physics.add.rectangle(x, y, 30, 30, 0xff0000);
                    enemy.setVelocityX(100);
                    enemy.setBounce(1, 0); // bounce on x, no bounce on y
                    enemies.add(enemy);
                }

                function createCoin(x, y) {
                    let coin = this.add.rectangle(x, y, 10, 10, 0xffff00);
                    this.physics.add.existing(coin, true); // static
                    coins.add(coin);
                }

                function createFlag(x, y) {
                    let flagpole = this.add.rectangle(x, y, 10, 50, 0xffffff);
                    let flagPart = this.add.rectangle(x+5, y-20, 30, 20, 0xff00ff);
                    this.physics.add.existing(flagpole, true);
                    flag.add(flagpole);
                    flag.add(flagPart);
                    // We'll make the flagpole the main body for collision? Or both? Let's just make the pole the body.
                    // For simplicity, we'll check collision with the pole.
                }

                function collectCoin(player, coin) {
                    coin.destroy();
                }

                function hitEnemy(player, enemy) {
                    if (player.body.velocity.y > 0 && player.body.bottom < enemy.body.top + 10) {
                        enemy.destroy();
                        player.setVelocityY(-300);
                    } else {
                        // Reset player position (simulate death)
                        player.setPosition(50, 300);
                    }
                }

                function winGame() {
                    alert('You win!');
                }
            </script>
        </body>
        </html>

   However, note: the flag is created as a static group and we added two rectangles. But the overlap callback will be called for the flagpole (the first one). We can adjust the winGame function accordingly.

   Also, the enemy movement: we set bounce to (1,0) so they bounce horizontally. But they might fall off platforms? We didn't set any boundaries for enemies. We'll let them bounce off the platforms because we have a collider with platforms.

   This is a basic implementation.

   Let's write the entire index.html file.

   Important: We are writing to index.html in the current directory.

   We'll use the write function to create the index.html file.

   Since the content is long, we'll write it as a string.

   Note: We must escape any special characters? Actually, we are writing HTML and JS as a string. We'll use a template string.

   Alternatively, we can write the HTML as a string without any interpolation.

   Steps:

        content = `<!DOCTYPE html> ... `

   We'll write the entire HTML content.

   However, note: the code above uses a static group for platforms and then adds each platform to it. But in createPlatform, we add the platform to the platforms group. Similarly for coins and enemies.

   We'll write the file.

   But note: the code above has a potential issue: the flag is a group and we are adding two rectangles. The overlap callback will be called for each part? Actually, we added the flagpole and then the flagPart. But we only set the collision for the flag group? And the overlap callback will be called for each child? We don't want two alerts. So we should design the flag as a single body? Or we can make the flagPart non-physics? Actually, we added the flagpole and flagPart to the static group, but then we added the entire group to the overlap? Actually, the overlap is between player and the flag group. The callback will be called for each child? We can change:

        Instead, we can create the flag as a single sprite? But we are generating procedurally. Alternatively, we can create a compound body? But that's complex.

        Let's change: create only the flagpole as the collision body. The flagPart is just decoration.

        function createFlag(x, y) {
            let flagpole = this.physics.add.staticRectangle(x, y, 10, 50, 0xffffff);
            flag.add(flagpole);
            // Add the flag part as a non-physics graphic
            this.add.rectangle(x+5, y-20, 30, 20, 0xff00ff);
        }

        Then the overlap will only be with the flagpole.

   We'll adjust the createFlag function accordingly.

   Also, note: the player is a rectangle and so are enemies and coins. They are all using the same physics system.

   We'll write the file.

   Since the content is long, we'll break it into a multi-line string in JavaScript? Actually, we are writing the content as a string for the write function.

   We'll write:

        let content = `<!DOCTYPE html>
        <html>
        ... 
        </html>`;

   We must be cautious with backticks and indentation? We'll write the HTML exactly.

   Alternatively, we can write without backticks? But we are in a JSON string. We'll escape newlines and quotes? Actually, we are passing a string to the write function. We can use a template string in our code to generate the content.

   However, note: the write function expects a string. We'll write the entire HTML as a string.

   We'll write the file with the above content.

   Let me adjust the createFlag function to avoid the flagPart being a physics body.

   Also, note: the enemy bounce: we set bounce(1,0) meaning they bounce fully in x and not in y. But if they fall, they will keep falling? We have a collider with platforms so they won't fall through, but if they walk off a platform, they will fall until they hit another platform? That's acceptable.

   We'll write the file.

   One more thing: the player and enemies are rectangles, but they are drawn as rectangles. That's fine.

   We'll write the index.html file.

   Since the content is long, we'll write it as a string in the function call.

   We'll use the write function.

   Path: "./index.html"

   Content: the HTML string.

   We'll format the HTML string with proper indentation for readability? Actually, it doesn't matter for the game. We can write it without extra indentation to save space.

   But note: the string must be exactly as the game code.

   We'll write the entire HTML content.

   Due to the length, we'll write it in the function call.

   However, note: the function call must be in one line? No, we can have a multi-line string in the JSON argument by escaping newlines? Actually, we can use \n.

   Alternatively, we can write the content without newlines? But that would be unreadable and error-prone.

   Instead, we'll write the content as a string with escaped newlines and quotes? Actually, we are using JSON for the arguments. We can use a multi-line string in the JSON by using \n.

   We'll build the string with \n for newlines.

   Steps:

        content = "<!DOCTYPE html>\n<html>\n<head> ... </head>\n ... </html>"

   We'll write the string.

   Alternatively, we can write the HTML without extra spaces? But it's better to have it formatted so we can debug.

   We'll write the HTML with indentation and newlines.

   We'll use the write function.

   Let's generate the content string.

   We'll write:

        let htmlContent = `...`; // but in our function call, we'll write the string.

   Actually, we are going to call the write function with the content.

   We'll write:

        write({
            path: "./index.html",
            content: `<!DOCTYPE html>
        <html>
        <head>
            <title>Phaser Platformer</title>
            <script src="phaser.min.js"></script>
            <style>
                body { margin: 0; }
            </style>
        </head>
        <body>
            <script>
                var config = {
                    type: Phaser.AUTO,
                    width: 800,
                    height: 600,
                    physics: {
                        default: 'arcade',
                        arcade: {
                            gravity: { y: 300 },
                            debug: false
                        }
                    },
                    scene: {
                        preload: preload,
                        create: create,
                        update: update
                    }
                };

                var game = new Phaser.Game(config);
                var player;
                var cursors;
                var platforms;
                var enemies;
                var coins;
                var flag;
                var levelWidth = 2000;
                var levelHeight = 600;

                function preload() {
                }

                function create() {
                    this.physics.world.setBounds(0, 0, levelWidth, levelHeight);

                    platforms = this.physics.add.staticGroup();
                    createPlatform.call(this, 0, levelHeight - 20, levelWidth, 20);

                    createPlatform.call(this, 200, 500, 200, 20);
                    createPlatform.call(this, 500, 400, 200, 20);
                    createPlatform.call(this, 800, 300, 200, 20);

                    player = this.physics.add.rectangle(50, 300, 30, 50, 0x00ff00);
                    player.body.setCollideWorldBounds(true);

                    enemies = this.physics.add.group();
                    createEnemy.call(this, 300, levelHeight - 50);
                    createEnemy.call(this, 600, 400);

                    coins = this.physics.add.staticGroup();
                    createCoin.call(this, 250, 300);
                    createCoin.call(this, 550, 350);
                    createCoin.call(this, 850, 250);

                    flag = this.physics.add.staticGroup();
                    createFlag.call(this, 1800, levelHeight - 70);

                    this.physics.add.collider(player, platforms);
                    this.physics.add.collider(enemies, platforms);
                    this.physics.add.overlap(player, coins, collectCoin, null, this);
                    this.physics.add.overlap(player, enemies, hitEnemy, null, this);
                    this.physics.add.overlap(player, flag, winGame, null, this);

                    this.cameras.main.setBounds(0, 0, levelWidth, levelHeight);
                    this.cameras.main.startFollow(player);

                    cursors = this.input.keyboard.createCursorKeys();
                }

                function update() {
                    if (cursors.left.isDown) {
                        player.setVelocityX(-160);
                    } else if (cursors.right.isDown) {
                        player.setVelocityX(160);
                    } else {
                        player.setVelocityX(0);
                    }

                    if (cursors.up.isDown && player.body.touching.down) {
                        player.setVelocityY(-330);
                    }
                }

                function createPlatform(x, y, width, height) {
                    let platform = this.add.rectangle(x, y, width, height, 0x8888ff);
                    this.physics.add.existing(platform, true);
                    platforms.add(platform);
                }

                function createEnemy(x, y) {
                    let enemy = this.physics.add.rectangle(x, y, 30, 30, 0xff0000);
                    enemy.setVelocityX(100);
                    enemy.setBounce(1, 0);
                    enemies.add(enemy);
                }

                function createCoin(x, y) {
                    let coin = this.add.rectangle(x, y, 10, 10, 0xffff00);
                    this.physics.add.existing(coin, true);
                    coins.add(coin);
                }

                function createFlag(x, y) {
                    let flagpole = this.add.rectangle(x, y, 10, 50, 0xffffff);
                    this.physics.add.existing(flagpole, true);
                    flag.add(flagpole);
                    // Add the flag part without physics
                    this.add.rectangle(x+5, y-20, 30, 20, 0xff00ff);
                }

                function collectCoin(player, coin) {
                    coin.destroy();
                }

                function hitEnemy(player, enemy) {
                    if (player.body.velocity.y > 0 && player.body.bottom < enemy.body.top + 10) {
                        enemy.destroy();
                        player.setVelocityY(-300);
                    } else {
                        player.setPosition(50, 300);
                    }
                }

                function winGame() {
                    alert('You win!');
                }
            </script>
        </body>
        </html>`

   But note: the string must be properly escaped? Actually, we are using a template string in JavaScript, but when we write it as a string in the JSON argument, we must escape any double quotes and backslashes? However, the content does not contain backticks? And we are using single quotes in the alert.

   We'll write the content as a string with double quotes escaped? Actually, the entire content is in a JSON string, so we must escape:

        - Double quotes: " becomes \"
        - Backslashes: \ becomes \\

   But the content has no double quotes? We used single quotes for the alert and for the string in the script src. So we are safe.

   However, the content has newlines. We'll write it as a string with newlines.

   Alternatively, we can write the content without any newlines? But that would be hard to read.

   We'll write the content as a string and use \n for newlines.

   But note: the write function expects a string. We'll build the string with \n.

   We'll write:

        let content = "<!DOCTYPE html>\n<html>\n<head> ... </html>";

   We'll replace every newline in the template with \n.

   Alternatively, we can use a multi-line string in our function call? But we are in a JSON string. We must escape.

   Actually, we can write:

        content: `<!DOCTYPE html>\n<html> ...`

   But note: the outer JSON is double-quoted. So we must escape double quotes inside? We don't have double quotes? We have single quotes.

   We'll write the content as a string with newlines.

   Due to the length, we'll write the content in the function call.

   We'll call the write function.

   We are ready.

   Note: We are writing to "./index.html"

   We'll write the file.

   Then, the user can open index.html in a browser.

   We are done.