Spaces:

akhaliq
/

gradio-game

Running

App Files Files Community

akhaliq HF staff commited on 28 days ago

Commit

c9175f4

verified ·

1 Parent(s): 96af967

Create app.py

Browse files

Files changed (1) hide show

app.py +230 -0

app.py ADDED Viewed

	@@ -0,0 +1,230 @@

+import gradio as gr
+gr.HTML("""<!DOCTYPE html>
+<html>
+<head>
+    <title>Maze Game Demo</title>
+    <style>
+        body { margin: 0; overflow: hidden; }
+        #debug {
+            position: absolute;
+            top: 10px;
+            left: 10px;
+            color: white;
+            background: rgba(0, 0, 0, 0.7);
+            padding: 5px;
+            font-family: monospace;
+        }
+    </style>
+</head>
+<body>
+    <div id="debug"></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>
+    <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);
+        // Lighting
+        const hemiLight = new THREE.HemisphereLight(0xffffff, 0x444444, 0.6);
+        scene.add(hemiLight);
+        const dirLight = new THREE.DirectionalLight(0xffffff, 0.8);
+        dirLight.position.set(0, 20, 10);
+        scene.add(dirLight);
+        // OrbitControls
+        const controls = new THREE.OrbitControls(camera, renderer.domElement);
+        controls.enableDamping = true;
+        // Maze generation
+        const gridSize = 16;
+        const cellSize = 4;
+        const maze = [];
+        const walls = [];
+        function createTexture(width, height, type) {
+            const canvas = document.createElement('canvas');
+            canvas.width = width;
+            canvas.height = height;
+            const ctx = canvas.getContext('2d');
+            if (type === 'floor') {
+                ctx.fillStyle = '#8B4513';
+                ctx.fillRect(0, 0, width, height);
+                ctx.strokeStyle = '#654321';
+                ctx.lineWidth = 2;
+                ctx.strokeRect(0, 0, width, height);
+            } else {
+                ctx.fillStyle = '#666666';
+                ctx.fillRect(0, 0, width, height);
+                for (let i = 0; i < 10; i++) {
+                    ctx.fillStyle = `rgba(0, 0, 0, ${Math.random() * 0.3})`;
+                    ctx.fillRect(
+                        Math.random() * width,
+                        Math.random() * height,
+                        Math.random() * width/4,
+                        Math.random() * height/4
+                    );
+                }
+            }
+            return new THREE.CanvasTexture(canvas);
+        }
+        const floorTexture = createTexture(256, 256, 'floor');
+        const wallTexture = createTexture(256, 256, 'wall');
+        // Generate maze
+        for (let x = 0; x < gridSize; x++) {
+            maze[x] = [];
+            for (let z = 0; z < gridSize; z++) {
+                const isBoundary = x === 0 || x === gridSize - 1 || z === 0 || z === gridSize - 1;
+                const isCenter = x >= 6 && x <= 9 && z >= 6 && z <= 9;
+                const isWall = isBoundary || (!isCenter && Math.random() < 0.15);
+                maze[x][z] = isWall ? 1 : 0;
+                if (isWall) {
+                    const wallGeometry = new THREE.BoxGeometry(cellSize, cellSize, cellSize);
+                    const wallMaterial = new THREE.MeshPhongMaterial({ map: wallTexture });
+                    const wall = new THREE.Mesh(wallGeometry, wallMaterial);
+                    wall.position.set(x * cellSize, cellSize/2, z * cellSize);
+                    scene.add(wall);
+                    wall.boundingBox = new THREE.Box3().setFromObject(wall);
+                    walls.push(wall);
+                }
+            }
+        }
+        // Floor
+        const floorGeometry = new THREE.PlaneGeometry(gridSize * cellSize, gridSize * cellSize);
+        const floorMaterial = new THREE.MeshPhongMaterial({ map: floorTexture });
+        const floor = new THREE.Mesh(floorGeometry, floorMaterial);
+        floor.rotation.x = -Math.PI / 2;
+        scene.add(floor);
+        // Soldier setup
+        const loader = new THREE.GLTFLoader();
+        const soldiers = [];
+        const mixers = [];
+        function createSoldier(team, startX, startZ) {
+            loader.load('https://threejs.org/examples/models/gltf/Soldier.glb', (gltf) => {
+                const soldier = gltf.scene;
+                soldier.scale.set(2, 2, 2);
+                soldier.position.set(startX, 0, startZ);
+                soldier.team = team;
+                soldier.collisionRadius = 1;
+                soldier.speed = 0.1;
+                scene.add(soldier);
+                soldiers.push(soldier);
+                const mixer = new THREE.AnimationMixer(soldier);
+                mixers.push(mixer);
+                const idleAction = mixer.clipAction(gltf.animations[0]);
+                const runAction = mixer.clipAction(gltf.animations[3]);
+                soldier.actions = { idle: idleAction, run: runAction };
+                idleAction.play();
+            });
+        }
+        // Create two teams
+        createSoldier(1, 28, 28); // Team 1
+        createSoldier(2, 36, 36); // Team 2
+        camera.position.set(32, 20, 32);
+        // Movement controls
+        const keys = { w: false, a: false, s: false, d: false };
+        document.addEventListener('keydown', (e) => {
+            if (e.key in keys) keys[e.key] = true;
+        });
+        document.addEventListener('keyup', (e) => {
+            if (e.key in keys) keys[e.key] = false;
+        });
+        function checkCollision(newPosition, soldier) {
+            const soldierBox = new THREE.Sphere(newPosition, soldier.collisionRadius);
+            for (const wall of walls) {
+                if (soldierBox.intersectsBox(wall.boundingBox)) {
+                    return true;
+                }
+            }
+            return false;
+        }
+        // Animation loop
+        const clock = new THREE.Clock();
+        function animate() {
+            requestAnimationFrame(animate);
+            const delta = clock.getDelta();
+            soldiers.forEach((soldier, index) => {
+                if (!soldier) return;
+                const moveDirection = new THREE.Vector3();
+                if (index === 0) { // Only control first soldier for demo
+                    const camForward = new THREE.Vector3();
+                    camera.getWorldDirection(camForward);
+                    camForward.y = 0;
+                    camForward.normalize();
+                    const camLeft = new THREE.Vector3(-camForward.z, 0, camForward.x);
+                    if (keys.w) moveDirection.add(camForward);
+                    if (keys.s) moveDirection.sub(camForward);
+                    if (keys.a) moveDirection.add(camLeft);
+                    if (keys.d) moveDirection.sub(camLeft);
+                }
+                if (moveDirection.length() > 0) {
+                    moveDirection.normalize();
+                    const newPosition = soldier.position.clone()
+                        .add(moveDirection.multiplyScalar(soldier.speed));
+                    if (!checkCollision(newPosition, soldier)) {
+                        soldier.position.copy(newPosition);
+                        const angle = Math.atan2(moveDirection.x, moveDirection.z);
+                        soldier.rotation.y = angle + Math.PI;
+                        soldier.actions.idle.fadeOut(0.2);
+                        soldier.actions.run.fadeIn(0.2);
+                    }
+                } else {
+                    soldier.actions.run.fadeOut(0.2);
+                    soldier.actions.idle.fadeIn(0.2);
+                }
+                if (index === 0) {
+                    controls.target.copy(soldier.position);
+                    controls.update();
+                    // Update debug overlay
+                    document.getElementById('debug').innerHTML = `
+                        Position: ${soldier.position.x.toFixed(2)},
+                        ${soldier.position.y.toFixed(2)},
+                        ${soldier.position.z.toFixed(2)}<br>
+                        Rotation: ${(soldier.rotation.y * 180 / Math.PI).toFixed(2)}°
+                    `;
+                }
+            });
+            mixers.forEach(mixer => mixer.update(delta));
+            renderer.render(scene, camera);
+        }
+        // Responsive design
+        window.addEventListener('resize', () => {
+            camera.aspect = window.innerWidth / window.innerHeight;
+            camera.updateProjectionMatrix();
+            renderer.setSize(window.innerWidth, window.innerHeight);
+        });
+        animate();
+    </script>
+</body>
+</html>""")