30. Whack A Mole

프로젝트 소개

• 두더지 잡기 게임
• 랜덤 구멍에서 랜덤 시간동안 출현 후 사라짐. 나타나는 동안 클릭하면 잡은 두더지 수 화면에 표시

코드 작성

1. 두더지 나타나는 구멍, 시간의 랜덤 숫자를 저장
2. 해당 구멍에 대한 class 명 추가하고, setTimeout로 일정 시간 후에 class명을 제거하도록하여 두더지 나타났다가 사라지도록
3. 나타났을 때, 두더지 클릭하면 score 올라가고 화면에 보여지도록

최종코드

<내 코드>

const holes = document.querySelectorAll('.hole');
      const scoreBoard = document.querySelector('.score');
      const moles = document.querySelectorAll('.mole');

      let holeup;
      let randHole;
      let time;
      let showCount = 0;
      let catchCount = 0;

      function startGame() {
        pickHole();
        upTime();
        showMole();
        console.log(showCount);
      }

      function pickHole() {
        // 1에서 6사이의 랜덤 숫자 뽑기
        randHole = Math.floor(Math.random() * 6 + 1);
      }

      function upTime() {
        //0 ~ 2초 사이 시간 뽑기
        time = Math.random() * 2;
      }

      function showMole() {
        const holeAppear = document.querySelector(`.hole${randHole}`);
        holeAppear.classList.add('up');
        holeup = document.querySelector('.hole.up');
        showCount++;
        setTimeout(() => {
          holeAppear.classList.remove('up');
          if (showCount < 10) startGame();
        }, time * 1000);
      }

      function catchMole() {
        catchCount++;
        scoreBoard.textContent = catchCount;
      }

      moles.forEach((mole) => mole.addEventListener('click', catchMole));

<정답코드>

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

느낀 점/ 기억할 점

• 다른 부분은 큰 어려움 없었지만, setTimeout 함수('up' class 붙이고 제거)를 동기적으로 처리하지 못해 10마리의 mole이 한꺼번에 출현하는 문제를 해결하는데 시간이 오래 걸렸다.
• (해결방법) showMole() 내부의 setTimeout 함수부분을 아래와 같이 수정해서 해결했음. (처음에는 startGame() 내에서 반복문을 만들어서 문제가 발생했었음)

setTimeout(() => {
          holeAppear.classList.remove('up');
          if (showCount < 10) startGame();
        }, time * 1000);

• 최소 ~ 최대값 사이의 임의의 정수를 선택하는 코드 (하기 참조) 기억
  이해를 위한 참고사이트

function randomTime(min, max) {
        return Math.round(Math.random() * (max - min) + min);
      }

직접 게임 해보기