StreamlitGalaxianSnakeGame

Running

File size: 27,073 Bytes

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