kunjgit · kunjgit · Jun 25, 2024 · Jun 2, 2024 · Jun 2, 2024 · Jun 2, 2024
diff --git a/Games/Pop_the_Bubbles/Bubbles.jpg b/Games/Pop_the_Bubbles/Bubbles.jpg
diff --git a/Games/Pop_the_Bubbles/README.md b/Games/Pop_the_Bubbles/README.md
@@ -0,0 +1,26 @@
+# Pop The Bubbles!
+
+"Pop The Bubbles!" is a fast-paced, retro-style game where your reflexes and number recognition skills are put to the test. You have 60 seconds to pop as many bubbles as possible, focusing on bubbles with the current target number for bonus points. Perfect for players of all ages, it's easy to learn and endlessly fun!
+
+## Features
+
+- Fast-paced gameplay
+- Retro-style graphics
+- Reflex and number recognition challenge
+- Bonus points for popping bubbles with the target number
+- 60-second time limit for each round
+
+## How to Play
+
+1. Open the `index.html` file in your web browser.
+2. Click or tap on bubbles with the current target number to pop them.
+3. Aim to pop as many bubbles as possible within 60 seconds.
+4. Keep an eye on the target number for bonus points.
+5. Enjoy the fast-paced action and compete for the highest score!
+
+
+## Customization
+
+You can customize the game by modifying the `script.js` file. Adjust the gameplay mechanics, time limit, bubble appearance, and scoring system to suit your preferences.
+
+
diff --git a/Games/Pop_the_Bubbles/index.html b/Games/Pop_the_Bubbles/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Bubble Popping Game</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body style="background-image: url('Bubbles.jpg'); background-size: cover;">
+  <div class="game-container">
+    <h1>Pop The Bubbles!</h1>
+    <p id="instructions">Pop bubbles with the target number for bonus points!</p>
+    <div class="scoreboard">
+      <span class="box">Score:</span>
+      <span class="value-box" id="score-value">0</span>
+      <span class ="box">Time:</span>
+      <span class="value-box" id ="timer">0</span>
+    </div>
+    <div class="target-container">
+      <span class="box">Hit:</span>
+      <span class="value-box" id="hit">0</span>
+    </div>
+    <div id="bubble-container"></div>
+  </div>
+
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/Games/Pop_the_Bubbles/script.js b/Games/Pop_the_Bubbles/script.js
@@ -0,0 +1,85 @@
+document.addEventListener('DOMContentLoaded', (event) => {
+    const scoreValue = document.getElementById('score-value');
+    const timerValue = document.getElementById('timer');
+    const hitValue = document.getElementById('hit');
+    const bubbleContainer = document.getElementById('bubble-container');
+
+    let score = 0;
+    let timeLeft = 60;
+    let targetNumber = generateTargetNumber();
+
+    function startGame() {
+      updateTimer();
+      generateBubbles();
+      const gameInterval = setInterval(() => {
+        timeLeft--;
+        updateTimer();
+        if (timeLeft <= 0) {
+          clearInterval(gameInterval);
+          endGame();
+        }
+      }, 1000);
+    }
+
+    function updateTimer() {
+      timerValue.textContent = timeLeft;
+    }
+
+    function generateTargetNumber() {
+      const target = Math.floor(Math.random() * 10);
+      hitValue.textContent = target;
+      return target;
+    }
+
+    function generateBubbles() {
+      bubbleContainer.innerHTML = '';
+      for (let i = 0; i < 152; i++) {
+        const bubble = document.createElement('div');
+        bubble.className = 'bubble';
+        const bubbleNumber = Math.floor(Math.random() * 10);
+        bubble.textContent = bubbleNumber;
+        bubble.addEventListener('click', () => popBubble(bubble, bubbleNumber));
+        bubbleContainer.appendChild(bubble);
+      }
+    }
+
+    function popBubble(bubble, number) {
+      bubbleContainer.removeChild(bubble);
+      if (number === targetNumber) {
+        score += 10;
+      } else {
+        score++;
+      }
+      scoreValue.textContent = score;
+      targetNumber = generateTargetNumber();
+      refillBubbles();
+    }
+
+    function refillBubbles() {
+      const currentBubbles = bubbleContainer.children.length;
+      for (let i = currentBubbles; i < 152; i++) {
+        const bubble = document.createElement('div');
+        bubble.className = 'bubble';
+        const bubbleNumber = Math.floor(Math.random() * 10);
+        bubble.textContent = bubbleNumber;
+        bubble.addEventListener('click', () => popBubble(bubble, bubbleNumber));
+        bubbleContainer.appendChild(bubble);
+      }
+    }
+
+    function endGame() {
+      alert(`Game over! Your score is ${score}.`);
+      resetGame();
+    }
+
+    function resetGame() {
+      score = 0;
+      timeLeft = 60;
+      scoreValue.textContent = score;
+      timerValue.textContent = timeLeft;
+      targetNumber = generateTargetNumber();
+      generateBubbles();
+    }
+
+    startGame();
+  });
diff --git a/Games/Pop_the_Bubbles/style.css b/Games/Pop_the_Bubbles/style.css
@@ -0,0 +1,121 @@
+@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
+body {
+    font-family: 'Press Start 2P', cursive, sans-serif;
+    text-align: center;
+    background-image:'bg.jpg';
+    background-size: cover;
+  }
+
+  .game-container {
+    margin: 50px auto;
+    max-width: 1100px;
+    padding: 20px;
+
+  }
+
+  body {
+    font-family: 'Press Start 2P', cursive, sans-serif;
+    text-align: center;
+
+    background-image: 'bg.jpg';
+    background-size: cover; /* Gradient from dark blue to light blue */
+  }
+
+
+
+
+#scoreboard-container {
+    background-color: rgb(105, 84, 10); 
+    border-radius: 8px;
+    padding: 10px;
+    margin-bottom: 20px;
+}
+
+#scoreboard {
+    display: flex;
+    justify-content: space-around;
+}
+
+.bubble {
+    background-color: #e8f1a0;
+    color: #ffffff;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+    cursor: pointer;
+    user-select: none;
+    width: 50px;
+    height: 50px;
+}
+
+#target-container {
+    margin: 20px 0;
+    font-size: 20px;
+}
+
+
+  #scoreboard {
+    display: flex;
+    justify-content: space-around;
+    margin-bottom: 20px;
+  }
+  .box {
+    display: inline-block;
+    padding: 5px 10px; 
+    border: 1px solid #000000;
+    border-radius: 5px;
+    color: rgb(255, 255, 255); 
+    margin-right: 5px; 
+    background-color: 	#f5f550
+  }
+
+  .value-box {
+    display: inline-block;
+    padding: 5px 10px; 
+    border: 1px solid #000000;
+    border-radius: 5px;
+    color: rgb(255, 255, 255); 
+    margin-right: 5px; 
+    background-color: rgb(214, 75, 75); 
+
+
+  }
+
+
+
+
+  #bubble-container {
+    display: grid;
+    grid-template-columns: repeat(19, 1fr); 
+    grid-template-rows: repeat(8, 1fr); 
+    gap: 5px;
+    width: 1060px; 
+    height: 455px;
+    background-color: #A7FFEB;
+    border: 1px solid #01796b;
+    border-radius: 10px;
+    padding: 10px;
+    box-sizing: border-box;
+  }
+
+
+  .bubble {
+    background-color: #5DEBD7;
+    color: #000000;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+    cursor: pointer;
+    user-select: none;
+    width: 50px; 
+    height: 50px; 
+  }
+
+  #target-container {
+    margin: 20px 0;
+    font-size: 20px;
+  }
diff --git a/README.md b/README.md
@@ -323,19 +323,14 @@ This repository also provides one such platforms where contributers come over an
 | [Find_the_ball](https://github.com/kunjgit/GameZone/tree/main/Games/Find_the_ball)                  |
 
 |[Color The Page](https://github.com/kunjgit/GameZone/tree/main/Games/Color_The_Page)|
-
+|[Pop the Bubbles](https://github.com/kunjgit/GameZone/tree/main/Games/Pop_the_Bubbles)|
 [Fidget Spinner Game](https://github.com/kunjgit/GameZone/tree/main/Games/Fidget_Spinner_Game)|
 | [Color The Page](https://github.com/kunjgit/GameZone/tree/main/Games/Color_The_Page)|
 |[Building Blocks Game](https://github.com/kunjgit/GameZone/tree/main/Games/Building_Block_Game)|
 |[Cartoon character guessing game](https://github.com/kunjgit/GameZone/tree/main/Games/Cartoon_Character_Guessing_Game)|
-
 |[Carrom Board Game](https://github.com/kunjgit/GameZone/tree/main/Games/carrom)|
 | [Number_Recall_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Number_Recall_Game)               |
-
-
 | [Hit_the_hamster](https://github.com/kunjgit/GameZone/tree/main/Games/Hit_the_hamster)               |
-
-
 | [Forest_Guardian](https://github.com/kunjgit/GameZone/tree/main/Games/Forst_Guardian)                  |
 | [Sudoku_light_theme](https://github.com/kunjgit/GameZone/tree/main/Games/Sudoku_light_theme)                  |
 | [Find_the_ball](https://github.com/kunjgit/GameZone/tree/main/Games/Find_the_ball)                  |

diff --git a/assets/images/Bubbles.jpg b/assets/images/Bubbles.jpg