Hugging Face's logo

Spaces:
seawolf2357
/
TankWar
Running

App Files Community
cutechicken commited on
Commit
b622b52
·
verified ·
1 Parent(s): e0225d2

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +48 -32
index.html CHANGED
@@ -1,6 +1,7 @@
1
  <!DOCTYPE html>
2
  <html>
3
  <head>
 
4
  <style>
5
  body {
6
  margin: 0;
@@ -97,6 +98,9 @@
97
  const ENEMY_SPEED = 2;
98
  const SHOOTING_INTERVAL = 333;
99
 
 
 
 
100
  let game = {
101
  player: {
102
  x: canvas.width/2,
@@ -116,6 +120,30 @@
116
  shooting: false
117
  };
118
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
119
  function spawnEnemies() {
120
  const enemyCount = game.round * 5;
121
  for(let i = 0; i < enemyCount; i++) {
@@ -134,13 +162,6 @@
134
  }
135
  }
136
 
137
- function drawCircle(x, y, radius, color) {
138
- ctx.fillStyle = color;
139
- ctx.beginPath();
140
- ctx.arc(x, y, radius, 0, Math.PI * 2);
141
- ctx.fill();
142
- }
143
-
144
  function update() {
145
  // Player movement
146
  if(game.keys['w'] && game.player.y > PLAYER_SIZE)
@@ -166,6 +187,7 @@
166
  angle: angle + (Math.random() - 0.5) * 0.2
167
  });
168
  }
 
169
  game.lastShot = Date.now();
170
  }
171
 
@@ -178,6 +200,7 @@
178
  if(bullet.x < 0 || bullet.x > canvas.width ||
179
  bullet.y < 0 || bullet.y > canvas.height) {
180
  game.player.bullets.splice(i, 1);
 
181
  }
182
 
183
  for(let j = game.enemies.length - 1; j >= 0; j--) {
@@ -279,19 +302,24 @@
279
  function draw() {
280
  ctx.clearRect(0, 0, canvas.width, canvas.height);
281
 
282
- // Draw player (blue circle)
283
- drawCircle(game.player.x, game.player.y, PLAYER_SIZE/2, '#3498db');
 
 
284
 
285
  // Draw player bullets
286
  ctx.fillStyle = 'yellow';
287
  game.player.bullets.forEach(bullet => {
288
- drawCircle(bullet.x, bullet.y, 3, 'yellow');
 
 
289
  });
290
 
291
  // Draw enemies
292
  game.enemies.forEach(enemy => {
293
- // Enemy (red circle)
294
- drawCircle(enemy.x, enemy.y, PLAYER_SIZE/2, '#e74c3c');
 
295
 
296
  // Health bar
297
  ctx.fillStyle = '#600';
@@ -301,14 +329,18 @@
301
  (enemy.health/enemy.maxHealth) * 50, 5);
302
 
303
  // Enemy bullets
 
304
  enemy.bullets.forEach(bullet => {
305
- drawCircle(bullet.x, bullet.y, 3, 'red');
 
 
306
  });
307
  });
308
 
309
- // Draw items (green circles)
 
310
  game.items.forEach(item => {
311
- drawCircle(item.x, item.y, PLAYER_SIZE/3, '#2ecc71');
312
  });
313
  }
314
 
@@ -348,20 +380,4 @@
348
  // Event listeners
349
  window.addEventListener('keydown', e => game.keys[e.key] = true);
350
  window.addEventListener('keyup', e => game.keys[e.key] = false);
351
- window.addEventListener('mousemove', e => {
352
- game.mouse.x = e.clientX;
353
- game.mouse.y = e.clientY;
354
- });
355
- window.addEventListener('keydown', e => {
356
- if(e.code === 'Space') game.shooting = true;
357
- });
358
- window.addEventListener('keyup', e => {
359
- if(e.code === 'Space') game.shooting = false;
360
- });
361
-
362
- // Start game
363
- spawnEnemies();
364
- gameLoop();
365
- </script>
366
- </body>
367
- </html>
 
1
  <!DOCTYPE html>
2
  <html>
3
  <head>
4
+ <meta charset="UTF-8">
5
  <style>
6
  body {
7
  margin: 0;
 
98
  const ENEMY_SPEED = 2;
99
  const SHOOTING_INTERVAL = 333;
100
 
101
+ // Base64 encoded shot sound (very short beep)
102
+ const SHOT_SOUND = 'data:audio/wav;base64,UklGRigCAABXQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YQQCAACBhYqFbF1pbphwX4WqY0J0zGYhdPV3I2vyd5qCvHKTlZJ0j6p+cJGYhIaHmH1li6R9YH6hooCEjaB0f4SOo3yLkZSCeq+bXY/FdWt9tnhcl69yZ5mfdGSSoYKEkZuBdYqgeIKEm4Joe6GJfX+VmnuBjZaFhqmQYY7Hc36QiXd6kpWLgpSieIeQnICEkZeEhJOcfH6Om4GBjZWEgpOYfICLl4OBjZSEgZKYfICKloKBjJODgZGXe3+JlYGAi5KCgJCWen+IlICAfoh+gY2ScICBjX+ChImFhYuJhYeHhoeHh4iIiIiIiIiIiIiIiIiIiIiI';
103
+
104
  let game = {
105
  player: {
106
  x: canvas.width/2,
 
120
  shooting: false
121
  };
122
 
123
+ // Create audio context on user interaction
124
+ let audioContext;
125
+ document.addEventListener('click', initAudio, { once: true });
126
+ document.addEventListener('keydown', initAudio, { once: true });
127
+
128
+ function initAudio() {
129
+ audioContext = new (window.AudioContext || window.webkitAudioContext)();
130
+ }
131
+
132
+ function playShot() {
133
+ if (!audioContext) return;
134
+
135
+ fetch(SHOT_SOUND)
136
+ .then(response => response.arrayBuffer())
137
+ .then(buffer => audioContext.decodeAudioData(buffer))
138
+ .then(decodedData => {
139
+ const source = audioContext.createBufferSource();
140
+ source.buffer = decodedData;
141
+ source.connect(audioContext.destination);
142
+ source.start(0);
143
+ })
144
+ .catch(err => console.log('Sound play failed:', err));
145
+ }
146
+
147
  function spawnEnemies() {
148
  const enemyCount = game.round * 5;
149
  for(let i = 0; i < enemyCount; i++) {
 
162
  }
163
  }
164
 
 
 
 
 
 
 
 
165
  function update() {
166
  // Player movement
167
  if(game.keys['w'] && game.player.y > PLAYER_SIZE)
 
187
  angle: angle + (Math.random() - 0.5) * 0.2
188
  });
189
  }
190
+ playShot();
191
  game.lastShot = Date.now();
192
  }
193
 
 
200
  if(bullet.x < 0 || bullet.x > canvas.width ||
201
  bullet.y < 0 || bullet.y > canvas.height) {
202
  game.player.bullets.splice(i, 1);
203
+ continue;
204
  }
205
 
206
  for(let j = game.enemies.length - 1; j >= 0; j--) {
 
302
  function draw() {
303
  ctx.clearRect(0, 0, canvas.width, canvas.height);
304
 
305
+ // Draw player
306
+ ctx.font = '24px Arial';
307
+ ctx.fillStyle = 'white';
308
+ ctx.fillText('🐭', game.player.x - 12, game.player.y + 8);
309
 
310
  // Draw player bullets
311
  ctx.fillStyle = 'yellow';
312
  game.player.bullets.forEach(bullet => {
313
+ ctx.beginPath();
314
+ ctx.arc(bullet.x, bullet.y, 3, 0, Math.PI * 2);
315
+ ctx.fill();
316
  });
317
 
318
  // Draw enemies
319
  game.enemies.forEach(enemy => {
320
+ // Enemy
321
+ ctx.fillStyle = 'white';
322
+ ctx.fillText('🐱', enemy.x - 12, enemy.y + 8);
323
 
324
  // Health bar
325
  ctx.fillStyle = '#600';
 
329
  (enemy.health/enemy.maxHealth) * 50, 5);
330
 
331
  // Enemy bullets
332
+ ctx.fillStyle = 'red';
333
  enemy.bullets.forEach(bullet => {
334
+ ctx.beginPath();
335
+ ctx.arc(bullet.x, bullet.y, 3, 0, Math.PI * 2);
336
+ ctx.fill();
337
  });
338
  });
339
 
340
+ // Draw items
341
+ ctx.fillStyle = 'green';
342
  game.items.forEach(item => {
343
+ ctx.fillText('✚', item.x - 10, item.y + 10);
344
  });
345
  }
346
 
 
380
  // Event listeners
381
  window.addEventListener('keydown', e => game.keys[e.key] = true);
382
  window.addEventListener('keyup', e => game.keys[e.key] = false);
383
+ window.