StreamlitGalaxianSnakeGame

Running

App Files Files Community

awacke1 commited on Mar 9

Commit

5770ddd

verified ·

1 Parent(s): 6935cf6

Update app.py

Browse files

Files changed (1) hide show

app.py +183 -164

app.py CHANGED Viewed

@@ -1,113 +1,73 @@
 import streamlit as st
-from streamlit.components.v1 import html
-# 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 (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;
         }}
         #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 = [], quineAgents = [], 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 = [
@@ -119,6 +79,71 @@ game_html = f"""
         ];
         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++) {{
@@ -138,8 +163,7 @@ game_html = f"""
             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;
@@ -278,11 +302,11 @@ game_html = f"""
                 angle: Math.random() * Math.PI * 2,
                 speed: 0.5 + Math.random() * 0.5,
                 radius: 3 + Math.random() * 2,
-                ttl: 5 // 5 seconds lifespan
             }};
             quineAgents.push(agent);
             scene.add(agent);
-            setTimeout(() => lSysCreatures.forEach(c => c !== sender && listenToAgent(c, agent)), 1000);
         }}
         function listenToAgent(creature) {{
@@ -295,32 +319,11 @@ game_html = f"""
             setTimeout(() => scene.remove(response), 2000);
         }}
-        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;
-                }}
-                // Orbit around origin
-                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(gameTime * agent.userData.speed) * 0.5, // Small vertical bob
-                    agent.userData.origin.z + offsetZ
-                );
-            }}
-        }}
         function resetSnake() {{
             snake.forEach(seg => scene.remove(seg));
             snake = [];
             const snakeMaterial = new THREE.MeshStandardMaterial({{color: 0x00ff00}});
-            for (let i K = 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;
@@ -331,24 +334,23 @@ game_html = f"""
             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) resetGame();
-        }});
         function updateSnake(delta) {{
             if (!gameActive) return;
@@ -416,7 +418,6 @@ game_html = f"""
                 }}
             }}
-            // Update camera to follow snake
             const headPos = newHead.position;
             camera.position.set(headPos.x, headPos.y + 20, headPos.z + 30);
             camera.lookAt(headPos);
@@ -442,6 +443,26 @@ game_html = f"""
             }}
         }}
         function loseLife() {{
             lives--;
             updateUI();
@@ -490,75 +511,73 @@ game_html = f"""
             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);
                 updateQuineAgents(delta);
-                updateLighting(delta);
             }}
             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>
 """
-# 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.")

 import streamlit as st
+import streamlit.components.v1 as components
+st.set_page_config(page_title="Galaxian Snake 3D", layout="wide")
+st.title("Galaxian Snake 3D")
+st.write("Navigate a 3D city as a snake, eating food and avoiding obstacles!")
+# Sliders for container size with initial 3:4 aspect ratio
+max_width = min(1200, st.session_state.get('window_width', 1200))
+max_height = min(1600, st.session_state.get('window_height', 1600))
+col1, col2 = st.columns(2)
+with col1:
+    container_width = st.slider("Container Width (px)", 300, max_width, 768, step=50)
+with col2:
+    container_height = st.slider("Container Height (px)", 400, max_height, 1024, step=50)
+# Player name input
+player_name = st.sidebar.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"
+html_code = f"""
 <!DOCTYPE html>
+<html>
 <head>
+    <meta charset="utf-8">
     <title>Galaxian Snake 3D</title>
     <style>
+        body {{ margin: 0; overflow: hidden; }}
+        #container {{ width: {container_width}px; height: {container_height}px; margin: 0 auto; }}
+        canvas {{ width: 100%; height: 100%; display: block; }}
+        .ui-panel {{
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            background: rgba(0,0,0,0.7);
+            padding: 15px;
+            border-radius: 5px;
+            color: white;
+            font-family: Arial, sans-serif;
+            z-index: 1000;
         }}
+        .ui-panel h3 {{ margin: 0 0 10px; }}
         #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="container"></div>
+    <div class="ui-panel">
+        <h3>Leaderboard</h3>
+        <div id="leaderboard"></div>
+        <p>Score: <span id="score">0</span></p>
+        <p>Time: <span id="time">0</span>s</p>
+        <p>Length: <span id="length">3</span></p>
+        <p>Lives: <span id="lives">3</span></p>
     </div>
     <div id="gameOver">Game Over</div>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
     <script>
+        let scene, camera, renderer, snake, foodItems = [], lSysCreatures = [], quineAgents = [], buildings = [];
         let score = 0, gameTime = 0, lives = 3, gameActive = true;
         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);
+        let highScores = JSON.parse(localStorage.getItem('highScores')) || [];
         // Building rules
         const buildingRules = [
         ];
         const buildingColors = [0x888888, 0x666666, 0x999999, 0xaaaaaa, 0x555555, 0x334455, 0x445566, 0x223344, 0x556677, 0x667788, 0x993333, 0x884422, 0x553333, 0x772222, 0x664433];
+        function init() {{
+            const container = document.getElementById('container');
+            if (!container) {{
+                console.error('Container not found');
+                return;
+            }}
+            // Scene
+            scene = new THREE.Scene();
+            scene.background = new THREE.Color(0x87CEEB);
+            // Camera with 3:4 aspect ratio
+            camera = new THREE.PerspectiveCamera(75, 3 / 4, 0.1, 1000);
+            camera.position.set(0, 20, 30);
+            // Renderer
+            renderer = new THREE.WebGLRenderer({{ antialias: true }});
+            renderer.setSize({container_width}, {container_height});
+            renderer.shadowMap.enabled = true;
+            renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+            container.appendChild(renderer.domElement);
+            // Lights
+            const ambientLight = new THREE.AmbientLight(0xffffff, 0.2);
+            scene.add(ambientLight);
+            const sunLight = new THREE.DirectionalLight(0xffddaa, 0.8);
+            sunLight.position.set(50, 50, 50);
+            sunLight.castShadow = true;
+            sunLight.shadow.mapSize.width = 1024;
+            sunLight.shadow.mapSize.height = 1024;
+            sunLight.shadow.camera.near = 0.5;
+            sunLight.shadow.camera.far = 500;
+            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);
+            // Initialize snake
+            resetSnake();
+            createCity();
+            spawnFood();
+            // Leaderboard
+            updateLeaderboard();
+            // Start timer
+            setInterval(updateGame, 1000 / 60); // 60 FPS
+            window.addEventListener('resize', onWindowResize);
+            window.addEventListener('keydown', onKeyDown);
+            window.addEventListener('keyup', onKeyUp);
+        }}
         function interpretLSystem(rule, position, rotation) {{
             let currentString = rule.axiom;
             for (let i = 0; i < rule.iterations; i++) {{
             const color = buildingColors[Math.floor(Math.random() * buildingColors.length)];
             const material = new THREE.MeshStandardMaterial({{color: color, roughness: 0.7, metalness: 0.2}});
+            for (let char of currentString) {{
                 switch (char) {{
                     case 'F':
                         const width = rule.baseWidth * (0.5 + Math.random() * 0.5) * scale.x;
                 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);
+            setTimeout(() => lSysCreatures.forEach(c => c !== sender && listenToAgent(c)), 1000);
         }}
         function listenToAgent(creature) {{
             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;
             lastLength = initialLength;
         }}
         const keys = {{w: false, a: false, s: false, d: false, r: false}};
+        function onKeyDown(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;
+        }}
+        function onKeyUp(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) resetGame();
+        }}
         function updateSnake(delta) {{
             if (!gameActive) return;
                 }}
             }}
             const headPos = newHead.position;
             camera.position.set(headPos.x, headPos.y + 20, headPos.z + 30);
             camera.lookAt(headPos);
             }}
         }}
+        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(gameTime * agent.userData.speed) * 0.5,
+                    agent.userData.origin.z + offsetZ
+                );
+            }}
+        }}
         function loseLife() {{
             lives--;
             updateUI();
             gameActive = false;
             document.getElementById('gameOver').style.display = 'block';
             saveScore();
+            updateLeaderboard();
         }}
         function updateUI() {{
+            document.getElementById('score').textContent = Math.floor(score);
+            document.getElementById('time').textContent = Math.floor(gameTime);
+            document.getElementById('length').textContent = snake.length;
+            document.getElementById('lives').textContent = lives;
         }}
         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));
         }}
+        function updateLeaderboard() {{
+            const leaderboard = document.getElementById('leaderboard');
+            leaderboard.innerHTML = highScores.map(s => `<p>${{s.name}}: ${{s.score}} (${{s.time}}s)</p>`).join('');
         }}
+        function updateGame() {{
+            const delta = 1 / 60; // Fixed delta for 60 FPS
             if (gameActive) {{
                 gameTime += delta;
                 if (gameTime >= maxGameTime) endGame();
                 updateSnake(delta);
                 updateScore(delta);
                 updateQuineAgents(delta);
             }}
             renderer.render(scene, camera);
         }}
+        function onWindowResize() {{
+            const width = {container_width};
+            const height = {container_height};
+            camera.aspect = 3 / 4;
             camera.updateProjectionMatrix();
+            renderer.setSize(width, height);
+        }}
+        window.onload = init;
     </script>
 </body>
 </html>
 """
+# Render the HTML component with dynamic size
+components.html(html_code, width=container_width, height=container_height)
+st.sidebar.title("Galaxian Snake 3D")
+st.sidebar.write("""
+## How to Play
+Navigate a snake through a 3D city, eating food and avoiding obstacles.
+### Controls:
+- **W/A/S/D or Arrow Keys**: Move snake
+- **R**: Reset after game over
+- **Sliders**: Adjust play area size
+### Features:
+- 3:4 initial play area (768x1024)
+- Dynamic leaderboard in-game
+- City with buildings and roads
+- Quine agents (cyan spheres) orbit creatures
+- Scoring: 2 pts for doubling length, +2 pts/sec, +4 pts/sec after 10 units, 10 pt bonus at 10+
+- 5-minute game duration
+""")