StreamlitGalaxianSnakeGame

Running

App Files Files Community

awacke1 commited on Mar 10

Commit

d5d2a63

verified ·

1 Parent(s): a03d3b9

Update app.py

Browse files

Files changed (1) hide show

app.py +278 -377

app.py CHANGED Viewed

@@ -126,7 +126,7 @@ async def start_websocket_server():
     if not st.session_state.get('server_running', False):
         server = await websockets.serve(websocket_handler, '0.0.0.0', 8765)
         st.session_state['server_running'] = True
-        st.session_state['server'] = server  # Store server reference
         await asyncio.Future()  # Run forever until cancelled
 # Chat Functions
@@ -148,7 +148,7 @@ async def load_chat():
         content = f.read().strip()
     return content.split('\n')
-# Game HTML
 html_code = f"""
 <!DOCTYPE html>
 <html lang="en">
@@ -158,7 +158,7 @@ html_code = f"""
     <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; }}
         canvas {{ width: 100%; height: 100%; display: block; }}
         .ui-container {{
             position: absolute; top: 10px; left: 10px; color: white;
@@ -174,6 +174,7 @@ html_code = f"""
             background: rgba(0, 0, 0, 0.7); color: white; padding: 10px;
             border-radius: 5px; overflow-y: auto;
         }}
     </style>
 </head>
 <body>
@@ -190,420 +191,320 @@ html_code = f"""
             <p>Controls: W/A/S/D or Arrow Keys to move</p>
             <p>Eat yellow cubes to grow and score!</p>
         </div>
     </div>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
     <script>
-        // 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');
-        // Scene setup
-        const scene = new THREE.Scene();
-        const camera = new THREE.PerspectiveCamera(75, {container_width} / {container_height}, 0.1, 1000);
-        camera.position.set(0, 100, 0); // Top-down view
-        camera.lookAt(0, 0, 0); // Looking straight down
-        const renderer = new THREE.WebGLRenderer({{ antialias: true }});
-        renderer.setSize({container_width}, {container_height});
-        renderer.shadowMap.enabled = true;
-        document.getElementById('gameContainer').appendChild(renderer.domElement);
-        // Lighting
-        const ambientLight = new THREE.AmbientLight(0xffffff, 0.1);
-        scene.add(ambientLight);
-        // Ground
-        const textureLoader = new THREE.TextureLoader();
-        const groundGeometry = new THREE.PlaneGeometry(200, 200);
-        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
-        }});
-        const ground = new THREE.Mesh(groundGeometry, groundMaterial);
-        ground.rotation.x = -Math.PI / 2;
-        ground.receiveShadow = true;
-        scene.add(ground);
-        // Building rules
-        const buildingColors = [0x888888, 0x666666, 0x999999, 0xaaaaaa, 0x555555, 0x334455, 0x445566, 0x223344, 0x556677, 0x667788, 0x993333, 0x884422, 0x553333, 0x772222, 0x664433];
-        const buildingRules = [
-            {{name: "Colonial", axiom: "A", rules: {{"A": "B[+F][-F]", "B": "F[-C][+C]F", "C": "D[-E][+E]", "D": "F[+F][-F]F", "E": "F[-F][+F]"}}, iterations: 2, baseHeight: 10, baseWidth: 6, baseDepth: 6, angle: Math.PI/6, probability: 0.2}},
-            {{name: "Victorian", axiom: "A", rules: {{"A": "B[+C][-C][/D][\\\\D]", "B": "F[+F][-F][/F][\\\\F]", "C": "F[++F][--F]", "D": "F[+\\\\F][-\\\\F]"}}, iterations: 3, baseHeight: 15, baseWidth: 5, baseDepth: 5, angle: Math.PI/5, probability: 0.15}},
-            {{name: "Modern", axiom: "A", rules: {{"A": "B[+B][-B]", "B": "F[/C][\\\\C]", "C": "F"}}, iterations: 2, baseHeight: 20, baseWidth: 8, baseDepth: 8, angle: Math.PI/2, probability: 0.25}},
-            {{name: "Skyscraper", axiom: "A", rules: {{"A": "FB[+C][-C]", "B": "FB", "C": "F[+F][-F]"}}, iterations: 4, baseHeight: 30, baseWidth: 10, baseDepth: 10, angle: Math.PI/8, probability: 0.15}},
-            {{name: "Simple", axiom: "F", rules: {{"F": "F[+F][-F]"}}, iterations: 1, baseHeight: 8, baseWidth: 6, baseDepth: 6, angle: Math.PI/4, probability: 0.25}}
-        ];
-        function interpretLSystem(rule, position, rotation) {{
-            let currentString = rule.axiom;
-            for (let i = 0; i < rule.iterations; i++) {{
-                let newString = "";
-                for (let j = 0; j < currentString.length; j++) {{
-                    newString += rule.rules[currentString[j]] || currentString[j];
                 }}
-                currentString = newString;
-            }}
-            let buildingGroup = new THREE.Group();
-            buildingGroup.position.copy(position);
-            const stack = [];
-            let currentPosition = new THREE.Vector3(0, 0, 0);
-            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];
-                switch (char) {{
-                    case 'F':
-                        const width = rule.baseWidth * (0.5 + Math.random() * 0.5) * scale.x;
-                        const height = rule.baseHeight * (0.5 + Math.random() * 0.5) * scale.y;
-                        const depth = rule.baseDepth * (0.5 + Math.random() * 0.5) * scale.z;
-                        const geometry = new THREE.BoxGeometry(width, height, depth);
-                        const buildingPart = new THREE.Mesh(geometry, material);
-                        buildingPart.position.copy(currentPosition);
-                        buildingPart.position.y += height / 2;
-                        buildingPart.rotation.copy(currentRotation);
-                        buildingPart.castShadow = true;
-                        buildingPart.receiveShadow = true;
-                        buildingGroup.add(buildingPart);
-                        const direction = new THREE.Vector3(0, height, 0);
-                        direction.applyEuler(currentRotation);
-                        currentPosition.add(direction);
-                        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 = 5, spacing = 15;
-            for (let x = -citySize; x <= citySize; x++) {{
-                for (let z = -citySize; z <= citySize; z++) {{
-                    if (Math.random() < 0.2) continue;
-                    const position = new THREE.Vector3(x * spacing + (Math.random() * 2 - 1), 0, z * spacing + (Math.random() * 2 - 1));
-                    let selectedRule, random = Math.random(), cumulativeProbability = 0;
-                    for (const rule of buildingRules) {{
-                        cumulativeProbability += rule.probability;
-                        if (random <= cumulativeProbability) {{ selectedRule = rule; break; }}
                     }}
-                    if (!selectedRule) selectedRule = buildingRules[0];
-                    const building = interpretLSystem(selectedRule, position, new THREE.Euler());
-                    scene.add(building);
-                    buildings.push(building);
-                    if (Math.random() > 0.7) spawnLSysCreature(building.position);
                 }}
-            }}
-            const roadWidth = 8, roadColor = 0x333333;
-            for (let x = -citySize; x <= citySize; x++) {{
-                const road = new THREE.Mesh(
-                    new THREE.PlaneGeometry(roadWidth, citySize * 2 * spacing + roadWidth),
-                    new THREE.MeshStandardMaterial({{color: roadColor, roughness: 0.9, metalness: 0.1}})
-                );
-                road.rotation.x = -Math.PI / 2;
-                road.position.set(x * spacing, 0.01, 0);
-                scene.add(road);
-            }}
-            for (let z = -citySize; z <= citySize; z++) {{
-                const road = new THREE.Mesh(
-                    new THREE.PlaneGeometry(citySize * 2 * spacing + roadWidth, roadWidth),
-                    new THREE.MeshStandardMaterial({{color: roadColor, roughness: 0.9, metalness: 0.1}})
-                );
-                road.rotation.x = -Math.PI / 2;
-                road.position.set(0, 0.01, z * spacing);
-                scene.add(road);
-            }}
-            // Add city lights at intersections
-            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);
                 }}
             }}
-        }}
-        function evolveCity() {{
-            if (Math.random() < 0.1) {{
-                const citySize = 5, spacing = 15;
-                const x = (Math.random() * 2 - 1) * citySize * spacing;
-                const z = (Math.random() * 2 - 1) * citySize * spacing;
-                const position = new THREE.Vector3(x, 0, z);
-                let selectedRule = buildingRules[Math.floor(Math.random() * buildingRules.length)];
-                const building = interpretLSystem(selectedRule, position, new THREE.Euler());
-                scene.add(building);
-                buildings.push(building);
             }}
-        }}
-        function spawnFood() {{
-            const citySize = 5, spacing = 15;
-            if (foodItems.length < 10) {{
-                const food = new THREE.Mesh(
-                    new THREE.BoxGeometry(1, 1, 1),
-                    new THREE.MeshStandardMaterial({{color: 0xffff00, emissive: 0xffff00, emissiveIntensity: 0.5, transparent: true, opacity: 0.8}})
-                );
-                const x = (Math.random() * 2 - 1) * citySize * spacing;
-                const z = (Math.random() * 2 - 1) * citySize * spacing;
-                food.position.set(x, 0.5, z);
-                foodItems.push(food);
-                scene.add(food);
             }}
-        }}
-        function spawnLSysCreature(position) {{
-            const lSys = {{
-                axiom: "F",
-                rules: {{"F": "F[+F]F[-F]F"}},
-                angle: 25 * Math.PI / 180,
-                length: 2,
-                iterations: 2
-            }};
-            let turtleString = lSys.axiom;
-            for (let j = 0; j < lSys.iterations; j++) {{
-                turtleString = turtleString.split('').map(c => lSys.rules[c] || c).join('');
-            }}
-            const creature = new THREE.Group();
-            let stack = [], pos = position.clone(), dir = new THREE.Vector3(0, lSys.length, 0);
-            const material = new THREE.MeshStandardMaterial({{color: 0x0000ff}});
-            for (let char of turtleString) {{
-                if (char === 'F') {{
-                    const segment = new THREE.Mesh(new THREE.CylinderGeometry(0.1, 0.1, lSys.length, 8), material);
-                    segment.position.copy(pos).add(dir.clone().multiplyScalar(0.5));
-                    segment.quaternion.setFromUnitVectors(new THREE.Vector3(0, 1, 0), dir.clone().normalize());
-                    creature.add(segment);
-                    pos.add(dir);
-                }} else if (char === '+') {{
-                    dir.applyAxisAngle(new THREE.Vector3(0, 0, 1), lSys.angle);
-                }} else if (char === '-') {{
-                    dir.applyAxisAngle(new THREE.Vector3(0, 0, 1), -lSys.angle);
-                }} else if (char === '[') {{
-                    stack.push({{ pos: pos.clone(), dir: dir.clone() }});
-                }} else if (char === ']') {{
-                    const state = stack.pop();
-                    pos = state.pos;
-                    dir = state.dir;
                 }}
             }}
-            creature.position.copy(position);
-            lSysCreatures.push(creature);
-            scene.add(creature);
-            sendQuineAgent(creature);
-        }}
-        function sendQuineAgent(sender) {{
-            const agent = new THREE.Mesh(
-                new THREE.SphereGeometry(0.3, 16, 16),
-                new THREE.MeshStandardMaterial({{color: 0x00ffff, emissive: 0x00ffff, emissiveIntensity: 0.5}})
-            );
-            agent.position.copy(sender.position).add(new THREE.Vector3(0, 5, 0));
-            agent.userData = {{
-                origin: sender.position.clone(),
-                angle: Math.random() * Math.PI * 2,
-                speed: 0.5 + Math.random() * 0.5,
-                radius: 3 + Math.random() * 2,
-                ttl: 5
-            }};
-            quineAgents.push(agent);
-            scene.add(agent);
-        }}
-        function resetSnake() {{
-            snake.forEach(seg => scene.remove(seg));
-            snake = [];
-            const snakeMaterial = new THREE.MeshStandardMaterial({{color: 0x00ff00}});
-            for (let i = 0; i < initialLength; i++) {{
-                const segment = new THREE.Mesh(new THREE.SphereGeometry(0.5, 16, 16), snakeMaterial);
-                segment.position.set(-i * 1.2, 0.5, 0);
-                segment.castShadow = true;
-                snake.push(segment);
-                scene.add(segment);
-            }}
-            moveDir.set(1, 0, 0);
-            players[playerName] = {{ snake: snake, score: 0, length: initialLength }};
-        }}
-        // Controls
-        const keys = {{w: false, a: false, s: false, d: false}};
-        document.addEventListener('keydown', (event) => {{
-            switch (event.key.toLowerCase()) {{
-                case 'w': case 'arrowup': keys.w = true; break;
-                case 'a': case 'arrowleft': keys.a = true; break;
-                case 's': case 'arrowdown': keys.s = true; break;
-                case 'd': case 'arrowright': keys.d = true; break;
-            }}
-        }});
-        document.addEventListener('keyup', (event) => {{
-            switch (event.key.toLowerCase()) {{
-                case 'w': case 'arrowup': keys.w = false; break;
-                case 'a': case 'arrowleft': keys.a = false; break;
-                case 's': case 'arrowdown': keys.s = false; break;
-                case 'd': case 'arrowright': keys.d = false; break;
-            }}
-        }});
-        function updateSnake(delta) {{
-            moveCounter += delta;
-            if (moveCounter < moveInterval) return;
-            moveCounter = 0;
-            if (keys.w && moveDir.z !== 1) moveDir.set(0, 0, -1);
-            else if (keys.s && moveDir.z !== -1) moveDir.set(0, 0, 1);
-            else if (keys.a && moveDir.x !== 1) moveDir.set(-1, 0, 0);
-            else if (keys.d && moveDir.x !== -1) moveDir.set(1, 0, 0);
-            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) > 75 || Math.abs(newHead.position.z) > 75) {{
-                resetSnake();
-                return;
-            }}
-            for (let i = 1; i < snake.length; i++) {{
-                if (newHead.position.distanceTo(snake[i].position) < 0.9) {{
                     resetSnake();
                     return;
                 }}
-            }}
-            for (const building of buildings) {{
-                building.traverse((child) => {{
-                    if (child.isMesh) {{
-                        const buildingBox = new THREE.Box3().setFromObject(child);
-                        const headPos = newHead.position.clone();
-                        if (headPos.x + 0.5 > buildingBox.min.x && headPos.x - 0.5 < buildingBox.max.x &&
-                            headPos.z + 0.5 > buildingBox.min.z && headPos.z - 0.5 < buildingBox.max.z) {{
-                            resetSnake();
-                            return;
-                        }}
                     }}
-                }});
-            }}
-            snake.unshift(newHead);
-            scene.add(newHead);
-            for (let i = foodItems.length - 1; i >= 0; i--) {{
-                if (newHead.position.distanceTo(foodItems[i].position) < 1) {{
-                    scene.remove(foodItems[i]);
-                    foodItems.splice(i, 1);
-                    spawnFood();
-                    if (Math.random() > 0.8) spawnLSysCreature(newHead.position.clone());
-                    score += 2;
-                    players[playerName].score = score;
-                    players[playerName].length = snake.length;
-                    updateUI();
-                    break;
-                }} else {{
-                    const tail = snake.pop();
-                    scene.remove(tail);
                 }}
-            }}
-            for (let creature of lSysCreatures) {{
-                if (newHead.position.distanceTo(creature.position) < 2) {{
-                    resetSnake();
-                    return;
                 }}
             }}
-        }}
-        function updateQuineAgents(delta) {{
-            for (let i = quineAgents.length - 1; i >= 0; i--) {{
-                const agent = quineAgents[i];
-                agent.userData.ttl -= delta;
-                if (agent.userData.ttl <= 0) {{
-                    scene.remove(agent);
-                    quineAgents.splice(i, 1);
-                    continue;
-                }}
-                agent.userData.angle += agent.userData.speed * delta;
-                const offsetX = Math.cos(agent.userData.angle) * agent.userData.radius;
-                const offsetZ = Math.sin(agent.userData.angle) * agent.userData.radius;
-                agent.position.set(
-                    agent.userData.origin.x + offsetX,
-                    agent.userData.origin.y + 5 + Math.sin(Date.now() * 0.001 * agent.userData.speed) * 0.5,
-                    agent.userData.origin.z + offsetZ
-                );
             }}
-        }}
-        // Lighting cycle
-        let cycleTime = 0;
-        function updateLighting(delta) {{
-            cycleTime += delta;
-            const cycleDuration = 120;
-            const angle = (cycleTime / cycleDuration) * Math.PI * 2;
-            const intensity = Math.max(0, Math.sin(angle)) * 0.5 + 0.5;
-            lights.forEach(light => light.intensity = intensity);
-            const dayColor = new THREE.Color(0x87CEEB);
-            const nightColor = new THREE.Color(0x001133);
-            scene.background = dayColor.clone().lerp(nightColor, Math.max(0, -Math.sin(angle)));
-        }}
-        function updateUI() {{
-            document.getElementById('players').textContent = `Players: ${{Object.keys(players).length}}`;
-            document.getElementById('score').textContent = `Score: ${{score}}`;
-            document.getElementById('length').textContent = `Length: ${{snake.length}}`;
-            document.getElementById('leaderboard').innerHTML = highScores.map(s => `<p>${{s.name}}: ${{s.score}}</p>`).join('');
-        }}
-        // WebSocket chat
-        ws.onmessage = function(event) {{
-            const [sender, message] = event.data.split('|');
-            const chatBox = document.getElementById('chatBox');
-            chatBox.innerHTML += `<p>${{sender}}: ${{message}}</p>`;
-            chatBox.scrollTop = chatBox.scrollHeight;
-        }};
-        ws.onopen = function() {{ console.log('Connected to WebSocket server'); }};
-        ws.onerror = function(error) {{ console.error('WebSocket error:', error); }};
-        ws.onclose = function() {{ console.log('Disconnected from WebSocket server'); }};
-        // Game loop
-        let lastTime = performance.now();
-        function animate() {{
-            requestAnimationFrame(animate);
-            const currentTime = performance.now();
-            const delta = (currentTime - lastTime) / 1000;
-            lastTime = currentTime;
-            updateSnake(delta);
-            updateQuineAgents(delta);
-            updateLighting(delta);
-            evolveCity();
-            spawnFood();
-            updateUI();
-            renderer.render(scene, camera);
-        }}
-        // Initialize
-        resetSnake();
-        createCity();
-        spawnFood();
-        animate();
     </script>
 </body>
 </html>
@@ -644,6 +545,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 evolves with new buildings and lights at intersections
 - Chat with other players in real-time
 """)

     if not st.session_state.get('server_running', False):
         server = await websockets.serve(websocket_handler, '0.0.0.0', 8765)
         st.session_state['server_running'] = True
+        st.session_state['server'] = server
         await asyncio.Future()  # Run forever until cancelled
 # Chat Functions
         content = f.read().strip()
     return content.split('\n')
+# Game HTML with Debugging
 html_code = f"""
 <!DOCTYPE html>
 <html lang="en">
     <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; }}
         canvas {{ width: 100%; height: 100%; display: block; }}
         .ui-container {{
             position: absolute; top: 10px; left: 10px; color: white;
             background: rgba(0, 0, 0, 0.7); color: white; padding: 10px;
             border-radius: 5px; overflow-y: auto;
         }}
+        #debug {{ position: absolute; top: 10px; right: 10px; color: white; }}
     </style>
 </head>
 <body>
             <p>Controls: W/A/S/D or Arrow Keys to move</p>
             <p>Eat yellow cubes to grow and score!</p>
         </div>
+        <div id="debug"></div>
     </div>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
     <script>
+        try {{
+            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');
+            const debug = document.getElementById('debug');
+            // 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
+            }});
+            const ground = new THREE.Mesh(groundGeometry, groundMaterial);
+            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) {{
+                let currentString = rule.axiom;
+                for (let i = 0; i < rule.iterations; i++) {{
+                    let newString = "";
+                    for (let j = 0; j < currentString.length; j++) {{
+                        newString += rule.rules[currentString[j]] || currentString[j];
+                    }}
+                    currentString = newString;
                 }}
+                let buildingGroup = new THREE.Group();
+                buildingGroup.position.copy(position);
+                const stack = [];
+                let currentPosition = new THREE.Vector3(0, 0, 0);
+                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];
+                    switch (char) {{
+                        case 'F':
+                            const width = rule.baseWidth * scale.x;
+                            const height = rule.baseHeight * scale.y;
+                            const depth = rule.baseDepth * scale.z;
+                            const geometry = new THREE.BoxGeometry(width, height, depth);
+                            const buildingPart = new THREE.Mesh(geometry, material);
+                            buildingPart.position.copy(currentPosition);
+                            buildingPart.position.y += height / 2;
+                            buildingPart.rotation.copy(currentRotation);
+                            buildingPart.castShadow = true;
+                            buildingPart.receiveShadow = true;
+                            buildingGroup.add(buildingPart);
+                            const direction = new THREE.Vector3(0, height, 0);
+                            direction.applyEuler(currentRotation);
+                            currentPosition.add(direction);
+                            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),
+                        new THREE.MeshStandardMaterial({{color: 0x333333}})
+                    );
+                    road.rotation.x = -Math.PI / 2;
+                    road.position.set(x * spacing, 0.01, 0);
+                    scene.add(road);
+                }}
                 for (let z = -citySize; z <= citySize; z++) {{
+                    const road = new THREE.Mesh(
+                        new THREE.PlaneGeometry(citySize * 2 * spacing + roadWidth, roadWidth),
+                        new THREE.MeshStandardMaterial({{color: 0x333333}})
+                    );
+                    road.rotation.x = -Math.PI / 2;
+                    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);
+                }}
             }}
+            function resetSnake() {{
+                snake.forEach(seg => scene.remove(seg));
+                snake = [];
+                const snakeMaterial = new THREE.MeshStandardMaterial({{color: 0x00ff00}});
+                for (let i = 0; i < initialLength; i++) {{
+                    const segment = new THREE.Mesh(new THREE.SphereGeometry(0.5, 16, 16), snakeMaterial);
+                    segment.position.set(-i * 1.2, 0.5, 0);
+                    segment.castShadow = true;
+                    snake.push(segment);
+                    scene.add(segment);
                 }}
+                moveDir.set(1, 0, 0);
+                players[playerName] = {{ snake: snake, score: 0, length: initialLength }};
+                console.log('Snake reset at:', snake[0].position);
             }}
+            // Controls
+            const keys = {{w: false, a: false, s: false, d: false}};
+            document.addEventListener('keydown', (event) => {{
+                switch (event.key.toLowerCase()) {{
+                    case 'w': case 'arrowup': keys.w = true; break;
+                    case 'a': case 'arrowleft': keys.a = true; break;
+                    case 's': case 'arrowdown': keys.s = true; break;
+                    case 'd': case 'arrowright': keys.d = true; break;
+                }}
+            }});
+            document.addEventListener('keyup', (event) => {{
+                switch (event.key.toLowerCase()) {{
+                    case 'w': case 'arrowup': keys.w = false; break;
+                    case 'a': case 'arrowleft': keys.a = false; break;
+                    case 's': case 'arrowdown': keys.s = false; break;
+                    case 'd': case 'arrowright': keys.d = false; break;
+                }}
+            }});
+            function updateSnake(delta) {{
+                moveCounter += delta;
+                if (moveCounter < moveInterval) return;
+                moveCounter = 0;
+                if (keys.w && moveDir.z !== 1) moveDir.set(0, 0, -1);
+                else if (keys.s && moveDir.z !== -1) moveDir.set(0, 0, 1);
+                else if (keys.a && moveDir.x !== 1) moveDir.set(-1, 0, 0);
+                else if (keys.d && moveDir.x !== -1) moveDir.set(1, 0, 0);
+                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;
                 }}
+                for (let i = 1; i < snake.length; i++) {{
+                    if (newHead.position.distanceTo(snake[i].position) < 0.9) {{
+                        resetSnake();
+                        return;
                     }}
+                }}
+                for (const building of buildings) {{
+                    building.traverse((child) => {{
+                        if (child.isMesh) {{
+                            const buildingBox = new THREE.Box3().setFromObject(child);
+                            const headPos = newHead.position.clone();
+                            if (headPos.x + 0.5 > buildingBox.min.x && headPos.x - 0.5 < buildingBox.max.x &&
+                                headPos.z + 0.5 > buildingBox.min.z && headPos.z - 0.5 < buildingBox.max.z) {{
+                                resetSnake();
+                                return;
+                            }}
+                        }}
+                    }});
                 }}
+                snake.unshift(newHead);
+                scene.add(newHead);
+                for (let i = foodItems.length - 1; i >= 0; i--) {{
+                    if (newHead.position.distanceTo(foodItems[i].position) < 1) {{
+                        scene.remove(foodItems[i]);
+                        foodItems.splice(i, 1);
+                        spawnFood();
+                        score += 2;
+                        players[playerName].score = score;
+                        players[playerName].length = snake.length;
+                        updateUI();
+                        break;
+                    }} else {{
+                        const tail = snake.pop();
+                        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
+            ws.onmessage = function(event) {{
+                const [sender, message] = event.data.split('|');
+                const chatBox = document.getElementById('chatBox');
+                chatBox.innerHTML += `<p>${{sender}}: ${{message}}</p>`;
+                chatBox.scrollTop = chatBox.scrollHeight;
+            }};
+            ws.onopen = function() {{ console.log('Connected to WebSocket server'); }};
+            ws.onerror = function(error) {{ console.error('WebSocket error:', error); }};
+            ws.onclose = function() {{ console.log('Disconnected from WebSocket server'); }};
+            // Game loop
+            let lastTime = performance.now();
+            function animate() {{
+                requestAnimationFrame(animate);
+                const currentTime = performance.now();
+                const delta = (currentTime - lastTime) / 1000;
+                lastTime = currentTime;
+                updateSnake(delta);
+                updateLighting(delta);
+                spawnFood();
+                updateUI();
+                renderer.render(scene, camera);
+            }}
+            // Initialize
+            resetSnake();
+            createCity();
+            spawnFood();
+            animate();
+            console.log('Game initialized');
+        }} catch (e) {{
+            console.error('Error in game initialization:', e);
+            document.getElementById('debug').innerHTML = 'Error: ' + e.message;
+        }}
     </script>
 </body>
 </html>
 ### 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
 """)