# Whack A Mole
{% tabs %}
{% tab title="JAVASCRIPT" %}
```javascript
const holes = document.querySelectorAll('.hole');
const scoreBoard = document.querySelector('.score');
const moles = document.querySelectorAll('.mole');
let lastHole;
let timeUp = false; // 게임이 끝났는지를 알려주는 변수 timeUp에 false 값 지정
let score = 0; // 점수판의 점수 표시와 점수를 저장한 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) {
return randomHole(holes);
}
lastHole = hole;
return hole;
}
function peep() {
const time = randomTime(100, 800); // 두더지 나올 시간 무작위로 계산
const hole = randomHole(holes); // 두더지 나올 구멍 무작위로 계산
hole.classList.add('up'); // 두더지가 나올 구멍에 up 클래스를 추가
setTimeout(() => {
hole.classList.remove('up'); //setTimeout( ) 메서드를 사용해 무작위 시간 이후 두더지가 나올 구멍에서 up 클래스를 제거
if (!timeUp) peep(); //게임이 끝나지 않았다면 peep( ) 함수를 다시 실행3
}, time);
}
function startGame() {
scoreBoard.textContent = 0;
timeUp = false;
peep();
setTimeout(() => timeUp = true, 10000) // 10초 후 게임 종료
}
function bonk(e) { // 튀어나온 두더지 잡기
if (!e.isTrusted) return; // cheater!
this.parentNode.classList.remove('up'); // 이벤트 발생한 요소에 up 클레스 제거
score++; // 점수를 저장하는 변수 score에 +1
scoreBoard.textContent = score; // 점수판의 textContent를 score로 지정
}
moles.forEach(mole => mole.addEventListener('click', bonk)); // 클릭했을때 두더지 잡히게 실행 시켜줌
```
{% endtab %}
{% tab title="HTML" %}
```markup