Hugging Face's logo

Spaces:
awacke1
/
ZaxxoGalaxian
Running

App Files Community
awacke1 commited on
Commit
6c47039
·
verified ·
1 Parent(s): 06c1427

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +85 -58
app.py CHANGED
@@ -15,10 +15,12 @@ game_html = """
15
  canvas { display: block; width: 100%; height: 100%; }
16
  #ui { position: absolute; top: 10px; left: 10px; color: white; }
17
  #sidebar { position: absolute; top: 10px; right: 10px; color: white; width: 200px; background: rgba(0,0,0,0.7); padding: 10px; }
 
18
  </style>
19
  </head>
20
  <body>
21
  <div id="ui">Score: <span id="score">0</span> | Multiplier: <span id="multiplier">1</span>x | Time: <span id="timer">0</span>s</div>
 
22
  <div id="sidebar">
23
  <h3>High Scores</h3>
24
  <div id="highScores"></div>
@@ -30,8 +32,9 @@ game_html = """
30
  let scene, camera, renderer, player, enemies = [], bullets = [], buildings = [];
31
  let clock = new THREE.Clock();
32
  let moveLeft = false, moveRight = false, moveUp = false, moveDown = false, shoot = false;
33
- let score = 0, multiplier = 1, gameTime = 0, lastHitTime = 0;
34
  let highScores = JSON.parse(localStorage.getItem('highScores')) || [];
 
35
 
36
  function init() {
37
  scene = new THREE.Scene();
@@ -40,16 +43,15 @@ game_html = """
40
  renderer.setSize(window.innerWidth, window.innerHeight);
41
  document.body.appendChild(renderer.domElement);
42
 
43
- camera.position.set(0, 20, 30);
44
- camera.lookAt(0, 0, 0);
45
 
46
  const playerGeometry = new THREE.BoxGeometry(1, 1, 1);
47
  const playerMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
48
  player = new THREE.Mesh(playerGeometry, playerMaterial);
49
- player.position.y = -10;
50
  scene.add(player);
51
 
52
- spawnFlockingEnemies();
53
  spawnBuildings();
54
 
55
  const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
@@ -63,18 +65,6 @@ game_html = """
63
  animate();
64
  }
65
 
66
- function spawnFlockingEnemies() {
67
- const enemyGeometry = new THREE.BoxGeometry(0.8, 0.8, 0.8);
68
- const enemyMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
69
- for (let i = 0; i < 10; i++) {
70
- const enemy = new THREE.Mesh(enemyGeometry, enemyMaterial);
71
- enemy.position.set(Math.random() * 20 - 10, Math.random() * 10 + 5, 0);
72
- enemy.velocity = new THREE.Vector3(Math.random() - 0.5, Math.random() - 0.5, 0);
73
- enemies.push(enemy);
74
- scene.add(enemy);
75
- }
76
- }
77
-
78
  function spawnBuildings() {
79
  const primitives = [
80
  new THREE.BoxGeometry(2, 2, 2),
@@ -82,21 +72,33 @@ game_html = """
82
  new THREE.ConeGeometry(1.5, 2, 8)
83
  ];
84
  const material = new THREE.MeshBasicMaterial({ color: 0x808080 });
85
- for (let i = 0; i < 5; i++) {
86
  const building = new THREE.Group();
87
- const height = Math.random() * 3 + 1;
88
  for (let j = 0; j < height; j++) {
89
  const primitive = primitives[Math.floor(Math.random() * primitives.length)].clone();
90
  const segment = new THREE.Mesh(primitive, material);
91
- segment.position.y = j * 2;
92
  building.add(segment);
93
  }
94
- building.position.set(Math.random() * 30 - 15, -15 + height, 0);
 
95
  buildings.push(building);
96
  scene.add(building);
97
  }
98
  }
99
 
 
 
 
 
 
 
 
 
 
 
 
100
  function onKeyDown(event) {
101
  switch (event.code) {
102
  case 'ArrowLeft': case 'KeyA': moveLeft = true; break;
@@ -118,11 +120,12 @@ game_html = """
118
  }
119
 
120
  function updatePlayer(delta) {
 
121
  const speed = 10;
122
- if (moveLeft && player.position.x > -15) player.position.x -= speed * delta;
123
- if (moveRight && player.position.x < 15) player.position.x += speed * delta;
124
- if (moveUp && player.position.y < 0) player.position.y += speed * delta;
125
- if (moveDown && player.position.y > -15) player.position.y -= speed * delta;
126
 
127
  if (shoot && clock.getElapsedTime() > 0.2) {
128
  shootBullet();
@@ -135,7 +138,7 @@ game_html = """
135
  const bulletMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 });
136
  const bullet = new THREE.Mesh(bulletGeometry, bulletMaterial);
137
  bullet.position.copy(player.position);
138
- bullet.position.y += 1;
139
  bullets.push(bullet);
140
  scene.add(bullet);
141
  }
@@ -143,8 +146,8 @@ game_html = """
143
  function updateBullets(delta) {
144
  const bulletSpeed = 20;
145
  for (let i = bullets.length - 1; i >= 0; i--) {
146
- bullets[i].position.y += bulletSpeed * delta;
147
- if (bullets[i].position.y > 20) {
148
  scene.remove(bullets[i]);
149
  bullets.splice(i, 1);
150
  } else {
@@ -164,55 +167,79 @@ game_html = """
164
  if (clock.getElapsedTime() - lastHitTime < 2) multiplier += 0.5;
165
  lastHitTime = clock.getElapsedTime();
166
  updateUI();
167
- if (enemies.length < 5) spawnFlockingEnemies();
168
  break;
169
  }
170
  }
171
  }
172
 
173
  function updateFlockingEnemies(delta) {
174
- const cohesion = 0.05, separation = 0.1, alignment = 0.05, speed = 2;
175
  enemies.forEach(enemy => {
176
- let avgPos = new THREE.Vector3(), avgVel = new THREE.Vector3(), separationForce = new THREE.Vector3();
177
- let neighbors = 0;
178
-
179
- enemies.forEach(other => {
180
- if (enemy !== other) {
181
- const dist = enemy.position.distanceTo(other.position);
182
- if (dist < 5) {
183
- avgPos.add(other.position);
184
- avgVel.add(other.velocity);
185
- if (dist < 2) separationForce.sub(other.position.clone().sub(enemy.position).normalize().divideScalar(dist));
186
- neighbors++;
187
- }
188
- }
189
- });
190
-
191
- if (neighbors > 0) {
192
- avgPos.divideScalar(neighbors).sub(enemy.position).multiplyScalar(cohesion);
193
- avgVel.divideScalar(neighbors).sub(enemy.velocity).multiplyScalar(alignment);
194
- separationForce.multiplyScalar(separation);
195
- enemy.velocity.add(avgPos).add(avgVel).add(separationForce).clampLength(0, speed);
196
  }
197
-
198
- enemy.position.add(enemy.velocity.clone().multiplyScalar(delta));
199
- if (enemy.position.y < -15) enemy.position.y = 15;
200
- if (enemy.position.x < -15 || enemy.position.x > 15) enemy.velocity.x *= -1;
201
  });
202
  }
203
 
204
  function updateBuildings(delta) {
205
- const buildingSpeed = 1;
206
  buildings.forEach(building => {
207
- building.position.y += buildingSpeed * delta;
208
- if (building.position.y > 15) building.position.y = -15;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
209
  });
210
  }
211
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
212
  function updateUI() {
213
  document.getElementById('score').innerText = score;
214
  document.getElementById('multiplier').innerText = multiplier.toFixed(1);
215
  document.getElementById('timer').innerText = Math.floor(gameTime);
 
216
  if (clock.getElapsedTime() - lastHitTime > 5) multiplier = 1;
217
  }
218
 
@@ -265,7 +292,7 @@ game_html = """
265
 
266
  # Streamlit app
267
  st.title("Galaxxon - Enhanced Arcade Game")
268
- st.write("Use WASD or Arrow Keys to move, Spacebar to shoot. Destroy red enemies for points! Chain hits for multiplier bonuses.")
269
 
270
  # Render the HTML game
271
  html(game_html, height=600, scrolling=False)
 
15
  canvas { display: block; width: 100%; height: 100%; }
16
  #ui { position: absolute; top: 10px; left: 10px; color: white; }
17
  #sidebar { position: absolute; top: 10px; right: 10px; color: white; width: 200px; background: rgba(0,0,0,0.7); padding: 10px; }
18
+ #lives { position: absolute; top: 40px; left: 10px; color: white; }
19
  </style>
20
  </head>
21
  <body>
22
  <div id="ui">Score: <span id="score">0</span> | Multiplier: <span id="multiplier">1</span>x | Time: <span id="timer">0</span>s</div>
23
+ <div id="lives">Lives: <span id="livesCount">5</span></div>
24
  <div id="sidebar">
25
  <h3>High Scores</h3>
26
  <div id="highScores"></div>
 
32
  let scene, camera, renderer, player, enemies = [], bullets = [], buildings = [];
33
  let clock = new THREE.Clock();
34
  let moveLeft = false, moveRight = false, moveUp = false, moveDown = false, shoot = false;
35
+ let score = 0, multiplier = 1, gameTime = 0, lastHitTime = 0, lives = 5;
36
  let highScores = JSON.parse(localStorage.getItem('highScores')) || [];
37
+ let exploding = false;
38
 
39
  function init() {
40
  scene = new THREE.Scene();
 
43
  renderer.setSize(window.innerWidth, window.innerHeight);
44
  document.body.appendChild(renderer.domElement);
45
 
46
+ camera.position.set(0, 5, 15);
47
+ camera.lookAt(0, 0, -50);
48
 
49
  const playerGeometry = new THREE.BoxGeometry(1, 1, 1);
50
  const playerMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
51
  player = new THREE.Mesh(playerGeometry, playerMaterial);
52
+ player.position.set(0, 0, 0);
53
  scene.add(player);
54
 
 
55
  spawnBuildings();
56
 
57
  const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
 
65
  animate();
66
  }
67
 
 
 
 
 
 
 
 
 
 
 
 
 
68
  function spawnBuildings() {
69
  const primitives = [
70
  new THREE.BoxGeometry(2, 2, 2),
 
72
  new THREE.ConeGeometry(1.5, 2, 8)
73
  ];
74
  const material = new THREE.MeshBasicMaterial({ color: 0x808080 });
75
+ for (let i = 0; i < 10; i++) {
76
  const building = new THREE.Group();
77
+ const height = Math.random() * 5 + 2;
78
  for (let j = 0; j < height; j++) {
79
  const primitive = primitives[Math.floor(Math.random() * primitives.length)].clone();
80
  const segment = new THREE.Mesh(primitive, material);
81
+ segment.position.y = j * 2 - height;
82
  building.add(segment);
83
  }
84
+ building.position.set(Math.random() * 40 - 20, height / 2, -50 - Math.random() * 50);
85
+ building.spawnTimer = 0;
86
  buildings.push(building);
87
  scene.add(building);
88
  }
89
  }
90
 
91
+ function spawnEnemyFromBuilding(building) {
92
+ const enemyGeometry = new THREE.BoxGeometry(0.8, 0.8, 0.8);
93
+ const enemyMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
94
+ const enemy = new THREE.Mesh(enemyGeometry, enemyMaterial);
95
+ enemy.position.copy(building.position);
96
+ enemy.position.y += building.children.length * 2;
97
+ enemy.velocity = new THREE.Vector3(Math.random() - 0.5, Math.random() - 0.5, 1).normalize();
98
+ enemies.push(enemy);
99
+ scene.add(enemy);
100
+ }
101
+
102
  function onKeyDown(event) {
103
  switch (event.code) {
104
  case 'ArrowLeft': case 'KeyA': moveLeft = true; break;
 
120
  }
121
 
122
  function updatePlayer(delta) {
123
+ if (exploding) return;
124
  const speed = 10;
125
+ if (moveLeft && player.position.x > -20) player.position.x -= speed * delta;
126
+ if (moveRight && player.position.x < 20) player.position.x += speed * delta;
127
+ if (moveUp && player.position.y < 10) player.position.y += speed * delta;
128
+ if (moveDown && player.position.y > -5) player.position.y -= speed * delta;
129
 
130
  if (shoot && clock.getElapsedTime() > 0.2) {
131
  shootBullet();
 
138
  const bulletMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 });
139
  const bullet = new THREE.Mesh(bulletGeometry, bulletMaterial);
140
  bullet.position.copy(player.position);
141
+ bullet.position.z -= 1;
142
  bullets.push(bullet);
143
  scene.add(bullet);
144
  }
 
146
  function updateBullets(delta) {
147
  const bulletSpeed = 20;
148
  for (let i = bullets.length - 1; i >= 0; i--) {
149
+ bullets[i].position.z -= bulletSpeed * delta;
150
+ if (bullets[i].position.z < -100) {
151
  scene.remove(bullets[i]);
152
  bullets.splice(i, 1);
153
  } else {
 
167
  if (clock.getElapsedTime() - lastHitTime < 2) multiplier += 0.5;
168
  lastHitTime = clock.getElapsedTime();
169
  updateUI();
 
170
  break;
171
  }
172
  }
173
  }
174
 
175
  function updateFlockingEnemies(delta) {
176
+ const speed = 3;
177
  enemies.forEach(enemy => {
178
+ enemy.position.add(enemy.velocity.clone().multiplyScalar(delta * speed));
179
+ if (enemy.position.z > 10) {
180
+ scene.remove(enemy);
181
+ enemies.splice(enemies.indexOf(enemy), 1);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
182
  }
 
 
 
 
183
  });
184
  }
185
 
186
  function updateBuildings(delta) {
187
+ const buildingSpeed = 5;
188
  buildings.forEach(building => {
189
+ building.position.z += buildingSpeed * delta;
190
+ if (building.position.z > 20) {
191
+ building.position.z = -50 - Math.random() * 50;
192
+ building.position.x = Math.random() * 40 - 20;
193
+ }
194
+
195
+ const distToPlayer = building.position.distanceTo(player.position);
196
+ if (distToPlayer < 10 && building.spawnTimer <= 0) {
197
+ spawnEnemyFromBuilding(building);
198
+ building.spawnTimer = 2;
199
+ }
200
+ building.spawnTimer -= delta;
201
+
202
+ if (!exploding && player.position.distanceTo(building.position) < 3) {
203
+ explodePlayer();
204
+ }
205
  });
206
  }
207
 
208
+ function explodePlayer() {
209
+ exploding = true;
210
+ lives--;
211
+ updateUI();
212
+ const particleGeometry = new THREE.SphereGeometry(0.1, 8, 8);
213
+ const particleMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
214
+ for (let i = 0; i < 20; i++) {
215
+ const particle = new THREE.Mesh(particleGeometry, particleMaterial);
216
+ particle.position.copy(player.position);
217
+ particle.velocity = new THREE.Vector3(Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5).multiplyScalar(5);
218
+ scene.add(particle);
219
+ setTimeout(() => scene.remove(particle), 500);
220
+ }
221
+ player.visible = false;
222
+ setTimeout(() => {
223
+ player.visible = true;
224
+ exploding = false;
225
+ player.position.set(0, 0, 0);
226
+ if (lives === 1) alert("Last life remaining!");
227
+ if (lives <= 0) {
228
+ alert("Game Over! Final Score: " + score);
229
+ saveScore();
230
+ lives = 5;
231
+ score = 0;
232
+ multiplier = 1;
233
+ updateUI();
234
+ }
235
+ }, 1000);
236
+ }
237
+
238
  function updateUI() {
239
  document.getElementById('score').innerText = score;
240
  document.getElementById('multiplier').innerText = multiplier.toFixed(1);
241
  document.getElementById('timer').innerText = Math.floor(gameTime);
242
+ document.getElementById('livesCount').innerText = lives;
243
  if (clock.getElapsedTime() - lastHitTime > 5) multiplier = 1;
244
  }
245
 
 
292
 
293
  # Streamlit app
294
  st.title("Galaxxon - Enhanced Arcade Game")
295
+ st.write("Use WASD or Arrow Keys to move, Spacebar to shoot. Avoid buildings and destroy enemies launching from them!")
296
 
297
  # Render the HTML game
298
  html(game_html, height=600, scrolling=False)