sagar007 commited on
Commit
0934dda
·
verified ·
1 Parent(s): ef2f59c

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +18 -14
app.py CHANGED
@@ -1,6 +1,6 @@
1
  import gradio as gr
2
 
3
- # Updated HTML with explicit initialization to ensure the game starts
4
  game_html = """
5
  <!DOCTYPE html>
6
  <html>
@@ -23,7 +23,6 @@ game_html = """
23
  <button id="restart-button">Restart</button>
24
  </div>
25
  <script>
26
- // Ensure DOM is fully loaded before starting the game
27
  document.addEventListener('DOMContentLoaded', () => {
28
  const gameCanvas = document.getElementById('game-canvas');
29
  const scoreDisplay = document.getElementById('score');
@@ -65,6 +64,7 @@ game_html = """
65
  this.size = 30 + Math.random() * 20;
66
  this.element = this.createBirdElement();
67
  gameCanvas.appendChild(this.element);
 
68
  }
69
  createBirdElement() {
70
  const group = document.createElementNS("http://www.w3.org/2000/svg", "g");
@@ -115,11 +115,7 @@ game_html = """
115
  }
116
  if (this.x > 850) {
117
  this.remove();
118
- if (birds.length === 0 && gameRunning) {
119
- gameOverDisplay.style.display = 'block';
120
- restartButton.style.display = 'block';
121
- gameRunning = false;
122
- }
123
  return false;
124
  }
125
  return true;
@@ -223,14 +219,20 @@ game_html = """
223
  gameCanvas.removeChild(gameCanvas.firstChild);
224
  }
225
  createClouds();
226
- birds.push(new Bird()); // Start with one bird to ensure something happens
 
227
  gameLoop();
228
  }
229
 
230
  function gameLoop() {
231
- if (!gameRunning) return;
232
- if (Math.random() < 0.02) {
 
 
 
 
233
  birds.push(new Bird());
 
234
  }
235
  for (let i = birds.length - 1; i >= 0; i--) {
236
  if (!birds[i].update()) {
@@ -242,7 +244,7 @@ game_html = """
242
  explosions.splice(i, 1);
243
  }
244
  }
245
- requestAnimationFrame(gameLoop);
246
  }
247
 
248
  gameCanvas.addEventListener('click', (e) => {
@@ -262,6 +264,7 @@ game_html = """
262
  score += 10;
263
  scoreDisplay.textContent = `Score: ${score}`;
264
  hit = true;
 
265
  }
266
  }
267
  if (!hit) {
@@ -269,15 +272,16 @@ game_html = """
269
  miss.src = "data:audio/wav;base64,UklGRiQDAABXQVZFZm10IBAAAAABAAEAESsAABErAAABAAgAZGF0YQADAABkAGQAZABkAGQAfACEAJwAsAC8AMgA1ADsAOQA7ADkANQA0AC8AKgAnACMAHQAXABMAEQAPABEADwANAA0ADQALAAsACQAHAAUAAwABAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAA8AFgAaAB8AIQAnACsAMAAyADMANwA3ADcAMgA0ADAALAApACQAIQAbABYAEQAMAAUAAAAAAAAAAAAAAAAAAAAAAAAAAP//9//x//X/9f/4/wAABwANABYAHAAnADIAOABDAEsAVABdAGQAbQBzAH4AhQCKAJEAlQCYAJ4AnwCgAKIAoQCgAJwAmgCXAJIAjwCIAIMAfQB2AG4AZgBeAFQATABGAD4ANQAvACgAIgAaABUADAAIAAQAAQD+//r/9//0//H/7//u/+z/6//r/+r/6v/p/+n/6v/q/+v/7P/u/+//8f/z//X/+P/7//7/AQADAAYACQALABAAEQAUABYAGAAZAB0AHQAfACEAIgAkACUAJQAmACcAJwAoACkAKQAqACsAKwAsACwALQAtAC0ALQAuAC4ALgAuAC4ALgAtAC0ALQAsACwALAAqACkAKQAnACYAJgAkACMAIgAgAB8AHgAcABoAGQAYABYAFAAQAA4ADAAJAAcABQADAAEA//89//7//f/8//v/+v/5//j/9//2//X/9P/z//P/8v/x//D/8P/v/+7/7v/t/+3/7P/s/+v/6//q/+r/6v/p/+n/6f/p/+n/6f/p/+n/6f/p/+n/6v/q/+v/6//s/+z/7f/u/+7/7//w//H/8v/z//T/9f/2//f/+P/5//v//P/9/wAAAgADAAUABgAIAAkACwAMAA4AEAARACMACwAEAP//+//4//X/8v/v/+v/6P/l/+L/4P/e/9v/2f/X/9X/1P/S/9H/z//O/83/zf/M/8v/y//K/8r/yv/K/8v/y//L/8z/zf/O/8//0P/S/9P/1f/X/9j/2v/c/97/4f/j/+X/6P/q/+3/8P/z//X/+P/7//7/AQA=";
270
  miss.volume = 0.2;
271
  miss.play();
 
272
  }
273
  });
274
 
275
  restartButton.addEventListener('click', () => {
276
  initGame();
 
277
  });
278
 
279
- // Start the game explicitly
280
- initGame();
281
  });
282
  </script>
283
  </body>
@@ -291,7 +295,7 @@ def launch_game():
291
  # Create the Gradio app
292
  with gr.Blocks(title="Bird Shooter Game") as demo:
293
  gr.Markdown("# Bird Shooter Game")
294
- gr.Markdown("Click on the birds to shoot them and earn points! If nothing happens, try refreshing the page.")
295
  game_output = gr.HTML(label="Game", value=launch_game())
296
 
297
  # Launch the app
 
1
  import gradio as gr
2
 
3
+ # Updated HTML with fixes and debugging
4
  game_html = """
5
  <!DOCTYPE html>
6
  <html>
 
23
  <button id="restart-button">Restart</button>
24
  </div>
25
  <script>
 
26
  document.addEventListener('DOMContentLoaded', () => {
27
  const gameCanvas = document.getElementById('game-canvas');
28
  const scoreDisplay = document.getElementById('score');
 
64
  this.size = 30 + Math.random() * 20;
65
  this.element = this.createBirdElement();
66
  gameCanvas.appendChild(this.element);
67
+ console.log('Bird created at x:', this.x, 'y:', this.y);
68
  }
69
  createBirdElement() {
70
  const group = document.createElementNS("http://www.w3.org/2000/svg", "g");
 
115
  }
116
  if (this.x > 850) {
117
  this.remove();
118
+ console.log('Bird removed, remaining birds:', birds.length);
 
 
 
 
119
  return false;
120
  }
121
  return true;
 
219
  gameCanvas.removeChild(gameCanvas.firstChild);
220
  }
221
  createClouds();
222
+ birds.push(new Bird()); // Start with one bird
223
+ console.log('Game initialized');
224
  gameLoop();
225
  }
226
 
227
  function gameLoop() {
228
+ if (!gameRunning) {
229
+ console.log('Game stopped');
230
+ return;
231
+ }
232
+ console.log('Game loop running, birds:', birds.length);
233
+ if (Math.random() < 0.1) { // Increased spawn rate for testing
234
  birds.push(new Bird());
235
+ console.log('New bird spawned');
236
  }
237
  for (let i = birds.length - 1; i >= 0; i--) {
238
  if (!birds[i].update()) {
 
244
  explosions.splice(i, 1);
245
  }
246
  }
247
+ requestAnimationFrame(gameLoop); // Ensure continuous looping
248
  }
249
 
250
  gameCanvas.addEventListener('click', (e) => {
 
264
  score += 10;
265
  scoreDisplay.textContent = `Score: ${score}`;
266
  hit = true;
267
+ console.log('Bird hit, score:', score);
268
  }
269
  }
270
  if (!hit) {
 
272
  miss.src = "data:audio/wav;base64,UklGRiQDAABXQVZFZm10IBAAAAABAAEAESsAABErAAABAAgAZGF0YQADAABkAGQAZABkAGQAfACEAJwAsAC8AMgA1ADsAOQA7ADkANQA0AC8AKgAnACMAHQAXABMAEQAPABEADwANAA0ADQALAAsACQAHAAUAAwABAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAA8AFgAaAB8AIQAnACsAMAAyADMANwA3ADcAMgA0ADAALAApACQAIQAbABYAEQAMAAUAAAAAAAAAAAAAAAAAAAAAAAAAAP//9//x//X/9f/4/wAABwANABYAHAAnADIAOABDAEsAVABdAGQAbQBzAH4AhQCKAJEAlQCYAJ4AnwCgAKIAoQCgAJwAmgCXAJIAjwCIAIMAfQB2AG4AZgBeAFQATABGAD4ANQAvACgAIgAaABUADAAIAAQAAQD+//r/9//0//H/7//u/+z/6//r/+r/6v/p/+n/6v/q/+v/7P/u/+//8f/z//X/+P/7//7/AQADAAYACQALABAAEQAUABYAGAAZAB0AHQAfACEAIgAkACUAJQAmACcAJwAoACkAKQAqACsAKwAsACwALQAtAC0ALQAuAC4ALgAuAC4ALgAtAC0ALQAsACwALAAqACkAKQAnACYAJgAkACMAIgAgAB8AHgAcABoAGQAYABYAFAAQAA4ADAAJAAcABQADAAEA//89//7//f/8//v/+v/5//j/9//2//X/9P/z//P/8v/x//D/8P/v/+7/7v/t/+3/7P/s/+v/6//q/+r/6v/p/+n/6f/p/+n/6f/p/+n/6f/p/+n/6v/q/+v/6//s/+z/7f/u/+7/7//w//H/8v/z//T/9f/2//f/+P/5//v//P/9/wAAAgADAAUABgAIAAkACwAMAA4AEAARACMACwAEAP//+//4//X/8v/v/+v/6P/l/+L/4P/e/9v/2f/X/9X/1P/S/9H/z//O/83/zf/M/8v/y//K/8r/yv/K/8v/y//L/8z/zf/O/8//0P/S/9P/1f/X/9j/2v/c/97/4f/j/+X/6P/q/+3/8P/z//X/+P/7//7/AQA=";
273
  miss.volume = 0.2;
274
  miss.play();
275
+ console.log('Missed shot');
276
  }
277
  });
278
 
279
  restartButton.addEventListener('click', () => {
280
  initGame();
281
+ console.log('Game restarted');
282
  });
283
 
284
+ initGame(); // Start the game
 
285
  });
286
  </script>
287
  </body>
 
295
  # Create the Gradio app
296
  with gr.Blocks(title="Bird Shooter Game") as demo:
297
  gr.Markdown("# Bird Shooter Game")
298
+ gr.Markdown("Click on the birds to shoot them and earn points! If birds stop appearing, check the browser console (F12) for errors.")
299
  game_output = gr.HTML(label="Game", value=launch_game())
300
 
301
  # Launch the app