Add files via upload

AmarNarayanDwivedi · Feb 18, 2024 · e94402a · e94402a
1 parent f1ac706
commit e94402a
Show file tree

Hide file tree

Showing 4 changed files with 181 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1 @@
+# Bubble_Hit_game
diff --git a/index.html b/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Bubble Game</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <div id="MainCointainer">
+        <div id="mainBox">
+            <div id="headerPart">
+                <div class="Headerbox">
+                    <h2>Hit</h2>
+                    <div class="display" id="hitval"></div>
+
+                </div>
+                <div class="Headerbox">
+                    <h2>Timer</h2>
+                    <div id="Timerval" class="display"></div>
+
+                </div>
+                <div class="Headerbox">
+                    <h2>Score</h2>
+                    <div id="scoreval" class="display"></div>
+
+                </div>
+            </div>
+            <div id="ButtomPnl">
+                <div class="bubble"></div>
+
+
+            </div>
+        </div>
+
+    </div>
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,53 @@
+function makebubble(){
+
+    var clutter = '';
+    for(var i = 1; i<=102 ; i++) {
+        var rn = Math.floor(Math.random()*10);
+      clutter += `<div class="bubble">${rn}</div>`;
+    }
+    document.querySelector('#ButtomPnl').innerHTML = clutter ;
+}
+makebubble()
+
+var timer = 60;
+function tictic(){
+    var time = setInterval(function(){
+        if (timer > 0) {
+            timer --;
+            document.querySelector('#Timerval').innerHTML = timer;}
+        else {
+            clearInterval(time);
+            document.querySelector('#ButtomPnl').innerHTML= `<h1> Game Over</h1>`
+            }
+    } , 1000);
+
+}
+ tictic();
+
+ var hit ;
+ function hitcount() {
+    hit = Math.floor(Math.random()*10);
+    document.querySelector('#hitval').textContent = hit;
+ }
+ hitcount();
+
+var score = 0 ; 
+document.querySelector('#scoreval').textContent = score ;
+
+ function scorecount(){
+    score += 10;
+    document.querySelector('#scoreval').textContent = score ;
+ }
+
+
+
+ document.querySelector('#ButtomPnl').addEventListener('click',function(dets){
+    var clikednum = Number(dets.target.textContent);
+    console.log(clikednum)
+    if(clikednum === hit){
+        scorecount();
+        tictic();
+        makebubble();
+        hitcount();
+    }
+ })
diff --git a/style.css b/style.css
@@ -0,0 +1,87 @@
+*{
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+}
+
+html, body{
+    height: 100%;
+    width: 100%;
+}
+#MainCointainer{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    width: 100%;
+    background-color: rgb(109, 198, 233);
+
+}
+#mainBox{
+    height: 80%;
+    width: 80%;
+    background-color: white;
+    border-radius: 10px;
+    overflow: hidden;
+}
+
+#headerPart{
+    padding: 0px 20%;
+    display: flex;
+    align-items: center;
+    color: white;
+    justify-content: space-between;
+    width: 100%;
+    height: 100px;
+    background-color: rgb(39, 130, 195);
+}
+
+.Headerbox{
+    display: flex;
+    align-items: center;
+    gap: 20px;
+}
+
+.Headerbox h2{
+    font-weight: 500;
+    font-size: 22px;
+}
+
+.display{
+    color: rgb(10, 60, 126);
+    font-weight: 600;
+    font-size: 22px;
+    background-color: antiquewhite;
+    padding: 10px 20px;
+    border-radius: 5px;
+}
+
+#ButtomPnl{
+    display: flex;
+    gap: 10px;
+    flex-wrap: wrap;
+    padding: 20px;
+    width: 100%;
+    height: calc(100% - 100px);
+    justify-content: center;
+    align-items: center;
+
+}
+
+.bubble{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 60px;
+    height: 60px;
+    background-color: rgb(10, 60, 126);
+    border-radius: 50%;
+    color: white;
+    font-weight: 500 ;
+}
+
+.bubble:hover{
+    cursor: pointer;
+    background-color: rgb(53, 85, 244);
+}
+