New Game added: Bubble Game (#253)

This engaging bubble game enhances user experience. Well-implemented and adds a fun dynamic to the project. ![image](https://github.com/Git21221/JS-beginner-projects/assets/99899150/e73873aa-367e-42a2-b569-b181105d6a47)
Git21221 · Oct 4, 2023 · e1be793 · e1be793
2 parents f69d379 + 5872381
commit e1be793
Show file tree

Hide file tree

Showing 5 changed files with 179 additions and 1 deletion.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,3 +1,3 @@
 {
-    "liveServer.settings.port": 5501
+    "liveServer.settings.port": 5502
 }
diff --git a/Bubble_game/.vscode/settings.json b/Bubble_game/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/Bubble_game/index.html b/Bubble_game/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Bubble Game</title>
+</head>
+
+<body>
+    <div id="main">
+        <div id="panel">
+            <div id="ptop">
+                <div  class="elem">
+                    <h2>Hit</h2>
+                    <div id="hitval" class="box">5</div>
+                </div>
+                <div class="elem">
+                    <h2>Timer</h2>
+                    <div id="timerval" class="box">60</div>
+                </div>
+                <div class="elem">
+                    <h2>Score</h2>
+                    <div id="scoreval" class="box">7</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,51 @@
+
+var timer = 60;
+var score = 0;
+var hitrn = 0;
+function increaseScore(){
+   score += 10;
+   document.querySelector('#scoreval').textContent = score; 
+}
+
+function getNewHit(){
+    hitrn = Math.floor(Math.random()*10);
+    document.querySelector('#hitval').textContent = hitrn;
+}
+
+function makeBubble(){
+clutter= "";
+for(i=1;i<=185;i++){
+    var rn = Math.floor(Math.random()*10);
+    clutter += `<div class="bubble">${rn}</div>`;
+}
+document.querySelector('#pbtm').innerHTML=clutter;
+
+};
+
+function runTimer(){
+    var timerint = setInterval(function(){
+        if(timer>0){
+            timer--;
+            document.querySelector('#timerval').textContent = timer;  
+        }
+        else{
+            clearInterval(timerint);
+            document.querySelector('#pbtm').innerHTML = `<h1>Game Over</h1>`
+        }
+
+    },1000);
+}
+
+document.querySelector("#pbtm").addEventListener("click",function(dets){
+    var clickedNumber = Number(dets.target.textContent);
+    if(clickedNumber === hitrn){
+        increaseScore();
+        getNewHit();
+        makeBubble();
+    }
+});
+
+runTimer();
+makeBubble();
+getNewHit();
+increaseScore();
diff --git a/Bubble_game/style.css b/Bubble_game/style.css
@@ -0,0 +1,88 @@
+*{
+    margin: 0;
+    padding: 0;
+    font-family: "Gilroy";
+    box-sizing: border-box;
+}
+
+html,body{
+    height: 100%;
+    width: 100%;
+}
+
+#main{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    width: 100%;
+    background-color: rgb(195, 249, 195);
+}
+
+#panel
+{
+    height: 80%;
+    width: 90%;
+    background-color: #fff;
+    border-radius: 10px;
+    overflow: hidden;
+}
+
+#ptop{
+    padding: 0px 30%;
+    display: flex;
+    align-items: center;
+    color: #fff;
+    justify-content: space-between;
+    width: 100%;
+    height: 100px;
+    background-color: rgb(56, 245, 56);
+}
+.elem{
+
+    display: flex;
+    align-items: center;
+    gap: 20px;
+}
+.elem h2{
+    font-weight: 600;
+    font-size: 22px;
+}
+
+.box{
+    color: rgb(10, 178, 38);
+    font-weight: 600;
+    font-size: 25px;
+    padding: 10px 20px;
+   background-color: #fff;
+   border-radius: 5px;
+
+}
+
+#pbtm{
+    flex-wrap: wrap;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    padding: 20px;
+    width: 100%;
+    height:calc(100% - 100px);
+
+}
+
+.bubble{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 40px;
+    height: 40px;
+    background-color: rgb(10, 178, 38);
+    border-radius: 50%;
+    font-weight: 500;
+}
+
+.bubble:hover{
+    cursor: pointer;
+    background-color:chocolate;
+}