Spaces:

akhaliq
/

threejsgame

Running

App Files Files Community

akhaliq HF Staff commited on Mar 19

Commit

e15dd3f

verified ·

1 Parent(s): 79619b4

Update index.html

Browse files

Files changed (1) hide show

index.html +166 -179

index.html CHANGED Viewed

@@ -1,229 +1,216 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>Space Runner Mobile</title>
     <style>
-        body { margin: 0; overflow: hidden; touch-action: none; }
         #hud {
             position: fixed;
-            top: 10px;
-            left: 10px;
-            color: #0f0;
             font-family: Arial;
-            font-size: 20px;
-            padding: 10px;
-            background: rgba(0,0,0,0.7);
-            border-radius: 5px;
             z-index: 100;
         }
-        #controls {
             position: fixed;
-            bottom: 20px;
-            width: 100%;
-            display: flex;
-            justify-content: space-between;
-            padding: 0 20px;
-            box-sizing: border-box;
         }
-        .control-btn {
-            width: 60px;
-            height: 60px;
-            background: rgba(255,255,255,0.2);
-            border-radius: 50%;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            color: white;
-            font-size: 24px;
-            touch-action: none;
         }
     </style>
 </head>
 <body>
     <div id="hud">
-        <div>🚀: <span id="speed">0</span></div>
-        <div>🛡️: <span id="shield">100</span>%</div>
-        <div>⭐: <span id="score">0</span></div>
     </div>
-    <div id="controls">
-        <div class="control-btn" id="left">←</div>
-        <div class="control-btn" id="right">→</div>
     </div>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
     <script>
-        // Scene setup
         const scene = new THREE.Scene();
         const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
         const renderer = new THREE.WebGLRenderer({ antialias: true });
         renderer.setSize(window.innerWidth, window.innerHeight);
         document.body.appendChild(renderer.domElement);
-        // Player Ship (clearly visible pyramid)
-        const shipGeometry = new THREE.ConeGeometry(0.8, 2, 4);
-        const shipMaterial = new THREE.MeshPhongMaterial({
-            color: 0x00ff88,
-            emissive: 0x005500
         });
-        const ship = new THREE.Mesh(shipGeometry, shipMaterial);
-        ship.rotation.x = Math.PI / 2;
-        scene.add(ship);
-        // Floor (colorful grid for better orientation)
-        const grid = new THREE.GridHelper(40, 40, 0x4444ff, 0x222266);
-        scene.add(grid);
-        // Lighting
-        const ambientLight = new THREE.AmbientLight(0x404040);
-        scene.add(ambientLight);
-        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
-        directionalLight.position.set(0, 10, 5);
-        scene.add(directionalLight);
-        // Game state
-        let asteroids = [];
-        let powerUps = [];
-        let currentSpeed = 0;
-        let shields = 100;
-        let score = 0;
-        let touchX = 0;
-        const MAX_SPEED = 0.3;
-        // Mobile controls
-        let controls = {
-            left: false,
-            right: false
-        };
-        // Touch handling
-        document.getElementById('left').addEventListener('touchstart', () => controls.left = true);
-        document.getElementById('left').addEventListener('touchend', () => controls.left = false);
-        document.getElementById('right').addEventListener('touchstart', () => controls.right = true);
-        document.getElementById('right').addEventListener('touchend', () => controls.right = false);
-        // Keyboard controls
-        window.addEventListener('keydown', (e) => {
-            if(e.key === 'ArrowLeft') controls.left = true;
-            if(e.key === 'ArrowRight') controls.right = true;
-        });
-        window.addEventListener('keyup', (e) => {
-            if(e.key === 'ArrowLeft') controls.left = false;
-            if(e.key === 'ArrowRight') controls.right = false;
         });
-        // Create clearly visible asteroids
-        const createAsteroid = () => {
-            const size = 1 + Math.random();
-            const geometry = new THREE.OctahedronGeometry(size);
-            const material = new THREE.MeshPhongMaterial({
-                color: 0xff4444,
-                emissive: 0x440000
             });
-            const asteroid = new THREE.Mesh(geometry, material);
-            asteroid.position.set(
-                (Math.random() - 0.5) * 20,
-                (Math.random() - 0.5) * 10,
-                -50
-            );
-            return asteroid;
-        };
-        // Create power-ups (clearly distinct from asteroids)
-        const createPowerUp = () => {
-            const geometry = new THREE.TorusGeometry(0.5, 0.2, 8, 24);
-            const material = new THREE.MeshPhongMaterial({
-                color: 0x00ffff,
-                emissive: 0x004444
-            });
-            const powerUp = new THREE.Mesh(geometry, material);
-            powerUp.position.set(
-                (Math.random() - 0.5) * 20,
-                (Math.random() - 0.5) * 10,
                 -50
             );
-            return powerUp;
-        };
         function updateHUD() {
-            document.getElementById('speed').textContent = Math.floor(currentSpeed * 1000);
-            document.getElementById('shield').textContent = Math.floor(shields);
             document.getElementById('score').textContent = score;
         }
-        function animate() {
-            requestAnimationFrame(animate);
-            // Ship movement controls
-            if(controls.left) ship.position.x -= 0.2;
-            if(controls.right) ship.position.x += 0.2;
-            ship.position.x = THREE.MathUtils.clamp(ship.position.x, -8, 8);
-            // Game progression
-            currentSpeed = Math.min(currentSpeed + 0.0001, MAX_SPEED);
-            score += Math.floor(currentSpeed * 100);
-            // Asteroid handling
-            asteroids.forEach((asteroid, index) => {
-                asteroid.position.z += currentSpeed * 50;
-                asteroid.rotation.x += 0.02;
-                asteroid.rotation.y += 0.02;
-                if(asteroid.position.z > 20) {
-                    scene.remove(asteroid);
-                    asteroids.splice(index, 1);
-                }
-            });
-            // Power-up handling
-            powerUps.forEach((powerUp, index) => {
-                powerUp.position.z += currentSpeed * 50;
-                powerUp.rotation.x += 0.05;
-                if(powerUp.position.z > 20) {
-                    scene.remove(powerUp);
-                    powerUps.splice(index, 1);
-                }
-            });
-            // Spawning (slower pace for mobile)
-            if(Math.random() < 0.015) {
-                const asteroid = createAsteroid();
-                scene.add(asteroid);
-                asteroids.push(asteroid);
-            }
-            if(Math.random() < 0.008) {
-                const powerUp = createPowerUp();
-                scene.add(powerUp);
-                powerUps.push(powerUp);
-            }
-            // Camera follow
-            camera.position.set(
-                ship.position.x * 0.5,
-                ship.position.y + 3,
-                5 + currentSpeed * 50
-            );
-            camera.lookAt(ship.position);
-            renderer.render(scene, camera);
-            updateHUD();
         }
-        // Initial setup
         camera.position.z = 5;
         animate();
-        // Responsive handling
-        window.addEventListener('resize', () => {
-            camera.aspect = window.innerWidth / window.innerHeight;
-            camera.updateProjectionMatrix();
-            renderer.setSize(window.innerWidth, window.innerHeight);
         });
-        // Prevent touch scrolling
-        document.body.addEventListener('touchstart', (e) => e.preventDefault(), { passive: false });
-        document.body.addEventListener('touchmove', (e) => e.preventDefault(), { passive: false });
     </script>
 </body>
 </html>

 <!DOCTYPE html>
 <html>
 <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>🚀 Galactic Dodge!</title>
     <style>
+        * { margin: 0; padding: 0; touch-action: manipulation; }
+        body { overflow: hidden; background: #000; }
         #hud {
             position: fixed;
+            top: 15px;
+            left: 15px;
+            color: #fff;
             font-family: Arial;
+            font-size: 24px;
+            text-shadow: 0 0 10px #00ffff;
             z-index: 100;
         }
+        #gameOver {
+            display: none;
             position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            text-align: center;
+            color: #fff;
+            text-shadow: 0 0 15px #ff0066;
         }
+        #share {
+            display: none;
+            position: fixed;
+            bottom: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            padding: 15px 30px;
+            background: #00ff88;
+            color: #000;
+            border: none;
+            border-radius: 30px;
+            font-size: 20px;
+            cursor: pointer;
         }
     </style>
 </head>
 <body>
     <div id="hud">
+        <div>⭐ <span id="score">0</span></div>
+        <div>❤️ <span id="lives">3</span></div>
     </div>
+    <div id="gameOver">
+        <h1 style="font-size: 2em">GAME OVER!</h1>
+        <p style="margin: 20px 0">Score: <span id="finalScore">0</span></p>
     </div>
+    <button id="share" onclick="shareScore()">Share Your Score 📢</button>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
     <script>
+        // Game Configuration
+        const CONFIG = {
+            PLAYER_SPEED: 0.3,
+            ASTEROID_SPAWN_RATE: 1000,
+            POWERUP_CHANCE: 0.3,
+            INITIAL_LIVES: 3
+        };
+        // Game State
+        let score = 0, lives = CONFIG.INITIAL_LIVES, isGameOver = false;
+        let touchStartX = 0, currentX = 0;
+        // Scene Setup
         const scene = new THREE.Scene();
         const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
         const renderer = new THREE.WebGLRenderer({ antialias: true });
         renderer.setSize(window.innerWidth, window.innerHeight);
         document.body.appendChild(renderer.domElement);
+        // Player (Simple Pyramid)
+        const player = new THREE.Mesh(
+            new THREE.ConeGeometry(0.8, 1.5, 4),
+            new THREE.MeshBasicMaterial({ color: 0x00ff88 })
+        );
+        player.position.z = 3;
+        scene.add(player);
+        // Particles (Simple Starfield)
+        const stars = new THREE.Points(
+            new THREE.BufferGeometry().setFromPoints(
+                Array(1000).fill().map(() => new THREE.Vector3(
+                    (Math.random() - 0.5) * 100,
+                    (Math.random() - 0.5) * 100,
+                    (Math.random() - 0.5) * 100
+                ))
+            ),
+            new THREE.PointsMaterial({ size: 0.1, color: 0xffffff })
+        );
+        scene.add(stars);
+        // Touch Controls
+        document.addEventListener('touchstart', e => {
+            touchStartX = e.touches[0].clientX;
         });
+        document.addEventListener('touchmove', e => {
+            if(isGameOver) return;
+            currentX = (e.touches[0].clientX - touchStartX) * 0.02;
+            player.position.x = THREE.MathUtils.clamp(currentX, -7, 7);
         });
+        // Game Loop
+        function animate() {
+            if(isGameOver) return;
+            // Spawn Objects
+            if(Math.random() < 0.02) spawnObject();
+            // Update Stars
+            stars.rotation.x += 0.0005;
+            stars.rotation.y += 0.0005;
+            // Check Collisions
+            scene.children.forEach(obj => {
+                if(obj !== player && obj.position.z > 0) {
+                    if(player.position.distanceTo(obj.position) < 2) {
+                        if(obj.userData.isPowerUp) {
+                            score += 100;
+                            lives = Math.min(CONFIG.INITIAL_LIVES, lives + 1);
+                        } else {
+                            lives--;
+                            if(lives <= 0) endGame();
+                        }
+                        scene.remove(obj);
+                        updateHUD();
+                    }
+                }
             });
+            renderer.render(scene, camera);
+            requestAnimationFrame(animate);
+        }
+        function spawnObject() {
+            const isPowerUp = Math.random() < CONFIG.POWERUP_CHANCE;
+            const geometry = isPowerUp ?
+                new THREE.OctahedronGeometry(0.5) :
+                new THREE.IcosahedronGeometry(1);
+            const object = new THREE.Mesh(
+                geometry,
+                new THREE.MeshBasicMaterial({
+                    color: isPowerUp ? 0x00ffff : 0xff4444,
+                    wireframe: true
+                })
+            );
+            object.userData.isPowerUp = isPowerUp;
+            object.position.set(
+                (Math.random() - 0.5) * 14,
+                (Math.random() - 0.5) * 8,
                 -50
             );
+            scene.add(object);
+            animateObject(object);
+        }
+        function animateObject(obj) {
+            const speed = 0.1 + (score * 0.0001);
+            function move() {
+                if(isGameOver) return;
+                obj.position.z += speed;
+                if(obj.position.z > 5) scene.remove(obj);
+                else requestAnimationFrame(move);
+            }
+            move();
+        }
         function updateHUD() {
             document.getElementById('score').textContent = score;
+            document.getElementById('lives').textContent = lives;
+            score += 1;
         }
+        function endGame() {
+            isGameOver = true;
+            document.getElementById('gameOver').style.display = 'block';
+            document.getElementById('share').style.display = 'block';
+            document.getElementById('finalScore').textContent = score;
+            // Save high score
+            localStorage.setItem('highScore', Math.max(score, localStorage.getItem('highScore') || 0));
+        }
+        async function shareScore() {
+            try {
+                await navigator.share({
+                    title: 'Galactic Dodge!',
+                    text: `🚀 I scored ${score} in Galactic Dodge! Can you beat me?`,
+                    url: window.location.href
+                });
+            } catch {
+                prompt("Copy link to challenge friends:", window.location.href);
+            }
         }
+        // Init
         camera.position.z = 5;
         animate();
+        updateHUD();
+        // Restart on tap
+        document.addEventListener('touchend', () => {
+            if(isGameOver) location.reload();
         });
     </script>
 </body>
 </html>