|
|
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!") |
|
|
|
|
|
|
|
|
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 = 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> |
|
|
""" |
|
|
|
|
|
|
|
|
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 |
|
|
""") |
