Spaces:

yefem16191
/

erer

Running

App Files Files Community

yefem16191 commited on Jul 10, 2025

Commit

ce5c7f8

verified ·

1 Parent(s): 1c31334

🎮 PARTE 1 — BASE DO JOGO 3D (MAPA + PERSONAGEM + CONTROLES) ✅ Objetivo: Criar a estrutura base com: Terreno simples Personagem articulado Controles funcionais Câmera em terceira pessoa Física e gravidade 🧾 Prompt 1 — Estrutura inicial do jogo: Crie um jogo 3D leve e minimalista com: • Um personagem com corpo articulado (braços, pernas e cabeça) estilo low poly. • O personagem deve começar acima do terreno e completamente visível. • Movimentação com teclado: W, A, S, D para andar; Espaço para pular; Shift para correr. • Câmera em terceira pessoa, acompanhando o personagem suavemente por trás. • Um terreno plano grande e algumas plataformas elevadas espalhadas. • Física básica: gravidade ativa, colisão entre o personagem e o terreno/plataformas. • Iluminação clara e céu azul com luz ambiente suave. Este será o esqueleto do jogo. - Initial Deployment

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +734 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Erer
-emoji: 🐨
-colorFrom: yellow
-colorTo: purple
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: erer
+emoji: 🐳
+colorFrom: gray
+colorTo: pink
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,734 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!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>