|
|
import streamlit as st |
|
|
from streamlit.components.v1 import html |
|
|
|
|
|
|
|
|
st.set_page_config(layout="wide", page_title="Galaxian Snake 3D") |
|
|
|
|
|
|
|
|
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" |
|
|
st.write("**Controls:**") |
|
|
st.write("- WASD or Arrow Keys to move") |
|
|
st.write("- R to reset after game over") |
|
|
st.write("**Objective:**") |
|
|
st.write("- Eat food to grow and score") |
|
|
st.write("- Avoid obstacles and creatures") |
|
|
st.write("**Scoring:**") |
|
|
st.write("- 2 pts for doubling length") |
|
|
st.write("- +2 pts/sec, +4 pts/sec after 10 units") |
|
|
st.write("- 10 pt bonus at 10+ units") |
|
|
st.write("- Game ends at 5 minutes") |
|
|
|
|
|
|
|
|
game_html = f""" |
|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<title>Galaxian Snake 3D</title> |
|
|
<style> |
|
|
html, body {{ margin: 0; padding: 0; overflow: hidden; background: #000; font-family: Arial; height: 100%; width: 100%; }} |
|
|
canvas {{ display: block; width: 100vw !important; height: 100vh !important; }} |
|
|
#ui {{ position: absolute; top: 10px; left: 10px; color: white; z-index: 1; }} |
|
|
#sidebar {{ position: absolute; top: 10px; right: 10px; color: white; width: 200px; background: rgba(0,0,0,0.7); padding: 10px; z-index: 1; }} |
|
|
#lives {{ position: absolute; top: 40px; left: 10px; color: white; z-index: 1; }} |
|
|
.message {{ position: absolute; color: cyan; font-size: 16px; z-index: 1; }} |
|
|
#gameOver {{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: red; font-size: 48px; z-index: 1; display: none; }} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div id="ui">Score: <span id="score">0</span> | Time: <span id="timer">0</span>s | Length: <span id="length">3</span></div> |
|
|
<div id="lives">Lives: <span id="livesCount">3</span></div> |
|
|
<div id="sidebar"> |
|
|
<h3>High Scores</h3> |
|
|
<div id="highScores"></div> |
|
|
</div> |
|
|
<div id="gameOver">Game Over</div> |
|
|
<script type="module"> |
|
|
import * as THREE from 'https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js'; |
|
|
|
|
|
let scene, camera, renderer, snake, foodItems = [], lSysCreatures = [], messages = [], cityscape = []; |
|
|
let clock = new THREE.Clock(); |
|
|
let moveDir = new THREE.Vector3(1, 0, 0), moveSpeed = 2; |
|
|
let score = 0, gameTime = 0, lives = 3, moveCounter = 0, moveInterval = 0.1; |
|
|
let highScores = JSON.parse(localStorage.getItem('highScores')) || []; |
|
|
let gameOver = false, initialLength = 3, lastLength = 3; |
|
|
const playerName = "{player_name}"; |
|
|
const maxGameTime = 300; // 5 minutes in seconds |
|
|
|
|
|
function init() {{ |
|
|
scene = new THREE.Scene(); |
|
|
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); |
|
|
renderer = new THREE.WebGLRenderer({{ antialias: true }}); |
|
|
renderer.setSize(window.innerWidth, window.innerHeight); |
|
|
document.body.appendChild(renderer.domElement); |
|
|
|
|
|
camera.position.set(0, 30, 40); |
|
|
camera.lookAt(0, 0, 0); |
|
|
|
|
|
resetSnake(); |
|
|
spawnFood(); |
|
|
spawnCityscape(); |
|
|
|
|
|
const ambientLight = new THREE.AmbientLight(0x404040, 0.5); |
|
|
scene.add(ambientLight); |
|
|
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8); |
|
|
directionalLight.position.set(5, 10, 5); |
|
|
scene.add(directionalLight); |
|
|
|
|
|
const starsGeometry = new THREE.BufferGeometry(); |
|
|
const starsMaterial = new THREE.PointsMaterial({{ color: 0xffffff, size: 0.1 }}); |
|
|
const starPositions = new Float32Array(1000 * 3); |
|
|
for (let i = 0; i < 1000; i++) {{ |
|
|
starPositions[i * 3] = (Math.random() - 0.5) * 100; |
|
|
starPositions[i * 3 + 1] = (Math.random() - 0.5) * 100; |
|
|
starPositions[i * 3 + 2] = (Math.random() - 0.5) * 100; |
|
|
}} |
|
|
starsGeometry.setAttribute('position', new THREE.BufferAttribute(starPositions, 3)); |
|
|
scene.add(new THREE.Points(starsGeometry, starsMaterial)); |
|
|
|
|
|
window.addEventListener('keydown', onKeyDown); |
|
|
window.addEventListener('resize', onWindowResize); |
|
|
|
|
|
updateHighScoresUI(); |
|
|
animate(); |
|
|
}} |
|
|
|
|
|
function spawnFood() {{ |
|
|
const foodGeometry = new THREE.DodecahedronGeometry(0.5); |
|
|
const foodMaterial = new THREE.MeshPhongMaterial({{ color: 0xff00ff }}); |
|
|
for (let i = 0; i < 5; i++) {{ |
|
|
const food = new THREE.Mesh(foodGeometry, foodMaterial); |
|
|
food.position.set((Math.random() - 0.5) * 40, 0, (Math.random() - 0.5) * 40); |
|
|
foodItems.push(food); |
|
|
scene.add(food); |
|
|
}} |
|
|
}} |
|
|
|
|
|
function spawnCityscape() {{ |
|
|
const lSys = {{ |
|
|
axiom: "F", |
|
|
rules: {{ "F": "F[+F]F[-F][F]" }}, |
|
|
angle: 30, |
|
|
length: 3, |
|
|
iterations: 2 |
|
|
}}; |
|
|
const material = new THREE.MeshPhongMaterial({{ color: 0x808080 }}); |
|
|
for (let i = 0; i < 10; i++) {{ |
|
|
let turtleString = lSys.axiom; |
|
|
for (let j = 0; j < lSys.iterations; j++) {{ |
|
|
turtleString = turtleString.split('').map(c => lSys.rules[c] || c).join(''); |
|
|
}} |
|
|
const building = new THREE.Group(); |
|
|
let stack = [], pos = new THREE.Vector3((Math.random() - 0.5) * 40, 0, (Math.random() - 0.5) * 40); |
|
|
let dir = new THREE.Vector3(0, lSys.length, 0); |
|
|
|
|
|
for (let char of turtleString) {{ |
|
|
if (char === 'F') {{ |
|
|
const height = Math.random() * 2 + 1; |
|
|
const segment = new THREE.Mesh( |
|
|
Math.random() > 0.5 ? new THREE.BoxGeometry(1, height, 1) : new THREE.CylinderGeometry(0.5, 0.5, height, 8), |
|
|
material |
|
|
); |
|
|
segment.position.copy(pos).add(dir.clone().multiplyScalar(0.5)); |
|
|
segment.quaternion.setFromUnitVectors(new THREE.Vector3(0, 1, 0), dir.clone().normalize()); |
|
|
building.add(segment); |
|
|
pos.add(dir); |
|
|
}} else if (char === '+') {{ |
|
|
dir.applyAxisAngle(new THREE.Vector3(0, 0, 1), lSys.angle * Math.PI / 180); |
|
|
}} else if (char === '-') {{ |
|
|
dir.applyAxisAngle(new THREE.Vector3(0, 0, 1), -lSys.angle * Math.PI / 180); |
|
|
}} else if (char === '[') {{ |
|
|
stack.push({{ pos: pos.clone(), dir: dir.clone() }}); |
|
|
}} else if (char === ']') {{ |
|
|
const state = stack.pop(); |
|
|
pos = state.pos; |
|
|
dir = state.dir; |
|
|
}} |
|
|
}} |
|
|
building.position.set(pos.x, 0, pos.z); |
|
|
cityscape.push(building); |
|
|
scene.add(building); |
|
|
if (Math.random() > 0.7) spawnLSysCreature(building.position); |
|
|
}} |
|
|
}} |
|
|
|
|
|
function spawnLSysCreature(position) {{ |
|
|
const lSys = {{ |
|
|
axiom: "F", |
|
|
rules: {{ "F": "F[+F]F[-F]F" }}, |
|
|
angle: 25, |
|
|
length: 2, |
|
|
iterations: 2 |
|
|
}}; |
|
|
const material = new THREE.MeshPhongMaterial({{ color: 0x0000ff }}); |
|
|
let turtleString = lSys.axiom; |
|
|
for (let j = 0; j < lSys.iterations; j++) {{ |
|
|
turtleString = turtleString.split('').map(c => lSys.rules[c] || c).join(''); |
|
|
}} |
|
|
const creature = new THREE.Group(); |
|
|
let stack = [], pos = position.clone(), dir = new THREE.Vector3(0, lSys.length, 0); |
|
|
|
|
|
for (let char of turtleString) {{ |
|
|
if (char === 'F') {{ |
|
|
const segment = new THREE.Mesh(new THREE.CylinderGeometry(0.1, 0.1, lSys.length, 8), material); |
|
|
segment.position.copy(pos).add(dir.clone().multiplyScalar(0.5)); |
|
|
segment.quaternion.setFromUnitVectors(new THREE.Vector3(0, 1, 0), dir.clone().normalize()); |
|
|
creature.add(segment); |
|
|
pos.add(dir); |
|
|
}} else if (char === '+') {{ |
|
|
dir.applyAxisAngle(new THREE.Vector3(0, 0, 1), lSys.angle * Math.PI / 180); |
|
|
}} else if (char === '-') {{ |
|
|
dir.applyAxisAngle(new THREE.Vector3(0, 0, 1), -lSys.angle * Math.PI / 180); |
|
|
}} else if (char === '[') {{ |
|
|
stack.push({{ pos: pos.clone(), dir: dir.clone() }}); |
|
|
}} else if (char === ']') {{ |
|
|
const state = stack.pop(); |
|
|
pos = state.pos; |
|
|
dir = state.dir; |
|
|
}} |
|
|
}} |
|
|
creature.position.copy(position); |
|
|
lSysCreatures.push(creature); |
|
|
scene.add(creature); |
|
|
sendQuineMessage(creature); |
|
|
}} |
|
|
|
|
|
function sendQuineMessage(sender) {{ |
|
|
const quine = "function q(){{console.log('Alive! '+q.toString())}}q()"; |
|
|
const messageDiv = document.createElement('div'); |
|
|
messageDiv.className = 'message'; |
|
|
messageDiv.innerText = 'Quine Msg'; |
|
|
messageDiv.style.left = `${{(sender.position.x + 20) * window.innerWidth / 40}}px`; |
|
|
messageDiv.style.top = `${{(20 - sender.position.z) * window.innerHeight / 40}}px`; |
|
|
document.body.appendChild(messageDiv); |
|
|
messages.push({{ div: messageDiv, ttl: 3 }}); |
|
|
setTimeout(() => lSysCreatures.forEach(c => c !== sender && listenToMessage(c)), 1000); |
|
|
}} |
|
|
|
|
|
function listenToMessage(creature) {{ |
|
|
const response = new THREE.Mesh( |
|
|
new THREE.SphereGeometry(0.3, 16, 16), |
|
|
new THREE.MeshBasicMaterial({{ color: 0xff0000 }}) |
|
|
); |
|
|
response.position.copy(creature.position).add(new THREE.Vector3(0, 5, 0)); |
|
|
scene.add(response); |
|
|
setTimeout(() => scene.remove(response), 2000); |
|
|
}} |
|
|
|
|
|
function onKeyDown(event) {{ |
|
|
if (gameOver && event.code === 'KeyR') {{ |
|
|
resetGame(); |
|
|
return; |
|
|
}} |
|
|
if (gameOver) return; |
|
|
switch (event.code) {{ |
|
|
case 'ArrowLeft': case 'KeyA': if (moveDir.x !== 1) moveDir.set(-1, 0, 0); break; |
|
|
case 'ArrowRight': case 'KeyD': if (moveDir.x !== -1) moveDir.set(1, 0, 0); break; |
|
|
case 'ArrowUp': case 'KeyW': if (moveDir.z !== 1) moveDir.set(0, 0, -1); break; |
|
|
case 'ArrowDown': case 'KeyS': if (moveDir.z !== -1) moveDir.set(0, 0, 1); break; |
|
|
}} |
|
|
}} |
|
|
|
|
|
function updateSnake(delta) {{ |
|
|
if (gameOver) return; |
|
|
moveCounter += delta; |
|
|
if (moveCounter < moveInterval) return; |
|
|
moveCounter = 0; |
|
|
|
|
|
const head = snake[0]; |
|
|
const newHead = new THREE.Mesh(head.geometry, head.material); |
|
|
newHead.position.copy(head.position).add(moveDir.clone().multiplyScalar(1)); |
|
|
|
|
|
if (Math.abs(newHead.position.x) > 20 || Math.abs(newHead.position.z) > 20) {{ |
|
|
loseLife(); |
|
|
return; |
|
|
}} |
|
|
|
|
|
for (let i = 1; i < snake.length; i++) {{ |
|
|
if (newHead.position.distanceTo(snake[i].position) < 0.9) {{ |
|
|
loseLife(); |
|
|
return; |
|
|
}} |
|
|
}} |
|
|
|
|
|
for (let building of cityscape) {{ |
|
|
if (newHead.position.distanceTo(building.position) < 2) {{ |
|
|
loseLife(); |
|
|
return; |
|
|
}} |
|
|
}} |
|
|
|
|
|
snake.unshift(newHead); |
|
|
scene.add(newHead); |
|
|
|
|
|
for (let i = foodItems.length - 1; i >= 0; i--) {{ |
|
|
if (newHead.position.distanceTo(foodItems[i].position) < 1) {{ |
|
|
scene.remove(foodItems[i]); |
|
|
foodItems.splice(i, 1); |
|
|
spawnFood(); |
|
|
if (Math.random() > 0.8) spawnLSysCreature(newHead.position.clone()); |
|
|
checkLengthBonus(); |
|
|
break; |
|
|
}} else {{ |
|
|
const tail = snake.pop(); |
|
|
scene.remove(tail); |
|
|
}} |
|
|
}} |
|
|
|
|
|
for (let creature of lSysCreatures) {{ |
|
|
if (newHead.position.distanceTo(creature.position) < 2) {{ |
|
|
loseLife(); |
|
|
return; |
|
|
}} |
|
|
}} |
|
|
updateUI(); |
|
|
}} |
|
|
|
|
|
function checkLengthBonus() {{ |
|
|
const currentLength = snake.length; |
|
|
if (currentLength >= 2 * lastLength) {{ |
|
|
score += 2; |
|
|
lastLength = currentLength; |
|
|
}} |
|
|
if (currentLength > 10 && lastLength <= 10) {{ |
|
|
score += 10; |
|
|
}} |
|
|
}} |
|
|
|
|
|
function updateScore(delta) {{ |
|
|
const currentLength = snake.length; |
|
|
if (currentLength > 10) {{ |
|
|
score += 4 * delta; |
|
|
}} else {{ |
|
|
score += 2 * delta; |
|
|
}} |
|
|
}} |
|
|
|
|
|
function loseLife() {{ |
|
|
lives--; |
|
|
updateUI(); |
|
|
if (lives <= 0) {{ |
|
|
endGame(); |
|
|
}} else {{ |
|
|
explodeSnake(); |
|
|
}} |
|
|
}} |
|
|
|
|
|
function explodeSnake() {{ |
|
|
const particleGeometry = new THREE.SphereGeometry(0.1, 8, 8); |
|
|
const particleMaterial = new THREE.MeshBasicMaterial({{ color: 0xff0000 }}); |
|
|
for (let i = 0; i < 20; i++) {{ |
|
|
const particle = new THREE.Mesh(particleGeometry, particleMaterial); |
|
|
particle.position.copy(snake[0].position); |
|
|
particle.velocity = new THREE.Vector3(Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5).multiplyScalar(3); |
|
|
scene.add(particle); |
|
|
setTimeout(() => scene.remove(particle), 1000); |
|
|
}} |
|
|
resetSnake(); |
|
|
}} |
|
|
|
|
|
function resetSnake() {{ |
|
|
snake.forEach(seg => scene.remove(seg)); |
|
|
snake = []; |
|
|
const snakeMaterial = new THREE.MeshPhongMaterial({{ color: 0x00ff00, shininess: 100 }}); |
|
|
for (let i = 0; i < initialLength; i++) {{ |
|
|
const segment = new THREE.Mesh(new THREE.SphereGeometry(0.5, 16, 16), snakeMaterial); |
|
|
segment.position.set(-i * 1.2, 0, 0); |
|
|
snake.push(segment); |
|
|
scene.add(segment); |
|
|
}} |
|
|
moveDir.set(1, 0, 0); |
|
|
lastLength = initialLength; |
|
|
}} |
|
|
|
|
|
function resetGame() {{ |
|
|
resetSnake(); |
|
|
foodItems.forEach(f => scene.remove(f)); |
|
|
lSysCreatures.forEach(c => scene.remove(c)); |
|
|
cityscape.forEach(b => scene.remove(b)); |
|
|
foodItems = []; |
|
|
lSysCreatures = []; |
|
|
cityscape = []; |
|
|
spawnFood(); |
|
|
spawnCityscape(); |
|
|
score = 0; |
|
|
lives = 3; |
|
|
gameOver = false; |
|
|
gameTime = 0; |
|
|
moveCounter = 0; |
|
|
document.getElementById('gameOver').style.display = 'none'; |
|
|
updateUI(); |
|
|
}} |
|
|
|
|
|
function endGame() {{ |
|
|
gameOver = true; |
|
|
document.getElementById('gameOver').style.display = 'block'; |
|
|
saveScore(); |
|
|
}} |
|
|
|
|
|
function updateUI() {{ |
|
|
document.getElementById('score').innerText = Math.floor(score); |
|
|
document.getElementById('timer').innerText = Math.floor(gameTime); |
|
|
document.getElementById('livesCount').innerText = lives; |
|
|
document.getElementById('length').innerText = snake.length; |
|
|
}} |
|
|
|
|
|
function updateHighScoresUI() {{ |
|
|
const scoresDiv = document.getElementById('highScores'); |
|
|
scoresDiv.innerHTML = highScores.map(s => `${{s.name}}: ${{s.score}} (${{s.time}}s)`).join('<br>'); |
|
|
}} |
|
|
|
|
|
function saveScore() {{ |
|
|
highScores.push({{ name: playerName, score: Math.floor(score), time: Math.floor(gameTime) }}); |
|
|
highScores.sort((a, b) => b.score - a.score); |
|
|
highScores = highScores.slice(0, 5); |
|
|
localStorage.setItem('highScores', JSON.stringify(highScores)); |
|
|
updateHighScoresUI(); |
|
|
}} |
|
|
|
|
|
function onWindowResize() {{ |
|
|
camera.aspect = window.innerWidth / window.innerHeight; |
|
|
camera.updateProjectionMatrix(); |
|
|
renderer.setSize(window.innerWidth, window.innerHeight); |
|
|
}} |
|
|
|
|
|
function animate() {{ |
|
|
requestAnimationFrame(animate); |
|
|
const delta = clock.getDelta(); |
|
|
gameTime += delta; |
|
|
|
|
|
if (gameTime >= maxGameTime && !gameOver) {{ |
|
|
endGame(); |
|
|
}} |
|
|
|
|
|
if (!gameOver) {{ |
|
|
updateSnake(delta); |
|
|
updateScore(delta); |
|
|
}} |
|
|
|
|
|
messages = messages.filter(m => {{ |
|
|
m.ttl -= delta; |
|
|
if (m.ttl <= 0) document.body.removeChild(m.div); |
|
|
return m.ttl > 0; |
|
|
}}); |
|
|
|
|
|
renderer.render(scene, camera); |
|
|
}} |
|
|
|
|
|
init(); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
""" |
|
|
|
|
|
|
|
|
html(game_html, height=800, width=2000, scrolling=False) |
|
|
|
|
|
st.write("Note: Requires internet for Three.js to load.") |
