StreamlitGalaxianSnakeGame

Sleeping

App Files Files Community

awacke1 commited on Mar 9

Commit

23679ac

verified ·

1 Parent(s): 5770ddd

Update app.py

Browse files

Files changed (1) hide show

app.py +193 -178

app.py CHANGED Viewed

@@ -24,125 +24,102 @@ if len(player_name) != 3 or not player_name.isalpha():
 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 = [
             {{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 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;
@@ -154,8 +131,8 @@ html_code = f"""
                 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();
@@ -163,20 +140,21 @@ html_code = 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 char of currentString) {{
                 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);
@@ -193,7 +171,7 @@ html_code = f"""
                     case '<': scale.multiplyScalar(0.8); break;
                 }}
             }}
-            return group;
         }}
         function createCity() {{
@@ -216,19 +194,17 @@ html_code = f"""
             }}
             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);
@@ -334,23 +310,27 @@ html_code = f"""
             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;
@@ -486,74 +466,109 @@ html_code = f"""
             resetSnake();
         }}
         function resetGame() {{
-            resetSnake();
             foodItems.forEach(f => scene.remove(f));
             lSysCreatures.forEach(c => scene.remove(c));
             quineAgents.forEach(a => scene.remove(a));
             buildings.forEach(b => scene.remove(b));
             foodItems = [];
             lSysCreatures = [];
             quineAgents = [];
             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();
-            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>

 html_code = f"""
 <!DOCTYPE html>
+<html lang="en">
 <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Galaxian Snake 3D</title>
     <style>
+        body {{ margin: 0; overflow: hidden; font-family: Arial, sans-serif; }}
+        #gameContainer {{ width: {container_width}px; height: {container_height}px; position: relative; }}
         canvas {{ width: 100%; height: 100%; display: block; }}
+        .ui-container {{
+            position: absolute; top: 10px; left: 10px; color: white;
+            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;
         }}
     </style>
 </head>
 <body>
+    <div id="gameContainer">
+        <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 id="leaderboard"></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>
     <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 maxGameTime = 300; // 5 minutes in seconds
         let initialLength = 3, lastLength = 3, moveCounter = 0, moveInterval = 0.1;
         let moveDir = new THREE.Vector3(1, 0, 0);
+        const highScores = JSON.parse(localStorage.getItem('highScores')) || [];
+        const playerName = "{player_name}";
+        // Scene setup
+        const scene = new THREE.Scene();
+        const camera = new THREE.PerspectiveCamera(75, {container_width} / {container_height}, 0.1, 1000);
+        camera.position.set(0, 20, 30);
+        const renderer = new THREE.WebGLRenderer({{ antialias: true }});
+        renderer.setSize({container_width}, {container_height});
+        renderer.shadowMap.enabled = true;
+        document.getElementById('gameContainer').appendChild(renderer.domElement);
+        // Lighting
+        const ambientLight = new THREE.AmbientLight(0xffffff, 0.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 with bump mapping
+        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);
+        // Buildings and arrays
+        const buildingColors = [0x888888, 0x666666, 0x999999, 0xaaaaaa, 0x555555, 0x334455, 0x445566, 0x223344, 0x556677, 0x667788, 0x993333, 0x884422, 0x553333, 0x772222, 0x664433];
         const buildingRules = [
             {{name: "Colonial", axiom: "A", rules: {{"A": "B[+F][-F]", "B": "F[-C][+C]F", "C": "D[-E][+E]", "D": "F[+F][-F]F", "E": "F[-F][+F]"}}, iterations: 2, baseHeight: 10, baseWidth: 6, baseDepth: 6, angle: Math.PI/6, probability: 0.2}},
+            {{name: "Victorian", axiom: "A", rules: {{"A": "B[+C][-C][/D][\\\\D]", "B": "F[+F][-F][/F][\\\\F]", "C": "F[++F][--F]", "D": "F[+\\\\F][-\\\\F]"}}, iterations: 3, baseHeight: 15, baseWidth: 5, baseDepth: 5, angle: Math.PI/5, probability: 0.15}},
+            {{name: "Modern", axiom: "A", rules: {{"A": "B[+B][-B]", "B": "F[/C][\\\\C]", "C": "F"}}, iterations: 2, baseHeight: 20, baseWidth: 8, baseDepth: 8, angle: Math.PI/2, probability: 0.25}},
             {{name: "Skyscraper", axiom: "A", rules: {{"A": "FB[+C][-C]", "B": "FB", "C": "F[+F][-F]"}}, iterations: 4, baseHeight: 30, baseWidth: 10, baseDepth: 10, angle: Math.PI/8, probability: 0.15}},
             {{name: "Simple", axiom: "F", rules: {{"F": "F[+F][-F]"}}, iterations: 1, baseHeight: 8, baseWidth: 6, baseDepth: 6, angle: Math.PI/4, probability: 0.25}}
         ];
         function interpretLSystem(rule, position, rotation) {{
             let currentString = rule.axiom;
                 currentString = newString;
             }}
+            let buildingGroup = new THREE.Group();
+            buildingGroup.position.copy(position);
             const stack = [];
             let currentPosition = new THREE.Vector3(0, 0, 0);
             let currentRotation = rotation || new THREE.Euler();
             const color = buildingColors[Math.floor(Math.random() * buildingColors.length)];
             const material = new THREE.MeshStandardMaterial({{color: color, roughness: 0.7, metalness: 0.2}});
+            for (let i = 0; i < currentString.length; i++) {{
+                const char = currentString[i];
                 switch (char) {{
                     case 'F':
                         const width = rule.baseWidth * (0.5 + Math.random() * 0.5) * scale.x;
                         const height = rule.baseHeight * (0.5 + Math.random() * 0.5) * scale.y;
                         const depth = rule.baseDepth * (0.5 + Math.random() * 0.5) * scale.z;
                         const geometry = new THREE.BoxGeometry(width, height, depth);
+                        const buildingPart = new THREE.Mesh(geometry, material);
+                        buildingPart.position.copy(currentPosition);
+                        buildingPart.position.y += height / 2;
+                        buildingPart.rotation.copy(currentRotation);
+                        buildingPart.castShadow = true;
+                        buildingPart.receiveShadow = true;
+                        buildingGroup.add(buildingPart);
                         const direction = new THREE.Vector3(0, height, 0);
                         direction.applyEuler(currentRotation);
                         currentPosition.add(direction);
                     case '<': scale.multiplyScalar(0.8); break;
                 }}
             }}
+            return buildingGroup;
         }}
         function createCity() {{
             }}
             const roadWidth = 8, roadColor = 0x333333;
             for (let x = -citySize; x <= citySize; x++) {{
+                const roadGeometry = new THREE.PlaneGeometry(roadWidth, citySize * 2 * spacing + roadWidth);
+                const roadMaterial = new THREE.MeshStandardMaterial({{color: roadColor, roughness: 0.9, metalness: 0.1}});
+                const road = new THREE.Mesh(roadGeometry, roadMaterial);
                 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 roadGeometry = new THREE.PlaneGeometry(citySize * 2 * spacing + roadWidth, roadWidth);
+                const roadMaterial = new THREE.MeshStandardMaterial({{color: roadColor, roughness: 0.9, metalness: 0.1}});
+                const road = new THREE.Mesh(roadGeometry, roadMaterial);
                 road.rotation.x = -Math.PI / 2;
                 road.position.set(0, 0.01, z * spacing);
                 scene.add(road);
             lastLength = initialLength;
         }}
+        // Snake controls
         const keys = {{w: false, a: false, s: false, d: false, r: false}};
+        document.addEventListener('keydown', (event) => {{
+            switch (event.key.toLowerCase()) {{
+                case 'w': case 'arrowup': keys.w = true; break;
+                case 'a': case 'arrowleft': keys.a = true; break;
+                case 's': case 'arrowdown': keys.s = true; break;
+                case 'd': case 'arrowright': keys.d = true; break;
+                case 'r': keys.r = true; break;
+            }}
+        }});
+        document.addEventListener('keyup', (event) => {{
+            switch (event.key.toLowerCase()) {{
+                case 'w': case 'arrowup': keys.w = false; break;
+                case 'a': case 'arrowleft': keys.a = false; break;
+                case 's': case 'arrowdown': keys.s = false; break;
+                case 'd': case 'arrowright': keys.d = false; break;
+                case 'r': if (!gameActive) resetGame(); break;
+            }}
+        }});
         function updateSnake(delta) {{
             if (!gameActive) return;
             resetSnake();
         }}
+        // Sun cycle (simplified, no moon)
+        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)));
+        }}
+        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}}`;
+            document.getElementById('leaderboard').innerHTML = highScores.map(s => `<p>${{s.name}}: ${{s.score}} (${{s.time}}s)</p>`).join('');
+        }}
+        function updateTimer() {{
+            if (gameActive && gameTime < maxGameTime) {{
+                gameTime++;
+                updateUI();
+                if (gameTime >= maxGameTime) {{
+                    gameActive = false;
+                    endGame();
+                }}
+            }}
+        }}
+        function endGame() {{
+            highScores.push({{ name: playerName, score: Math.floor(score), time: Math.floor(gameTime) }});
+            highScores.sort((a, b) => b.score - a.score);
+            highScores.splice(5); // Keep top 5
+            localStorage.setItem('highScores', JSON.stringify(highScores));
+            updateUI();
+            const endScreen = document.createElement('div');
+            endScreen.style.cssText = 'position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,0.8);color:white;padding:20px;border-radius:10px;text-align:center;';
+            endScreen.innerHTML = `
+                <h2>Game Over!</h2>
+                <p>Your final score: ${{Math.floor(score)}}</p>
+                <button id="restart-btn" style="padding:10px 20px;background:#4CAF50;color:white;border:none;border-radius:5px;cursor:pointer;margin-top:10px;">Play Again</button>
+            `;
+            document.getElementById('gameContainer').appendChild(endScreen);
+            document.getElementById('restart-btn').addEventListener('click', () => {{
+                document.getElementById('gameContainer').removeChild(endScreen);
+                score = 0; gameTime = 0; lives = 3; gameActive = true;
+                updateUI();
+                resetGame();
+            }});
+        }}
         function resetGame() {{
+            snake.forEach(seg => scene.remove(seg));
             foodItems.forEach(f => scene.remove(f));
             lSysCreatures.forEach(c => scene.remove(c));
             quineAgents.forEach(a => scene.remove(a));
             buildings.forEach(b => scene.remove(b));
+            snake = [];
             foodItems = [];
             lSysCreatures = [];
             quineAgents = [];
             buildings = [];
+            resetSnake();
             createCity();
             spawnFood();
         }}
+        // Game loop
+        let lastTime = performance.now();
+        function animate() {{
+            requestAnimationFrame(animate);
+            const currentTime = performance.now();
+            const delta = (currentTime - lastTime) / 1000;
+            lastTime = currentTime;
             if (gameActive) {{
                 updateSnake(delta);
                 updateScore(delta);
                 updateQuineAgents(delta);
+                updateLighting(delta);
             }}
             renderer.render(scene, camera);
         }}
+        window.addEventListener('resize', () => {{
+            camera.aspect = {container_width} / {container_height};
             camera.updateProjectionMatrix();
+            renderer.setSize({container_width}, {container_height});
+        }});
+        // Initialize
+        resetSnake();
+        createCity();
+        spawnFood();
+        setInterval(updateTimer, 1000);
+        animate();
     </script>
 </body>
 </html>