Spaces:

akhaliq
/

gradio-game

Running

App Files Files Community

akhaliq HF staff commited on 30 days ago

Commit

9a86561

verified ·

1 Parent(s): bc3b18c

Update app.py

Browse files

Files changed (1) hide show

app.py +19 -19

app.py CHANGED Viewed

@@ -8,7 +8,7 @@ with demo:
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-    <title>Hugging Face Temple Run Mobile</title>
     <style>
         body {
             margin: 0;
@@ -18,7 +18,7 @@ with demo:
             justify-content: center;
             align-items: center;
             height: 100vh;
-            touch-action: none; /* Prevent default touch behaviors */
         }
         canvas {
             display: block;
@@ -30,7 +30,7 @@ with demo:
             top: 50%;
             left: 50%;
             transform: translate(-50%, -50%);
-            font-size: 8vw; /* Responsive font size */
             color: white;
             background: rgba(0, 0, 0, 0.7);
             padding: 5vw;
@@ -78,7 +78,7 @@ with demo:
         scene.fog = new THREE.Fog(0x87ceeb, 10, 100);
         // Ground
-        const groundGeometry = new THREE.PlaneGeometry(12, 1000); // Narrower for mobile
         const groundMaterial = new THREE.MeshLambertMaterial({ color: 0x8c8c8c });
         const ground = new THREE.Mesh(groundGeometry, groundMaterial);
         ground.rotation.x = -Math.PI / 2;
@@ -100,7 +100,7 @@ with demo:
         const face = new THREE.Mesh(faceGeometry, faceMaterial);
         face.position.set(0, 0.8, 0);
         scene.add(face);
-        face.velocity = new THREE.Vector3(0, 0, -12); // Faster for mobile
         face.lane = 0; // -1, 0, 1
         face.jumping = false;
@@ -143,33 +143,33 @@ with demo:
         // Touch controls
         let touchStartX = 0;
-        let touchStartY = 0;
-        let swipeThreshold = 30; // Pixels for swipe detection
         document.addEventListener('touchstart', (e) => {
             e.preventDefault();
             touchStartX = e.touches[0].clientX;
-            touchStartY = e.touches[0].clientY;
         }, { passive: false });
         document.addEventListener('touchmove', (e) => {
             e.preventDefault();
             if (gameOver) return;
             const deltaX = e.touches[0].clientX - touchStartX;
-            const deltaY = e.touches[0].clientY - touchStartY;
             if (Math.abs(deltaX) > swipeThreshold) {
-                if (deltaX > 0 && face.lane < 1) face.lane++; // Right
-                else if (deltaX < 0 && face.lane > -1) face.lane--; // Left
                 touchStartX = e.touches[0].clientX;
             }
-            if (Math.abs(deltaY) > swipeThreshold) {
-                if (deltaY < 0 && !face.jumping) { // Up
-                    face.jumping = true;
-                    face.velocity.y = 15;
-                }
-                touchStartY = e.touches[0].clientY;
-            }
         }, { passive: false });
         // Spawn items

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>Hugging Face Temple Run Mobile - Tap to Jump</title>
     <style>
         body {
             margin: 0;
             justify-content: center;
             align-items: center;
             height: 100vh;
+            touch-action: none;
         }
         canvas {
             display: block;
             top: 50%;
             left: 50%;
             transform: translate(-50%, -50%);
+            font-size: 8vw;
             color: white;
             background: rgba(0, 0, 0, 0.7);
             padding: 5vw;
         scene.fog = new THREE.Fog(0x87ceeb, 10, 100);
         // Ground
+        const groundGeometry = new THREE.PlaneGeometry(12, 1000);
         const groundMaterial = new THREE.MeshLambertMaterial({ color: 0x8c8c8c });
         const ground = new THREE.Mesh(groundGeometry, groundMaterial);
         ground.rotation.x = -Math.PI / 2;
         const face = new THREE.Mesh(faceGeometry, faceMaterial);
         face.position.set(0, 0.8, 0);
         scene.add(face);
+        face.velocity = new THREE.Vector3(0, 0, -12);
         face.lane = 0; // -1, 0, 1
         face.jumping = false;
         // Touch controls
         let touchStartX = 0;
+        let touchMoved = false;
+        const swipeThreshold = 30;
         document.addEventListener('touchstart', (e) => {
             e.preventDefault();
             touchStartX = e.touches[0].clientX;
+            touchMoved = false;
+            if (!gameOver && !face.jumping) {
+                face.jumping = true;
+                face.velocity.y = 15; // Tap to jump
+            }
         }, { passive: false });
         document.addEventListener('touchmove', (e) => {
             e.preventDefault();
             if (gameOver) return;
+            touchMoved = true;
             const deltaX = e.touches[0].clientX - touchStartX;
             if (Math.abs(deltaX) > swipeThreshold) {
+                if (deltaX > 0 && face.lane < 1) face.lane++; // Swipe right
+                else if (deltaX < 0 && face.lane > -1) face.lane--; // Swipe left
                 touchStartX = e.touches[0].clientX;
             }
+        }, { passive: false });
+        document.addEventListener('touchend', (e) => {
+            e.preventDefault();
         }, { passive: false });
         // Spawn items