Spaces:

awacke1
/

ZaxxoGalaxian

Running

App Files Files Community

awacke1 commited on Feb 26

Commit

06c1427

verified ·

1 Parent(s): 414d077

Update app.py

Browse files

Files changed (1) hide show

app.py +115 -34

app.py CHANGED Viewed

@@ -1,25 +1,37 @@
 import streamlit as st
 from streamlit.components.v1 import html
-# Define the HTML content with the Three.js game
 game_html = """
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>Galaxxon - Three.js Arcade Game</title>
     <style>
-        body { margin: 0; overflow: hidden; background: #000; }
         canvas { display: block; width: 100%; height: 100%; }
     </style>
 </head>
 <body>
     <script type="module">
         import * as THREE from 'https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js';
-        let scene, camera, renderer, player, enemies = [], bullets = [], obstacles = [];
         let clock = new THREE.Clock();
         let moveLeft = false, moveRight = false, moveUp = false, moveDown = false, shoot = false;
         function init() {
             scene = new THREE.Scene();
@@ -37,8 +49,8 @@ game_html = """
             player.position.y = -10;
             scene.add(player);
-            spawnEnemies();
-            spawnObstacles();
             const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
             scene.add(ambientLight);
@@ -47,30 +59,41 @@ game_html = """
             window.addEventListener('keyup', onKeyUp);
             window.addEventListener('resize', onWindowResize);
             animate();
         }
-        function spawnEnemies() {
             const enemyGeometry = new THREE.BoxGeometry(0.8, 0.8, 0.8);
             const enemyMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
-            for (let i = 0; i < 5; i++) {
-                for (let j = 0; j < 3; j++) {
-                    const enemy = new THREE.Mesh(enemyGeometry, enemyMaterial);
-                    enemy.position.set(i * 2 - 4, j * 2 + 5, 0);
-                    enemies.push(enemy);
-                    scene.add(enemy);
-                }
             }
         }
-        function spawnObstacles() {
-            const obstacleGeometry = new THREE.BoxGeometry(2, 2, 2);
-            const obstacleMaterial = new THREE.MeshBasicMaterial({ color: 0x808080 });
-            for (let i = 0; i < 3; i++) {
-                const obstacle = new THREE.Mesh(obstacleGeometry, obstacleMaterial);
-                obstacle.position.set(Math.random() * 20 - 10, Math.random() * 10, 0);
-                obstacles.push(obstacle);
-                scene.add(obstacle);
             }
         }
@@ -137,27 +160,83 @@ game_html = """
                     enemies.splice(i, 1);
                     scene.remove(bullet);
                     bullets.splice(bulletIndex, 1);
                     break;
                 }
             }
         }
-        function updateEnemies(delta) {
-            const enemySpeed = 2;
             enemies.forEach(enemy => {
-                enemy.position.y -= enemySpeed * delta;
                 if (enemy.position.y < -15) enemy.position.y = 15;
             });
         }
-        function updateObstacles(delta) {
-            const obstacleSpeed = 1;
-            obstacles.forEach(obstacle => {
-                obstacle.position.y -= obstacleSpeed * delta;
-                if (obstacle.position.y < -15) obstacle.position.y = 15;
             });
         }
         function onWindowResize() {
             camera.aspect = window.innerWidth / window.innerHeight;
             camera.updateProjectionMatrix();
@@ -167,11 +246,13 @@ game_html = """
         function animate() {
             requestAnimationFrame(animate);
             const delta = clock.getDelta();
             updatePlayer(delta);
             updateBullets(delta);
-            updateEnemies(delta);
-            updateObstacles(delta);
             renderer.render(scene, camera);
         }
@@ -183,8 +264,8 @@ game_html = """
 """
 # Streamlit app
-st.title("Galaxxon - A Three.js Arcade Game")
-st.write("Use WASD or Arrow Keys to move, Spacebar to shoot. Destroy red enemies and avoid gray obstacles!")
 # Render the HTML game
 html(game_html, height=600, scrolling=False)

 import streamlit as st
 from streamlit.components.v1 import html
+import random
+import string
+# Define the enhanced HTML content with Three.js game
 game_html = """
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
+    <title>Galaxxon - Enhanced Arcade Game</title>
     <style>
+        body { margin: 0; overflow: hidden; background: #000; font-family: Arial; }
         canvas { display: block; width: 100%; height: 100%; }
+        #ui { position: absolute; top: 10px; left: 10px; color: white; }
+        #sidebar { position: absolute; top: 10px; right: 10px; color: white; width: 200px; background: rgba(0,0,0,0.7); padding: 10px; }
     </style>
 </head>
 <body>
+    <div id="ui">Score: <span id="score">0</span> | Multiplier: <span id="multiplier">1</span>x | Time: <span id="timer">0</span>s</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, player, enemies = [], bullets = [], buildings = [];
         let clock = new THREE.Clock();
         let moveLeft = false, moveRight = false, moveUp = false, moveDown = false, shoot = false;
+        let score = 0, multiplier = 1, gameTime = 0, lastHitTime = 0;
+        let highScores = JSON.parse(localStorage.getItem('highScores')) || [];
         function init() {
             scene = new THREE.Scene();
             player.position.y = -10;
             scene.add(player);
+            spawnFlockingEnemies();
+            spawnBuildings();
             const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
             scene.add(ambientLight);
             window.addEventListener('keyup', onKeyUp);
             window.addEventListener('resize', onWindowResize);
+            updateHighScoresUI();
             animate();
         }
+        function spawnFlockingEnemies() {
             const enemyGeometry = new THREE.BoxGeometry(0.8, 0.8, 0.8);
             const enemyMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
+            for (let i = 0; i < 10; i++) {
+                const enemy = new THREE.Mesh(enemyGeometry, enemyMaterial);
+                enemy.position.set(Math.random() * 20 - 10, Math.random() * 10 + 5, 0);
+                enemy.velocity = new THREE.Vector3(Math.random() - 0.5, Math.random() - 0.5, 0);
+                enemies.push(enemy);
+                scene.add(enemy);
             }
         }
+        function spawnBuildings() {
+            const primitives = [
+                new THREE.BoxGeometry(2, 2, 2),
+                new THREE.CylinderGeometry(1, 1, 3, 8),
+                new THREE.ConeGeometry(1.5, 2, 8)
+            ];
+            const material = new THREE.MeshBasicMaterial({ color: 0x808080 });
+            for (let i = 0; i < 5; i++) {
+                const building = new THREE.Group();
+                const height = Math.random() * 3 + 1;
+                for (let j = 0; j < height; j++) {
+                    const primitive = primitives[Math.floor(Math.random() * primitives.length)].clone();
+                    const segment = new THREE.Mesh(primitive, material);
+                    segment.position.y = j * 2;
+                    building.add(segment);
+                }
+                building.position.set(Math.random() * 30 - 15, -15 + height, 0);
+                buildings.push(building);
+                scene.add(building);
             }
         }
                     enemies.splice(i, 1);
                     scene.remove(bullet);
                     bullets.splice(bulletIndex, 1);
+                    score += 10 * multiplier;
+                    if (clock.getElapsedTime() - lastHitTime < 2) multiplier += 0.5;
+                    lastHitTime = clock.getElapsedTime();
+                    updateUI();
+                    if (enemies.length < 5) spawnFlockingEnemies();
                     break;
                 }
             }
         }
+        function updateFlockingEnemies(delta) {
+            const cohesion = 0.05, separation = 0.1, alignment = 0.05, speed = 2;
             enemies.forEach(enemy => {
+                let avgPos = new THREE.Vector3(), avgVel = new THREE.Vector3(), separationForce = new THREE.Vector3();
+                let neighbors = 0;
+                enemies.forEach(other => {
+                    if (enemy !== other) {
+                        const dist = enemy.position.distanceTo(other.position);
+                        if (dist < 5) {
+                            avgPos.add(other.position);
+                            avgVel.add(other.velocity);
+                            if (dist < 2) separationForce.sub(other.position.clone().sub(enemy.position).normalize().divideScalar(dist));
+                            neighbors++;
+                        }
+                    }
+                });
+                if (neighbors > 0) {
+                    avgPos.divideScalar(neighbors).sub(enemy.position).multiplyScalar(cohesion);
+                    avgVel.divideScalar(neighbors).sub(enemy.velocity).multiplyScalar(alignment);
+                    separationForce.multiplyScalar(separation);
+                    enemy.velocity.add(avgPos).add(avgVel).add(separationForce).clampLength(0, speed);
+                }
+                enemy.position.add(enemy.velocity.clone().multiplyScalar(delta));
                 if (enemy.position.y < -15) enemy.position.y = 15;
+                if (enemy.position.x < -15 || enemy.position.x > 15) enemy.velocity.x *= -1;
             });
         }
+        function updateBuildings(delta) {
+            const buildingSpeed = 1;
+            buildings.forEach(building => {
+                building.position.y += buildingSpeed * delta;
+                if (building.position.y > 15) building.position.y = -15;
             });
         }
+        function updateUI() {
+            document.getElementById('score').innerText = score;
+            document.getElementById('multiplier').innerText = multiplier.toFixed(1);
+            document.getElementById('timer').innerText = Math.floor(gameTime);
+            if (clock.getElapsedTime() - lastHitTime > 5) multiplier = 1;
+        }
+        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();
         function animate() {
             requestAnimationFrame(animate);
             const delta = clock.getDelta();
+            gameTime += delta;
             updatePlayer(delta);
             updateBullets(delta);
+            updateFlockingEnemies(delta);
+            updateBuildings(delta);
+            updateUI();
             renderer.render(scene, camera);
         }
 """
 # Streamlit app
+st.title("Galaxxon - Enhanced Arcade Game")
+st.write("Use WASD or Arrow Keys to move, Spacebar to shoot. Destroy red enemies for points! Chain hits for multiplier bonuses.")
 # Render the HTML game
 html(game_html, height=600, scrolling=False)