Spaces:

akhaliq
/

game-testing

Running

App Files Files Community

akhaliq HF Staff commited on Feb 24

Commit

08450f4

verified ·

1 Parent(s): 60e721b

Update index.html

Browse files

Files changed (1) hide show

index.html +144 -18

index.html CHANGED Viewed

@@ -1,19 +1,145 @@
-<!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>Endless Runner</title>
+    <style>
+        body { margin: 0; overflow: hidden; }
+        canvas { display: block; }
+        #score {
+            position: absolute;
+            top: 10px;
+            left: 10px;
+            color: white;
+            font-family: Arial;
+            font-size: 20px;
+        }
+    </style>
+</head>
+<body>
+    <div id="score">Score: 0</div>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/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();
+        renderer.setSize(window.innerWidth, window.innerHeight);
+        document.body.appendChild(renderer.domElement);
+        // Player
+        const playerGeometry = new THREE.BoxGeometry(1, 1, 1);
+        const playerMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
+        const player = new THREE.Mesh(playerGeometry, playerMaterial);
+        player.position.y = 0.5;
+        scene.add(player);
+        // Ground
+        const groundGeometry = new THREE.PlaneGeometry(10, 1000);
+        const groundMaterial = new THREE.MeshBasicMaterial({ color: 0x888888 });
+        const ground = new THREE.Mesh(groundGeometry, groundMaterial);
+        ground.rotation.x = -Math.PI / 2;
+        ground.position.y = 0;
+        scene.add(ground);
+        // Game variables
+        let obstacles = [];
+        let score = 0;
+        let isJumping = false;
+        let jumpVelocity = 0;
+        let gameSpeed = 0.1;
+        let lastObstacleTime = 0;
+        camera.position.z = 5;
+        camera.position.y = 5;
+        camera.lookAt(0, 0, 0);
+        // Obstacle creation
+        function createObstacle() {
+            const obstacleGeometry = new THREE.BoxGeometry(1, 1, 1);
+            const obstacleMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
+            const obstacle = new THREE.Mesh(obstacleGeometry, obstacleMaterial);
+            obstacle.position.y = 0.5;
+            obstacle.position.z = -50;
+            obstacle.position.x = Math.random() * 4 - 2;
+            scene.add(obstacle);
+            obstacles.push(obstacle);
+        }
+        // Jump mechanics
+        document.addEventListener('keydown', (event) => {
+            if (event.code === 'Space' && !isJumping) {
+                isJumping = true;
+                jumpVelocity = 0.3;
+            }
+        });
+        // Game loop
+        function animate() {
+            requestAnimationFrame(animate);
+            // Update ground movement
+            ground.position.z += gameSpeed;
+            if (ground.position.z > 100) {
+                ground.position.z = 0;
+            }
+            // Jump physics
+            if (isJumping) {
+                player.position.y += jumpVelocity;
+                jumpVelocity -= 0.015;
+                if (player.position.y <= 0.5) {
+                    player.position.y = 0.5;
+                    isJumping = false;
+                    jumpVelocity = 0;
+                }
+            }
+            // Obstacle management
+            const currentTime = Date.now();
+            if (currentTime - lastObstacleTime > 2000) {
+                createObstacle();
+                lastObstacleTime = currentTime;
+            }
+            // Move and check obstacles
+            obstacles.forEach((obstacle, index) => {
+                obstacle.position.z += gameSpeed;
+                // Collision detection
+                if (Math.abs(obstacle.position.z - player.position.z) < 1 &&
+                    Math.abs(obstacle.position.x - player.position.x) < 1 &&
+                    player.position.y < 1.5) {
+                    alert('Game Over! Score: ' + score);
+                    obstacles.forEach(o => scene.remove(o));
+                    obstacles = [];
+                    score = 0;
+                }
+                // Remove obstacles that passed
+                if (obstacle.position.z > 10) {
+                    scene.remove(obstacle);
+                    obstacles.splice(index, 1);
+                    score += 10;
+                }
+            });
+            // Update score
+            document.getElementById('score').textContent = 'Score: ' + score;
+            // Increase difficulty
+            gameSpeed += 0.0001;
+            renderer.render(scene, camera);
+        }
+        // Handle window resize
+        window.addEventListener('resize', () => {
+            camera.aspect = window.innerWidth / window.innerHeight;
+            camera.updateProjectionMatrix();
+            renderer.setSize(window.innerWidth, window.innerHeight);
+        });
+        animate();
+    </script>
+</body>
+</html>