Update app.py
Browse files
app.py
CHANGED
@@ -1,6 +1,6 @@
|
|
1 |
import gradio as gr
|
2 |
|
3 |
-
# Updated HTML with
|
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 |
-
|
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
|
|
|
227 |
gameLoop();
|
228 |
}
|
229 |
|
230 |
function gameLoop() {
|
231 |
-
if (!gameRunning)
|
232 |
-
|
|
|
|
|
|
|
|
|
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
|
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
|
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
|