Whack A Mole

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)); // 클릭했을때 두더지 잡히게 실행 시켜줌 

HTML

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