StreamlitGalaxianSnakeGame

Running

File size: 14,244 Bytes

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

# Define the enhanced HTML content with Three.js
game_html = """
<!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; }
    </style>
</head>
<body>
    <div id="ui">Score: <span id="score">0</span> | Time: <span id="timer">0</span>s</div>
    <div id="lives">Lives: <span id="livesCount">3</span></div>
    <div id="sidebar">
        <h3>High Scores</h3>
        <div id="highScores"></div>
        <button onclick="saveScore()">Save Score</button>
    </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 = [];
        let clock = new THREE.Clock();
        let moveDir = new THREE.Vector3(1, 0, 0), moveSpeed = 0.2;
        let score = 0, gameTime = 0, lives = 3;
        let highScores = JSON.parse(localStorage.getItem('highScores')) || [];
        let gameOver = false;

        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, 20, 30);
            camera.lookAt(0, 0, 0);

            // Initialize 3D snake
            snake = [];
            const snakeMaterial = new THREE.MeshPhongMaterial({ color: 0x00ff00, shininess: 100 });
            for (let i = 0; i < 3; 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);
            }

            spawnFood();
            spawnLSysCreatures();

            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);

            // Starfield
            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 spawnLSysCreatures() {
            const lSys = {
                axiom: "F",
                rules: { "F": "F[+F]F[-F]F" },
                angle: 25,
                length: 2,
                iterations: 3
            };
            const material = new THREE.MeshPhongMaterial({ color: 0x0000ff });
            for (let i = 0; i < 3; i++) {
                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 = 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 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.set(pos.x, 0, pos.z);
                lSysCreatures.push(creature);
                scene.add(creature);
                sendQuineMessage(creature);
            }
        }

        function sendQuineMessage(sender) {
            const quine = "function q(){alert('I am 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': moveDir.set(-1, 0, 0); break;
                case 'ArrowRight': case 'KeyD': moveDir.set(1, 0, 0); break;
                case 'ArrowUp': case 'KeyW': moveDir.set(0, 0, -1); break;
                case 'ArrowDown': case 'KeyS': moveDir.set(0, 0, 1); break;
            }
        }

        function updateSnake(delta) {
            if (gameOver) return;
            const head = snake[0];
            const newHead = new THREE.Mesh(head.geometry, head.material);
            newHead.position.copy(head.position).add(moveDir.clone().multiplyScalar(moveSpeed));

            // Boundary check
            if (Math.abs(newHead.position.x) > 20 || Math.abs(newHead.position.z) > 20) {
                loseLife();
                return;
            }

            // Self-collision check
            for (let i = 1; i < snake.length; i++) {
                if (newHead.position.distanceTo(snake[i].position) < 0.9) {
                    loseLife();
                    return;
                }
            }

            snake.unshift(newHead);
            scene.add(newHead);

            // Food collision
            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);
                    score += 10;
                    spawnFood(); // Add new food
                    spawnLSysCreatures(); // Add new creature
                    break;
                } else {
                    snake.pop(); // Remove tail if no food eaten
                    scene.remove(snake[snake.length - 1]);
                }
            }

            // Creature collision
            for (let creature of lSysCreatures) {
                if (newHead.position.distanceTo(creature.position) < 2) {
                    loseLife();
                    return;
                }
            }
        }

        function loseLife() {
            lives--;
            updateUI();
            if (lives <= 0) {
                gameOver = true;
                alert("Game Over! Final Score: " + score);
                saveScore();
            } 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 < 3; 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);
        }

        function resetGame() {
            resetSnake();
            foodItems.forEach(f => scene.remove(f));
            lSysCreatures.forEach(c => scene.remove(c));
            foodItems = [];
            lSysCreatures = [];
            spawnFood();
            spawnLSysCreatures();
            score = 0;
            lives = 3;
            gameOver = false;
            updateUI();
        }

        function updateUI() {
            document.getElementById('score').innerText = score;
            document.getElementById('timer').innerText = Math.floor(gameTime);
            document.getElementById('livesCount').innerText = lives;
        }

        function updateHighScoresUI() {
            const scoresDiv = document.getElementById('highScores');
            scoresDiv.innerHTML = highScores.map(s => `${s.name}: ${s.score} (${s.time}s)`).join('<br>');
        }

        window.saveScore = function() {
            const name = prompt("Enter 3-letter name:", generateRandomName());
            if (name && name.length === 3) {
                highScores.push({ name, 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 generateRandomName() {
            const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
            return Array(3).fill().map(() => letters[Math.floor(Math.random() * letters.length)]).join('');
        }

        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;

            updateSnake(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>
"""

# Streamlit app with sidebar
with st.sidebar:
    st.title("Galaxian Snake 3D")
    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 alien food (pink dodecahedrons) to grow")
    st.write("- Avoid L-system creatures (blue structures)")
    st.write("- Watch creatures exchange quine messages")

# Render the HTML game
html(game_html, height=800, width=2000, scrolling=False)

st.write("Note: Requires internet for Three.js to load.")