Skip to content

Commit b49cead

Browse files
Ruhi14Ruhi14
committed
bubble
1 parent 0e82858 commit b49cead

File tree

3 files changed

+160
-0
lines changed

3 files changed

+160
-0
lines changed

‎BubbleGame/Ruhi14/index.html

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href="style.css">
7+
<title>Bubble Game</title>
8+
</head>
9+
<body>
10+
<div class="outer-box">
11+
<div class="panel-top" id="ptop">
12+
<div class="score">
13+
<h2>hit</h2>
14+
<p id="hitNum">5</p>
15+
</div>
16+
<div class="score">
17+
<h2>timer</h2>
18+
<p id="timerInterval">60</p>
19+
</div>
20+
<div class="score">
21+
<h2>score</h2>
22+
<p id="scoreVal">0</p>
23+
</div>
24+
</div>
25+
<div class="panel-bottom" id="pbtm">
26+
<div class="bubble">
27+
5
28+
</div>
29+
</div>
30+
</div>
31+
<script src="script.js"></script>
32+
</body>
33+
</html>

‎BubbleGame/Ruhi14/script.js

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
var timer = 60;
2+
var score = 0;
3+
var hitrn;
4+
5+
6+
function increaseScore() {
7+
score += 10;
8+
document.querySelector("#scoreVal").textContent = score;
9+
}
10+
11+
function getNewHit() {
12+
hitrn = Math.floor(Math.random() * 10);
13+
document.querySelector("#hitNum").textContent = hitrn;
14+
}
15+
16+
17+
18+
function makeBubble() {
19+
var clutter = "";
20+
for (var i = 1; i <= 180; i++) {
21+
var rn = Math.floor(Math.random() * 10)
22+
clutter += `<div class="bubble">${rn}</div>`;
23+
}
24+
document.querySelector("#pbtm").innerHTML = clutter;
25+
}
26+
27+
28+
29+
function runTimer() {
30+
var timerInt = setInterval(function () {
31+
if (timer > 0) {
32+
timer--;
33+
document.querySelector("#timerInterval").textContent = timer;
34+
}
35+
else {
36+
clearInterval(timerInt);
37+
document.querySelector("#pbtm").innerHTML = `<h1>Game Over <br>
38+
Your Score is = ${score}</h1>`;
39+
document.querySelector("#hitNum").textContent = 0;
40+
document.querySelector("#scoreVal").textContent = 0;
41+
}
42+
}, 1000);
43+
}
44+
45+
46+
document.querySelector("#pbtm")
47+
.addEventListener("click", function(dets){
48+
var clickednum = Number(dets.target.textContent);
49+
if(clickednum == hitrn) {
50+
increaseScore();
51+
makeBubble();
52+
getNewHit();
53+
}
54+
});
55+
56+
runTimer();
57+
makeBubble();
58+
getNewHit();

‎BubbleGame/Ruhi14/style.css

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
*{
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
overflow: hidden;
6+
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
7+
}
8+
body {
9+
background:rgb(181, 181, 255);
10+
}
11+
.outer-box {
12+
border: 0px solid red;
13+
border-radius: 12px;
14+
height: 90vh;
15+
width: 80%;
16+
margin: auto;
17+
margin-top: 30px;
18+
}
19+
.panel-top {
20+
display: flex;
21+
flex-direction: row;
22+
padding: 20px 30%;
23+
justify-content: space-around;
24+
border: 0px solid red;
25+
background: rgb(61,61,30);
26+
color: white;
27+
}
28+
.score {
29+
display: flex;
30+
flex-direction: row;
31+
gap: 10px;
32+
}
33+
.score h2 {
34+
font-size: 25px;
35+
}
36+
.score p{
37+
font-size: 25px;
38+
border: 2px solid white;
39+
border-radius: 5px;
40+
background: white;
41+
color: rgb(61,61,30);
42+
font-weight: 400;
43+
width: 50px;
44+
display: flex;
45+
justify-content: center;
46+
}
47+
.panel-bottom {
48+
background:rgb(255, 255, 255);
49+
height: 90%;
50+
}
51+
52+
53+
.bubble {
54+
display: inline-block;
55+
padding-left: 18px;
56+
padding-top: 10px;
57+
font-size: 25px;
58+
background: rgb(61,61,30);
59+
margin: 8px;
60+
color: white;
61+
border-radius: 50%;
62+
height: 50px;
63+
width: 50px;
64+
}
65+
.bubble:hover {
66+
background: rgb(61, 61, 30);
67+
color: rgb(145, 228, 50);
68+
cursor: pointer;
69+
}

0 commit comments

Comments
 (0)