Merge pull request #169 from AaadityaG/BubbleGame

Add: Bubble Game
Priyanshi662 · Jan 26, 2024 · 5d40117 · 5d40117
2 parents 73407b6 + 4109ecd
commit 5d40117
Show file tree

Hide file tree

Showing 6 changed files with 229 additions and 1 deletion.
diff --git a/Bubble-Game/Bubble Game.png b/Bubble-Game/Bubble Game.png
diff --git a/Bubble-Game/README.md b/Bubble-Game/README.md
@@ -0,0 +1,6 @@
+# Bubble-Game (<a href="https://bubble-game-roan.vercel.app/">Demo</a>)
+
+Deployed - https://bubble-game-roan.vercel.app/
+
+https://github.com/AaadityaG/Bubble-Game/assets/114663382/3e183b5a-269f-4852-8243-cd910ff54e40
+
diff --git a/Bubble-Game/index.html b/Bubble-Game/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Bubble Game</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div id="main">
+        <div id="panel">
+            <div id="ptop">
+                <div class="elem">
+                    <h2>Hit</h2>
+                    <div id="hitVal" class="box"></div>
+                </div>
+                <div class="elem">
+                    <h2>Timer</h2>
+                    <div id="timerVal"class="box"></div>
+                </div>
+                <div class="elem">
+                    <h2>Score</h2>
+                    <div id="scoreVal" class="box"></div>
+                </div>
+            </div>
+            <div id="pbtm">
+            </div>
+        </div>
+    </div>
+
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Bubble-Game/script.js b/Bubble-Game/script.js
@@ -0,0 +1,53 @@
+let score = 0;
+function increaseScore(){
+    score += 10;
+    document.querySelector('#scoreVal').textContent= score;
+} 
+
+
+
+function makeBubble(){
+    let clutter = "";
+
+    for(let i = 1; i <= 105; i++){
+        let rn = Math.floor(Math.random()*10);
+        clutter += `<div class="bubble">${rn}</div>`;
+    }
+
+    document.querySelector("#pbtm").innerHTML = clutter;
+}
+
+let timer = 60;
+function runTimer(){
+    let inter = setInterval(function(){
+        if(timer > 0){
+            timer--;
+            document.querySelector('#timerVal').textContent = timer;
+        }
+        else{
+            clearInterval(inter);
+            document.querySelector("#pbtm").innerHTML = `<button onclick="window.location.reload();">Start Again</button>` ;
+        }
+    }, 1000);
+}
+
+let rdn = 0;
+function getNewHit(){
+    rdn = Math.floor(Math.random()*10);
+    document.querySelector("#hitVal").textContent = rdn;
+}
+
+document.querySelector("#pbtm").addEventListener("click", (det)=>{
+    // alert("chal raha hai..");
+    let clickedNum = Number(det.target.textContent);
+    if(clickedNum === rdn){
+        increaseScore();
+        makeBubble();
+        getNewHit();
+    }
+})
+
+runTimer();
+makeBubble();
+getNewHit();
+increaseScore();
diff --git a/Bubble-Game/style.css b/Bubble-Game/style.css
@@ -0,0 +1,127 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500&display=swap');
+
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Poppins', sans-serif;
+}
+
+html, body{
+    width: 100%;
+    height: 100%;
+}
+
+#main{
+    width: 100%;
+    height: 100%;
+    background-color: #76c8ff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+#panel{
+    overflow: hidden;
+    width: 80%;
+    height: 80%;
+    background-color: white;
+    border-radius: 10px;
+}
+
+#ptop{
+    display: flex;
+    color: white;
+    padding: 0 30%;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    height: 100px;
+    background-color: #0a8ba2;
+}
+
+.elem{
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.elem h3{
+    font-weight: 500;
+}
+
+.box{
+    color: #064c7a;
+    font-weight: 500;
+    padding: 10px 20px;
+    border-radius: 5px;
+    background-color: white;
+}
+
+#pbtm{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    flex-wrap: wrap;
+    width: 100%;
+    height: calc(100% - 100px);
+    background-color: #c5e3ff;
+    padding: 20px;
+}
+
+#pbtm button{
+    display: block;
+    padding: 10px;
+    background-color:#0a8ba2;
+    color: white;
+    border: none;
+    border-radius: 5px;
+}
+
+#pbtm button:hover{
+    background-color:#08798d;
+}
+
+.bubble{
+    width: 60px;
+    height: 60px;
+    background-color: #0b6d7a;
+    color: white;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-weight: 500;
+}
+
+.bubble:hover{
+    background-color: #064952;
+}
+
+
+/* responsive */
+
+@media screen and (width < 480px) {
+    #ptop{
+        padding: 0 3%;
+    }
+    #ptop h2{
+        font-size: 18px;
+    }
+    .box{
+        padding: 10px;   
+    }
+
+    #pbtm{
+        padding: 10px;
+    }
+}
+
+@media screen and (width < 912px){
+    #ptop{
+        align-items: center;
+        justify-content: center;
+        gap: 30px;
+    }
+}
diff --git a/index.html b/index.html
@@ -404,6 +404,7 @@ <h2>Word Scramble</h2>
             Go!</button><br />
     </div>
 
+
     <div class="card">
         <img src="./Meme Generator/memes.jpg">
         <h2>Meme Generator</h2>
@@ -431,7 +432,14 @@ <h2>Highway Racing</h2>
           <!-- Button to navigate to page1.html -->
           <button onclick="window.location.href='./Assets/games/Highway-Race/index.html'">Go!</button><br>
        </div>
-
+
+  <div class="card">
+        <img src="./Bubble-Game/Bubble Game.png" />
+        <h2>Bubble Game</h2>
+        <!-- Button to navigate to page1.html -->
+        <button onclick="window.location.href='Bubble-Game/index.html' ">
+            Go!</button><br />
+    </div>
     <footer>
         <div class="footers">
             <div class="summary">