give me code snippet to fix this movement is just moves around weird

<!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;
            transform: translateZ(0); /* Optimize performance */
        }

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

        .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;
        }

        .power-up {
            width: 20px;
            height: 20px;
            background-color: #00FF00;
        }
        
        #score, #lives, #level {
            position: absolute;
            top: 10px;
            font-size: 16px;
        }

        #score {
            left: 10px;
        }

        #lives {
            right: 10px;
        }

        #level {
            left: 400px;
        }

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

        #cutscene {
            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>
            <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>

    <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');

        let playerPositionX = 0;
        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 = [];
        let powerUps = [];
        const baseSpeed = 2;

        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;
            player.style.transform = `translateX(${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;
                }
            }

            // Camera Follow Effect - Pseudo-Follow
            gameContainer.style.backgroundPositionX = `${-playerPositionX * 0.5}px`;
        }

        function spawnEnemiesAndObstacles() {
            // Control spawning frequency based on level
            if (obstacleSpawnCounter++ > 100 / level) {
                spawnObstacle();
                obstacleSpawnCounter = 0;
            }

            if (enemySpawnCounter++ > 200 / level) {
                spawnEnemy();
                enemySpawnCounter = 0;
            }

            // Spawn power-ups occasionally, e.g., every 300 frames
            if (Math.random() < 0.01) {
                spawnPowerUp();
            }

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

        function spawnObstacle() {
            const obstacle = document.createElement('div');
            obstacle.classList.add('obstacle');
            obstacle.style.left = gameContainer.offsetWidth + 'px';
            obstacles.push(obstacle);
            gameContainer.appendChild(obstacle);
        }

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

        function spawnPowerUp() {
            const powerUp = document.createElement('div');
            powerUp.classList.add('power-up');
            powerUp.style.left = gameContainer.offsetWidth + 'px';
            powerUps.push(powerUp);
            gameContainer.appendChild(powerUp);
        }

        function moveObjects() {
            moveArray(obstacles, baseSpeed, 15);
            moveArray(enemies, baseSpeed + 1, 30);
            moveArray(powerUps, baseSpeed, 0);
            moveBullets();

            if (score >= level * 50 && score % 50 === 0) {
                showCutscene();
            }
        }

        function moveArray(array, speed, scoreValue) {
            array.forEach((item, index) => {
                item.style.left = (parseInt(item.style.left) - (speed + level)) + 'px';
                if (parseInt(item.style.left) < -item.offsetWidth) {
                    item.remove();
                    array.splice(index, 1);
                    if (scoreValue) {
                        score += scoreValue;
                        updateDisplay();
                    }
                }
                if (checkCollision(player, item)) {
                    if (item.classList.contains('power-up')) {
                        // Apply power-up effects
                        applyPowerUp();
                    } else {
                        lives--;
                        updateDisplay();
                        if (lives <= 0) {
                            endGame();
                        }
                    }
                    item.remove();
                    array.splice(index, 1);
                }
            });
        }

        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 += 10;
                        updateDisplay();
                    }
                });
            });
        }

        function applyPowerUp() {
            // Example power-up: Increase speed temporarily
            playerMaxSpeed += 2;
            setTimeout(() => playerMaxSpeed -= 2, 5000);
        }

        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());
            powerUps.forEach(pu => pu.remove());
            obstacles = [];
            enemies = [];
            bullets = [];
            powerUps = [];
        }

        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>`;
        }

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

        function continueGame() {
            cutscene.style.display = 'none';
            gameInterval = setInterval(gameLoop, 1000 / 60);
            level++;
            bossSpawned = false;
            updateDisplay();
        }
    </script>
</body>
</html>