Spaces:

akhaliq
/

threejsgame

Running

App Files Files Community

akhaliq HF Staff commited on Mar 19

Commit

c3101d0

verified ·

1 Parent(s): f1caec6

Update index.html

Browse files

Files changed (1) hide show

index.html +283 -18

index.html CHANGED Viewed

@@ -1,19 +1,284 @@
-<!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>
+<head>
+    <title>Neon Runner</title>
+    <style>
+        body { margin: 0; overflow: hidden; touch-action: none; }
+        #ui {
+            position: fixed;
+            top: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            color: #0ff;
+            font-family: Arial;
+            text-align: center;
+            pointer-events: none;
+            text-shadow: 0 0 10px #0ff;
+        }
+        #restart {
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            padding: 15px 30px;
+            font-size: 24px;
+            background: #00ffff;
+            border: none;
+            border-radius: 10px;
+            cursor: pointer;
+            display: none;
+            box-shadow: 0 0 20px #0ff;
+        }
+    </style>
+</head>
+<body>
+    <div id="ui">
+        <div>SCORE: <span id="score">0</span></div>
+        <div>COMBO: <span id="combo">x1</span></div>
+    </div>
+    <button id="restart">RESTART</button>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script>
+        let scene, camera, renderer, player, particles;
+        let obstacles = [];
+        let powerUps = [];
+        let velocity = 0;
+        let score = 0;
+        let combo = 1;
+        const config = {
+            GRAVITY: 0.02,
+            JUMP_FORCE: 0.6,
+            SPEED: 0.4,
+            PARTICLE_COUNT: 30
+        };
+        function init() {
+            scene = new THREE.Scene();
+            camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
+            renderer = new THREE.WebGLRenderer({ antialias: true });
+            renderer.setSize(window.innerWidth, window.innerHeight);
+            renderer.setClearColor(0x000000);
+            document.body.appendChild(renderer.domElement);
+            // Lighting
+            const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
+            scene.add(ambientLight);
+            const directionalLight = new THREE.DirectionalLight(0x00ffff, 1);
+            directionalLight.position.set(0, 5, 5);
+            scene.add(directionalLight);
+            // Player
+            const playerGeometry = new THREE.CapsuleGeometry(0.3, 0.6, 8, 16);
+            const playerMaterial = new THREE.MeshPhongMaterial({
+                color: 0x00ffff,
+                emissive: 0x00ffff,
+                emissiveIntensity: 0.5
+            });
+            player = new THREE.Mesh(playerGeometry, playerMaterial);
+            player.position.set(0, 2, 0);
+            scene.add(player);
+            // Track
+            createTrack();
+            createParticleSystem();
+            camera.position.set(0, 4, 7);
+            camera.lookAt(0, 2, 0);
+        }
+        function createTrack() {
+            const trackGeometry = new THREE.PlaneGeometry(40, 40);
+            const trackTexture = new THREE.TextureLoader().load('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAJUlEQVQoU2NkYGD4z8DAwMgABXCJYARQic4H4gIiBC4hAAACCRAH6YGjSQAAAABJRU5ErkJggg==');
+            const trackMaterial = new THREE.MeshPhongMaterial({
+                color: 0x222222,
+                emissive: 0x00ffff,
+                emissiveIntensity: 0.1,
+                map: trackTexture
+            });
+            const track = new THREE.Mesh(trackGeometry, trackMaterial);
+            track.rotation.x = -Math.PI / 2;
+            scene.add(track);
+        }
+        function createParticleSystem() {
+            const particleGeometry = new THREE.BufferGeometry();
+            const positions = [];
+            for(let i = 0; i < config.PARTICLE_COUNT; i++) {
+                positions.push(
+                    Math.random() * 20 - 10,
+                    0.2,
+                    Math.random() * 20 - 10
+                );
+            }
+            particleGeometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
+            const particleMaterial = new THREE.PointsMaterial({
+                size: 0.1,
+                color: 0x00ffff,
+                transparent: true,
+                opacity: 0.6
+            });
+            particles = new THREE.Points(particleGeometry, particleMaterial);
+            scene.add(particles);
+        }
+        function createObstacle() {
+            const types = ['box', 'sphere', 'cylinder'];
+            const type = types[Math.floor(Math.random() * types.length)];
+            let geometry;
+            switch(type) {
+                case 'sphere':
+                    geometry = new THREE.SphereGeometry(0.5);
+                    break;
+                case 'cylinder':
+                    geometry = new THREE.CylinderGeometry(0.4, 0.4, 1);
+                    break;
+                default:
+                    geometry = new THREE.BoxGeometry(0.8, 0.8, 0.8);
+            }
+            const material = new THREE.MeshPhongMaterial({
+                color: 0xff0066,
+                emissive: 0xff0066,
+                emissiveIntensity: 0.3
+            });
+            const obstacle = new THREE.Mesh(geometry, material);
+            obstacle.position.set(15, type === 'cylinder' ? 0.5 : 0.4, 0);
+            obstacle.rotation.y = Math.random() * Math.PI;
+            scene.add(obstacle);
+            obstacles.push(obstacle);
+        }
+        function createPowerUp() {
+            if(Math.random() > 0.3) return;
+            const geometry = new THREE.TetrahedronGeometry(0.4);
+            const material = new THREE.MeshPhongMaterial({
+                color: 0xffff00,
+                emissive: 0xffff00,
+                emissiveIntensity: 0.5
+            });
+            const powerUp = new THREE.Mesh(geometry, material);
+            powerUp.position.set(15, 1.5, Math.random() * 4 - 2);
+            scene.add(powerUp);
+            powerUps.push(powerUp);
+        }
+        function checkCollision(obj) {
+            const playerBox = new THREE.Box3().expandByObject(player);
+            const objBox = new THREE.Box3().expandByObject(obj);
+            return playerBox.intersectsBox(objBox);
+        }
+        function gameOver() {
+            document.getElementById('restart').style.display = 'block';
+            config.SPEED = 0;
+        }
+        function resetGame() {
+            obstacles.forEach(o => scene.remove(o));
+            powerUps.forEach(p => scene.remove(p));
+            obstacles = [];
+            powerUps = [];
+            score = 0;
+            combo = 1;
+            config.SPEED = 0.4;
+            player.position.set(0, 2, 0);
+            document.getElementById('restart').style.display = 'none';
+            updateUI();
+        }
+        function updateUI() {
+            document.getElementById('score').textContent = score;
+            document.getElementById('combo').textContent = `x${combo}`;
+        }
+        document.addEventListener('keydown', e => {
+            if(e.code === 'Space' && player.position.y <= 2.1 && config.SPEED > 0) {
+                velocity = config.JUMP_FORCE;
+                combo++;
+            }
+        });
+        document.addEventListener('pointerdown', () => {
+            if(player.position.y <= 2.1 && config.SPEED > 0) {
+                velocity = config.JUMP_FORCE;
+                combo++;
+            }
+        });
+        document.getElementById('restart').addEventListener('click', resetGame);
+        function animate() {
+            requestAnimationFrame(animate);
+            // Player physics
+            velocity -= config.GRAVITY;
+            player.position.y += velocity;
+            if(player.position.y < 2) {
+                player.position.y = 2;
+                velocity = 0;
+                combo = 1;
+            }
+            // Movement system
+            obstacles.forEach((obstacle, i) => {
+                obstacle.position.x -= config.SPEED;
+                obstacle.rotation.y += 0.05;
+                if(obstacle.position.x < -15) {
+                    scene.remove(obstacle);
+                    obstacles.splice(i, 1);
+                }
+                if(checkCollision(obstacle)) gameOver();
+            });
+            powerUps.forEach((powerUp, i) => {
+                powerUp.position.x -= config.SPEED;
+                powerUp.rotation.x += 0.1;
+                powerUp.rotation.y += 0.1;
+                if(checkCollision(powerUp)) {
+                    score += 50 * combo;
+                    scene.remove(powerUp);
+                    powerUps.splice(i, 1);
+                    updateUI();
+                }
+            });
+            // Particle animation
+            particles.rotation.y += 0.002;
+            // Camera follow
+            camera.position.x += (player.position.x - camera.position.x) * 0.05;
+            camera.position.z = 7 + (score * 0.0002);
+            renderer.render(scene, camera);
+        }
+        // Game loop
+        setInterval(() => {
+            if(config.SPEED > 0) {
+                score += combo;
+                config.SPEED *= 1.0002;
+                updateUI();
+            }
+        }, 100);
+        setInterval(() => config.SPEED > 0 && createObstacle(), 1500);
+        setInterval(() => config.SPEED > 0 && createPowerUp(), 3000);
+        // Init
+        window.addEventListener('resize', () => {
+            camera.aspect = window.innerWidth / window.innerHeight;
+            camera.updateProjectionMatrix();
+            renderer.setSize(window.innerWidth, window.innerHeight);
+        });
+        init();
+        animate();
+    </script>
+</body>
+</html>