js challenge 30

Whack A Mole!

Code

  <script>
    const holes = document.querySelectorAll('.hole');
    const scoreBoard = document.querySelector('.score');
    const moles = document.querySelectorAll('.mole');
    let lastHole;
    let timeUp = false;
    let score = 0;

    const randomTime = (min, max) => {
      return Math.round(Math.random() * (max - min) + min);
    }
    const randomHole = (holes) => {
      const idx = Math.floor(Math.random() * holes.length);
      const hole = holes[idx];
      if (hole === lastHole) {
        return randomHole(holes);
      }
      lastHole = hole;
      return hole;
    }
    const peep = () => {
      const time = randomTime(200, 1000);
      const hole = randomHole(holes);
      hole.classList.add('up');
      setTimeout(() => {
        {
          hole.classList.remove('up');
          if (!timeUp) peep();
        }
      }, time)
    }
    const startGame = () => {
      scoreBoard.textContent = 0;
      timeUp = false;
      score = 0;
      peep();
      setTimeout(() => timeUp = true, 10000);
    }
    const bonk = (e) => {
      if (!e.isTrusted) return;
      score++;
      e.target.parentNode.classList.remove('up');
      scoreBoard.textContent = score;
    }
    moles.forEach(mole => mole.addEventListener('click', bonk));
  </script>

 

배운 점 & 느낀 점

js challenge 마지막 과제였습니다.

두더지게임 만들기였습니다.

크게5가지 함수가 필요했는데,

1. 게임시간 정하는 정하는 함수

2. 랜덤으로 두더지 나오게 하는 함수

3. 랜덤으로 나올 두더지 정하는 함수

4. 게임 시작 함수

5. 유저가 두더지 클릭했을 때 점수 올리는 함수.