Hugging Face's logo

Spaces:
awacke1
/
TankGameSVG
Running

App Files Community
awacke1 commited on
Commit
d9c436b
·
verified ·
1 Parent(s): 4dada42

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +39 -26
index.html CHANGED
@@ -3,7 +3,7 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Tank Game with Shockwave</title>
7
  <style>
8
  body { margin: 0; overflow: hidden; font-family: Arial, sans-serif; }
9
  #gameArea { width: 100vw; height: 100vh; background-color: #f0f0f0; }
@@ -24,8 +24,8 @@
24
  const nextLevelElement = document.getElementById('nextLevel');
25
  const svgNS = "http://www.w3.org/2000/svg";
26
 
27
- const GAME_WIDTH = window.innerWidth;
28
- const GAME_HEIGHT = window.innerHeight;
29
  const TANK_SIZE = 30;
30
  const BULLET_SIZE = 5;
31
  const TANK_SPEED = 2;
@@ -46,10 +46,7 @@
46
  let shockwaveStartTime = 0;
47
 
48
  class Tank {
49
- constructor(x, y, color, isPlayer = false) {
50
- this.x = x;
51
- this.y = y;
52
- this.angle = 0;
53
  this.color = color;
54
  this.isPlayer = isPlayer;
55
  this.hitPoints = MAX_HIT_POINTS;
@@ -75,6 +72,13 @@
75
 
76
  this.velocity = { x: 0, y: 0 };
77
  this.isAlive = true;
 
 
 
 
 
 
 
78
  }
79
 
80
  update(playerX, playerY) {
@@ -172,15 +176,13 @@
172
  }
173
  }
174
 
175
- const player = new Tank(GAME_WIDTH / 2, GAME_HEIGHT / 2, "blue", true);
176
  let aiTanks = [];
177
 
178
  function queueEnemySpawn() {
179
  const tanksToSpawn = MAX_TANKS - aiTanks.length;
180
  for (let i = 0; i < tanksToSpawn; i++) {
181
  spawnQueue.push({
182
- x: Math.random() * (GAME_WIDTH - 2 * TANK_SIZE) + TANK_SIZE,
183
- y: Math.random() * (GAME_HEIGHT - 2 * TANK_SIZE) + TANK_SIZE,
184
  color: `hsl(${Math.random() * 360}, 100%, 50%)`
185
  });
186
  }
@@ -190,23 +192,15 @@
190
  const currentTime = Date.now();
191
  if (currentTime - lastSpawnTime > SPAWN_DELAY && spawnQueue.length > 0 && aiTanks.length < MAX_TANKS_ON_SCREEN) {
192
  const spawnData = spawnQueue.shift();
193
- let canSpawn = true;
194
-
195
- // Check if the spawn location is clear
196
- for (let tank of aiTanks) {
197
- if (distance(tank, spawnData) < 3 * TANK_SIZE) {
198
- canSpawn = false;
199
- break;
200
- }
201
- }
202
-
203
- if (canSpawn) {
204
- aiTanks.push(new Tank(spawnData.x, spawnData.y, spawnData.color));
205
- lastSpawnTime = currentTime;
206
- } else {
207
- // If can't spawn, put back in queue
208
- spawnQueue.push(spawnData);
209
  }
 
 
 
210
  }
211
  }
212
 
@@ -318,6 +312,21 @@
318
  });
319
  }
320
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
321
  function gameLoop() {
322
  updatePlayerPosition();
323
  player.update();
@@ -344,6 +353,10 @@
344
  requestAnimationFrame(gameLoop);
345
  }
346
 
 
 
 
 
347
  queueEnemySpawn(); // Initial spawn queue
348
  gameLoop();
349
  </script>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Tank Game with Random Spawns</title>
7
  <style>
8
  body { margin: 0; overflow: hidden; font-family: Arial, sans-serif; }
9
  #gameArea { width: 100vw; height: 100vh; background-color: #f0f0f0; }
 
24
  const nextLevelElement = document.getElementById('nextLevel');
25
  const svgNS = "http://www.w3.org/2000/svg";
26
 
27
+ let GAME_WIDTH = window.innerWidth;
28
+ let GAME_HEIGHT = window.innerHeight;
29
  const TANK_SIZE = 30;
30
  const BULLET_SIZE = 5;
31
  const TANK_SPEED = 2;
 
46
  let shockwaveStartTime = 0;
47
 
48
  class Tank {
49
+ constructor(color, isPlayer = false) {
 
 
 
50
  this.color = color;
51
  this.isPlayer = isPlayer;
52
  this.hitPoints = MAX_HIT_POINTS;
 
72
 
73
  this.velocity = { x: 0, y: 0 };
74
  this.isAlive = true;
75
+ this.respawn();
76
+ }
77
+
78
+ respawn() {
79
+ this.x = Math.random() * (GAME_WIDTH - 2 * TANK_SIZE) + TANK_SIZE;
80
+ this.y = Math.random() * (GAME_HEIGHT - 2 * TANK_SIZE) + TANK_SIZE;
81
+ this.angle = Math.random() * 2 * Math.PI;
82
  }
83
 
84
  update(playerX, playerY) {
 
176
  }
177
  }
178
 
179
+ const player = new Tank("blue", true);
180
  let aiTanks = [];
181
 
182
  function queueEnemySpawn() {
183
  const tanksToSpawn = MAX_TANKS - aiTanks.length;
184
  for (let i = 0; i < tanksToSpawn; i++) {
185
  spawnQueue.push({
 
 
186
  color: `hsl(${Math.random() * 360}, 100%, 50%)`
187
  });
188
  }
 
192
  const currentTime = Date.now();
193
  if (currentTime - lastSpawnTime > SPAWN_DELAY && spawnQueue.length > 0 && aiTanks.length < MAX_TANKS_ON_SCREEN) {
194
  const spawnData = spawnQueue.shift();
195
+ let newTank = new Tank(spawnData.color);
196
+
197
+ // Ensure the new tank doesn't overlap with existing tanks
198
+ while (aiTanks.some(tank => distance(newTank, tank) < 3 * TANK_SIZE)) {
199
+ newTank.respawn();
 
 
 
 
 
 
 
 
 
 
 
200
  }
201
+
202
+ aiTanks.push(newTank);
203
+ lastSpawnTime = currentTime;
204
  }
205
  }
206
 
 
312
  });
313
  }
314
 
315
+ function handleResize() {
316
+ GAME_WIDTH = window.innerWidth;
317
+ GAME_HEIGHT = window.innerHeight;
318
+ svg.setAttribute("width", GAME_WIDTH);
319
+ svg.setAttribute("height", GAME_HEIGHT);
320
+
321
+ // Reposition all tanks
322
+ [player, ...aiTanks].forEach(tank => {
323
+ tank.x = Math.min(Math.max(tank.x, TANK_SIZE), GAME_WIDTH - TANK_SIZE);
324
+ tank.y = Math.min(Math.max(tank.y, TANK_SIZE), GAME_HEIGHT - TANK_SIZE);
325
+ });
326
+ }
327
+
328
+ window.addEventListener('resize', handleResize);
329
+
330
  function gameLoop() {
331
  updatePlayerPosition();
332
  player.update();
 
353
  requestAnimationFrame(gameLoop);
354
  }
355
 
356
+ // Set initial SVG size
357
+ svg.setAttribute("width", GAME_WIDTH);
358
+ svg.setAttribute("height", GAME_HEIGHT);
359
+
360
  queueEnemySpawn(); // Initial spawn queue
361
  gameLoop();
362
  </script>