StreamlitGalaxianSnakeGame

Running

App Files Files Community

awacke1 commited on Mar 10

Commit

61368a5

verified ·

1 Parent(s): d5d2a63

Update app.py

Browse files

Files changed (1) hide show

app.py +35 -55

app.py CHANGED Viewed

@@ -17,10 +17,10 @@ from audio_recorder_streamlit import audio_recorder
 nest_asyncio.apply()
 # Page Config
-st.set_page_config(page_title="Galaxian Snake 2D Multiplayer", layout="wide")
-st.title("Galaxian Snake 2D Multiplayer")
-st.write("Navigate a top-down city with others, eat food, and chat in real-time!")
 # Sliders for container size
 max_width = min(1200, st.session_state.get('window_width', 1200))
@@ -148,14 +148,14 @@ async def load_chat():
         content = f.read().strip()
     return content.split('\n')
-# Game HTML with Debugging
 html_code = f"""
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Galaxian Snake 2D Multiplayer</title>
     <style>
         body {{ margin: 0; overflow: hidden; font-family: Arial, sans-serif; }}
         #gameContainer {{ width: {container_width}px; height: {container_height}px; position: relative; background: #000; }}
@@ -180,7 +180,7 @@ html_code = f"""
 <body>
     <div id="gameContainer">
         <div class="ui-container">
-            <h2>Galaxian Snake 2D</h2>
             <div id="players">Players: 1</div>
             <div id="score">Score: 0</div>
             <div id="length">Length: 3</div>
@@ -200,7 +200,7 @@ html_code = f"""
             console.log('Starting game initialization...');
             // Game variables
             let score = 0, players = {{}}, foodItems = [], lSysCreatures = [], quineAgents = [], buildings = [], lights = [];
-            let snake = [], moveDir = new THREE.Vector3(1, 0, 0), moveCounter = 0, moveInterval = 0.1;
             const initialLength = 3, playerName = "{st.session_state.username}";
             const highScores = JSON.parse(localStorage.getItem('highScores')) || [];
             let ws = new WebSocket('ws://localhost:8765');
@@ -209,26 +209,29 @@ html_code = f"""
             // Scene setup
             const scene = new THREE.Scene();
             const camera = new THREE.PerspectiveCamera(75, {container_width} / {container_height}, 0.1, 1000);
-            camera.position.set(0, 50, 0); // Lowered from 100 to ensure visibility
-            camera.lookAt(0, 0, 0);
             console.log('Camera initialized at:', camera.position);
             const renderer = new THREE.WebGLRenderer({{ antialias: true }});
             renderer.setSize({container_width}, {container_height});
             renderer.shadowMap.enabled = true;
             document.getElementById('gameContainer').appendChild(renderer.domElement);
-            console.log('Renderer initialized with size:', {container_width}, {container_height});
             // Lighting
-            const ambientLight = new THREE.AmbientLight(0xffffff, 0.3); // Increased for visibility
             scene.add(ambientLight);
-            console.log('Ambient light added');
             // Ground
             const textureLoader = new THREE.TextureLoader();
-            const groundGeometry = new THREE.PlaneGeometry(100, 100); // Reduced size for tighter view
             const groundMaterial = new THREE.MeshStandardMaterial({{
-                color: 0x1a5e1a, roughness: 0.8, metalness: 0.2,
                 bumpMap: textureLoader.load('https://threejs.org/examples/textures/terrain/grasslight-big-nm.jpg'),
                 bumpScale: 0.1
             }});
@@ -236,12 +239,12 @@ html_code = f"""
             ground.rotation.x = -Math.PI / 2;
             ground.receiveShadow = true;
             scene.add(ground);
-            console.log('Ground added at y=0');
             // Building rules
             const buildingColors = [0x888888, 0x666666, 0x999999];
             const buildingRules = [
-                {{name: "Simple", axiom: "F", rules: {{"F": "F[+F][-F]"}}, iterations: 1, baseHeight: 5, baseWidth: 4, baseDepth: 4, angle: Math.PI/4, probability: 1}}
             ];
             function interpretLSystem(rule, position, rotation) {{
@@ -261,7 +264,7 @@ html_code = f"""
                 let currentRotation = rotation || new THREE.Euler();
                 let scale = new THREE.Vector3(1, 1, 1);
                 const color = buildingColors[Math.floor(Math.random() * buildingColors.length)];
-                const material = new THREE.MeshStandardMaterial({{color: color, roughness: 0.7, metalness: 0.2}});
                 for (let i = 0; i < currentString.length; i++) {{
                     const char = currentString[i];
@@ -284,32 +287,26 @@ html_code = f"""
                             break;
                         case '+': currentRotation.y += rule.angle; break;
                         case '-': currentRotation.y -= rule.angle; break;
-                        case '/': currentRotation.x += rule.angle; break;
-                        case '\\\\': currentRotation.x -= rule.angle; break;
-                        case '^': currentRotation.z += rule.angle; break;
-                        case '&': currentRotation.z -= rule.angle; break;
                         case '[': stack.push({{position: currentPosition.clone(), rotation: currentRotation.clone(), scale: scale.clone()}}); break;
                         case ']': if (stack.length > 0) {{ const state = stack.pop(); currentPosition = state.position; currentRotation = state.rotation; scale = state.scale; }} break;
-                        case '>': scale.multiplyScalar(1.2); break;
-                        case '<': scale.multiplyScalar(0.8); break;
                     }}
                 }}
                 return buildingGroup;
             }}
             function createCity() {{
-                const citySize = 2, spacing = 15; // Smaller city for debugging
                 for (let x = -citySize; x <= citySize; x++) {{
                     for (let z = -citySize; z <= citySize; z++) {{
-                        if (Math.random() < 0.5) continue; // Fewer buildings
                         const position = new THREE.Vector3(x * spacing, 0, z * spacing);
                         const building = interpretLSystem(buildingRules[0], position, new THREE.Euler());
                         scene.add(building);
                         buildings.push(building);
-                        console.log('Building added at:', position);
                     }}
                 }}
-                const roadWidth = 4;
                 for (let x = -citySize; x <= citySize; x++) {{
                     const road = new THREE.Mesh(
                         new THREE.PlaneGeometry(roadWidth, citySize * 2 * spacing + roadWidth),
@@ -328,34 +325,20 @@ html_code = f"""
                     road.position.set(0, 0.01, z * spacing);
                     scene.add(road);
                 }}
-                for (let x = -citySize; x <= citySize; x++) {{
-                    for (let z = -citySize; z <= citySize; z++) {{
-                        const light = new THREE.PointLight(0xffff99, 1, 20);
-                        light.position.set(x * spacing, 5, z * spacing);
-                        light.castShadow = true;
-                        scene.add(light);
-                        lights.push(light);
-                        console.log('Light added at:', light.position);
-                    }}
-                }}
-            }}
-            function evolveCity() {{
-                // Simplified for debugging
             }}
             function spawnFood() {{
-                if (foodItems.length < 5) {{
                     const food = new THREE.Mesh(
                         new THREE.BoxGeometry(1, 1, 1),
                         new THREE.MeshStandardMaterial({{color: 0xffff00}})
                     );
-                    const x = (Math.random() * 30) - 15;
-                    const z = (Math.random() * 30) - 15;
                     food.position.set(x, 0.5, z);
                     foodItems.push(food);
                     scene.add(food);
-                    console.log('Food spawned at:', food.position);
                 }}
             }}
@@ -406,10 +389,10 @@ html_code = f"""
                 const head = snake[0];
                 const newHead = new THREE.Mesh(head.geometry, head.material);
-                newHead.position.copy(head.position).add(moveDir.clone().multiplyScalar(1));
                 newHead.castShadow = true;
-                if (Math.abs(newHead.position.x) > 50 || Math.abs(newHead.position.z) > 50) {{
                     resetSnake();
                     return;
                 }}
@@ -453,18 +436,17 @@ html_code = f"""
                         scene.remove(tail);
                     }}
                 }}
-            }}
-            function updateLighting(delta) {{
-                lights.forEach(light => light.intensity = 1); // Fixed for debugging
-                scene.background = new THREE.Color(0x87CEEB); // Fixed sky color
             }}
             function updateUI() {{
                 document.getElementById('players').textContent = `Players: ${{Object.keys(players).length}}`;
                 document.getElementById('score').textContent = `Score: ${{score}}`;
                 document.getElementById('length').textContent = `Length: ${{snake.length}}`;
-                debug.innerHTML = `Scene objects: ${{scene.children.length}}<br>Buildings: ${{buildings.length}}<br>Snake: ${{snake.length}}`;
             }}
             // WebSocket chat
@@ -488,7 +470,6 @@ html_code = f"""
                 lastTime = currentTime;
                 updateSnake(delta);
-                updateLighting(delta);
                 spawnFood();
                 updateUI();
@@ -536,7 +517,6 @@ async def main_async():
     if not st.session_state.get('server_running', False):
         await start_websocket_server()
-# Run the WebSocket server in the main event loop
 loop = asyncio.get_event_loop()
 if not st.session_state.get('server_running', False):
     loop.run_until_complete(main_async())
@@ -545,6 +525,6 @@ st.sidebar.write("""
 ### How to Play
 - **W/A/S/D or Arrow Keys**: Move your snake
 - Eat yellow cubes to grow and score
-- City has buildings and lights at intersections
 - Chat with other players in real-time
 """)

 nest_asyncio.apply()
 # Page Config
+st.set_page_config(page_title="Galaxian Snake 3D Multiplayer", layout="wide")
+st.title("Galaxian Snake 3D Multiplayer")
+st.write("Navigate a 3D city with others, eat food, and chat in real-time!")
 # Sliders for container size
 max_width = min(1200, st.session_state.get('window_width', 1200))
         content = f.read().strip()
     return content.split('\n')
+# Game HTML
 html_code = f"""
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Galaxian Snake 3D Multiplayer</title>
     <style>
         body {{ margin: 0; overflow: hidden; font-family: Arial, sans-serif; }}
         #gameContainer {{ width: {container_width}px; height: {container_height}px; position: relative; background: #000; }}
 <body>
     <div id="gameContainer">
         <div class="ui-container">
+            <h2>Galaxian Snake 3D</h2>
             <div id="players">Players: 1</div>
             <div id="score">Score: 0</div>
             <div id="length">Length: 3</div>
             console.log('Starting game initialization...');
             // Game variables
             let score = 0, players = {{}}, foodItems = [], lSysCreatures = [], quineAgents = [], buildings = [], lights = [];
+            let snake = [], moveDir = new THREE.Vector3(1, 0, 0), moveCounter = 0, moveInterval = 0.05; // Faster movement
             const initialLength = 3, playerName = "{st.session_state.username}";
             const highScores = JSON.parse(localStorage.getItem('highScores')) || [];
             let ws = new WebSocket('ws://localhost:8765');
             // Scene setup
             const scene = new THREE.Scene();
             const camera = new THREE.PerspectiveCamera(75, {container_width} / {container_height}, 0.1, 1000);
+            camera.position.set(0, 15, 20); // Lower, closer camera
             console.log('Camera initialized at:', camera.position);
             const renderer = new THREE.WebGLRenderer({{ antialias: true }});
             renderer.setSize({container_width}, {container_height});
             renderer.shadowMap.enabled = true;
             document.getElementById('gameContainer').appendChild(renderer.domElement);
+            console.log('Renderer initialized');
             // Lighting
+            const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
             scene.add(ambientLight);
+            const sunLight = new THREE.DirectionalLight(0xffddaa, 1);
+            sunLight.position.set(50, 50, 50);
+            sunLight.castShadow = true;
+            scene.add(sunLight);
+            console.log('Lights added');
             // Ground
             const textureLoader = new THREE.TextureLoader();
+            const groundGeometry = new THREE.PlaneGeometry(200, 200);
             const groundMaterial = new THREE.MeshStandardMaterial({{
+                color: 0x1a5e1a,
                 bumpMap: textureLoader.load('https://threejs.org/examples/textures/terrain/grasslight-big-nm.jpg'),
                 bumpScale: 0.1
             }});
             ground.rotation.x = -Math.PI / 2;
             ground.receiveShadow = true;
             scene.add(ground);
+            console.log('Ground added');
             // Building rules
             const buildingColors = [0x888888, 0x666666, 0x999999];
             const buildingRules = [
+                {{name: "Simple", axiom: "F", rules: {{"F": "F[+F][-F]"}}, iterations: 1, baseHeight: 10, baseWidth: 5, baseDepth: 5, angle: Math.PI/4, probability: 1}}
             ];
             function interpretLSystem(rule, position, rotation) {{
                 let currentRotation = rotation || new THREE.Euler();
                 let scale = new THREE.Vector3(1, 1, 1);
                 const color = buildingColors[Math.floor(Math.random() * buildingColors.length)];
+                const material = new THREE.MeshStandardMaterial({{color: color}});
                 for (let i = 0; i < currentString.length; i++) {{
                     const char = currentString[i];
                             break;
                         case '+': currentRotation.y += rule.angle; break;
                         case '-': currentRotation.y -= rule.angle; break;
                         case '[': stack.push({{position: currentPosition.clone(), rotation: currentRotation.clone(), scale: scale.clone()}}); break;
                         case ']': if (stack.length > 0) {{ const state = stack.pop(); currentPosition = state.position; currentRotation = state.rotation; scale = state.scale; }} break;
                     }}
                 }}
                 return buildingGroup;
             }}
             function createCity() {{
+                const citySize = 3, spacing = 20; // Wider spacing
                 for (let x = -citySize; x <= citySize; x++) {{
                     for (let z = -citySize; z <= citySize; z++) {{
+                        if (Math.random() < 0.7) continue; // Fewer buildings
                         const position = new THREE.Vector3(x * spacing, 0, z * spacing);
                         const building = interpretLSystem(buildingRules[0], position, new THREE.Euler());
                         scene.add(building);
                         buildings.push(building);
+                        console.log('Building at:', position);
                     }}
                 }}
+                const roadWidth = 12; // Wider roads
                 for (let x = -citySize; x <= citySize; x++) {{
                     const road = new THREE.Mesh(
                         new THREE.PlaneGeometry(roadWidth, citySize * 2 * spacing + roadWidth),
                     road.position.set(0, 0.01, z * spacing);
                     scene.add(road);
                 }}
             }}
             function spawnFood() {{
+                if (foodItems.length < 10) {{
                     const food = new THREE.Mesh(
                         new THREE.BoxGeometry(1, 1, 1),
                         new THREE.MeshStandardMaterial({{color: 0xffff00}})
                     );
+                    const x = (Math.random() * 60) - 30;
+                    const z = (Math.random() * 60) - 30;
                     food.position.set(x, 0.5, z);
                     foodItems.push(food);
                     scene.add(food);
+                    console.log('Food at:', food.position);
                 }}
             }}
                 const head = snake[0];
                 const newHead = new THREE.Mesh(head.geometry, head.material);
+                newHead.position.copy(head.position).add(moveDir.clone().multiplyScalar(2)); // Faster step
                 newHead.castShadow = true;
+                if (Math.abs(newHead.position.x) > 100 || Math.abs(newHead.position.z) > 100) {{
                     resetSnake();
                     return;
                 }}
                         scene.remove(tail);
                     }}
                 }}
+                const headPos = newHead.position;
+                camera.position.set(headPos.x, 15, headPos.z + 20); // Closer chase cam
+                camera.lookAt(headPos);
             }}
             function updateUI() {{
                 document.getElementById('players').textContent = `Players: ${{Object.keys(players).length}}`;
                 document.getElementById('score').textContent = `Score: ${{score}}`;
                 document.getElementById('length').textContent = `Length: ${{snake.length}}`;
+                debug.innerHTML = `Scene: ${{scene.children.length}}<br>Buildings: ${{buildings.length}}<br>Snake: ${{snake.length}}`;
             }}
             // WebSocket chat
                 lastTime = currentTime;
                 updateSnake(delta);
                 spawnFood();
                 updateUI();
     if not st.session_state.get('server_running', False):
         await start_websocket_server()
 loop = asyncio.get_event_loop()
 if not st.session_state.get('server_running', False):
     loop.run_until_complete(main_async())
 ### How to Play
 - **W/A/S/D or Arrow Keys**: Move your snake
 - Eat yellow cubes to grow and score
+- Wider roads and fewer buildings for easier movement
 - Chat with other players in real-time
 """)