89 lines
2.1 KiB
HTML
89 lines
2.1 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>Whack A Mole!</title>
|
||
|
|
<link href='https://fonts.googleapis.com/css?family=Amatic+SC:400,700' rel='stylesheet' type='text/css'>
|
||
|
|
<link rel="stylesheet" href="style.css">
|
||
|
|
<link rel="icon" href="https://fav.farm/✅" />
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<h1>Whack-a-mole! <span class="score">0</span></h1>
|
||
|
|
<button onClick="startGame()">Start!</button>
|
||
|
|
|
||
|
|
<div class="game">
|
||
|
|
<div class="hole hole1">
|
||
|
|
<div class="mole"></div>
|
||
|
|
</div>
|
||
|
|
<div class="hole hole2">
|
||
|
|
<div class="mole"></div>
|
||
|
|
</div>
|
||
|
|
<div class="hole hole3">
|
||
|
|
<div class="mole"></div>
|
||
|
|
</div>
|
||
|
|
<div class="hole hole4">
|
||
|
|
<div class="mole"></div>
|
||
|
|
</div>
|
||
|
|
<div class="hole hole5">
|
||
|
|
<div class="mole"></div>
|
||
|
|
</div>
|
||
|
|
<div class="hole hole6">
|
||
|
|
<div class="mole"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
const holes = document.querySelectorAll('.hole');
|
||
|
|
const scoreBoard = document.querySelector('.score');
|
||
|
|
const moles = document.querySelectorAll('.mole');
|
||
|
|
let lastHole;
|
||
|
|
let timeUp = false;
|
||
|
|
let score = 0;
|
||
|
|
|
||
|
|
function randomTime(min, max) {
|
||
|
|
return Math.round(Math.random() * (max - min) + min);
|
||
|
|
}
|
||
|
|
|
||
|
|
function randomHole(holes) {
|
||
|
|
const idx = Math.floor(Math.random() * holes.length);
|
||
|
|
const hole = holes[idx];
|
||
|
|
if (hole === lastHole) {
|
||
|
|
console.log('Ah nah thats the same one bud');
|
||
|
|
return randomHole(holes);
|
||
|
|
}
|
||
|
|
lastHole = hole;
|
||
|
|
return hole;
|
||
|
|
}
|
||
|
|
|
||
|
|
function peep() {
|
||
|
|
const time = randomTime(200, 1000);
|
||
|
|
const hole = randomHole(holes);
|
||
|
|
hole.classList.add('up');
|
||
|
|
setTimeout(() => {
|
||
|
|
hole.classList.remove('up');
|
||
|
|
if (!timeUp) peep();
|
||
|
|
}, time);
|
||
|
|
}
|
||
|
|
|
||
|
|
function startGame() {
|
||
|
|
scoreBoard.textContent = 0;
|
||
|
|
timeUp = false;
|
||
|
|
score = 0;
|
||
|
|
peep();
|
||
|
|
setTimeout(() => timeUp = true, 10000)
|
||
|
|
}
|
||
|
|
|
||
|
|
function bonk(e) {
|
||
|
|
if(!e.isTrusted) return; // cheater!
|
||
|
|
score++;
|
||
|
|
this.parentNode.classList.remove('up');
|
||
|
|
scoreBoard.textContent = score;
|
||
|
|
}
|
||
|
|
|
||
|
|
moles.forEach(mole => mole.addEventListener('click', bonk));
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|