Hugging Face's logo

Spaces:
Etik94
/
trouble-bubble
Running

App Files Community
1
Etik94 commited on
Commit
aa5b92d
·
verified ·
1 Parent(s): 650e93a

Let this game run on a PC, MAC on a phone or on a tablet - Follow Up Deployment

Browse files
Files changed (2) hide show
  1. index.html +42 -5
  2. prompts.txt +2 -1
index.html CHANGED
@@ -2,7 +2,7 @@
2
  <html lang="en">
3
  <head>
4
  <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Bubble Trouble - Fun Physics Game</title>
7
  <link rel="icon" type="image/x-icon" href="/favicon.ico">
8
  <script src="https://cdn.tailwindcss.com"></script>
@@ -16,6 +16,13 @@
16
  height: 100vh;
17
  position: relative;
18
  overflow: hidden;
 
 
 
 
 
 
 
19
  }
20
  .bubble {
21
  position: absolute;
@@ -308,7 +315,8 @@
308
  // Create game container
309
  const gameContainer = document.createElement('div');
310
  gameContainer.id = 'gameArea';
311
- gameContainer.className = 'w-full h-96 bg-black/20 rounded-xl relative overflow-hidden';
 
312
  gameContainer.innerHTML = `
313
  <div class="absolute inset-0 flex items-center justify-center">
314
  <p class="text-2xl">Pop the smileys! Score: <span id="scoreDisplay">0</span></p>
@@ -330,7 +338,9 @@
330
  if (!gameArea) return;
331
 
332
  const smiley = document.createElement('div');
333
- smiley.className = 'absolute cursor-pointer text-4xl animate-bounce';
 
 
334
  smiley.innerHTML = ['😀', '😊', '🤩', '😎', '🥳'][Math.floor(Math.random() * 5)];
335
  smiley.style.left = `${Math.random() * 80 + 10}%`;
336
  smiley.style.top = `${Math.random() * 80 + 10}%`;
@@ -344,17 +354,44 @@
344
  gameArea.appendChild(smiley);
345
 
346
  // Remove smiley after random time (0.5-2s)
347
- setTimeout(() => {
 
348
  if (smiley.parentNode) smiley.remove();
349
  }, 500 + Math.random() * 1500);
 
 
 
 
 
 
 
 
 
 
 
350
 
351
  // Spawn next smiley after random delay (0.2-0.8s)
352
- setTimeout(spawnSmiley, 200 + Math.random() * 600);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
353
  }
354
 
355
  function endGame() {
356
  gameActive = false;
357
  clearTimeout(gameTimeout);
 
358
 
359
  const gameArea = document.getElementById('gameArea');
360
  gameArea.innerHTML = `
 
2
  <html lang="en">
3
  <head>
4
  <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
6
  <title>Bubble Trouble - Fun Physics Game</title>
7
  <link rel="icon" type="image/x-icon" href="/favicon.ico">
8
  <script src="https://cdn.tailwindcss.com"></script>
 
16
  height: 100vh;
17
  position: relative;
18
  overflow: hidden;
19
+ touch-action: manipulation;
20
+ }
21
+ .game-area {
22
+ width: 100%;
23
+ height: 60vh;
24
+ min-height: 300px;
25
+ max-height: 600px;
26
  }
27
  .bubble {
28
  position: absolute;
 
315
  // Create game container
316
  const gameContainer = document.createElement('div');
317
  gameContainer.id = 'gameArea';
318
+ gameContainer.className = 'game-area bg-black/20 rounded-xl relative overflow-hidden';
319
+ gameContainer.style.touchAction = 'manipulation';
320
  gameContainer.innerHTML = `
321
  <div class="absolute inset-0 flex items-center justify-center">
322
  <p class="text-2xl">Pop the smileys! Score: <span id="scoreDisplay">0</span></p>
 
338
  if (!gameArea) return;
339
 
340
  const smiley = document.createElement('div');
341
+ smiley.className = 'absolute cursor-pointer text-4xl animate-bounce select-none';
342
+ smiley.style.userSelect = 'none';
343
+ smiley.style.webkitUserSelect = 'none';
344
  smiley.innerHTML = ['😀', '😊', '🤩', '😎', '🥳'][Math.floor(Math.random() * 5)];
345
  smiley.style.left = `${Math.random() * 80 + 10}%`;
346
  smiley.style.top = `${Math.random() * 80 + 10}%`;
 
354
  gameArea.appendChild(smiley);
355
 
356
  // Remove smiley after random time (0.5-2s)
357
+ // Auto-remove smiley if not clicked
358
+ const removeTimeout = setTimeout(() => {
359
  if (smiley.parentNode) smiley.remove();
360
  }, 500 + Math.random() * 1500);
361
+
362
+ // Touch/click handler
363
+ const handleInteraction = () => {
364
+ clearTimeout(removeTimeout);
365
+ score++;
366
+ document.getElementById('scoreDisplay').textContent = score;
367
+ smiley.remove();
368
+ };
369
+
370
+ smiley.addEventListener('click', handleInteraction);
371
+ smiley.addEventListener('touchend', handleInteraction);
372
 
373
  // Spawn next smiley after random delay (0.2-0.8s)
374
+ // Use requestAnimationFrame for better performance
375
+ const spawnDelay = 200 + Math.random() * 600;
376
+ let lastTime = performance.now();
377
+
378
+ const checkSpawn = (currentTime) => {
379
+ if (currentTime - lastTime >= spawnDelay) {
380
+ spawnSmiley();
381
+ } else if (gameActive) {
382
+ requestAnimationFrame(checkSpawn);
383
+ }
384
+ };
385
+
386
+ if (gameActive) {
387
+ requestAnimationFrame(checkSpawn);
388
+ }
389
  }
390
 
391
  function endGame() {
392
  gameActive = false;
393
  clearTimeout(gameTimeout);
394
+ cancelAnimationFrame(spawnSmiley);
395
 
396
  const gameArea = document.getElementById('gameArea');
397
  gameArea.innerHTML = `
prompts.txt CHANGED
@@ -7,4 +7,5 @@ delete that
7
  Delete it
8
  Put this in the Center of the Page
9
  Let the game take around 30 Seconds and the Data ? your Name, Institution and Score should be placed in a excel sheet after the 30 seconds it should pop up a congratulation sigh for around 5 seconds and after that it should get back to the fist page
10
- Put this backround on the next page
 
 
7
  Delete it
8
  Put this in the Center of the Page
9
  Let the game take around 30 Seconds and the Data ? your Name, Institution and Score should be placed in a excel sheet after the 30 seconds it should pop up a congratulation sigh for around 5 seconds and after that it should get back to the fist page
10
+ Put this backround on the next page
11
+ Let this game run on a PC, MAC on a phone or on a tablet