StreamlitGalaxianSnakeGame

Running

App Files Files Community

awacke1 commited on Mar 9

Commit

f41e68b

verified ·

1 Parent(s): cb20913

Update app.py

Browse files

Files changed (1) hide show

app.py +205 -173

app.py CHANGED Viewed

@@ -4,53 +4,73 @@ from streamlit.components.v1 import html
 # Set Streamlit to wide mode
 st.set_page_config(layout="wide", page_title="Galaxian Snake 3D")
-# Define the enhanced HTML content with Three.js
-game_html = """
 <!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; }
     </style>
 </head>
 <body>
-    <div id="ui">Score: <span id="score">0</span> | Time: <span id="timer">0</span>s</div>
     <div id="lives">Lives: <span id="livesCount">3</span></div>
     <div id="sidebar">
         <h3>High Scores</h3>
         <div id="highScores"></div>
-        <button onclick="saveScore()">Save Score</button>
     </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; // Adjusted speed for visibility
-        let score = 0, gameTime = 0, lives = 3, moveCounter = 0, moveInterval = 0.1; // Ticker interval in seconds
         let highScores = JSON.parse(localStorage.getItem('highScores')) || [];
-        let gameOver = false;
-        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);
-            // Initialize 3D snake
             resetSnake();
             spawnFood();
             spawnCityscape();
@@ -60,15 +80,14 @@ game_html = """
             directionalLight.position.set(5, 10, 5);
             scene.add(directionalLight);
-            // Starfield
             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));
@@ -77,39 +96,39 @@ game_html = """
             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),
@@ -119,103 +138,103 @@ game_html = """
                         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') {
                     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 * 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;
-                    }
-            }
             creature.position.copy(position);
             lSysCreatures.push(creature);
             scene.add(creature);
             sendQuineMessage(creature);
-        }
-        function sendQuineMessage(sender) {
-            const quine = "function q(){console.log('Alive! '+q.toString())}q()";
             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);
-        }
-        function listenToMessage(creature) {
             const response = new THREE.Mesh(
                 new THREE.SphereGeometry(0.3, 16, 16),
-                new THREE.MeshBasicMaterial({ color: 0xff0000 })
             );
             response.position.copy(creature.position).add(new THREE.Vector3(0, 5, 0));
             scene.add(response);
             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;
@@ -223,96 +242,111 @@ game_html = """
             const head = snake[0];
             const newHead = new THREE.Mesh(head.geometry, head.material);
-            newHead.position.copy(head.position).add(moveDir.clone().multiplyScalar(1)); // Move by 1 unit
-            // Boundary check
-            if (Math.abs(newHead.position.x) > 20 || Math.abs(newHead.position.z) > 20) {
                 loseLife();
                 return;
-            }
-            // Self-collision check
-            for (let i = 1; i < snake.length; i++) {
-                if (newHead.position.distanceTo(snake[i].position) < 0.9) {
                     loseLife();
                     return;
-                }
-            }
-            // Cityscape collision
-            for (let building of cityscape) {
-                if (newHead.position.distanceTo(building.position) < 2) {
                     loseLife();
                     return;
-                }
-            }
             snake.unshift(newHead);
             scene.add(newHead);
-            // Food collision
-            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);
-                    score += 10;
-                    spawnFood(); // Add new food
                     if (Math.random() > 0.8) spawnLSysCreature(newHead.position.clone());
                     break;
-                } else {
                     const tail = snake.pop();
                     scene.remove(tail);
-                }
-            }
-            // Creature collision
-            for (let creature of lSysCreatures) {
-                if (newHead.position.distanceTo(creature.position) < 2) {
                     loseLife();
                     return;
-                }
-            }
-        }
-        function loseLife() {
             lives--;
             updateUI();
-            if (lives <= 0) {
-                gameOver = true;
-                alert("Game Over! Final Score: " + score);
-                saveScore();
-            } else {
                 explodeSnake();
-            }
-        }
-        function explodeSnake() {
             const particleGeometry = new THREE.SphereGeometry(0.1, 8, 8);
-            const particleMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
-            for (let i = 0; i < 20; i++) {
                 const particle = new THREE.Mesh(particleGeometry, particleMaterial);
                 particle.position.copy(snake[0].position);
                 particle.velocity = new THREE.Vector3(Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5).multiplyScalar(3);
                 scene.add(particle);
                 setTimeout(() => scene.remove(particle), 1000);
-            }
             resetSnake();
-        }
-        function resetSnake() {
             snake.forEach(seg => scene.remove(seg));
             snake = [];
-            const snakeMaterial = new THREE.MeshPhongMaterial({ color: 0x00ff00, shininess: 100 });
-            for (let i = 0; i < 3; 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);
-        }
-        function resetGame() {
             resetSnake();
             foodItems.forEach(f => scene.remove(f));
             lSysCreatures.forEach(c => scene.remove(c));
@@ -325,57 +359,66 @@ game_html = """
             score = 0;
             lives = 3;
             gameOver = false;
             moveCounter = 0;
             updateUI();
-        }
-        function updateUI() {
-            document.getElementById('score').innerText = score;
             document.getElementById('timer').innerText = Math.floor(gameTime);
             document.getElementById('livesCount').innerText = lives;
-        }
-        function updateHighScoresUI() {
             const scoresDiv = document.getElementById('highScores');
-            scoresDiv.innerHTML = highScores.map(s => `${s.name}: ${s.score} (${s.time}s)`).join('<br>');
-        }
-        window.saveScore = function() {
-            const name = prompt("Enter 3-letter name:", generateRandomName());
-            if (name && name.length === 3) {
-                highScores.push({ name, 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 generateRandomName() {
-            const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
-            return Array(3).fill().map(() => letters[Math.floor(Math.random() * letters.length)]).join('');
-        }
-        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;
-            updateSnake(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>
@@ -383,18 +426,7 @@ game_html = """
 </html>
 """
-# Streamlit app with sidebar
-with st.sidebar:
-    st.title("Galaxian Snake 3D")
-    st.write("**Controls:**")
-    st.write("- WASD or Arrow Keys to move")
-    st.write("- R to reset after game over")
-    st.write("**Objective:**")
-    st.write("- Eat alien food (pink dodecahedrons) to grow")
-    st.write("- Avoid cityscape buildings and L-system creatures")
-    st.write("- Watch creatures exchange quine messages")
-# Render the HTML game
 html(game_html, height=800, width=2000, scrolling=False)
 st.write("Note: Requires internet for Three.js to load.")

 # Set Streamlit to wide mode
 st.set_page_config(layout="wide", page_title="Galaxian Snake 3D")
+# Player name input in Streamlit
+with st.sidebar:
+    st.title("Galaxian Snake 3D")
+    player_name = st.text_input("Enter 3-letter name (e.g., ABC):", max_chars=3, value="XYZ").upper()
+    if len(player_name) != 3 or not player_name.isalpha():
+        st.warning("Please enter a valid 3-letter name using A-Z.")
+        player_name = "XYZ"  # Default if invalid
+    st.write("**Controls:**")
+    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();
             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));
             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),
                         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') {{
                     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 * 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;
+                }}
+            }}
             creature.position.copy(position);
             lSysCreatures.push(creature);
             scene.add(creature);
             sendQuineMessage(creature);
+        }}
+        function sendQuineMessage(sender) {{
+            const quine = "function q(){{console.log('Alive! '+q.toString())}}q()";
             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);
+        }}
+        function listenToMessage(creature) {{
             const response = new THREE.Mesh(
                 new THREE.SphereGeometry(0.3, 16, 16),
+                new THREE.MeshBasicMaterial({{ color: 0xff0000 }})
             );
             response.position.copy(creature.position).add(new THREE.Vector3(0, 5, 0));
             scene.add(response);
             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;
             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;
+            }}
+            for (let i = 1; i < snake.length; i++) {{
+                if (newHead.position.distanceTo(snake[i].position) < 0.9) {{
                     loseLife();
                     return;
+                }}
+            }}
+            for (let building of cityscape) {{
+                if (newHead.position.distanceTo(building.position) < 2) {{
                     loseLife();
                     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());
+                    checkLengthBonus();
                     break;
+                }} else {{
                     const tail = snake.pop();
                     scene.remove(tail);
+                }}
+            }}
+            for (let creature of lSysCreatures) {{
+                if (newHead.position.distanceTo(creature.position) < 2) {{
                     loseLife();
                     return;
+                }}
+            }}
+            updateUI();
+        }}
+        function checkLengthBonus() {{
+            const currentLength = snake.length;
+            if (currentLength >= 2 * lastLength) {{
+                score += 2;
+                lastLength = currentLength;
+            }}
+            if (currentLength > 10 && lastLength <= 10) {{
+                score += 10;
+            }}
+        }}
+        function updateScore(delta) {{
+            const currentLength = snake.length;
+            if (currentLength > 10) {{
+                score += 4 * delta;
+            }} else {{
+                score += 2 * delta;
+            }}
+        }}
+        function loseLife() {{
             lives--;
             updateUI();
+            if (lives <= 0) {{
+                endGame();
+            }} else {{
                 explodeSnake();
+            }}
+        }}
+        function explodeSnake() {{
             const particleGeometry = new THREE.SphereGeometry(0.1, 8, 8);
+            const particleMaterial = new THREE.MeshBasicMaterial({{ color: 0xff0000 }});
+            for (let i = 0; i < 20; i++) {{
                 const particle = new THREE.Mesh(particleGeometry, particleMaterial);
                 particle.position.copy(snake[0].position);
                 particle.velocity = new THREE.Vector3(Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5).multiplyScalar(3);
                 scene.add(particle);
                 setTimeout(() => scene.remove(particle), 1000);
+            }}
             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));
             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>
 </html>
 """
+# Render the HTML game with the injected player name
 html(game_html, height=800, width=2000, scrolling=False)
 st.write("Note: Requires internet for Three.js to load.")