# 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
  <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>
```

{% endtab %}
{% endtabs %}

![](/files/-Md2_CBKRjuT_Kh8r28K)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://leeboa.gitbook.io/study/javascript30/whack-a-mole.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.