<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fixed Side-Scroller</title>
    <script src="https://cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser-arcade-physics.min.js"></script>
    <style>
        body { margin: 0; background: #000; overflow: hidden; }
        canvas { display: block; }
    </style>
</head>
<body>

const game = new Phaser.Game(config);
    let player, cursors, platforms, bg;
    const WORLD_WIDTH = 5000; // Making the world very long

function preload() {
        // Using reliable Phaser assets
        this.load.image('sky', 'https://labs.phaser.io/assets/skies/space3.png');
        this.load.image('ground', 'https://labs.phaser.io/assets/sprites/platform.png');
        this.load.spritesheet('dude', 'https://labs.phaser.io/assets/sprites/dude.png', { frameWidth: 32, frameHeight: 48 });
    }

function create() {
        // 1. Set World Bounds (This stops the "falling off" the edges)
        this.physics.world.setBounds(0, 0, WORLD_WIDTH, window.innerHeight);

// 2. Add Background (Tiled so it repeats)
        bg = this.add.tileSprite(0, 0, WORLD_WIDTH, window.innerHeight, 'sky').setOrigin(0, 0);
        bg.setScrollFactor(0.2); // Parallax effect: moves slower than player

// 3. Static Group for Platforms
        platforms = this.physics.add.staticGroup();

// Create a solid floor across the entire world width
        // We place it exactly at the bottom
        for (let x = 0; x <= WORLD_WIDTH; x += 400) {
            let ground = platforms.create(x, window.innerHeight - 30, 'ground').setScale(2).refreshBody();
            ground.setTint(0x228B22); // Greenish tint for the floor
        }

// Add some random platforms to jump on
        platforms.create(600, window.innerHeight - 200, 'ground');
        platforms.create(1100, window.innerHeight - 350, 'ground');
        platforms.create(1600, window.innerHeight - 250, 'ground');

// 4. Player Setup
        player = this.physics.add.sprite(100, window.innerHeight - 150, 'dude');
        player.setBounce(0.1);
        player.setCollideWorldBounds(true); // Keeps player inside the 5000px width

// 5. Animations
        this.anims.create({
            key: 'left',
            frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }),
            frameRate: 10,
            repeat: -1
        });
        this.anims.create({ key: 'turn', frames: [ { key: 'dude', frame: 4 } ], frameRate: 20 });
        this.anims.create({
            key: 'right',
            frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8 }),
            frameRate: 10,
            repeat: -1
        });

// 6. Camera Logic
        this.cameras.main.setBounds(0, 0, WORLD_WIDTH, window.innerHeight);
        this.cameras.main.startFollow(player, true, 0.1, 0.1);

// 7. Input & Collision
        this.physics.add.collider(player, platforms);
        cursors = this.input.keyboard.createCursorKeys();
    }

// Jump logic: Only jump if touching the ground/platform
        if ((cursors.up.isDown || cursors.space.isDown) && player.body.touching.down) {
            player.setVelocityY(-600);
        }
    }

window.addEventListener('resize', () => {
        game.scale.resize(window.innerWidth, window.innerHeight);
    });
</script>

</body>
</html>

Liveweave: Generative AI Web Editor & HTML/CSS/JS Playground