StreamlitGalaxianSnakeGame

Running

App Files Files Community

awacke1 commited on Mar 9

Commit

8530c3b

verified ·

1 Parent(s): f41e68b

Update app.py

Browse files

Files changed (1) hide show

app.py +293 -183

app.py CHANGED Viewed

@@ -15,163 +15,233 @@ with st.sidebar:
     st.write("- WASD or Arrow Keys to move")
     st.write("- R to reset after game over")
     st.write("**Objective:**")
-    st.write("- Eat food to grow and score")
-    st.write("- Avoid obstacles and creatures")
     st.write("**Scoring:**")
     st.write("- 2 pts for doubling length")
     st.write("- +2 pts/sec, +4 pts/sec after 10 units")
     st.write("- 10 pt bonus at 10+ units")
     st.write("- Game ends at 5 minutes")
-# Define the enhanced HTML content with Three.js, injecting player_name
 game_html = f"""
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Galaxian Snake 3D</title>
     <style>
-        html, body {{ margin: 0; padding: 0; overflow: hidden; background: #000; font-family: Arial; height: 100%; width: 100%; }}
-        canvas {{ display: block; width: 100vw !important; height: 100vh !important; }}
-        #ui {{ position: absolute; top: 10px; left: 10px; color: white; z-index: 1; }}
-        #sidebar {{ position: absolute; top: 10px; right: 10px; color: white; width: 200px; background: rgba(0,0,0,0.7); padding: 10px; z-index: 1; }}
-        #lives {{ position: absolute; top: 40px; left: 10px; color: white; z-index: 1; }}
         .message {{ position: absolute; color: cyan; font-size: 16px; z-index: 1; }}
         #gameOver {{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: red; font-size: 48px; z-index: 1; display: none; }}
     </style>
 </head>
 <body>
-    <div id="ui">Score: <span id="score">0</span> | Time: <span id="timer">0</span>s | Length: <span id="length">3</span></div>
-    <div id="lives">Lives: <span id="livesCount">3</span></div>
-    <div id="sidebar">
-        <h3>High Scores</h3>
-        <div id="highScores"></div>
     </div>
     <div id="gameOver">Game Over</div>
-    <script type="module">
-        import * as THREE from 'https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js';
-        let scene, camera, renderer, snake, foodItems = [], lSysCreatures = [], messages = [], cityscape = [];
-        let clock = new THREE.Clock();
-        let moveDir = new THREE.Vector3(1, 0, 0), moveSpeed = 2;
-        let score = 0, gameTime = 0, lives = 3, moveCounter = 0, moveInterval = 0.1;
-        let highScores = JSON.parse(localStorage.getItem('highScores')) || [];
-        let gameOver = false, initialLength = 3, lastLength = 3;
         const playerName = "{player_name}";
         const maxGameTime = 300; // 5 minutes in seconds
-        function init() {{
-            scene = new THREE.Scene();
-            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
-            renderer = new THREE.WebGLRenderer({{ antialias: true }});
-            renderer.setSize(window.innerWidth, window.innerHeight);
-            document.body.appendChild(renderer.domElement);
-            camera.position.set(0, 30, 40);
-            camera.lookAt(0, 0, 0);
-            resetSnake();
-            spawnFood();
-            spawnCityscape();
-            const ambientLight = new THREE.AmbientLight(0x404040, 0.5);
-            scene.add(ambientLight);
-            const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
-            directionalLight.position.set(5, 10, 5);
-            scene.add(directionalLight);
-            const starsGeometry = new THREE.BufferGeometry();
-            const starsMaterial = new THREE.PointsMaterial({{ color: 0xffffff, size: 0.1 }});
-            const starPositions = new Float32Array(1000 * 3);
-            for (let i = 0; i < 1000; i++) {{
-                starPositions[i * 3] = (Math.random() - 0.5) * 100;
-                starPositions[i * 3 + 1] = (Math.random() - 0.5) * 100;
-                starPositions[i * 3 + 2] = (Math.random() - 0.5) * 100;
             }}
-            starsGeometry.setAttribute('position', new THREE.BufferAttribute(starPositions, 3));
-            scene.add(new THREE.Points(starsGeometry, starsMaterial));
-            window.addEventListener('keydown', onKeyDown);
-            window.addEventListener('resize', onWindowResize);
-            updateHighScoresUI();
-            animate();
         }}
-        function spawnFood() {{
-            const foodGeometry = new THREE.DodecahedronGeometry(0.5);
-            const foodMaterial = new THREE.MeshPhongMaterial({{ color: 0xff00ff }});
-            for (let i = 0; i < 5; i++) {{
-                const food = new THREE.Mesh(foodGeometry, foodMaterial);
-                food.position.set((Math.random() - 0.5) * 40, 0, (Math.random() - 0.5) * 40);
-                foodItems.push(food);
-                scene.add(food);
             }}
         }}
-        function spawnCityscape() {{
-            const lSys = {{
-                axiom: "F",
-                rules: {{ "F": "F[+F]F[-F][F]" }},
-                angle: 30,
-                length: 3,
-                iterations: 2
-            }};
-            const material = new THREE.MeshPhongMaterial({{ color: 0x808080 }});
             for (let i = 0; i < 10; i++) {{
-                let turtleString = lSys.axiom;
-                for (let j = 0; j < lSys.iterations; j++) {{
-                    turtleString = turtleString.split('').map(c => lSys.rules[c] || c).join('');
-                }}
-                const building = new THREE.Group();
-                let stack = [], pos = new THREE.Vector3((Math.random() - 0.5) * 40, 0, (Math.random() - 0.5) * 40);
-                let dir = new THREE.Vector3(0, lSys.length, 0);
-                for (let char of turtleString) {{
-                    if (char === 'F') {{
-                        const height = Math.random() * 2 + 1;
-                        const segment = new THREE.Mesh(
-                            Math.random() > 0.5 ? new THREE.BoxGeometry(1, height, 1) : new THREE.CylinderGeometry(0.5, 0.5, height, 8),
-                            material
-                        );
-                        segment.position.copy(pos).add(dir.clone().multiplyScalar(0.5));
-                        segment.quaternion.setFromUnitVectors(new THREE.Vector3(0, 1, 0), dir.clone().normalize());
-                        building.add(segment);
-                        pos.add(dir);
-                    }} else if (char === '+') {{
-                        dir.applyAxisAngle(new THREE.Vector3(0, 0, 1), lSys.angle * Math.PI / 180);
-                    }} else if (char === '-') {{
-                        dir.applyAxisAngle(new THREE.Vector3(0, 0, 1), -lSys.angle * Math.PI / 180);
-                    }} else if (char === '[') {{
-                        stack.push({{ pos: pos.clone(), dir: dir.clone() }});
-                    }} else if (char === ']') {{
-                        const state = stack.pop();
-                        pos = state.pos;
-                        dir = state.dir;
-                    }}
-                }}
-                building.position.set(pos.x, 0, pos.z);
-                cityscape.push(building);
-                scene.add(building);
-                if (Math.random() > 0.7) spawnLSysCreature(building.position);
             }}
         }}
         function spawnLSysCreature(position) {{
             const lSys = {{
                 axiom: "F",
-                rules: {{ "F": "F[+F]F[-F]F" }},
-                angle: 25,
                 length: 2,
                 iterations: 2
             }};
-            const material = new THREE.MeshPhongMaterial({{ color: 0x0000ff }});
             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);
             for (let char of turtleString) {{
                 if (char === 'F') {{
@@ -181,9 +251,9 @@ game_html = f"""
                     creature.add(segment);
                     pos.add(dir);
                 }} else if (char === '+') {{
-                    dir.applyAxisAngle(new THREE.Vector3(0, 0, 1), lSys.angle * Math.PI / 180);
                 }} else if (char === '-') {{
-                    dir.applyAxisAngle(new THREE.Vector3(0, 0, 1), -lSys.angle * Math.PI / 180);
                 }} else if (char === '[') {{
                     stack.push({{ pos: pos.clone(), dir: dir.clone() }});
                 }} else if (char === ']') {{
@@ -203,8 +273,10 @@ game_html = f"""
             const messageDiv = document.createElement('div');
             messageDiv.className = 'message';
             messageDiv.innerText = 'Quine Msg';
-            messageDiv.style.left = `${{(sender.position.x + 20) * window.innerWidth / 40}}px`;
-            messageDiv.style.top = `${{(20 - sender.position.z) * window.innerHeight / 40}}px`;
             document.body.appendChild(messageDiv);
             messages.push({{ div: messageDiv, ttl: 3 }});
             setTimeout(() => lSysCreatures.forEach(c => c !== sender && listenToMessage(c)), 1000);
@@ -220,31 +292,57 @@ game_html = f"""
             setTimeout(() => scene.remove(response), 2000);
         }}
-        function onKeyDown(event) {{
-            if (gameOver && event.code === 'KeyR') {{
-                resetGame();
-                return;
-            }}
-            if (gameOver) return;
-            switch (event.code) {{
-                case 'ArrowLeft': case 'KeyA': if (moveDir.x !== 1) moveDir.set(-1, 0, 0); break;
-                case 'ArrowRight': case 'KeyD': if (moveDir.x !== -1) moveDir.set(1, 0, 0); break;
-                case 'ArrowUp': case 'KeyW': if (moveDir.z !== 1) moveDir.set(0, 0, -1); break;
-                case 'ArrowDown': case 'KeyS': if (moveDir.z !== -1) moveDir.set(0, 0, 1); break;
             }}
         }}
         function updateSnake(delta) {{
-            if (gameOver) return;
             moveCounter += delta;
             if (moveCounter < moveInterval) return;
             moveCounter = 0;
             const head = snake[0];
             const newHead = new THREE.Mesh(head.geometry, head.material);
             newHead.position.copy(head.position).add(moveDir.clone().multiplyScalar(1));
-            if (Math.abs(newHead.position.x) > 20 || Math.abs(newHead.position.z) > 20) {{
                 loseLife();
                 return;
             }}
@@ -256,11 +354,18 @@ game_html = f"""
                 }}
             }}
-            for (let building of cityscape) {{
-                if (newHead.position.distanceTo(building.position) < 2) {{
-                    loseLife();
-                    return;
-                }}
             }}
             snake.unshift(newHead);
@@ -286,7 +391,11 @@ game_html = f"""
                     return;
                 }}
             }}
-            updateUI();
         }}
         function checkLengthBonus() {{
@@ -332,95 +441,96 @@ game_html = f"""
             resetSnake();
         }}
-        function resetSnake() {{
-            snake.forEach(seg => scene.remove(seg));
-            snake = [];
-            const snakeMaterial = new THREE.MeshPhongMaterial({{ color: 0x00ff00, shininess: 100 }});
-            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, 0);
-                snake.push(segment);
-                scene.add(segment);
-            }}
-            moveDir.set(1, 0, 0);
-            lastLength = initialLength;
-        }}
         function resetGame() {{
             resetSnake();
             foodItems.forEach(f => scene.remove(f));
             lSysCreatures.forEach(c => scene.remove(c));
-            cityscape.forEach(b => scene.remove(b));
             foodItems = [];
             lSysCreatures = [];
-            cityscape = [];
-            spawnFood();
-            spawnCityscape();
             score = 0;
             lives = 3;
-            gameOver = false;
             gameTime = 0;
             moveCounter = 0;
             document.getElementById('gameOver').style.display = 'none';
             updateUI();
         }}
         function endGame() {{
-            gameOver = true;
             document.getElementById('gameOver').style.display = 'block';
             saveScore();
         }}
         function updateUI() {{
-            document.getElementById('score').innerText = Math.floor(score);
-            document.getElementById('timer').innerText = Math.floor(gameTime);
-            document.getElementById('livesCount').innerText = lives;
-            document.getElementById('length').innerText = snake.length;
-        }}
-        function updateHighScoresUI() {{
-            const scoresDiv = document.getElementById('highScores');
-            scoresDiv.innerHTML = highScores.map(s => `${{s.name}}: ${{s.score}} (${{s.time}}s)`).join('<br>');
         }}
         function saveScore() {{
             highScores.push({{ name: playerName, score: Math.floor(score), time: Math.floor(gameTime) }});
             highScores.sort((a, b) => b.score - a.score);
             highScores = highScores.slice(0, 5);
             localStorage.setItem('highScores', JSON.stringify(highScores));
-            updateHighScoresUI();
         }}
-        function onWindowResize() {{
-            camera.aspect = window.innerWidth / window.innerHeight;
-            camera.updateProjectionMatrix();
-            renderer.setSize(window.innerWidth, window.innerHeight);
         }}
         function animate() {{
             requestAnimationFrame(animate);
-            const delta = clock.getDelta();
-            gameTime += delta;
-            if (gameTime >= maxGameTime && !gameOver) {{
-                endGame();
-            }}
-            if (!gameOver) {{
                 updateSnake(delta);
                 updateScore(delta);
             }}
-            messages = messages.filter(m => {{
-                m.ttl -= delta;
-                if (m.ttl <= 0) document.body.removeChild(m.div);
-                return m.ttl > 0;
-            }});
             renderer.render(scene, camera);
         }}
-        init();
     </script>
 </body>
 </html>

     st.write("- WASD or Arrow Keys to move")
     st.write("- R to reset after game over")
     st.write("**Objective:**")
+    st.write("- Eat food (yellow cubes) to grow and score")
+    st.write("- Avoid buildings and creatures")
     st.write("**Scoring:**")
     st.write("- 2 pts for doubling length")
     st.write("- +2 pts/sec, +4 pts/sec after 10 units")
     st.write("- 10 pt bonus at 10+ units")
     st.write("- Game ends at 5 minutes")
+# Define the HTML content with Three.js, injecting player_name
 game_html = 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</title>
     <style>
+        body {{ margin: 0; overflow: hidden; font-family: Arial, sans-serif; background: #000; }}
+        canvas {{ display: block; }}
+        .ui-container {{
+            position: absolute; top: 10px; left: 10px; color: white;
+            background-color: rgba(0, 0, 0, 0.5); padding: 10px; border-radius: 5px;
+            user-select: none;
+        }}
+        .controls {{
+            position: absolute; bottom: 10px; left: 10px; color: white;
+            background-color: rgba(0, 0, 0, 0.5); padding: 10px; border-radius: 5px;
+        }}
         .message {{ position: absolute; color: cyan; font-size: 16px; z-index: 1; }}
         #gameOver {{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: red; font-size: 48px; z-index: 1; display: none; }}
     </style>
 </head>
 <body>
+    <div class="ui-container">
+        <h2>Galaxian Snake 3D</h2>
+        <div id="score">Score: 0</div>
+        <div id="time">Time: 0</div>
+        <div id="length">Length: 3</div>
+        <div id="lives">Lives: 3</div>
+    </div>
+    <div class="controls">
+        <p>Controls: W/A/S/D or Arrow Keys to move, R to reset</p>
+        <p>Eat yellow cubes to grow and score points!</p>
     </div>
     <div id="gameOver">Game Over</div>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script>
+        // Game variables
+        let score = 0, gameTime = 0, lives = 3, gameActive = true;
+        let snake, foodItems = [], lSysCreatures = [], messages = [], buildings = [];
         const playerName = "{player_name}";
         const maxGameTime = 300; // 5 minutes in seconds
+        let initialLength = 3, lastLength = 3, moveCounter = 0, moveInterval = 0.1;
+        let moveDir = new THREE.Vector3(1, 0, 0);
+        // Scene setup
+        const scene = new THREE.Scene();
+        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+        camera.position.set(0, 20, 30);
+        const renderer = new THREE.WebGLRenderer({{ antialias: true }});
+        renderer.setSize(window.innerWidth, window.innerHeight);
+        renderer.shadowMap.enabled = true;
+        document.body.appendChild(renderer.domElement);
+        // Lighting
+        const ambientLight = new THREE.AmbientLight(0xffffff, 0.2);
+        scene.add(ambientLight);
+        const sunLight = new THREE.DirectionalLight(0xffddaa, 0.8);
+        sunLight.castShadow = true;
+        sunLight.shadow.mapSize.width = 2048;
+        sunLight.shadow.mapSize.height = 2048;
+        sunLight.shadow.camera.near = 1;
+        sunLight.shadow.camera.far = 500;
+        sunLight.shadow.camera.left = -100;
+        sunLight.shadow.camera.right = 100;
+        sunLight.shadow.camera.top = 100;
+        sunLight.shadow.camera.bottom = -100;
+        scene.add(sunLight);
+        // 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 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}}
+        ];
+        const buildingColors = [0x888888, 0x666666, 0x999999, 0xaaaaaa, 0x555555, 0x334455, 0x445566, 0x223344, 0x556677, 0x667788, 0x993333, 0x884422, 0x553333, 0x772222, 0x664433];
+        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 group = new THREE.Group();
+            group.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 part = new THREE.Mesh(geometry, material);
+                        part.position.copy(currentPosition);
+                        part.position.y += height / 2;
+                        part.rotation.copy(currentRotation);
+                        part.castShadow = true;
+                        part.receiveShadow = true;
+                        group.add(part);
+                        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 group;
         }}
+        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);
             }}
         }}
+        function spawnFood() {{
+            const citySize = 5, spacing = 15;
             for (let i = 0; i < 10; i++) {{
+                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') {{
                     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 messageDiv = document.createElement('div');
             messageDiv.className = 'message';
             messageDiv.innerText = 'Quine Msg';
+            const screenX = (sender.position.x + 75) * window.innerWidth / 150;
+            const screenY = (75 - sender.position.z) * window.innerHeight / 150;
+            messageDiv.style.left = `${{screenX}}px`;
+            messageDiv.style.top = `${{screenY}}px`;
             document.body.appendChild(messageDiv);
             messages.push({{ div: messageDiv, ttl: 3 }});
             setTimeout(() => lSysCreatures.forEach(c => c !== sender && listenToMessage(c)), 1000);
             setTimeout(() => scene.remove(response), 2000);
         }}
+        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);
+            lastLength = initialLength;
         }}
+        // Controls
+        const keys = {{w: false, a: false, s: false, d: false, r: false}};
+        document.addEventListener('keydown', (event) => {{
+            const key = event.key.toLowerCase();
+            if (key === 'w' || key === 'arrowup') keys.w = true;
+            if (key === 'a' || key === 'arrowleft') keys.a = true;
+            if (key === 's' || key === 'arrowdown') keys.s = true;
+            if (key === 'd' || key === 'arrowright') keys.d = true;
+            if (key === 'r') keys.r = true;
+        }});
+        document.addEventListener('keyup', (event) => {{
+            const key = event.key.toLowerCase();
+            if (key === 'w' || key === 'arrowup') keys.w = false;
+            if (key === 'a' || key === 'arrowleft') keys.a = false;
+            if (key === 's' || key === 'arrowdown') keys.s = false;
+            if (key === 'd' || key === 'arrowright') keys.d = false;
+            if (key === 'r' && gameActive === false) resetGame();
+        }});
         function updateSnake(delta) {{
+            if (!gameActive) return;
             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) {{
                 loseLife();
                 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) {{
+                            loseLife();
+                            return;
+                        }}
+                    }}
+                }});
             }}
             snake.unshift(newHead);
                     return;
                 }}
             }}
+            // Update camera to follow snake
+            const headPos = newHead.position;
+            camera.position.set(headPos.x, headPos.y + 20, headPos.z + 30);
+            camera.lookAt(headPos);
         }}
         function checkLengthBonus() {{
             resetSnake();
         }}
         function resetGame() {{
             resetSnake();
             foodItems.forEach(f => scene.remove(f));
             lSysCreatures.forEach(c => scene.remove(c));
+            buildings.forEach(b => scene.remove(b));
             foodItems = [];
             lSysCreatures = [];
+            buildings = [];
             score = 0;
             lives = 3;
+            gameActive = true;
             gameTime = 0;
             moveCounter = 0;
+            createCity();
+            spawnFood();
             document.getElementById('gameOver').style.display = 'none';
             updateUI();
         }}
         function endGame() {{
+            gameActive = false;
             document.getElementById('gameOver').style.display = 'block';
             saveScore();
         }}
         function updateUI() {{
+            document.getElementById('score').textContent = `Score: ${{Math.floor(score)}}`;
+            document.getElementById('time').textContent = `Time: ${{Math.floor(gameTime)}}`;
+            document.getElementById('length').textContent = `Length: ${{snake.length}}`;
+            document.getElementById('lives').textContent = `Lives: ${{lives}}`;
         }}
+        let highScores = JSON.parse(localStorage.getItem('highScores')) || [];
         function saveScore() {{
             highScores.push({{ name: playerName, score: Math.floor(score), time: Math.floor(gameTime) }});
             highScores.sort((a, b) => b.score - a.score);
             highScores = highScores.slice(0, 5);
             localStorage.setItem('highScores', JSON.stringify(highScores));
+            console.log("High Scores:", highScores); // For debugging
         }}
+        // Lighting cycle
+        let cycleTime = 0;
+        function updateLighting(delta) {{
+            cycleTime += delta;
+            const cycleDuration = 120;
+            const angle = (cycleTime / cycleDuration) * Math.PI * 2;
+            sunLight.position.set(Math.cos(angle) * 100, Math.sin(angle) * 100, Math.sin(angle) * 50);
+            sunLight.intensity = Math.max(0, Math.sin(angle)) * 0.8;
+            const dayColor = new THREE.Color(0x87CEEB);
+            const nightColor = new THREE.Color(0x001133);
+            scene.background = dayColor.clone().lerp(nightColor, Math.max(0, -Math.sin(angle)));
         }}
+        // Game loop
+        let lastTime = performance.now();
         function animate() {{
             requestAnimationFrame(animate);
+            const currentTime = performance.now();
+            const delta = (currentTime - lastTime) / 1000;
+            lastTime = currentTime;
+            if (gameActive) {{
+                gameTime += delta;
+                if (gameTime >= maxGameTime) endGame();
                 updateSnake(delta);
                 updateScore(delta);
+                updateLighting(delta);
+                messages = messages.filter(m => {{
+                    m.ttl -= delta;
+                    if (m.ttl <= 0) document.body.removeChild(m.div);
+                    return m.ttl > 0;
+                }});
             }}
             renderer.render(scene, camera);
         }}
+        window.addEventListener('resize', () => {{
+            camera.aspect = window.innerWidth / window.innerHeight;
+            camera.updateProjectionMatrix();
+            renderer.setSize(window.innerWidth, window.innerHeight);
+        }});
+        // Initialize
+        snake = [];
+        resetSnake();
+        createCity();
+        spawnFood();
+        animate();
     </script>
 </body>
 </html>