Spaces:

akhaliq
/

gradio-game

Running

App Files Files Community

akhaliq HF staff commited on 28 days ago

Commit

4d71127

verified ·

1 Parent(s): b9232bd

Update app.py

Browse files

Files changed (1) hide show

app.py +156 -121

app.py CHANGED Viewed

@@ -8,34 +8,24 @@ with demo:
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>3D Maze Game Demo</title>
     <style>
-        body {
-            margin: 0;
-            overflow: hidden;
-        }
-        #container {
-            position: relative;
-        }
-        #debug {
             position: absolute;
             top: 10px;
             left: 10px;
             color: white;
-            background: rgba(0, 0, 0, 0.5);
-            padding: 10px;
             font-family: Arial, sans-serif;
         }
     </style>
 </head>
 <body>
     <div id="container"></div>
-    <div id="debug">
-        <p>Position: <span id="position"></span></p>
-        <p>Rotation: <span id="rotation"></span></p>
-    </div>
-    <!-- Libraries from CDNs -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/loaders/GLTFLoader.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.js"></script>
@@ -62,7 +52,7 @@ with demo:
             canvas.width = 256;
             canvas.height = 256;
             const context = canvas.getContext('2d');
-            context.fillStyle = '#8B4513'; // Brown tone
             context.fillRect(0, 0, 256, 256);
             context.strokeStyle = '#FFFFFF';
             context.lineWidth = 2;
@@ -89,7 +79,7 @@ with demo:
             canvas.width = 64;
             canvas.height = 64;
             const context = canvas.getContext('2d');
-            context.fillStyle = '#808080'; // Gray base
             context.fillRect(0, 0, 64, 64);
             context.fillStyle = '#A0A0A0';
             for (let i = 0; i < 100; i++) {
@@ -125,145 +115,190 @@ with demo:
             }
         }
-        // Walls and Collision Bounds
         const wallTexture = createWallTexture();
         const wallGeometry = new THREE.BoxGeometry(cellSize, cellSize, cellSize);
         const wallMaterial = new THREE.MeshBasicMaterial({ map: wallTexture });
-        const walls = [];
-        const wallBounds = [];
         for (let i = 0; i < gridSize; i++) {
             for (let j = 0; j < gridSize; j++) {
                 if (maze[i][j] === 1) {
                     const wall = new THREE.Mesh(wallGeometry, wallMaterial);
-                    const x = (j - 7.5) * cellSize;
-                    const z = (i - 7.5) * cellSize;
-                    wall.position.set(x, cellSize / 2, z);
                     scene.add(wall);
-                    walls.push(wall);
-                    wallBounds.push({
-                        minX: x - cellSize / 2,
-                        maxX: x + cellSize / 2,
-                        minZ: z - cellSize / 2,
-                        maxZ: z + cellSize / 2
-                    });
                 }
             }
         }
-        // Soldier Setup
         const loader = new THREE.GLTFLoader();
-        let soldier, mixer, idleAction, runAction, activeAction;
         loader.load(
             'https://threejs.org/examples/models/gltf/Soldier.glb',
             (gltf) => {
-                soldier = gltf.scene;
-                soldier.scale.set(2, 2, 2);
-                soldier.position.set(0, 0, 0);
-                scene.add(soldier);
-                mixer = new THREE.AnimationMixer(soldier);
                 const animations = gltf.animations;
-                idleAction = mixer.clipAction(THREE.AnimationClip.findByName(animations, 'Idle'));
-                runAction = mixer.clipAction(THREE.AnimationClip.findByName(animations, 'Run'));
-                activeAction = idleAction;
-                activeAction.play();
             },
             undefined,
             (error) => console.error('Error loading soldier:', error)
         );
         // Camera and Controls
-        camera.position.set(0, 5, 10);
         const controls = new THREE.OrbitControls(camera, renderer.domElement);
         controls.target.set(0, 0, 0);
         controls.update();
-        // Movement Controls
-        const keys = new Set();
-        window.addEventListener('keydown', (e) => keys.add(e.key.toLowerCase()));
-        window.addEventListener('keyup', (e) => keys.delete(e.key.toLowerCase()));
-        const moveSpeed = 10; // Units per second
-        const collisionRadius = 0.5;
-        function updateSoldier(delta) {
-            if (!soldier) return;
-            const forward = new THREE.Vector3();
-            camera.getWorldDirection(forward);
-            forward.y = 0;
-            forward.normalize();
-            const right = new THREE.Vector3();
-            right.crossVectors(forward, new THREE.Vector3(0, 1, 0));
-            const moveDirection = new THREE.Vector3();
-            if (keys.has('w')) moveDirection.add(forward);
-            if (keys.has('s')) moveDirection.add(forward.clone().negate());
-            if (keys.has('a')) moveDirection.add(right.clone().negate());
-            if (keys.has('d')) moveDirection.add(right);
-            if (moveDirection.lengthSq() > 0) {
-                moveDirection.normalize();
-                const newPosition = soldier.position.clone().add(
-                    moveDirection.multiplyScalar(moveSpeed * delta)
-                );
-                // Collision Detection
-                let colliding = false;
-                for (const wall of wallBounds) {
-                    if (
-                        newPosition.x > wall.minX - collisionRadius &&
-                        newPosition.x < wall.maxX + collisionRadius &&
-                        newPosition.z > wall.minZ - collisionRadius &&
-                        newPosition.z < wall.maxZ + collisionRadius
-                    ) {
-                        colliding = true;
-                        break;
-                    }
-                }
-                if (!colliding) {
-                    soldier.position.copy(newPosition);
-                    const angle = Math.atan2(moveDirection.x, moveDirection.z);
-                    soldier.rotation.y = angle + Math.PI; // Orientation fix
-                }
-                // Animation Transition to Run
-                if (activeAction !== runAction) {
-                    activeAction.fadeOut(0.2);
-                    runAction.reset().fadeIn(0.2).play();
-                    activeAction = runAction;
-                }
-            } else {
-                // Animation Transition to Idle
-                if (activeAction !== idleAction) {
-                    activeAction.fadeOut(0.2);
-                    idleAction.reset().fadeIn(0.2).play();
-                    activeAction = idleAction;
-                }
-            }
-        }
         // Animation Loop
         const clock = new THREE.Clock();
         function animate() {
             requestAnimationFrame(animate);
             const delta = clock.getDelta();
-            if (mixer) mixer.update(delta);
-            updateSoldier(delta);
-            if (soldier) {
-                controls.target.copy(soldier.position);
-                const pos = soldier.position;
-                document.getElementById('position').textContent =
-                    `(${pos.x.toFixed(2)}, ${pos.y.toFixed(2)}, ${pos.z.toFixed(2)})`;
-                document.getElementById('rotation').textContent =
-                    soldier.rotation.y.toFixed(2);
             }
-            controls.update();
             renderer.render(scene, camera);
         }
         animate();

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Autonomous Maze Game Demo</title>
     <style>
+        body { margin: 0; overflow: hidden; }
+        #status {
             position: absolute;
             top: 10px;
             left: 10px;
             color: white;
+            background: rgba(0, 0, 0, 0.7);
+            padding: 5px;
             font-family: Arial, sans-serif;
         }
     </style>
 </head>
 <body>
     <div id="container"></div>
+    <div id="status">Status: In progress</div>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/loaders/GLTFLoader.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.js"></script>
             canvas.width = 256;
             canvas.height = 256;
             const context = canvas.getContext('2d');
+            context.fillStyle = '#8B4513'; // Brown
             context.fillRect(0, 0, 256, 256);
             context.strokeStyle = '#FFFFFF';
             context.lineWidth = 2;
             canvas.width = 64;
             canvas.height = 64;
             const context = canvas.getContext('2d');
+            context.fillStyle = '#808080'; // Gray
             context.fillRect(0, 0, 64, 64);
             context.fillStyle = '#A0A0A0';
             for (let i = 0; i < 100; i++) {
             }
         }
+        // Walls
         const wallTexture = createWallTexture();
         const wallGeometry = new THREE.BoxGeometry(cellSize, cellSize, cellSize);
         const wallMaterial = new THREE.MeshBasicMaterial({ map: wallTexture });
         for (let i = 0; i < gridSize; i++) {
             for (let j = 0; j < gridSize; j++) {
                 if (maze[i][j] === 1) {
                     const wall = new THREE.Mesh(wallGeometry, wallMaterial);
+                    wall.position.set((j - 7.5) * cellSize, cellSize / 2, (i - 7.5) * cellSize);
                     scene.add(wall);
                 }
             }
         }
+        // Flag
+        const flagGeometry = new THREE.BoxGeometry(1, 2, 1);
+        const flagMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 }); // Yellow
+        const flag = new THREE.Mesh(flagGeometry, flagMaterial);
+        flag.position.set(2, 1, 2); // Center of maze (8,8) translated to world coords
+        scene.add(flag);
+        // A* Pathfinding
+        function aStar(maze, start, goal) {
+            const openSet = [start];
+            const cameFrom = {};
+            const gScore = { [start]: 0 };
+            const fScore = { [start]: heuristic(start, goal) };
+            while (openSet.length > 0) {
+                let current = openSet.reduce((a, b) => fScore[a] < fScore[b] ? a : b);
+                if (current === goal) return reconstructPath(cameFrom, current);
+                openSet.splice(openSet.indexOf(current), 1);
+                for (let neighbor of getNeighbors(maze, current)) {
+                    let tentative_gScore = gScore[current] + 1;
+                    if (!(neighbor in gScore) || tentative_gScore < gScore[neighbor]) {
+                        cameFrom[neighbor] = current;
+                        gScore[neighbor] = tentative_gScore;
+                        fScore[neighbor] = gScore[neighbor] + heuristic(neighbor, goal);
+                        if (!openSet.includes(neighbor)) openSet.push(neighbor);
+                    }
+                }
+            }
+            return [];
+        }
+        function heuristic(a, b) {
+            const [aRow, aCol] = a.split(',').map(Number);
+            const [bRow, bCol] = b.split(',').map(Number);
+            return Math.abs(aRow - bRow) + Math.abs(aCol - bCol);
+        }
+        function getNeighbors(maze, node) {
+            const [row, col] = node.split(',').map(Number);
+            const neighbors = [];
+            if (row > 0 && maze[row - 1][col] === 0) neighbors.push(`${row - 1},${col}`);
+            if (row < 15 && maze[row + 1][col] === 0) neighbors.push(`${row + 1},${col}`);
+            if (col > 0 && maze[row][col - 1] === 0) neighbors.push(`${row},${col - 1}`);
+            if (col < 15 && maze[row][col + 1] === 0) neighbors.push(`${row},${col + 1}`);
+            return neighbors;
+        }
+        function reconstructPath(cameFrom, current) {
+            const path = [current];
+            while (current in cameFrom) {
+                current = cameFrom[current];
+                path.unshift(current);
+            }
+            return path;
+        }
+        // Soldiers
         const loader = new THREE.GLTFLoader();
+        let soldiers = [];
+        let winner = null;
+        const moveSpeed = 5;
         loader.load(
             'https://threejs.org/examples/models/gltf/Soldier.glb',
             (gltf) => {
                 const animations = gltf.animations;
+                for (let team = 0; team < 2; team++) {
+                    for (let i = 0; i < 3; i++) {
+                        const soldierClone = gltf.scene.clone();
+                        const mixer = new THREE.AnimationMixer(soldierClone);
+                        soldierClone.scale.set(2, 2, 2);
+                        const soldierObj = {
+                            mesh: soldierClone,
+                            mixer: mixer,
+                            team: team,
+                            path: [],
+                            idleAction: mixer.clipAction(THREE.AnimationClip.findByName(animations, 'Idle')),
+                            runAction: mixer.clipAction(THREE.AnimationClip.findByName(animations, 'Run')),
+                            activeAction: null
+                        };
+                        soldierObj.activeAction = soldierObj.idleAction;
+                        soldierObj.activeAction.play();
+                        // Color soldiers
+                        soldierClone.traverse((child) => {
+                            if (child.isMesh) {
+                                child.material = child.material.clone();
+                                child.material.color.set(team === 0 ? 0x0000ff : 0xff0000);
+                            }
+                        });
+                        // Random starting position
+                        let gridX, gridZ;
+                        do {
+                            gridZ = Math.floor(Math.random() * 16);
+                            gridX = team === 0 ? Math.floor(Math.random() * 8) : Math.floor(Math.random() * 8) + 8;
+                        } while (maze[gridZ][gridX] === 1);
+                        const worldX = (gridX - 7.5) * cellSize;
+                        const worldZ = (gridZ - 7.5) * cellSize;
+                        soldierClone.position.set(worldX, 0, worldZ);
+                        scene.add(soldierClone);
+                        // Path to flag
+                        const start = `${gridZ},${gridX}`;
+                        const goal = "8,8";
+                        const path = aStar(maze, start, goal);
+                        soldierObj.path = path.map(node => {
+                            const [row, col] = node.split(',').map(Number);
+                            return new THREE.Vector3((col - 7.5) * cellSize, 0, (row - 7.5) * cellSize);
+                        });
+                        soldiers.push(soldierObj);
+                    }
+                }
             },
             undefined,
             (error) => console.error('Error loading soldier:', error)
         );
         // Camera and Controls
+        camera.position.set(0, 20, 30);
         const controls = new THREE.OrbitControls(camera, renderer.domElement);
         controls.target.set(0, 0, 0);
         controls.update();
         // Animation Loop
         const clock = new THREE.Clock();
         function animate() {
             requestAnimationFrame(animate);
             const delta = clock.getDelta();
+            if (!winner) {
+                for (let soldier of soldiers) {
+                    if (soldier.mesh.position.distanceTo(flag.position) < 1) {
+                        winner = soldier.team;
+                        document.getElementById('status').textContent = `Status: Team ${winner} wins!`;
+                        break;
+                    } else if (soldier.path.length > 0) {
+                        const target = soldier.path[0];
+                        const direction = target.clone().sub(soldier.mesh.position).normalize();
+                        const step = direction.multiplyScalar(moveSpeed * delta);
+                        soldier.mesh.position.add(step);
+                        const angle = Math.atan2(direction.x, direction.z);
+                        soldier.mesh.rotation.y = angle + Math.PI;
+                        if (soldier.mesh.position.distanceTo(target) < 0.5) {
+                            soldier.path.shift();
+                        }
+                        if (soldier.activeAction !== soldier.runAction) {
+                            soldier.activeAction.fadeOut(0.2);
+                            soldier.runAction.reset().fadeIn(0.2).play();
+                            soldier.activeAction = soldier.runAction;
+                        }
+                    } else {
+                        if (soldier.activeAction !== soldier.idleAction) {
+                            soldier.activeAction.fadeOut(0.2);
+                            soldier.idleAction.reset().fadeIn(0.2).play();
+                            soldier.activeAction = soldier.idleAction;
+                        }
+                    }
+                    soldier.mixer.update(delta);
+                }
             }
             renderer.render(scene, camera);
         }
         animate();