kunjgit · prachi-kurmi · May 11, 2024 · May 11, 2024 · May 11, 2024 · May 14, 2024
diff --git a/Games/Bubble_Hit/README.md b/Games/Bubble_Hit/README.md
@@ -0,0 +1,32 @@
+**Description 📃:**
+
+Bubble Hit is a fun game where you match numbers to pop bubbles. Look at the number in the box at the top left corner, then pop bubbles with the same number. It's easy and exciting! Keep popping bubbles to score points and beat the clock.
+
+
+**functionalities 🎮:**
+-> Tap or click on bubbles with the same number as the box to pop them.
+-> Score points for each correct bubble popped.
+-> Bubbles reshuffle after hitting the right number, keeping the game interesting.
+-> Race against the clock to score as many points as you can before time runs out.
+
+**How to play? 🕹️:**
+1) Look at the number displayed in the hit box at the top left corner of the screen.
+2) Tap or click on bubbles with the same number to pop them and earn points.
+3) Score 10 points for each correct bubble popped.
+4) After hitting the correct number, bubbles reshuffle to create new challenges.
+5) Keep popping bubbles to increase your score before time runs out.
+6) Challenge yourself to beat your high score in every game session!
+
+
+**Screenshots 📸:**
+
+![Game image](./assets/bubble_hit.png)
+![Game image](./assets/responsive.png)
+
+
+**Working video 📹:**
+
+![Game Video](./assets/Working_video.mp4)
+
+
+
diff --git a/Games/Bubble_Hit/assets/Working_video.mp4 b/Games/Bubble_Hit/assets/Working_video.mp4
diff --git a/Games/Bubble_Hit/assets/bubble_hit.png b/Games/Bubble_Hit/assets/bubble_hit.png
diff --git a/Games/Bubble_Hit/assets/favicon.png b/Games/Bubble_Hit/assets/favicon.png
diff --git a/Games/Bubble_Hit/assets/responsive.png b/Games/Bubble_Hit/assets/responsive.png
diff --git a/Games/Bubble_Hit/index.html b/Games/Bubble_Hit/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Bubble_Hit</title>
+    <link rel="stylesheet" href="style.css">
+    <link rel="icon" type="image/png" href="assets/favicon.png">
+</head>
+<body>
+    <div id="main">
+        <div id="panel">
+            <div id="ptop">
+                <div class="elem">
+                    <h4> Hit </h4>
+                    <div id = "hitvalue" class="box"> 6</div>
+                </div>
+                <div class="elem">
+                    <h4> Timer</h4>
+                    <div id = "timervalue"class="box">60</div>
+                </div>
+                <div class="elem">
+                    <h4> Score</h4>
+                    <div id = "scorevalue"class="box">0</div>
+                </div>
+            </div>
+            <div id="pbtm">
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Games/Bubble_Hit/script.js b/Games/Bubble_Hit/script.js
@@ -0,0 +1,59 @@
+let timer = 60;
+let score = 0;
+let random_num_hit = 0;
+
+function increase_score()
+{
+   score += 10;
+   document.querySelector("#scorevalue").textContent = score;
+}
+
+function make_bubble()
+{
+   let bubble_counter = " ";
+
+ for ( let i = 1; i<=102; i++)
+{
+   let random_num = Math.floor(Math.random()*10);
+   bubble_counter += `<div class="bubble"> ${random_num} </div>`; 
+}
+
+document.querySelector("#pbtm").innerHTML = bubble_counter;
+}
+
+function new_hit(){
+    random_num_hit = Math.floor(Math.random()*10);
+   document.querySelector("#hitvalue").textContent = random_num_hit;
+}
+
+function run_timer()
+{
+   let timerint = setInterval(function (){
+      if(timer>0)
+      {
+         timer--;
+         document.querySelector("#timervalue").textContent = timer;
+      }
+
+      else
+      {
+         clearInterval(timerint);
+         document.querySelector("#pbtm").innerHTML = `<h1> <i>Game Over</i><h1>`;
+      }
+   }, 1000);
+}
+
+document.querySelector("#pbtm").addEventListener("click",function(bubble){
+   let clickedNumber = Number(bubble.target.textContent);
+
+   if (clickedNumber === random_num_hit)
+   {
+      increase_score();
+      make_bubble();
+      new_hit();
+   }
+})
+
+run_timer();
+make_bubble();
+new_hit();
diff --git a/Games/Bubble_Hit/style.css b/Games/Bubble_Hit/style.css
@@ -0,0 +1,123 @@
+@import url('https://fonts.googleapis.com/css2?family=PT+Serif:wght@700&family=Signika+Negative:wght@500&display=swap');
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html, body {
+    width: 100%;
+    height: 100%;
+    font-family: 'PT Serif', serif;
+}
+
+#main {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    background-image: linear-gradient(to bottom, #2fdcdf, #00cef0, #00bdfa, #4fa9f9, #8492ea);
+}
+
+#panel {
+    overflow: hidden;
+    width: 80%;
+    height: 90%;
+    background-color: white;
+    border-radius: 10px;
+}
+
+#ptop {
+    padding: 0px 5%; 
+    justify-content: space-between;
+    align-items: center;
+    display: flex;
+    width: 100%;
+    height: 95px;
+    background-color: #00bbea;
+}
+
+.box {
+    padding: 10px;
+    border-radius: 5px;
+    background-color: white;
+    font-weight: 600;
+    font-size: 18px; 
+    padding: 10px 15px;
+    background-image: linear-gradient(to right bottom, #046eb7, #0072b7, #0077b8, #007bb7, #0b7fb7);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.1);
+    border: 1px solid #ddd;
+}
+
+.elem {
+    display: flex;
+    flex-direction: column; 
+    align-items: center;
+    gap: 10px; 
+    color: white;
+}
+
+.elem h4 {
+    font-weight: 500;
+    font-size: 18px; 
+    color: #333;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+#pbtm {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    padding: 10px;
+    width: 100%;
+    height: calc(100% - 95px);
+}
+
+.bubble {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 47px;
+    height: 47px;
+    background-image: linear-gradient(to bottom, #2fdcdf, #00cef0, #00bdfa, #4fa9f9, #8492ea);
+    border-radius: 50%;
+    color: #fff;
+    font-weight: 500;
+    font-size: 20px; 
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.1);
+    border: 2px solid #fff;
+}
+
+/* Media Query for screens with a maximum width of 600px */
+@media (max-width: 600px) {
+    #ptop {
+        padding: 0px 2%; 
+    }
+
+    .box {
+        font-size: 16px; 
+    }
+
+    .elem {
+        gap: 5px; 
+    }
+
+    .elem h4 {
+        font-size: 16px; 
+    }
+
+    .bubble {
+        width: 40px; 
+        height: 40px; 
+        font-size: 18px; 
+    }
+}
+
+.bubble:hover{
+    cursor: pointer;
+    background-image: linear-gradient(to top, #023e9c, #1545a2, #224ca8, #2c54ae, #355bb4);
+}