Skip to content

Commit 6658fd7

Browse files
author
vanntile
committed
Day 30
1 parent 65ebe7f commit 6658fd7

6 files changed

Lines changed: 123 additions & 101 deletions

File tree

‎30 - Whack A Mole/index-FINISHED.html‎

Lines changed: 0 additions & 87 deletions
This file was deleted.

30 - Whack A Mole/index-START.html renamed to 30 - Whack A Mole/index.html

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
45
<meta charset="UTF-8">
56
<title>Whack A Mole!</title>
67
<link href='https://fonts.googleapis.com/css?family=Amatic+SC:400,700' rel='stylesheet' type='text/css'>
78
<link rel="stylesheet" href="style.css">
89
</head>
10+
911
<body>
1012

11-
<h1>Whack-a-mole! <span class="score">0</span></h1>
12-
<button onClick="startGame()">Start!</button>
13+
<h1><span class="title">Whack-a-mole!</span> <span class="score">0</span></h1>
1314

1415
<div class="game">
1516
<div class="hole hole1">
@@ -31,12 +32,9 @@ <h1>Whack-a-mole! <span class="score">0</span></h1>
3132
<div class="mole"></div>
3233
</div>
3334
</div>
35+
<button>Start!</button>
3436

35-
<script>
36-
const holes = document.querySelectorAll('.hole');
37-
const scoreBoard = document.querySelector('.score');
38-
const moles = document.querySelectorAll('.mole');
39-
40-
</script>
37+
<script src="script.js"></script>
4138
</body>
39+
4240
</html>

‎30 - Whack A Mole/script.js‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
const holes = document.querySelectorAll('.hole')
2+
const scoreBoard = document.querySelector('.score')
3+
const title = document.querySelector('.title')
4+
const moles = document.querySelectorAll('.mole')
5+
const startButton = document.querySelector('button')
6+
7+
const min = 200 // minimum time in miliseconds
8+
const max = 1000 // maximum time in miliseconds
9+
const duration = 20 // maximum game time in seconds
10+
11+
let lastHole
12+
let timeUp = true
13+
let score
14+
15+
const randomTime = (min, max) => {
16+
return Math.round(Math.random() * (max - min) + min)
17+
}
18+
19+
const randomHole = (holes) => {
20+
const idx = Math.floor(Math.random() * holes.length)
21+
const hole = holes[idx]
22+
23+
if (hole === lastHole) {
24+
return randomHole(holes)
25+
}
26+
27+
lastHole = hole
28+
return hole
29+
}
30+
31+
const peep = () => {
32+
const time = randomTime(min, max)
33+
const hole = randomHole(holes)
34+
35+
hole.classList.add('up')
36+
setTimeout(() => {
37+
hole.classList.remove('up')
38+
39+
if (!timeUp) {
40+
peep()
41+
} else {
42+
title.textContent = 'Your score is'
43+
}
44+
}, time)
45+
}
46+
47+
const startGame = () => {
48+
score = 0
49+
scoreBoard.textContent = 0
50+
title.textContent = 'Whack-a-mole!'
51+
timeUp = false
52+
53+
peep()
54+
setTimeout(() => {
55+
timeUp = true
56+
}, (duration * 1000))
57+
}
58+
59+
const bonk = function (e) {
60+
if (!e.isTrusted) return
61+
62+
score++
63+
this.classList.remove('up')
64+
scoreBoard.textContent = score
65+
}
66+
67+
moles.forEach(mole => mole.addEventListener('click', bonk))
68+
69+
startButton.addEventListener('click', () => timeUp && startGame())

‎30 - Whack A Mole/style.css‎

Lines changed: 47 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,10 @@ html {
99
}
1010

1111
body {
12+
width: 101vw;
13+
height: 100vh;
14+
overflow-x: hidden;
15+
display: block;
1216
padding: 0;
1317
margin: 0;
1418
font-family: 'Amatic SC', cursive;
@@ -22,15 +26,17 @@ h1 {
2226
}
2327

2428
.score {
25-
background: rgba(255,255,255,0.2);
29+
background: rgba(255, 255, 255, 0.2);
2630
padding: 0 3rem;
2731
line-height: 1;
2832
border-radius: 1rem;
2933
}
3034

3135
.game {
32-
width: 600px;
33-
height: 400px;
36+
width: 100%;
37+
height: 100%;
38+
max-width: 760px;
39+
max-height: 500px;
3440
display: flex;
3541
flex-wrap: wrap;
3642
margin: 0 auto;
@@ -48,7 +54,7 @@ h1 {
4854
background-size: contain;
4955
content: '';
5056
width: 100%;
51-
height:70px;
57+
height: 70px;
5258
position: absolute;
5359
z-index: 2;
5460
bottom: -30px;
@@ -61,9 +67,45 @@ h1 {
6167
top: 100%;
6268
width: 100%;
6369
height: 100%;
64-
transition:all 0.4s;
70+
transition: all 0.4s;
6571
}
6672

6773
.hole.up .mole {
6874
top: 0;
6975
}
76+
77+
button {
78+
display: block;
79+
border: none;
80+
margin: 5em auto 0;
81+
padding: 18px;
82+
border-radius: 6px;
83+
font-size: 28px;
84+
font-weight: bold;
85+
line-height: 32px;
86+
background: #222;
87+
color: #ffc600;
88+
text-transform: capitalize;
89+
letter-spacing: 1px;
90+
transform: scale(1);
91+
transition: transform .3s;
92+
}
93+
94+
button:hover {
95+
background: #000;
96+
transform: scale(1.2);
97+
cursor: pointer;
98+
}
99+
100+
@media screen and (max-width: 768px) {
101+
h1 {
102+
font-size: 5rem
103+
}
104+
.hole:after {
105+
height: 84px;
106+
bottom: -28px;
107+
}
108+
button {
109+
margin-top: 1em
110+
}
111+
}

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,4 +50,4 @@ Check the course at [https://JavaScript30.com](https://JavaScript30.com)
5050
27. [x] [Click and Drag](https://vanntile.github.io/JavaScript30/27%20-%20Click%20and%20Drag)
5151
28. [x] [Video Speed Controller](https://vanntile.github.io/JavaScript30/28%20-%20Video%20Speed%20Controller)
5252
29. [x] [Countdown Timer](https://vanntile.github.io/JavaScript30/29%20-%20Countdown%20Timer)
53-
30. [ ] Whack A Mole
53+
30. [x] [Whack A Mole](https://vanntile.github.io/JavaScript30/30%20-%20Whack%20A%20Mole)

‎assets/img/30 - Whack A Mole.png‎

53.3 KB
Loading

0 commit comments

Comments
 (0)