Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 05ef67f

Browse files
Updated Whack A Mole ui & sound
1 parent f413484 commit 05ef67f

File tree

3 files changed

+102
-65
lines changed

3 files changed

+102
-65
lines changed
63.4 KB
Binary file not shown.
Lines changed: 54 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,19 @@
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>
13+
<h1>Whack-a-mole!</h1>
14+
<h2>Score:
15+
<span class="score">0</span>
16+
</h2>
1217
<button onClick="startGame()">Start!</button>
1318

1419
<div class="game">
@@ -31,57 +36,61 @@ <h1>Whack-a-mole! <span class="score">0</span></h1>
3136
<div class="mole"></div>
3237
</div>
3338
</div>
39+
<audio src="clap.wav"></audio>
40+
<script>
41+
const holes = document.querySelectorAll('.hole');
42+
const scoreBoard = document.querySelector('.score');
43+
const moles = document.querySelectorAll('.mole');
44+
const clapSound = document.querySelector('audio');
45+
let lastHole;
46+
let timeUp = false;
47+
let score = 0;
3448

35-
<script>
36-
const holes = document.querySelectorAll('.hole');
37-
const scoreBoard = document.querySelector('.score');
38-
const moles = document.querySelectorAll('.mole');
39-
let lastHole;
40-
let timeUp = false;
41-
let score = 0;
42-
43-
function randomTime(min, max) {
44-
return Math.round(Math.random() * (max - min) + min);
45-
}
49+
function randomTime(min, max) {
50+
return Math.round(Math.random() * (max - min) + min);
51+
}
4652

47-
function randomHole(holes) {
48-
const idx = Math.floor(Math.random() * holes.length);
49-
const hole = holes[idx];
50-
if (hole === lastHole) {
51-
console.log('Ah nah thats the same one bud');
52-
return randomHole(holes);
53+
function randomHole(holes) {
54+
const idx = Math.floor(Math.random() * holes.length);
55+
const hole = holes[idx];
56+
if (hole === lastHole) {
57+
console.log('Ah nah thats the same one bud');
58+
return randomHole(holes);
59+
}
60+
lastHole = hole;
61+
return hole;
5362
}
54-
lastHole = hole;
55-
return hole;
56-
}
5763

58-
function peep() {
59-
const time = randomTime(200, 1000);
60-
const hole = randomHole(holes);
61-
hole.classList.add('up');
62-
setTimeout(() => {
63-
hole.classList.remove('up');
64-
if (!timeUp) peep();
65-
}, time);
66-
}
64+
function peep() {
65+
const time = randomTime(250, 1000);
66+
const hole = randomHole(holes);
67+
hole.classList.add('up');
68+
setTimeout(() => {
69+
hole.classList.remove('up');
70+
if (!timeUp) peep();
71+
}, time);
72+
}
6773

68-
function startGame() {
69-
scoreBoard.textContent = 0;
70-
timeUp = false;
71-
score = 0;
72-
peep();
73-
setTimeout(() => timeUp = true, 10000)
74-
}
74+
function startGame() {
75+
scoreBoard.textContent = 0;
76+
timeUp = false;
77+
score = 0;
78+
peep();
79+
setTimeout(() => timeUp = true, 10000)
80+
}
7581

76-
function bonk(e) {
77-
if(!e.isTrusted) return; // cheater!
78-
score++;
79-
this.classList.remove('up');
80-
scoreBoard.textContent = score;
81-
}
82+
function bonk(e) {
83+
if (!e.isTrusted) return; // cheater!
84+
score++;
85+
this.classList.remove('up');
86+
scoreBoard.textContent = score;
87+
clapSound.currentTime = 0;
88+
clapSound.play();
89+
}
8290

83-
moles.forEach(mole => mole.addEventListener('click', bonk));
91+
moles.forEach(mole => mole.addEventListener('click', bonk));
8492

85-
</script>
93+
</script>
8694
</body>
95+
8796
</html>

‎Challenges/Day 30 - Whack A Mole/style.css

Lines changed: 48 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -2,38 +2,48 @@ html {
22
box-sizing: border-box;
33
font-size: 10px;
44
background: #ffc600;
5+
background: -webkit-linear-gradient(to right, #f2c94c, #f2994a);
6+
background: linear-gradient(to right, #f2c94c, #f2994a);
57
}
68

7-
*, *:before, *:after {
9+
*,
10+
*:before,
11+
*:after {
812
box-sizing: inherit;
913
}
1014

1115
body {
1216
padding: 0;
13-
margin:0;
17+
margin:0;
1418
font-family: 'Amatic SC', cursive;
19+
text-align: center;
1520
}
1621

1722
h1 {
1823
text-align: center;
1924
font-size: 10rem;
20-
line-height:1;
25+
line-height:1;
2126
margin-bottom: 0;
2227
}
28+
h2 {
29+
font-size: 3rem;
30+
color: #391d04;
31+
margin: 2rem;
32+
}
2333

2434
.score {
25-
background:rgba(255,255,255,0.2);
26-
padding:0 3rem;
27-
line-height:1;
28-
border-radius:1rem;
35+
background:rgba(255,255,255,0.2);
36+
padding:0 3rem;
37+
line-height:1;
38+
border-radius:1rem;
2939
}
3040

3141
.game {
32-
width:600px;
33-
height:400px;
34-
display:flex;
35-
flex-wrap:wrap;
36-
margin:0 auto;
42+
width:600px;
43+
height:400px;
44+
display:flex;
45+
flex-wrap:wrap;
46+
margin:0 auto;
3747
}
3848

3949
.hole {
@@ -45,25 +55,43 @@ h1 {
4555
.hole:after {
4656
display: block;
4757
background: url(dirt.svg) bottom center no-repeat;
48-
background-size:contain;
49-
content:'';
58+
background-size:contain;
59+
content:'';
5060
width: 100%;
51-
height:70px;
61+
height:70px;
5262
position: absolute;
5363
z-index: 2;
54-
bottom:-30px;
64+
bottom:-30px;
5565
}
5666

5767
.mole {
58-
background:url('mole.svg') bottom center no-repeat;
59-
background-size:60%;
68+
background:url('mole.svg') bottom center no-repeat;
69+
background-size:60%;
6070
position: absolute;
6171
top: 100%;
6272
width: 100%;
6373
height: 100%;
64-
transition:all 0.4s;
74+
transition: all 0.4s;
75+
cursor: pointer;
6576
}
6677

6778
.hole.up .mole {
68-
top:0;
79+
top: 0;
80+
}
81+
82+
button {
83+
font-family: 'Amatic SC', cursive;
84+
display: inline-block;
85+
text-decoration: none;
86+
border: 0;
87+
border-radius: 1rem;
88+
background: #391d04;
89+
color: #fff;
90+
font-size: 2.5rem;
91+
padding: 1rem 1.5rem;
92+
margin-bottom: 2rem;
93+
}
94+
button:hover {
95+
opacity: 0.7;
96+
cursor: pointer;
6997
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /