power ups are not spawning bro fix it all and when I touch blocks it won't even damage me. and also the door interaction won't work


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Advanced Adventure 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;
        }

        #game-world {
            position: absolute;
            width: 1600px; /* Extend the width for scrolling */
            height: 100%;
            transition: transform 0.1s linear;
        }

        #player {
            position: absolute;
            bottom: 0;
            left: 50px;
            width: 30px;
            height: 30px;
            background-color: #4CAF50;
            animation: idle 1s infinite alternate;
        }

        @keyframes idle {
            from { transform: translateY(0); }
            to { transform: translateY(2px); }
        }

        .bullet, .trail, .burst, .enemy, .obstacle, .power-up, .boss-door {
            position: absolute;
        }

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

        .trail {
            width: 6px;
            height: 3px;
            background-color: rgba(255, 215, 0, 0.5);
            opacity: 0.5;
        }

        .burst {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: rgba(255, 69, 0, 0.7);
            animation: burst 0.5s ease-out;
        }

        @keyframes burst {
            from { transform: scale(0.5); opacity: 1; }
            to { transform: scale(1.5); opacity: 0; }
        }

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

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

        .power-up {
            width: 20px;
            height: 20px;
        }

        .boss-door {
            width: 30px;
            height: 60px;
            background-color: #FFFF00;
        }

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

        #score { left: 10px; }
        #lives { right: 10px; }
        #level { left: 150px; }
        #timer { left: 250px; }

        #instructions, #cutscene, #level-intro, #boss-fight, #game-over {
            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, #boss-fight button, #game-over button {
            margin-top: 10px;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            background-color: #555;
            color: #fff;
        }

        #cutscene, #level-intro, #boss-fight, #game-over {
            display: none;
        }
    </style>
</head>
<body>
    <div id="game-container">
        <div id="game-world">
            <div id="player"></div>
        </div>
        <div id="score">Score: 0</div>
        <div id="lives">Lives: 3</div>
        <div id="level">Level: 1</div>
        <div id="timer">Timer: 0</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 Z for Power-Up</p>
            <p>Press E to interact</p>
            <button onclick="startGame()">Start Game</button>
            <button onclick="togglePause()">Pause/Resume</button>
        </div>
        <div id="cutscene">
            <p>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 id="boss-fight">
            <p>Going to Boss Hallway...</p>
        </div>
        <div id="game-over">
            <p>Game Over!</p>
            <button onclick="startGame()">Restart</button>
        </div>
    </div>

    <script>
        const gameContainer = document.getElementById('game-container');
        const gameWorld = document.getElementById('game-world');
        const player = document.getElementById('player');
        const scoreDisplay = document.getElementById('score');
        const livesDisplay = document.getElementById('lives');
        const levelDisplay = document.getElementById('level');
        const timerDisplay = document.getElementById('timer');
        const instructions = document.getElementById('instructions');
        const cutscene = document.getElementById('cutscene');
        const levelIntro = document.getElementById('level-intro');
        const levelText = document.getElementById('level-text');
        const bossFightScreen = document.getElementById('boss-fight');
        const gameOverScreen = document.getElementById('game-over');

        let playerPositionX = 50;
        let playerPositionY = 0;
        let playerVelocityX = 0;
        let playerVelocityY = 0;
        const playerMaxSpeed = 5;
        let isJumping = false;
        let isPaused = false;
        let canShoot = true;
        let gameInterval;
        let obstacles = [];
        let enemies = [];
        let bullets = [];
        let powerUps = [];
        let collectibles = [];
        let platforms = [];
        let bossDoors = [];
        let score = 0;
        let lives = 3;
        let level = 1;
        const gravity = 0.5;
        const jumpStrength = 12;
        const maxLevels = 5;
        let movingLeft = false, movingRight = false;  // Player's direction input
        let currentPowerUp = null;
        let powerUpTimer = 0;
        let gameScrollPosition = 0;
        const scrollSpeed = 2;
        let levitatedEnemy = null;
        const bossThreshold = 100;

        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) {
                        shootBullet();
                        canShoot = false;
                        setTimeout(() => canShoot = true, 300);
                    }
                    break;
                case 'z':
                case 'Z':
                    usePowerUp();
                    break;
                case 'e':
                case 'E':
                    interact();
                    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 shootBullet() {
            const bullet = document.createElement('div');
            bullet.classList.add('bullet');
            bullets.push({ element: bullet, direction: 1 });
            bullet.style.left = (playerPositionX + player.offsetWidth + 5) + 'px';  // Start in front of the player
            bullet.style.bottom = (playerPositionY + player.offsetHeight / 2) + 'px';
            gameWorld.appendChild(bullet);
        }

        function createTrail(bullet) {
            const trail = document.createElement('div');
            trail.classList.add('trail');
            trail.style.left = (parseInt(bullet.style.left) - 10) + 'px'; // Position trail slightly behind bullet
            trail.style.bottom = bullet.style.bottom;
            gameWorld.appendChild(trail);
            setTimeout(() => trail.remove(), 150);  // Short lifespan for the trail effect
        }

        function createBurst(x, y) {
            const burst = document.createElement('div');
            burst.classList.add('burst');
            burst.style.left = x + 'px';
            burst.style.bottom = y + 'px';
            gameWorld.appendChild(burst);
            setTimeout(() => burst.remove(), 500);
        }

        function moveCamera() {
            gameScrollPosition += scrollSpeed;
            gameWorld.style.transform = `translateX(${-gameScrollPosition}px)`;
        }

        function moveBullets() {
            bullets.forEach((bulletObj, index) => {
                const bullet = bulletObj.element;
                createTrail(bullet);
                bullet.style.left = (parseInt(bullet.style.left) + (bulletObj.direction * 5)) + 'px';
                if (parseInt(bullet.style.left) > gameScrollPosition + gameContainer.offsetWidth) {
                    bullet.remove();
                    bullets.splice(index, 1);
                } else {
                    enemies.forEach((enemy, enemyIndex) => {
                        if (checkCollision(bullet, enemy)) {
                            createBurst(parseInt(bullet.style.left), parseInt(bullet.style.bottom));
                            bullet.remove();
                            bullets.splice(index, 1);
                            enemy.remove();
                            enemies.splice(enemyIndex, 1);
                            score += 10;
                            updateDisplay();
                        }
                    });
                }
            });
        }

        function startGame() {
            gameOverScreen.style.display = 'none';
            instructions.style.display = 'none';
            levelIntro.style.display = 'flex';
            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;
            gameScrollPosition = 0;
            clearAllElements();
            updateDisplay();
        }

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

        function updatePlayerPosition() {
            moveCamera();

            if (movingLeft) {
                playerVelocityX = -playerMaxSpeed;
            } else if (movingRight) {
                playerVelocityX = playerMaxSpeed;
            } else {
                playerVelocityX = 0;
            }

            playerPositionX += playerVelocityX;
            playerPositionX = Math.max(gameScrollPosition, Math.min(gameScrollPosition + gameContainer.offsetWidth - player.offsetWidth, playerPositionX));
            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.02) spawnEnemy();
                if (Math.random() < 0.02 && !currentPowerUp) spawnPowerUps();
                if (Math.random() < 0.005) spawnCollectible();
                if (Math.random() < 0.002) spawnPlatform();
                if (Math.random() < 0.001 && score >= bossThreshold) spawnBossDoor();
            }
        }

        function moveElements() {
            moveArray(obstacles, 2, 15);
            moveArray(enemies, 1, 30);
            moveArray(powerUps, 2, 0, true);
            moveArray(platforms, 1, 0);
            moveBullets();
        }

        function spawnObstacle() {
            const obstacle = createElement('obstacle', obstacles, gameScrollPosition + gameContainer.offsetWidth);
            obstacle.style.bottom = '0px';
        }

        function spawnEnemy() {
            const enemy = createElement('enemy', enemies, gameScrollPosition + gameContainer.offsetWidth);
            enemy.style.bottom = '0px';
        }

        function spawnPowerUps() {
            const powerUpTypes = ['ice', 'fire', 'levitate', 'hypno'];
            const type = powerUpTypes[Math.floor(Math.random() * powerUpTypes.length)];
            const powerUp = createElement(`power-up-${type}`, powerUps, gameScrollPosition + gameContainer.offsetWidth, type);
            powerUp.style.bottom = '0px';
        }

        function spawnCollectible() {
            const collectible = createElement('collectible', collectibles, gameScrollPosition + gameContainer.offsetWidth);
            collectible.style.bottom = (Math.random() * 100 + 50) + 'px';
        }

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

        function spawnBossDoor() {
            const bossDoor = createElement('boss-door', bossDoors, gameScrollPosition + gameContainer.offsetWidth + 200);
            bossDoor.style.bottom = '0px';
        }

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

        function moveArray(array, speed, scoreValue, isPowerUp = false) {
            array.forEach((el, index) => {
                if (speed > 0 && !el.classList.contains('frozen')) {
                    el.style.left = (parseInt(el.style.left) - speed) + 'px';
                }
                if (parseInt(el.style.left) < gameScrollPosition - el.offsetWidth) {
                    removeElement(el, array, index, scoreValue);
                } else if (checkCollision(player, el)) {
                    handleCollision(el, array, index, scoreValue, isPowerUp);
                }
            });
        }

        function removeElement(el, array, index, scoreValue) {
            el.remove();
            array.splice(index, 1);
            if (scoreValue) {
                score += scoreValue;
            }
            updateDisplay();
        }

        function handleCollision(el, array, index, scoreValue, isPowerUp = false) {
            if (isPowerUp) {
                applyPowerUp(el);
            } else if (el.classList.contains('boss-door')) {
                triggerEndOfLevel();
            } else if (el.classList.contains('enemy') || el.classList.contains('obstacle')) {
                reduceLives();
            }
            removeElement(el, array, index, scoreValue);
        }

        function applyPowerUp(el) {
            if (currentPowerUp) return;

            const type = el.getAttribute('data-type');
            currentPowerUp = type;
            let duration;

            switch (type) {
                case 'ice':
                    player.style.backgroundColor = 'blue';
                    duration = 30;
                    break;
                case 'fire':
                    player.style.backgroundColor = 'red';
                    duration = 25;
                    break;
                case 'levitate':
                    player.style.backgroundColor = 'green';
                    duration = 20;
                    break;
                case 'hypno':
                    player.style.backgroundColor = 'pink';
                    duration = 25;
                    break;
                default:
                    player.style.backgroundColor = '#4CAF50';
                    duration = 0;
            }

            powerUpTimer = duration;
            const powerUpInterval = setInterval(() => {
                powerUpTimer--;
                updateDisplay();
                if (powerUpTimer <= 0) {
                    clearInterval(powerUpInterval);
                    resetPowerUp();
                }
            }, 1000);
        }

        function resetPowerUp() {
            currentPowerUp = null;
            player.style.backgroundColor = '#4CAF50';
        }

        function usePowerUp() {
            if (!currentPowerUp) return;
            switch (currentPowerUp) {
                case 'ice':
                    shootIce();
                    break;
                case 'fire':
                    shootFire();
                    break;
                case 'levitate':
                    useLevitate();
                    break;
                case 'hypno':
                    useHypno();
                    break;
                default:
                    break;
            }
        }

        function shootIce() {
            const iceBullet = document.createElement('div');
            iceBullet.classList.add('ice');
            iceBullet.style.left = playerPositionX + 'px';
            iceBullet.style.bottom = (playerPositionY + player.offsetHeight / 2) + 'px';
            gameWorld.appendChild(iceBullet);

            const iceBulletObj = { element: iceBullet, direction: 1 };
            animateBullet(iceBulletObj, 5, (target) => {
                if (target.classList.contains('obstacle')) {
                    target.classList.add('frozen');
                    target.style.backgroundColor = '#00f';
                }
            });
        }

        function shootFire() {
            const fireBullet = document.createElement('div');
            fireBullet.classList.add('fire');
            fireBullet.style.left = playerPositionX + 'px';
            fireBullet.style.bottom = (playerPositionY + player.offsetHeight / 2) + 'px';
            gameWorld.appendChild(fireBullet);

            const fireBulletObj = { element: fireBullet, direction: 1 };
            animateBullet(fireBulletObj, 5, (target) => {
                if (target.classList.contains('obstacle')) {
                    target.style.transition = 'opacity 0.5s';
                    target.style.opacity = '0';
                    setTimeout(() => target.remove(), 500);
                }
            });
        }

        function useLevitate() {
            if (!levitatedEnemy) {
                const nearestEnemy = enemies.find(enemy => Math.abs(playerPositionX - parseInt(enemy.style.left)) < 100);
                if (nearestEnemy) {
                    levitatedEnemy = nearestEnemy;
                    levitatedEnemy.style.transform = 'translateY(-20px)';
                }
            } else {
                levitatedEnemy.style.transform = 'none';
                levitatedEnemy.style.left = (parseInt(levitatedEnemy.style.left) + 100) + 'px';
                [...enemies, ...obstacles].slice(0, 3).forEach((target, index) => {
                    if (checkCollision(levitatedEnemy, target)) {
                        target.remove();
                        if (enemies.includes(target)) enemies.splice(index, 1);
                    }
                });
                levitatedEnemy = null;
            }
        }

        function useHypno() {
            const targetEnemy = enemies.find(enemy => !enemy.classList.contains('pink'));
            if (targetEnemy) {
                targetEnemy.style.backgroundColor = 'pink';
                targetEnemy.classList.add('hypnotized');
                targetEnemyMoving(targetEnemy);
            }
        }

        function targetEnemyMoving(target) {
            let hitCount = 0;
            const moveInterval = setInterval(() => {
                target.style.left = (parseInt(target.style.left) + 5) + 'px';
                [...enemies, ...obstacles].slice(0, 3).forEach((other, index) => {
                    if (checkCollision(target, other) && other !== target) {
                        other.remove();
                        hitCount++;
                        if (enemies.includes(other)) enemies.splice(index, 1);
                        else if (obstacles.includes(other)) obstacles.splice(index, 1);

                        if (hitCount >= 3) {
                            target.remove();
                            clearInterval(moveInterval);
                        }
                    }
                });

                if (parseInt(target.style.left) > gameScrollPosition + gameContainer.offsetWidth) {
                    target.remove();
                    clearInterval(moveInterval);
                }
            }, 1000 / 60);
        }

        function animateBullet(bulletObj, speed, impactCallback = () => {}) {
            const bulletInterval = setInterval(() => {
                const bullet = bulletObj.element;
                createTrail(bullet);
                bullet.style.left = (parseInt(bullet.style.left) + (bulletObj.direction * speed)) + 'px';
                if (parseInt(bullet.style.left) > gameScrollPosition + gameContainer.offsetWidth) {
                    bullet.remove();
                    clearInterval(bulletInterval);
                } else {
                    [...obstacles, ...enemies].forEach(target => {
                        if (checkCollision(bullet, target)) {
                            impactCallback(target);
                            createBurst(parseInt(bullet.style.left), parseInt(bullet.style.bottom));
                            bullet.remove();
                            clearInterval(bulletInterval);
                        }
                    });
                }
            }, 1000 / 60);
        }

        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) {
                splashScreen.style.display = 'none';
                gameInterval = setInterval(gameLoop, 1000 / 60);
                isPaused = false;
            } else {
                clearInterval(gameInterval);
                splashScreen.style.display = 'flex';
                isPaused = true;
            }
        }

        function clearAllElements() {
            [obstacles, enemies, bullets.map(b => b.element), powerUps, collectibles, platforms].forEach(arr => clearSpecificElements(arr));
        }
        
        function clearSpecificElements(array) {
            array.forEach(el => el.remove());
            array.length = 0;
        }

        function interact() {
            bossDoors.forEach((door) => {
                if (checkCollision(player, door)) {
                    triggerSecretBoss();
                }
            });
        }

        function incrementLevel() {
            level++;
            if (level > maxLevels) {
                endGame(true);
            } else {
                updateDisplay();
                levelIntro.style.display = 'flex';
                levelText.textContent = `Level ${level}: New Challenges Await!`;

                switch (level) {
                    case 2:
                        gameWorld.style.backgroundColor = '#1E90FF'; // Blue ocean
                        break;
                    case 3:
                        gameWorld.style.backgroundColor = '#228B22'; // Forest green
                        break;
                    case 4:
                        gameWorld.style.backgroundColor = '#E0FFFF'; // Cloudy sky
                        player.style.bottom = '0px'; 
                        player.style.height = '20px';
                        break;
                }
            }
        }

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

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

        function endGame(isWin = false) {
            clearInterval(gameInterval);
            gameOverScreen.style.display = 'flex';
            gameOverScreen.innerHTML = `<p>${isWin ? 'Congratulations! You won!' : 'Game Over!'}</p>
            <button onclick="startGame()">Restart</button>`;
        }

        function triggerEndOfLevel() {
            clearInterval(gameInterval);
            splashScreen.style.display = 'flex';
            setTimeout(() => {
                splashScreen.style.display = 'none';
                incrementLevel();
                startLevel();
            }, 3000);
        }

        function triggerSecretBoss() {
            if (!secretBossActive) return;

            bossFightScreen.style.display = 'flex';
           
            setTimeout(() => {
                bossFightScreen.style.display = 'none';
                clearAllElements();
                const boss = document.createElement('div');
                boss.classList.add('boss');
                boss.style.left = gameScrollPosition + 300 + 'px';
                boss.style.bottom = '100px';
                gameWorld.appendChild(boss);
                enemies.push(boss);

                let bossKillCount = 0;

                const bossInterval = setInterval(() => {
                    if (checkCollision(player, boss)) {
                        reduceLives();
                    }

                    if (bossKillCount < 10) {
                        spawnEnemy();
                        bossKillCount++;
                    }
                }, 1000);
            }, 2000);
        }

        function checkScoreForLevelTransition() {
            if (score >= level * bossThreshold) {
                triggerEndOfLevel();
            }
        }
    </script>
</body>
</html>