Spaces:

yefem16191
/

erer

Running

File size: 32,215 Bytes

ce5c7f8

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Oxygen Runner</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.min.js"></script>
    <style>
        body { 
            margin: 0;
            overflow: hidden;
            font-family: 'Arial', sans-serif;
        }
        #game-container {
            position: relative;
            width: 100%;
            height: 100vh;
        }
        #ui-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }
        .oxygen-bar {
            transition: width 0.3s ease;
        }
        #mobile-controls {
            display: none;
        }
        @media (max-width: 768px) {
            #mobile-controls {
                display: flex;
            }
        }
    </style>
</head>
<body class="bg-blue-50">
    <div id="game-container" tabindex="0">
        <div id="ui-overlay" class="flex flex-col p-4">
            <!-- Oxygen and score display -->
            <div class="flex justify-between items-center">
                <div class="bg-white bg-opacity-70 rounded-lg p-2 shadow-lg">
                    <div class="text-sm font-bold text-gray-800">OXYGEN</div>
                    <div class="w-40 h-4 bg-gray-300 rounded-full overflow-hidden">
                        <div id="oxygen-bar" class="oxygen-bar h-full bg-blue-500" style="width: 100%;"></div>
                    </div>
                    <div id="oxygen-time" class="text-xs font-semibold text-gray-700">02:30</div>
                </div>
                
                <div class="bg-white bg-opacity-70 rounded-lg p-2 shadow-lg">
                    <div class="text-sm font-bold text-gray-800">GREEN ZONES</div>
                    <div id="green-zones" class="text-lg font-bold text-green-600">0/5</div>
                </div>
            </div>
            
            <!-- Game messages -->
            <div id="game-message" class="mt-4 mx-auto bg-white bg-opacity-80 rounded-lg px-4 py-2 shadow-lg text-center text-gray-800 font-bold text-lg hidden"></div>
            
            <!-- Start screen -->
            <div id="start-screen" class="absolute inset-0 flex flex-col items-center justify-center bg-black bg-opacity-60">
                <h1 class="text-4xl md:text-6xl font-bold text-white mb-4">OXYGEN RUNNER</h1>
                <p class="text-white text-lg mb-8 max-w-md text-center">Restore the planet's green zones before your oxygen runs out!</p>
                <button id="start-button" class="bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-8 rounded-full text-xl shadow-lg transition-all transform hover:scale-105 pointer-events-auto">
                    START MISSION
                </button>
                <div class="mt-8 text-white">
                    <div class="mb-2">WASD: Move</div>
                    <div class="mb-2">SPACE: Jump</div>
                    <div class="mb-2">SHIFT: Run</div>
                    <div>E: Interact</div>
                </div>
            </div>
            
            <!-- Game over screen -->
            <div id="game-over-screen" class="absolute inset-0 flex flex-col items-center justify-center bg-black bg-opacity-60 hidden">
                <h1 id="game-over-title" class="text-4xl md:text-6xl font-bold text-white mb-4"></h1>
                <p id="game-over-message" class="text-white text-lg mb-8 max-w-md text-center"></p>
                <button id="restart-button" class="bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-8 rounded-full text-xl shadow-lg transition-all transform hover:scale-105 pointer-events-auto">
                    TRY AGAIN
                </button>
            </div>
            
            <!-- Mobile controls -->
            <div id="mobile-controls" class="absolute bottom-4 w-full px-4 pointer-events-auto">
                <div class="grid grid-cols-3 gap-2">
                    <div></div>
                    <button id="mobile-up" class="bg-white bg-opacity-70 rounded-full h-16 flex items-center justify-center shadow-lg">
                        ↑
                    </button>
                    <div></div>
                    <button id="mobile-left" class="bg-white bg-opacity-70 rounded-full h-16 flex items-center justify-center shadow-lg">
                        ←
                    </button>
                    <button id="mobile-interact" class="bg-green-500 bg-opacity-80 rounded-full h-16 flex items-center justify-center shadow-lg text-white font-bold">
                        E
                    </button>
                    <button id="mobile-right" class="bg-white bg-opacity-70 rounded-full h-16 flex items-center justify-center shadow-lg">
                        →
                    </button>
                    <button id="mobile-jump" class="bg-white bg-opacity-70 rounded-full h-16 flex items-center justify-center shadow-lg">
                        ↑↑
                    </button>
                    <button id="mobile-run" class="bg-white bg-opacity-70 rounded-full h-16 flex items-center justify-center shadow-lg">
                        RUN
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script>
        // Background music and sounds
        const bgMusic = new Audio('https://assets.mixkit.co/music/preview/mixkit-forest-trek-583.mp3');
        bgMusic.loop = true;
        bgMusic.volume = 0.4;
        
        // Preload sounds
        const soundEffects = {
            collect: new Audio('https://assets.mixkit.co/sfx/preview/mixkit-achievement-bell-600.mp3'),
            restore: new Audio('https://assets.mixkit.co/sfx/preview/mixkit-unlock-game-notification-253.mp3'),
            jump: new Audio('https://assets.mixkit.co/sfx/preview/mixkit-quick-jump-arcade-game-239.mp3'),
            step: new Audio('https://assets.mixkit.co/sfx/preview/mixkit-footsteps-on-grass-531.mp3'),
            win: new Audio('https://assets.mixkit.co/sfx/preview/mixkit-winning-chimes-2015.mp3')
        };
        
        // Set volumes
        Object.values(soundEffects).forEach(sound => {
            sound.volume = 0.3;
        });
        
        // Game variables
        let scene, camera, renderer, controls, player, oxygenSpheres = [], greenZones = [];
        let oxygenLevel = 100;
        let oxygenTime = 150; // 2.5 minutes in seconds
        let collectedSpheres = 0;
        let restoredZones = 0;
        let totalZones = 5;
        let gameActive = false;
        let playerSpeed = 0.1;
        let clock = new THREE.Clock();
        let keys = {};
        
        // Initialize the game
        function init() {
            // Create scene
            scene = new THREE.Scene();
            scene.background = new THREE.Color(0x87CEEB);
            
            // Create camera
            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
            camera.position.set(0, 10, 15);
            
            // Create renderer
            renderer = new THREE.WebGLRenderer({ antialias: true });
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.getElementById('game-container').prepend(renderer.domElement);
            
            // Add lights
            const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
            scene.add(ambientLight);
            
            const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
            directionalLight.position.set(10, 20, 10);
            scene.add(directionalLight);
            
            // Create ground
            const groundGeometry = new THREE.PlaneGeometry(50, 50);
            const groundMaterial = new THREE.MeshStandardMaterial({ color: 0xB8860B });
            const ground = new THREE.Mesh(groundGeometry, groundMaterial);
            ground.rotation.x = -Math.PI / 2;
            ground.receiveShadow = true;
            scene.add(ground);
            
            // Create more realistic player
            player = new THREE.Group();
            
            // Body
            const bodyGeometry = new THREE.CylinderGeometry(0.3, 0.3, 0.8, 8);
            const bodyMaterial = new THREE.MeshStandardMaterial({ color: 0x4682B4 });
            const body = new THREE.Mesh(bodyGeometry, bodyMaterial);
            body.position.y = 0.4;
            body.rotation.x = Math.PI / 2;
            player.add(body);
            
            // Head
            const headGeometry = new THREE.SphereGeometry(0.25, 16, 16);
            const headMaterial = new THREE.MeshStandardMaterial({ color: 0xFFD700 });
            const head = new THREE.Mesh(headGeometry, headMaterial);
            head.position.y = 0.8;
            player.add(head);
            
            // Arms
            const armGeometry = new THREE.CylinderGeometry(0.08, 0.08, 0.6, 8);
            const armMaterial = new THREE.MeshStandardMaterial({ color: 0xFFD700 });
            
            const leftArm = new THREE.Mesh(armGeometry, armMaterial);
            leftArm.position.set(-0.3, 0.4, 0);
            leftArm.rotation.z = Math.PI / 2;
            player.add(leftArm);
            
            const rightArm = new THREE.Mesh(armGeometry, armMaterial);
            rightArm.position.set(0.3, 0.4, 0);
            rightArm.rotation.z = Math.PI / 2;
            player.add(rightArm);
            
            // Legs
            const legGeometry = new THREE.CylinderGeometry(0.1, 0.1, 0.6, 8);
            const legMaterial = new THREE.MeshStandardMaterial({ color: 0x4682B4 });
            
            const leftLeg = new THREE.Mesh(legGeometry, legMaterial);
            leftLeg.position.set(-0.15, -0.3, 0);
            player.add(leftLeg);
            
            const rightLeg = new THREE.Mesh(legGeometry, legMaterial);
            rightLeg.position.set(0.15, -0.3, 0);
            player.add(rightLeg);
            
            player.position.y = 1;
            player.castShadow = true;
            player.userData = {
                armSwing: 0,
                legSwing: 0,
                isMoving: false
            };
            scene.add(player);
            
            // Create platforms and obstacles
            createEnvironment();
            
            // Create oxygen spheres
            createOxygenSpheres();
            
            // Create green zones
            createGreenZones();
            
            // Add event listeners
            window.addEventListener('resize', onWindowResize);
            document.addEventListener('keydown', onKeyDown);
            document.addEventListener('keyup', onKeyUp);
            
            // Mobile controls
            document.getElementById('mobile-up').addEventListener('touchstart', () => keys['w'] = true);
            document.getElementById('mobile-up').addEventListener('touchend', () => keys['w'] = false);
            document.getElementById('mobile-left').addEventListener('touchstart', () => keys['a'] = true);
            document.getElementById('mobile-left').addEventListener('touchend', () => keys['a'] = false);
            document.getElementById('mobile-right').addEventListener('touchstart', () => keys['d'] = true);
            document.getElementById('mobile-right').addEventListener('touchend', () => keys['d'] = false);
            document.getElementById('mobile-jump').addEventListener('touchstart', () => keys[' '] = true);
            document.getElementById('mobile-jump').addEventListener('touchend', () => keys[' '] = false);
            document.getElementById('mobile-run').addEventListener('touchstart', () => keys['Shift'] = true);
            document.getElementById('mobile-run').addEventListener('touchend', () => keys['Shift'] = false);
            document.getElementById('mobile-interact').addEventListener('touchstart', () => interact());
            
            // Game buttons
            document.getElementById('start-button').addEventListener('click', startGame);
            document.getElementById('restart-button').addEventListener('click', restartGame);
            
            // Start animation loop
            animate();
        }
        
        function createEnvironment() {
            // Add some platforms
            const platformGeometry = new THREE.BoxGeometry(8, 0.5, 8);
            const platformMaterial = new THREE.MeshStandardMaterial({ color: 0x8B4513 });
            
            for (let i = 0; i < 5; i++) {
                const platform = new THREE.Mesh(platformGeometry, platformMaterial);
                platform.position.x = (Math.random() - 0.5) * 30;
                platform.position.z = (Math.random() - 0.5) * 30;
                platform.position.y = Math.random() * 3;
                scene.add(platform);
            }
            
            // Add some dead trees
            const treeGeometry = new THREE.ConeGeometry(0.5, 2, 4);
            const treeMaterial = new THREE.MeshStandardMaterial({ color: 0x556B2F });
            
            for (let i = 0; i < 10; i++) {
                const tree = new THREE.Mesh(treeGeometry, treeMaterial);
                tree.position.x = (Math.random() - 0.5) * 40;
                tree.position.z = (Math.random() - 0.5) * 40;
                tree.position.y = 1;
                scene.add(tree);
            }
        }
        
        function createOxygenSpheres() {
            const sphereGeometry = new THREE.SphereGeometry(0.5, 16, 16);
            const sphereMaterial = new THREE.MeshStandardMaterial({ 
                color: 0x00BFFF,
                transparent: true,
                opacity: 0.8,
                emissive: 0x00BFFF,
                emissiveIntensity: 0.5
            });
            
            for (let i = 0; i < 10; i++) {
                const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
                sphere.position.x = (Math.random() - 0.5) * 40;
                sphere.position.z = (Math.random() - 0.5) * 40;
                sphere.position.y = 10 + Math.random() * 5; // Start higher up
                
                // Physics properties
                sphere.userData = {
                    velocity: new THREE.Vector3(0, -0.1, 0),
                    onGround: false,
                    time: Math.random() * Math.PI * 2
                };
                
                oxygenSpheres.push(sphere);
                scene.add(sphere);
            }
        }
        
        function createGreenZones() {
            const zoneGeometry = new THREE.CylinderGeometry(2, 2, 0.1, 32);
            const zoneMaterial = new THREE.MeshStandardMaterial({ 
                color: 0x228B22,
                transparent: true,
                opacity: 0.7,
                emissive: 0x00FF00,
                emissiveIntensity: 0.8
            });
            
            // Enhanced white outline effect with glow
            const zoneOutlineGeometry = new THREE.RingGeometry(1.9, 2.2, 32);
            const zoneOutlineMaterial = new THREE.MeshBasicMaterial({ 
                color: 0xFFFFFF,
                side: THREE.DoubleSide,
                transparent: true,
                opacity: 0.9
            });
            
            // Add pulsing glow effect
            const zoneGlowGeometry = new THREE.RingGeometry(2.1, 2.5, 32);
            const zoneGlowMaterial = new THREE.MeshBasicMaterial({ 
                color: 0x00FF00,
                side: THREE.DoubleSide,
                transparent: true,
                opacity: 0.5
            });
            
            for (let i = 0; i < totalZones; i++) {
                const zone = new THREE.Mesh(zoneGeometry, zoneMaterial);
                zone.position.x = (Math.random() - 0.5) * 40;
                zone.position.z = (Math.random() - 0.5) * 40;
                zone.position.y = 0.05;
                zone.visible = false;
                
                greenZones.push(zone);
                scene.add(zone);
            }
        }
        
        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        }
        
        function onKeyDown(event) {
            // Only process keys when game container has focus
            if (document.activeElement.id === 'game-container') {
                keys[event.key] = true;
                
                // Prevent space bar from scrolling page
                if (event.key === ' ' || 
                    event.key === 'w' || 
                    event.key === 'a' || 
                    event.key === 's' || 
                    event.key === 'd') {
                    event.preventDefault();
                }
                
                // Interact with E
                if (event.key === 'e' && gameActive) {
                    interact();
                }
            }
        }
        
        function onKeyUp(event) {
            keys[event.key] = false;
        }
        
        // Sound effects
        const sounds = {
            collect: new Audio('https://assets.mixkit.co/sfx/preview/mixkit-positive-interface-beep-221.mp3'),
            restore: new Audio('https://assets.mixkit.co/sfx/preview/mixkit-unlock-game-notification-253.mp3'),
            win: new Audio('https://assets.mixkit.co/sfx/preview/mixkit-achievement-bell-600.mp3')
        };

        function interact() {
            if (!gameActive) return;
            
            // Check for nearby oxygen spheres
            for (let i = 0; i < oxygenSpheres.length; i++) {
                const sphere = oxygenSpheres[i];
                const distance = player.position.distanceTo(sphere.position);
                
                if (distance < 2) {
                    // Enhanced visual effect
                    const flash = new THREE.PointLight(0x00BFFF, 5, 5);
                    flash.position.copy(sphere.position);
                    scene.add(flash);
                    
                    // Add particle burst
                    const particles = new THREE.Group();
                    for (let i = 0; i < 20; i++) {
                        const particle = new THREE.Mesh(
                            new THREE.SphereGeometry(0.1),
                            new THREE.MeshBasicMaterial({ color: 0x00BFFF })
                        );
                        particle.position.copy(sphere.position);
                        particle.userData = {
                            velocity: new THREE.Vector3(
                                (Math.random() - 0.5) * 0.5,
                                Math.random() * 0.5,
                                (Math.random() - 0.5) * 0.5
                            ),
                            lifetime: 0
                        };
                        particles.add(particle);
                    }
                    scene.add(particles);
                    
                    // Animate and remove effects
                    setTimeout(() => {
                        scene.remove(flash);
                        scene.remove(particles);
                    }, 500);
                    
                    // Collect sphere
                    scene.remove(sphere);
                    oxygenSpheres.splice(i, 1);
                    collectedSpheres++;
                    
                    // Add oxygen
                    oxygenLevel = Math.min(100, oxygenLevel + 10);
                    updateOxygenDisplay();
                    
                    // Play sound and show message
                    sounds.collect.play();
                    showMessage("Oxygen collected!", 1500);
                    return;
                }
            }
            
            // Check for green zones to restore
            for (let i = 0; i < greenZones.length; i++) {
                const zone = greenZones[i];
                
                if (!zone.visible) {
                    const distance = player.position.distanceTo(zone.position);
                    
                    if (distance < 3 && collectedSpheres > 0) {
                        // Restore zone
                        zone.visible = true;
                        collectedSpheres--;
                        restoredZones++;
                        updateGreenZonesDisplay();
                        
                        // Show message
                        showMessage("Green zone restored!", 1500);
                        
                        // Check win condition
                        if (restoredZones >= totalZones) {
                            endGame(true);
                        }
                        return;
                    }
                }
            }
        }
        
        function startGame() {
            document.getElementById('start-screen').classList.add('hidden');
            gameActive = true;
            bgMusic.play();
            
            // Start oxygen depletion
            setInterval(() => {
                if (gameActive) {
                    oxygenTime--;
                    oxygenLevel = (oxygenTime / 150) * 100;
                    updateOxygenDisplay();
                    
                    if (oxygenTime <= 0) {
                        endGame(false);
                    }
                }
            }, 1000);
        }
        
        function endGame(win) {
            gameActive = false;
            const gameOverScreen = document.getElementById('game-over-screen');
            const title = document.getElementById('game-over-title');
            const message = document.getElementById('game-over-message');
            
            gameOverScreen.classList.remove('hidden');
            
            if (win) {
                title.textContent = "VOCÊ SALVOU O PLANETA!";
                message.textContent = `Você restaurou todas as ${totalZones} zonas verdes com ${oxygenTime} segundos restantes!`;
                
                // Confetti effect
                setTimeout(() => {
                    for (let i = 0; i < 100; i++) {
                        const confetti = new THREE.Mesh(
                            new THREE.SphereGeometry(0.1),
                            new THREE.MeshBasicMaterial({ 
                                color: Math.random() * 0xffffff 
                            })
                        );
                        confetti.position.set(
                            player.position.x + (Math.random() - 0.5) * 10,
                            player.position.y + Math.random() * 10,
                            player.position.z + (Math.random() - 0.5) * 10
                        );
                        confetti.userData = {
                            velocity: new THREE.Vector3(
                                (Math.random() - 0.5) * 0.1,
                                Math.random() * 0.1,
                                (Math.random() - 0.5) * 0.1
                            )
                        };
                        scene.add(confetti);
                    }
                }, 500);
                
                // Auto-restart after 10 seconds
                setTimeout(restartGame, 10000);
            } else {
                title.textContent = "MISSION FAILED";
                message.textContent = `You ran out of oxygen after restoring ${restoredZones} of ${totalZones} green zones.`;
            }
            
            // Pause background music
            bgMusic.pause();
        }
        
        function restartGame() {
            document.getElementById('game-over-screen').classList.add('hidden');
            
            // Reset game state
            oxygenLevel = 100;
            oxygenTime = 150;
            collectedSpheres = 0;
            restoredZones = 0;
            gameActive = false;
            
            // Reset displays
            updateOxygenDisplay();
            updateGreenZonesDisplay();
            
            // Clear existing objects
            oxygenSpheres.forEach(sphere => scene.remove(sphere));
            greenZones.forEach(zone => {
                zone.visible = false;
                scene.remove(zone);
            });
            
            oxygenSpheres = [];
            greenZones = [];
            
            // Recreate objects
            createOxygenSpheres();
            createGreenZones();
            
            // Reset player position
            player.position.set(0, 1, 0);
            
            // Show start screen
            document.getElementById('start-screen').classList.remove('hidden');
        }
        
        function updateOxygenDisplay() {
            const oxygenBar = document.getElementById('oxygen-bar');
            oxygenBar.style.width = `${oxygenLevel}%`;
            
            // Change color based on oxygen level
            if (oxygenLevel < 30) {
                oxygenBar.classList.remove('bg-blue-500');
                oxygenBar.classList.add('bg-red-500');
            } else {
                oxygenBar.classList.remove('bg-red-500');
                oxygenBar.classList.add('bg-blue-500');
            }
            
            // Update time display
            const minutes = Math.floor(oxygenTime / 60);
            const seconds = oxygenTime % 60;
            document.getElementById('oxygen-time').textContent = 
                `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
        }
        
        function updateGreenZonesDisplay() {
            document.getElementById('green-zones').textContent = 
                `${restoredZones}/${totalZones}`;
        }
        
        function showMessage(text, duration) {
            const messageElement = document.getElementById('game-message');
            messageElement.textContent = text;
            messageElement.classList.remove('hidden');
            
            setTimeout(() => {
                messageElement.classList.add('hidden');
            }, duration);
        }
        
        function animate() {
            requestAnimationFrame(animate);
            
            const delta = clock.getDelta();
            
            if (gameActive) {
                // Player movement
                const moveSpeed = keys['Shift'] ? playerSpeed * 1.5 : playerSpeed;
                
                if (keys['w']) {
                    player.position.z -= moveSpeed;
                    camera.position.z -= moveSpeed;
                }
                if (keys['s']) {
                    player.position.z += moveSpeed;
                    camera.position.z += moveSpeed;
                }
                if (keys['a']) {
                    player.position.x -= moveSpeed;
                    camera.position.x -= moveSpeed;
                }
                if (keys['d']) {
                    player.position.x += moveSpeed;
                    camera.position.x += moveSpeed;
                }
                if (keys[' '] && player.position.y <= 1.1) {
                    player.position.y += 0.5;
                }
                
                // Improved gravity and jumping
                if (player.position.y > 0.8) {
                    player.position.y -= 0.1;
                } else {
                    player.position.y = 0.8;
                }
                
                // Character animation
                const isMoving = keys['w'] || keys['a'] || keys['s'] || keys['d'];
                player.userData.isMoving = isMoving;
                
                if (isMoving) {
                    // Arm swing animation
                    player.userData.armSwing += delta * 10;
                    const leftArm = player.children[2];
                    const rightArm = player.children[3];
                    leftArm.rotation.z = Math.sin(player.userData.armSwing) * 0.5;
                    rightArm.rotation.z = Math.sin(player.userData.armSwing + Math.PI) * 0.5;
                    
                    // Leg swing animation
                    player.userData.legSwing += delta * 10;
                    const leftLeg = player.children[4];
                    const rightLeg = player.children[5];
                    leftLeg.rotation.z = Math.sin(player.userData.legSwing + Math.PI) * 0.3;
                    rightLeg.rotation.z = Math.sin(player.userData.legSwing) * 0.3;
                } else {
                    // Reset to idle position
                    player.children[2].rotation.z = THREE.MathUtils.lerp(
                        player.children[2].rotation.z, 0, delta * 5
                    );
                    player.children[3].rotation.z = THREE.MathUtils.lerp(
                        player.children[3].rotation.z, 0, delta * 5
                    );
                    player.children[4].rotation.z = THREE.MathUtils.lerp(
                        player.children[4].rotation.z, 0, delta * 5
                    );
                    player.children[5].rotation.z = THREE.MathUtils.lerp(
                        player.children[5].rotation.z, 0, delta * 5
                    );
                }
                
                // Keep camera following player in third-person view
                const cameraOffset = new THREE.Vector3(0, 5, 10);
                const targetPosition = new THREE.Vector3();
                targetPosition.copy(player.position).add(cameraOffset);
                camera.position.lerp(targetPosition, delta * 5);
                camera.lookAt(player.position.x, player.position.y + 1, player.position.z);
                
                // Update oxygen spheres physics
                oxygenSpheres.forEach(sphere => {
                    if (!sphere.userData.onGround) {
                        sphere.userData.velocity.y -= 0.01; // Gravity
                        sphere.position.add(sphere.userData.velocity);
                        
                        // Simple ground collision
                        if (sphere.position.y <= 0.5) {
                            sphere.position.y = 0.5;
                            sphere.userData.onGround = true;
                        }
                    }
                    
                    // Pulsing animation when on ground
                    if (sphere.userData.onGround) {
                        sphere.userData.time += delta;
                        sphere.position.y = 0.5 + Math.sin(sphere.userData.time) * 0.1;
                    }
                    
                    sphere.rotation.y += delta * 0.5;
                });
            }
            
            renderer.render(scene, camera);
        }
        
        // Ensure game container has focus
        document.getElementById('game-container').focus();
        
        // Handle focus when clicking anywhere in the game
        document.addEventListener('click', () => {
            document.getElementById('game-container').focus();
        });

        // Start the game
        init();
    </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=yefem16191/erer" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>