and add a underwaterlevel and add caves and stuff and maps during all levels to make this fun and better also add bosses a 45% change every level to get a boss.

<!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;
            transition: background-color 1s;
        }

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

        .obstacle, .enemy, .bullet, .boss, .ladder, .cave, .water, .enemy-bullet, .collectible, .special-zone, .platform, .power-shot {
            position: absolute;
            bottom: 0;
        }

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

        .ladder, .cave, .water {
            background-color: #8B4513;
        }

        .cave {
            width: 100px;
            height: 80px;
            background-color: #2F4F4F;
        }

        .water {
            width: 100px;
            height: 60px;
            background-color: #1E90FF;
        }

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

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

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

        .power-up {
            width: 20px;
            height: 20px;
            background-color: #00FF00;
        }

        .collectible {
            width: 15px;
            height: 15px;
            background-color: #FFD700;
        }

        .special-zone {
            width: 100px;
            height: 50px;
            background-color: #6A5ACD;
        }

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

        #score {
            left: 10px;
        }

        #lives {
            right: 10px;
        }

        #level {
            left: 400px;
        }

        #instructions, #cutscene, #level-intro {
            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: 10;
        }

        #instructions button, #cutscene button, #level-intro button {
            margin-top: 10px;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            background-color: #555;
            color: #fff;
        }

        #cutscene, #level-intro {
            display: none;
        }
    </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>
            <p>Press P to Pause/Resume</p>
            <button onclick="startGame()">Start Game</button>
        </div>
        <div id="cutscene">
            <p id="cutscene-text">Get ready for the next level!</p>
            <button onclick="continueGame()">Continue</button>
        </div>
        <div id="level-intro">
            <p id="level-text">Level 1: Get Ready for Adventure!</p>
            <button onclick="startLevel()">Start Level</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');
        const cutscene = document.getElementById('cutscene');
        const levelIntro = document.getElementById('level-intro');
        const levelText = document.getElementById('level-text');
        const cutsceneText = document.getElementById('cutscene-text');

        let playerPositionX = 50;
        let playerPositionY = 0;
        let playerVelocityX = 0;
        let playerVelocityY = 0;
        let playerMaxSpeed = 5;
        let isJumping = false;
        let isPaused = false;
        let canShoot = true;
        let powerShotActive = false;
        let gameInterval;
        let obstacles = [];
        let enemies = [];
        let bullets = [];
        let enemyBullets = [];
        let powerUps = [];
        let ladders = [];
        let caves = [];
        let waters = [];
        let collectibles = [];
        let specialZones = [];
        let platforms = [];
        let bosses = [];
        let score = 0;
        let lives = 3;
        let level = 1;
        const gravity = 0.5;
        const jumpStrength = 12;
        let movingLeft = false, movingRight = false;

        document.addEventListener('keydown', handleKeydown);
        document.addEventListener('keyup', handleKeyup);

        function handleKeydown(e) {
            switch (e.key) {
                case 'ArrowLeft':
                    movingLeft = true;
                    break;
                case 'ArrowRight':
                    movingRight = true;
                    break;
                case 'ArrowUp':
                    if (!isJumping) jump();
                    break;
                case ' ':
                    if (canShoot) {
                        shoot();
                        canShoot = false;
                        setTimeout(() => canShoot = true, 500); // 0.5 second cooldown
                    }
                    break;
                case 'p':
                case 'P':
                    togglePause();
                    break;
            }
        }

        function handleKeyup(e) {
            switch (e.key) {
                case 'ArrowLeft':
                    movingLeft = false;
                    break;
                case 'ArrowRight':
                    movingRight = false;
                    break;
            }
        }

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

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

        function startGame() {
            instructions.style.display = 'none';
            levelIntro.style.display = 'block';
            levelText.textContent = `Level 1: Beginning Adventure`;
            resetGame();
        }

        function startLevel() {
            levelIntro.style.display = 'none';
            gameInterval = setInterval(gameLoop, 1000 / 60);
        }

        function resetGame() {
            score = 0;
            lives = 3;
            level = 1;
            playerPositionX = 50;
            playerPositionY = 0;
            playerVelocityX = 0;
            playerVelocityY = 0;
            isJumping = false;
            clearAllElements();
            updateDisplay();
        }

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

        function updatePlayerPosition() {
            if (movingLeft && playerPositionX > 0) {
                playerVelocityX = -playerMaxSpeed;
            } else if (movingRight && playerPositionX < gameContainer.offsetWidth - player.offsetWidth) {
                playerVelocityX = playerMaxSpeed;
            } else {
                playerVelocityX = 0;
            }

            playerPositionX += playerVelocityX;
            player.style.left = playerPositionX + 'px';

            let onPlatform = false;
            platforms.forEach(platform => {
                if (checkCollision(player, platform) && playerVelocityY < 0) {
                    playerPositionY = parseInt(platform.style.bottom) + platform.offsetHeight;
                    playerVelocityY = 0;
                    isJumping = false;
                    onPlatform = true;
                }
            });

            if (!onPlatform || isJumping || playerPositionY > 0) {
                playerVelocityY -= gravity;
                playerPositionY += playerVelocityY;
                if (playerPositionY <= 0) {
                    playerPositionY = 0;
                    isJumping = false;
                }
            }

            player.style.bottom = playerPositionY + 'px';
        }

        function spawnEntities() {
            if (!isPaused) {
                if (Math.random() < 0.01) spawnObstacle();
                if (Math.random() < 0.005) spawnEnemy();
                if (Math.random() < 0.003) spawnPowerUp();
                if (Math.random() < 0.002) spawnCollectible();
                if (Math.random() < 0.002) spawnLadder();
                if (Math.random() < 0.002) spawnCave();
                if (Math.random() < 0.002) spawnWater();
                if (Math.random() < 0.001) spawnPlatform();
                if (Math.random() < 0.0005) spawnBoss();  // Rare boss spawn
                if (Math.random() < 0.0005) changeWeather(); // Weather change trigger
            }
        }

        function moveElements() {
            moveArray(obstacles, 2, 15);
            moveArray(enemies, 3, 30);
            moveArray(powerUps, 2, 0);
            moveArray(collectibles, 2, 5);
            moveArray(platforms, 2, 0);
            moveArray(specialZones, 0, 0); // Special zones are static
            moveArray(bosses, 1, 100); // Bosses have score value
            moveBullets();
            if (Math.random() < 0.002) enemiesFireBullets();
        }

        function spawnObstacle() {
            createElement('obstacle', obstacles, gameContainer.offsetWidth);
        }

        function spawnEnemy() {
            const enemy = createElement('enemy', enemies, gameContainer.offsetWidth);
            // Adding basic AI logic to follow player
            if (enemy) {
                setInterval(() => {
                    if (enemy.style.left > player.style.left) {
                        enemy.style.left = parseInt(enemy.style.left) - 1 + 'px';
                    } else {
                        enemy.style.left = parseInt(enemy.style.left) + 1 + 'px';
                    }
                }, 500);
            }
        }

        function spawnPowerUp() {
            const powerUpType = Math.random() > 0.5 ? 'ice' : 'fire';
            createElement('power-up', powerUps, gameContainer.offsetWidth, powerUpType);
        }
        
        function spawnCollectible() {
            createElement('collectible', collectibles, gameContainer.offsetWidth);
        }

        function spawnLadder() {
            createElement('ladder', ladders, gameContainer.offsetWidth);
        }

        function spawnCave() {
            createElement('cave', caves, gameContainer.offsetWidth);
        }

        function spawnWater() {
            createElement('water', waters, gameContainer.offsetWidth);
        }

        function spawnPlatform() {
            const platform = createElement('platform', platforms, gameContainer.offsetWidth);
            platform.style.bottom = Math.floor(Math.random() * 200 + 100) + 'px';
        }

        function spawnBoss() {
            const boss = createElement('boss', bosses, gameContainer.offsetWidth - 60);
            boss.style.bottom = '100px'; // Set a height for the boss
        }

        function changeWeather() {
            const weatherTypes = ['#222', '#555', '#999']; // Example colors
            gameContainer.style.backgroundColor = weatherTypes[Math.floor(Math.random() * weatherTypes.length)];
        }

        function createElement(className, array, leftPosition, type = '') {
            const element = document.createElement('div');
            element.classList.add(className);
            element.style.left = leftPosition + 'px';
            element.setAttribute('data-type', type);
            gameContainer.appendChild(element);
            array.push(element);
            return element;
        }

        function moveArray(array, speed, scoreValue) {
            array.forEach((el, index) => {
                if (speed > 0) {
                    el.style.left = (parseInt(el.style.left) - (speed + level)) + 'px';
                }
                if (parseInt(el.style.left) < -el.offsetWidth) {
                    removeElement(el, array, index, scoreValue);
                }
                else if (checkCollision(player, el)) {
                    handleCollision(el, array, index, scoreValue);
                }
            });
        }

        function removeElement(el, array, index, scoreValue) {
            el.remove();
            array.splice(index, 1);
            if (scoreValue > 0) {
                score += scoreValue;
            }
            if (score % 1000 == 0) showCutscene(); // Level change every 1000 score
            updateDisplay();
        }

        function handleCollision(el, array, index, scoreValue) {
            if (el.classList.contains('power-up')) {
                applyPowerUp(el);
            } else if (el.classList.contains('water')) {
                handleWaterCollision();
            } else if (el.classList.contains('collectible')) {
                score += 10;
                removeElement(el, array, index, scoreValue);
            } else {
                reduceLives();
                removeElement(el, array, index, scoreValue);
            }
        }

        function moveBullets() {
            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 += 20;
                        updateDisplay();
                    }
                });

                bosses.forEach((boss, bossIndex) => {
                    if (checkCollision(bullet, boss)) {
                        bullet.remove();
                        bullets.splice(index, 1);
                        boss.remove();
                        bosses.splice(bossIndex, 1);
                        score += 100;
                        updateDisplay();
                    }
                });
            });
        }

        function applyPowerUp(el) {
            let type = el.getAttribute('data-type');
            if (type === 'ice') {
                powerShotActive = true;
                setTimeout(() => powerShotActive = false, 5000);
            } else if (type === 'fire') {
                enemies.forEach(enemy => { enemy.style.backgroundColor = '#000'; }); // Burning effect
                setTimeout(() => enemies.forEach(enemy => { enemy.style.backgroundColor = '#FF5733'; }), 2000);
            }
            el.remove();
        }

        function reduceLives() {
            lives--;
            updateDisplay();
            if (lives <= 0) endGame();
        }

        function handleWaterCollision() {
            if (!isPaused) {
                setTimeout(() => {
                    if (checkCollisionWithClass(player, 'water')) {
                        reduceLives();
                    }
                }, 5000); // 5 seconds breath limit
            }
        }

        function checkCollisionWithClass(entity, className) {
            return [...document.querySelectorAll(`.${className}`)].some(el => checkCollision(entity, el));
        }

        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 enemiesFireBullets() {
            enemies.forEach(enemy => {
                if (Math.random() < 0.01) { // Lower frequency for shooting
                    const bullet = document.createElement('div');
                    bullet.classList.add('enemy-bullet');
                    bullet.style.left = parseInt(enemy.style.left) + 'px';
                    bullet.style.bottom = parseInt(enemy.style.bottom) + enemy.offsetHeight / 2 + 'px';
                    enemyBullets.push(bullet);
                    gameContainer.appendChild(bullet);
                }
            });
        }

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

        function clearAllElements() {
            [
                obstacles, enemies, bullets, enemyBullets, powerUps, ladders, caves, waters, collectibles, specialZones, platforms, bosses
            ].forEach(arr => clearSpecificElements(arr));
        }

        function clearSpecificElements(array) {
            array.forEach(el => el.remove());
            array.length = 0;
        }

        function incrementLevel() {
            level++;
            updateDisplay();
            cutsceneText.textContent = `Level ${level}: New Challenges Await!`;
        }

        function showCutscene() {
            clearInterval(gameInterval);
            cutscene.style.display = 'block';
        }

        function continueGame() {
            cutscene.style.display = 'none';
            incrementLevel();
            gameInterval = setInterval(gameLoop, 1000 / 60);
        }

        function gameLoop() {
            if (!isPaused) {
                updatePlayerPosition();
                spawnEntities();
                moveElements();
            }
        }

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