Skip to content

Commit 04a6652

Browse files
swapnilsparshswapnilsparsh
committed
Fixed ✅.
1 parent 15f8c99 commit 04a6652

File tree

5 files changed

+153
-153
lines changed

5 files changed

+153
-153
lines changed

‎Open Source(GSSOC)/dirt.svg renamed to ‎95 - Whack a Mole Game/dirt.svg

File renamed without changes.

‎Open Source(GSSOC)/mole.svg renamed to ‎95 - Whack a Mole Game/mole.svg

File renamed without changes.

‎Open Source(GSSOC)/script.js renamed to ‎95 - Whack a Mole Game/script.js

+41-41
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,41 @@
1-
const holes = document.querySelectorAll('.hole');
2-
const scoreBoard = document.querySelector('.score');
3-
const moles = document.querySelectorAll('.mole');
4-
let lastHole;
5-
let timeUp = false;
6-
let score = 0;
7-
function randomTime(min, max) {
8-
return Math.round(Math.random() * (max - min) + min);
9-
}
10-
function randomHole(holes) {
11-
const idx = Math.floor(Math.random() * holes.length);
12-
const hole = holes[idx];
13-
if (hole === lastHole) {
14-
return randomHole(holes);
15-
}
16-
lastHole = hole;
17-
return hole;
18-
}
19-
function peep() {
20-
const time = randomTime(200, 1000);
21-
const hole = randomHole(holes);
22-
hole.classList.add('up');
23-
setTimeout(() => {
24-
hole.classList.remove('up');
25-
if (!timeUp) peep();
26-
}, time);
27-
}
28-
function startGame() {
29-
scoreBoard.textContent = 0;
30-
timeUp = false;
31-
score = 0;
32-
peep();
33-
setTimeout(() => timeUp = true, 10000)
34-
}
35-
function whack(e) {
36-
if(!e.isTrusted) return;
37-
score++;
38-
this.parentNode.classList.remove('up');
39-
scoreBoard.textContent = score;
40-
}
41-
moles.forEach(mole => mole.addEventListener('click', whack));
1+
const holes = document.querySelectorAll('.hole');
2+
const scoreBoard = document.querySelector('.score');
3+
const moles = document.querySelectorAll('.mole');
4+
let lastHole;
5+
let timeUp = false;
6+
let score = 0;
7+
function randomTime(min, max) {
8+
return Math.round(Math.random() * (max - min) + min);
9+
}
10+
function randomHole(holes) {
11+
const idx = Math.floor(Math.random() * holes.length);
12+
const hole = holes[idx];
13+
if (hole === lastHole) {
14+
return randomHole(holes);
15+
}
16+
lastHole = hole;
17+
return hole;
18+
}
19+
function peep() {
20+
const time = randomTime(200, 1000);
21+
const hole = randomHole(holes);
22+
hole.classList.add('up');
23+
setTimeout(() => {
24+
hole.classList.remove('up');
25+
if (!timeUp) peep();
26+
}, time);
27+
}
28+
function startGame() {
29+
scoreBoard.textContent = 0;
30+
timeUp = false;
31+
score = 0;
32+
peep();
33+
setTimeout(() => timeUp = true, 10000)
34+
}
35+
function whack(e) {
36+
if(!e.isTrusted) return;
37+
score++;
38+
this.parentNode.classList.remove('up');
39+
scoreBoard.textContent = score;
40+
}
41+
moles.forEach(mole => mole.addEventListener('click', whack));

‎Open Source(GSSOC)/style.css renamed to ‎95 - Whack a Mole Game/style.css

+67-67
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,68 @@
1-
@import url('https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap');
2-
html {
3-
box-sizing: border-box;
4-
font-size: 10px;
5-
6-
background-image: url("https://media.istockphoto.com/vectors/green-grass-lawn-with-clouds-and-sun-on-blue-sky-vector-id491628342?k=20&m=491628342&s=612x612&w=0&h=9Epm2f9lguyZl1kz_04700xEjFkxDd8haRouWBXIdBs=")
7-
}
8-
*, *:before, *:after {
9-
box-sizing: inherit;
10-
}
11-
body {
12-
padding: 0;
13-
margin: 0;
14-
font-family: 'Shadows Into Light', cursive;
15-
}
16-
.start{
17-
text-align: center;
18-
}
19-
h1 {
20-
text-align: center;
21-
font-size: 5rem;
22-
margin-bottom: 0;
23-
}
24-
.score {
25-
color: rgb(104, 94, 114);
26-
margin-top: 0%;
27-
}
28-
.game {
29-
width: 800px;
30-
height: 400px;
31-
display: flex;
32-
flex-wrap: wrap;
33-
margin: 0 auto;
34-
}
35-
.hole {
36-
flex: 1 0 33.33%;
37-
overflow: hidden;
38-
position: relative;
39-
}
40-
.hole:after {
41-
display: block;
42-
background: url(dirt.svg) bottom center no-repeat;
43-
background-size: contain;
44-
content: '';
45-
width: 100%;
46-
height:70px;
47-
position: absolute;
48-
z-index: 2;
49-
bottom: -30px;
50-
}
51-
.mole {
52-
background: url('mole.svg') bottom center no-repeat;
53-
background-size: 50%;
54-
position: absolute;
55-
top: 100%;
56-
width: 100%;
57-
height: 100%;
58-
transition:all 0.4s ease;
59-
}
60-
.hole.up .mole {
61-
top: 0;
62-
}
63-
button{
64-
background: rgba(190, 19, 124, 0.2);
65-
border: red;
66-
font-size: 3rem;
67-
cursor: pointer;
1+
@import url('https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap');
2+
html {
3+
box-sizing: border-box;
4+
font-size: 10px;
5+
6+
background-image: url("https://media.istockphoto.com/vectors/green-grass-lawn-with-clouds-and-sun-on-blue-sky-vector-id491628342?k=20&m=491628342&s=612x612&w=0&h=9Epm2f9lguyZl1kz_04700xEjFkxDd8haRouWBXIdBs=")
7+
}
8+
*, *:before, *:after {
9+
box-sizing: inherit;
10+
}
11+
body {
12+
padding: 0;
13+
margin: 0;
14+
font-family: 'Shadows Into Light', cursive;
15+
}
16+
.start{
17+
text-align: center;
18+
}
19+
h1 {
20+
text-align: center;
21+
font-size: 5rem;
22+
margin-bottom: 0;
23+
}
24+
.score {
25+
color: rgb(104, 94, 114);
26+
margin-top: 0%;
27+
}
28+
.game {
29+
width: 800px;
30+
height: 400px;
31+
display: flex;
32+
flex-wrap: wrap;
33+
margin: 0 auto;
34+
}
35+
.hole {
36+
flex: 1 0 33.33%;
37+
overflow: hidden;
38+
position: relative;
39+
}
40+
.hole:after {
41+
display: block;
42+
background: url(dirt.svg) bottom center no-repeat;
43+
background-size: contain;
44+
content: '';
45+
width: 100%;
46+
height:70px;
47+
position: absolute;
48+
z-index: 2;
49+
bottom: -30px;
50+
}
51+
.mole {
52+
background: url('mole.svg') bottom center no-repeat;
53+
background-size: 50%;
54+
position: absolute;
55+
top: 100%;
56+
width: 100%;
57+
height: 100%;
58+
transition:all 0.4s ease;
59+
}
60+
.hole.up .mole {
61+
top: 0;
62+
}
63+
button{
64+
background: rgba(190, 19, 124, 0.2);
65+
border: red;
66+
font-size: 3rem;
67+
cursor: pointer;
6868
}

‎Open Source(GSSOC)/whack.html renamed to ‎95 - Whack a Mole Game/whack.html

+45-45
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,46 @@
1-
<!DOCTYPE html>
2-
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
5-
<title>Whack A Mole!</title>
6-
<link href='https://fonts.googleapis.com/css?family=Amatic+SC:400,700' rel='stylesheet' type='text/css'>
7-
<link rel="stylesheet" href="style.css">
8-
</head>
9-
<body>
10-
<h1>Whack-a-mole!</h1>
11-
<h1 class="score"> 0</h1>
12-
<div class = "start">
13-
<button onClick="startGame()">Start!</button>
14-
</div>
15-
<div class="game">
16-
<div class="hole hole1">
17-
<div class="mole"></div>
18-
</div>
19-
<div class="hole hole2">
20-
<div class="mole"></div>
21-
</div>
22-
<div class="hole hole3">
23-
<div class="mole"></div>
24-
</div>
25-
<div class="hole hole4">
26-
<div class="mole"></div>
27-
</div>
28-
<div class="hole hole5">
29-
<div class="mole"></div>
30-
</div>
31-
<div class="hole hole6">
32-
<div class="mole"></div>
33-
</div>
34-
<div class="hole hole7">
35-
<div class="mole"></div>
36-
</div>
37-
<div class="hole hole8">
38-
<div class="mole"></div>
39-
</div>
40-
<div class="hole hole9">
41-
<div class="mole"></div>
42-
</div>
43-
</div>
44-
<script src="script.js"></script>
45-
</body>
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Whack A Mole!</title>
6+
<link href='https://fonts.googleapis.com/css?family=Amatic+SC:400,700' rel='stylesheet' type='text/css'>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<h1>Whack-a-mole!</h1>
11+
<h1 class="score"> 0</h1>
12+
<div class = "start">
13+
<button onClick="startGame()">Start!</button>
14+
</div>
15+
<div class="game">
16+
<div class="hole hole1">
17+
<div class="mole"></div>
18+
</div>
19+
<div class="hole hole2">
20+
<div class="mole"></div>
21+
</div>
22+
<div class="hole hole3">
23+
<div class="mole"></div>
24+
</div>
25+
<div class="hole hole4">
26+
<div class="mole"></div>
27+
</div>
28+
<div class="hole hole5">
29+
<div class="mole"></div>
30+
</div>
31+
<div class="hole hole6">
32+
<div class="mole"></div>
33+
</div>
34+
<div class="hole hole7">
35+
<div class="mole"></div>
36+
</div>
37+
<div class="hole hole8">
38+
<div class="mole"></div>
39+
</div>
40+
<div class="hole hole9">
41+
<div class="mole"></div>
42+
</div>
43+
</div>
44+
<script src="script.js"></script>
45+
</body>
4646
</html>

0 commit comments

Comments
 (0)