Skip to content

Commit 0caac8f

Browse files
Explorer-O7Explorer-O7
authored
Add files via upload
1 parent 204fb1d commit 0caac8f

File tree

3 files changed

+174
-0
lines changed

3 files changed

+174
-0
lines changed

‎src/index.html‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
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+
<title>Bubble Game (by Sheriyans Coding School)</title>
7+
<link rel="stylesheet" href="./style.css">
8+
</head>
9+
<body>
10+
<header></header>
11+
<main id="main">
12+
<div class="panel">
13+
<div class="panel-top">
14+
<div class="pt-elem">
15+
<h2>Hit</h2><div id="hit-val" class="value">--</div>
16+
</div>
17+
<div class="pt-elem">
18+
<h2>Timer</h2><div id="timer-val" class="value">60</div>
19+
</div>
20+
<div class="pt-elem">
21+
<h2>Score</h2><div id="score-val" class="value">0</div>
22+
</div>
23+
</div>
24+
<div class="panel-bottom">
25+
<div class="bubble">2</div>
26+
</div>
27+
</div>
28+
</main>
29+
<footer></footer>
30+
<script src="./script.js"></script>
31+
</body>
32+
</html>

‎src/script.js‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
const createBubbles = function(){
2+
let clutter = "";
3+
for(let i=0; i<168 ; i++){
4+
clutter += `<div class="bubble">${Math.floor(Math.random()*10)}</div>`;
5+
}
6+
document.querySelector(".panel-bottom").innerHTML = clutter;
7+
}
8+
9+
let timerVal = 5;
10+
const runTimer = function(){
11+
let timerInt = setInterval(function(){
12+
if(timerVal > 0){
13+
timerVal--;
14+
document.querySelector("#timer-val").textContent = timerVal;
15+
} else{
16+
clearInterval(timerInt);
17+
document.querySelector(".panel-bottom").innerHTML = `<h1 id="game-over">Game Over!</h1><br/><p>Click on this area to restart.</p>`;
18+
document.querySelector(".panel-bottom").addEventListener("click", function(){ location.reload(); });
19+
}
20+
}, 1000);
21+
}
22+
23+
let hitNumber = 0
24+
const generateHit = function(){
25+
hitNumber = Math.floor(Math.random()*10);
26+
document.querySelector("#hit-val").textContent = hitNumber;
27+
return hitNumber;
28+
}
29+
30+
let score = 0;
31+
const showScore = function(){
32+
document.querySelector(".panel-bottom").addEventListener('click', function(e){
33+
let choiceNumber = e.target.textContent;
34+
if(hitNumber == choiceNumber){
35+
score += 10;
36+
document.querySelector("#score-val").textContent = score;
37+
} else{
38+
if(timerVal != 0) alert("Wrong Choice!!");
39+
}
40+
createBubbles();
41+
generateHit();
42+
});
43+
}
44+
45+
createBubbles();
46+
runTimer();
47+
showScore();

‎src/style.css‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
font-family: Arial, Helvetica, sans-serif;
6+
}
7+
html, body {
8+
width: 100vw;
9+
height: 100vh;
10+
}
11+
#main {
12+
width: 100%;
13+
height: 100%;
14+
background-color: rgb(160, 194, 255);
15+
display: flex;
16+
justify-content: center;
17+
align-items: center;
18+
}
19+
.panel {
20+
width: 80%;
21+
height: 80%;
22+
background-color: #fff;
23+
border-radius: 10px;
24+
box-shadow: 0 0 10px #000;
25+
overflow: hidden;
26+
}
27+
.panel-top {
28+
width: 100%;
29+
height: 4rem;
30+
padding: 0 30%;
31+
gap: 10px;
32+
background-color: rgb(20, 60, 136);
33+
font-weight: 600;
34+
display: flex;
35+
justify-content: space-between;
36+
align-items: center;
37+
}
38+
.pt-elem {
39+
width: fit-content;
40+
color: #fff;
41+
gap: 15px;
42+
display: flex;
43+
align-items: center;
44+
}
45+
.value {
46+
padding: 5px 10px;
47+
background-color: #fff;
48+
color: rgb(20, 55, 120);
49+
font-size: 20px;
50+
font-weight: 600;
51+
border-radius: 5px;
52+
}
53+
.panel-bottom {
54+
width: 100%;
55+
height: calc(100% - 4rem);
56+
padding: 20px;
57+
gap: 10px;
58+
display: inline-flex;
59+
flex-wrap: wrap;
60+
justify-content: center;
61+
align-items: center;
62+
}
63+
#game-over {
64+
padding: 10px 20px;
65+
background-color: rgba(210, 210, 210, 0.5);
66+
color: rgb(20, 55, 120);
67+
border-radius: 10px;
68+
}
69+
.bubble {
70+
width: 40px;
71+
height: 40px;
72+
background-color: rgb(42, 102, 214);
73+
color: #fff;
74+
font-size: 1rem;
75+
font-weight: 500;
76+
border-radius: 50%;
77+
cursor: pointer;
78+
display: flex;
79+
justify-content: center;
80+
align-items: center;
81+
transition: all ease 0.3s;
82+
&:hover {
83+
background-color: rgb(20, 55, 120);
84+
transform: translateY(-2px);
85+
animation: bubble 0.7s linear alternate infinite;
86+
}
87+
}
88+
@keyframes bubble {
89+
0% {
90+
scale: 0.95;
91+
}
92+
100% {
93+
scale: 1.05 ;
94+
}
95+
}

0 commit comments

Comments
 (0)