Spaces:
Sleeping
Sleeping
| 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 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; | |
| for (let i = 0; i < rule.iterations; i++) {{ | |
| let newString = ""; | |
| for (let j = 0; j < currentString.length; j++) {{ | |
| newString += rule.rules[currentString[j]] || currentString[j]; | |
| }} | |
| currentString = newString; | |
| }} | |
| let buildingGroup = new THREE.Group(); | |
| buildingGroup.position.copy(position); | |
| const stack = []; | |
| let currentPosition = new THREE.Vector3(0, 0, 0); | |
| let currentRotation = rotation || new THREE.Euler(); | |
| let scale = new THREE.Vector3(1, 1, 1); | |
| const color = buildingColors[Math.floor(Math.random() * buildingColors.length)]; | |
| const material = new THREE.MeshStandardMaterial({{color: color, roughness: 0.7, metalness: 0.2}}); | |
| for (let i = 0; i < currentString.length; i++) {{ | |
| const char = currentString[i]; | |
| switch (char) {{ | |
| case 'F': | |
| const width = rule.baseWidth * (0.5 + Math.random() * 0.5) * scale.x; | |
| const height = rule.baseHeight * (0.5 + Math.random() * 0.5) * scale.y; | |
| const depth = rule.baseDepth * (0.5 + Math.random() * 0.5) * scale.z; | |
| const geometry = new THREE.BoxGeometry(width, height, depth); | |
| const buildingPart = new THREE.Mesh(geometry, material); | |
| buildingPart.position.copy(currentPosition); | |
| buildingPart.position.y += height / 2; | |
| buildingPart.rotation.copy(currentRotation); | |
| buildingPart.castShadow = true; | |
| buildingPart.receiveShadow = true; | |
| buildingGroup.add(buildingPart); | |
| const direction = new THREE.Vector3(0, height, 0); | |
| direction.applyEuler(currentRotation); | |
| currentPosition.add(direction); | |
| break; | |
| case '+': currentRotation.y += rule.angle; break; | |
| case '-': currentRotation.y -= rule.angle; break; | |
| case '/': currentRotation.x += rule.angle; break; | |
| case '\\\\': currentRotation.x -= rule.angle; break; | |
| case '^': currentRotation.z += rule.angle; break; | |
| case '&': currentRotation.z -= rule.angle; break; | |
| case '[': stack.push({{position: currentPosition.clone(), rotation: currentRotation.clone(), scale: scale.clone()}}); break; | |
| case ']': if (stack.length > 0) {{ const state = stack.pop(); currentPosition = state.position; currentRotation = state.rotation; scale = state.scale; }} break; | |
| case '>': scale.multiplyScalar(1.2); break; | |
| case '<': scale.multiplyScalar(0.8); break; | |
| }} | |
| }} | |
| return buildingGroup; | |
| }} | |
| function createCity() {{ | |
| const citySize = 5, spacing = 15; | |
| for (let x = -citySize; x <= citySize; x++) {{ | |
| for (let z = -citySize; z <= citySize; z++) {{ | |
| if (Math.random() < 0.2) continue; | |
| const position = new THREE.Vector3(x * spacing + (Math.random() * 2 - 1), 0, z * spacing + (Math.random() * 2 - 1)); | |
| let selectedRule, random = Math.random(), cumulativeProbability = 0; | |
| for (const rule of buildingRules) {{ | |
| cumulativeProbability += rule.probability; | |
| if (random <= cumulativeProbability) {{ selectedRule = rule; break; }} | |
| }} | |
| if (!selectedRule) selectedRule = buildingRules[0]; | |
| const building = interpretLSystem(selectedRule, position, new THREE.Euler()); | |
| scene.add(building); | |
| buildings.push(building); | |
| if (Math.random() > 0.7) spawnLSysCreature(building.position); | |
| }} | |
| }} | |
| const roadWidth = 8, roadColor = 0x333333; | |
| for (let x = -citySize; x <= citySize; x++) {{ | |
| const 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); | |
| }} | |
| }} | |
| 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') {{ | |
| const segment = new THREE.Mesh(new THREE.CylinderGeometry(0.1, 0.1, lSys.length, 8), material); | |
| segment.position.copy(pos).add(dir.clone().multiplyScalar(0.5)); | |
| segment.quaternion.setFromUnitVectors(new THREE.Vector3(0, 1, 0), dir.clone().normalize()); | |
| creature.add(segment); | |
| pos.add(dir); | |
| }} else if (char === '+') {{ | |
| dir.applyAxisAngle(new THREE.Vector3(0, 0, 1), lSys.angle); | |
| }} else if (char === '-') {{ | |
| dir.applyAxisAngle(new THREE.Vector3(0, 0, 1), -lSys.angle); | |
| }} else if (char === '[') {{ | |
| stack.push({{ pos: pos.clone(), dir: dir.clone() }}); | |
| }} else if (char === ']') {{ | |
| const state = stack.pop(); | |
| pos = state.pos; | |
| dir = state.dir; | |
| }} | |
| }} | |
| creature.position.copy(position); | |
| lSysCreatures.push(creature); | |
| scene.add(creature); | |
| sendQuineAgent(creature); | |
| }} | |
| function sendQuineAgent(sender) {{ | |
| const agent = new THREE.Mesh( | |
| new THREE.SphereGeometry(0.3, 16, 16), | |
| new THREE.MeshStandardMaterial({{color: 0x00ffff, emissive: 0x00ffff, emissiveIntensity: 0.5}}) | |
| ); | |
| agent.position.copy(sender.position).add(new THREE.Vector3(0, 5, 0)); | |
| agent.userData = {{ | |
| origin: sender.position.clone(), | |
| angle: Math.random() * Math.PI * 2, | |
| speed: 0.5 + Math.random() * 0.5, | |
| radius: 3 + Math.random() * 2, | |
| ttl: 5 | |
| }}; | |
| quineAgents.push(agent); | |
| scene.add(agent); | |
| setTimeout(() => lSysCreatures.forEach(c => c !== sender && listenToAgent(c)), 1000); | |
| }} | |
| function listenToAgent(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 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; | |
| }} | |
| // 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; | |
| 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 (let i = 1; i < snake.length; i++) {{ | |
| if (newHead.position.distanceTo(snake[i].position) < 0.9) {{ | |
| 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); | |
| 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; | |
| }} | |
| }} | |
| const headPos = newHead.position; | |
| camera.position.set(headPos.x, headPos.y + 20, headPos.z + 30); | |
| camera.lookAt(headPos); | |
| }} | |
| 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 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(); | |
| 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(); | |
| }} | |
| // 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> | |
| """ | |
| # 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 | |
| """) |