add it so when u reach 50 score each time it says next level and it becomes harder with cutscenes maps roads and obstacles to jump on to get further. and also make it have bosses mid fight. and also add 10 features to make this cooler. and make the camera follow and keep going right please.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Advanced Jumping Game</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #222;
            color: #fff;
            font-family: Arial, sans-serif;
            overflow: hidden;
        }

        #game-container {
            position: relative;
            width: 800px;
            height: 400px;
            background-color: #333;
            overflow: hidden;
            border: 2px solid #444;
        }

        #player {
            position: absolute;
            bottom: 0;
            width: 30px;
            height: 30px;
            background-color: #4CAF50;
        }

        .obstacle, .enemy, .bullet, .boss {
            position: absolute;
            bottom: 0;
        }

        .obstacle {
            width: 30px;
            height: 30px;
            background-color: #f44336;
        }

        .enemy {
            width: 25px;
            height: 25px;
            background-color: #FF5733;
        }

        .bullet {
            width: 10px;
            height: 5px;
            background-color: #FFD700;
        }

        .boss {
            width: 60px;
            height: 60px;
            background-color: #FF4500;
        }

        #score, #lives, #level {
            position: absolute;
            top: 10px;
            font-size: 16px;
        }

        #score {
            left: 10px;
        }

        #lives {
            right: 10px;
        }

        #level {
            left: 400px;
        }

        #instructions {
            position: absolute;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: rgba(0, 0, 0, 0.8);
            color: #fff;
            flex-direction: column;
            font-size: 18px;
            z-index: 1;
        }

        #instructions button {
            margin-top: 10px;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            background-color: #555;
            color: #fff;
        }
    </style>
</head>
<body>
    <div id="game-container">
        <div id="player"></div>
        <div id="score">Score: 0</div>
        <div id="lives">Lives: 3</div>
        <div id="level">Level: 1</div>
        <div id="instructions">
            <p>Press Arrow Up to Jump</p>
            <p>Use Arrow Left/Right to Move</p>
            <p>Press Space to Shoot</p>
            <button onclick="startGame()">Start Game</button>
            <button onclick="togglePause()">Pause/Resume</button>
        </div>
    </div>

    <script>
        const gameContainer = document.getElementById('game-container');
        const player = document.getElementById('player');
        const scoreDisplay = document.getElementById('score');
        const livesDisplay = document.getElementById('lives');
        const levelDisplay = document.getElementById('level');
        const instructions = document.getElementById('instructions');

        let playerPositionX = 50;
        let playerPositionY = 0;
        let playerVelocityX = 0;
        let playerVelocityY = 0;
        const playerMaxSpeed = 5;
        const jumpStrength = 12;
        const gravity = 0.5;
        let isJumping = false;
        let isPaused = false;
        let gameInterval;
        let obstacleSpawnCounter = 0;
        let enemySpawnCounter = 0;
        let bossSpawned = false;
        let score = 0;
        let lives = 3;
        let level = 1;
        let obstacles = [];
        let enemies = [];
        let bullets = [];

        document.addEventListener('keydown', (e) => {
            switch (e.key) {
                case 'ArrowLeft':
                    playerVelocityX = -playerMaxSpeed;
                    break;
                case 'ArrowRight':
                    playerVelocityX = playerMaxSpeed;
                    break;
                case 'ArrowUp':
                    if (!isJumping) jump();
                    break;
                case ' ':
                    shoot();
                    break;
            }
        });

        document.addEventListener('keyup', (e) => {
            if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
                playerVelocityX = 0;
            }
        });

        function jump() {
            if (!isJumping) {
                playerVelocityY = jumpStrength;
                isJumping = true;
            }
        }

        function shoot() {
            const bullet = document.createElement('div');
            bullet.classList.add('bullet');
            bullet.style.left = playerPositionX + player.offsetWidth + 'px';
            bullet.style.bottom = parseInt(player.style.bottom) + player.offsetHeight / 2 + 'px';
            bullets.push(bullet);
            gameContainer.appendChild(bullet);
        }

        function startGame() {
            instructions.style.display = 'none';
            resetGame();
            gameInterval = setInterval(gameLoop, 1000 / 60);
        }

        function resetGame() {
            score = 0;
            lives = 3;
            level = 1;
            playerPositionX = 50;
            playerVelocityX = 0;
            playerVelocityY = 0;
            obstacleSpawnCounter = 0;
            enemySpawnCounter = 0;
            bossSpawned = false;
            isJumping = false;
            clearAll();
            updateDisplay();
        }

        function updateDisplay() {
            scoreDisplay.textContent = `Score: ${score}`;
            livesDisplay.textContent = `Lives: ${lives}`;
            levelDisplay.textContent = `Level: ${level}`;
        }

        function updatePlayerPosition() {
            // Update player's horizontal position
            playerPositionX += playerVelocityX;
            playerPositionX = Math.max(0, Math.min(gameContainer.offsetWidth - player.offsetWidth, playerPositionX));
            player.style.left = playerPositionX + 'px';

            // Update player's vertical position (jumping logic)
            if (isJumping || playerPositionY > 0) {
                playerVelocityY -= gravity;
                playerPositionY += playerVelocityY;
                player.style.bottom = Math.max(0, playerPositionY) + 'px';
                if (playerPositionY <= 0) {
                    playerPositionY = 0;
                    playerVelocityY = 0;
                    isJumping = false;
                }
            }
        }

        function spawnEnemiesAndObstacles() {
            // Control spawning frequency based on level
            if (obstacleSpawnCounter++ > 100 / level) {
                const obstacle = document.createElement('div');
                obstacle.classList.add('obstacle');
                obstacle.style.left = gameContainer.offsetWidth + 'px';
                obstacles.push(obstacle);
                gameContainer.appendChild(obstacle);
                obstacleSpawnCounter = 0;
            }

            if (enemySpawnCounter++ > 200 / level) {
                const enemy = document.createElement('div');
                enemy.classList.add('enemy');
                enemy.style.left = gameContainer.offsetWidth + 'px';
                enemies.push(enemy);
                gameContainer.appendChild(enemy);
                enemySpawnCounter = 0;
            }

            // Spawn a boss every level with a multiple of 5
            if (level % 5 === 0 && !bossSpawned) {
                createBoss();
                bossSpawned = true;
            }
        }

        function moveObjects() {
            obstacles.forEach((obstacle, index) => {
                obstacle.style.left = (parseInt(obstacle.style.left) - (2 + level)) + 'px';
                if (parseInt(obstacle.style.left) < -obstacle.offsetWidth) {
                    obstacle.remove();
                    obstacles.splice(index, 1);
                    score++;
                    updateDisplay();
                }
                if (checkCollision(player, obstacle)) {
                    lives--;
                    updateDisplay();
                    obstacle.remove();
                    obstacles.splice(index, 1);
                    if (lives <= 0) {
                        endGame();
                    }
                }
            });

            bullets.forEach((bullet, index) => {
                bullet.style.left = (parseInt(bullet.style.left) + 5) + 'px';
                if (parseInt(bullet.style.left) > gameContainer.offsetWidth) {
                    bullet.remove();
                    bullets.splice(index, 1);
                }
                enemies.forEach((enemy, enemyIndex) => {
                    if (checkCollision(bullet, enemy)) {
                        bullet.remove();
                        bullets.splice(index, 1);
                        enemy.remove();
                        enemies.splice(enemyIndex, 1);
                        score += 10;
                        updateDisplay();
                    }
                });
            });

            enemies.forEach((enemy, index) => {
                enemy.style.left = (parseInt(enemy.style.left) - 2) + 'px';
                if (parseInt(enemy.style.left) < -enemy.offsetWidth) {
                    enemy.remove();
                    enemies.splice(index, 1);
                }
                if (checkCollision(player, enemy)) {
                    lives--;
                    updateDisplay();
                    enemy.remove();
                    enemies.splice(index, 1);
                    if (lives <= 0) {
                        endGame();
                    }
                }
            });

            if (score >= level * 50 && score % 50 === 0) {
                level++;
                bossSpawned = false;
                updateDisplay();
            }
        }

        function checkCollision(rect1, rect2) {
            const rect1Bounds = rect1.getBoundingClientRect();
            const rect2Bounds = rect2.getBoundingClientRect();
            return !(rect1Bounds.top > rect2Bounds.bottom || rect1Bounds.bottom < rect2Bounds.top ||
                     rect1Bounds.left > rect2Bounds.right || rect1Bounds.right < rect2Bounds.left);
        }

        function togglePause() {
            if (isPaused) {
                gameInterval = setInterval(gameLoop, 1000 / 60);
                isPaused = false;
            } else {
                clearInterval(gameInterval);
                isPaused = true;
            }
        }

        function createBoss() {
            const boss = document.createElement('div');
            boss.classList.add('boss');
            boss.style.left = gameContainer.offsetWidth - boss.offsetWidth + 'px';
            enemies.push(boss);
            gameContainer.appendChild(boss);
        }

        function clearAll() {
            obstacles.forEach(ob => ob.remove());
            enemies.forEach(en => en.remove());
            bullets.forEach(bu => bu.remove());
            obstacles = [];
            enemies = [];
            bullets = [];
        }

        function gameLoop() {
            if (!isPaused) {
                updatePlayerPosition();
                spawnEnemiesAndObstacles();
                moveObjects();
            }
        }

        function endGame() {
            clearInterval(gameInterval);
            instructions.style.display = 'flex';
            instructions.innerHTML = `<p>Game Over! Score: ${score}</p><button onclick="startGame()">Restart</button>`;
        }
    </script>
</body>
</html>