[JS30] - 30) Whack a Mole!

1. 두더지가 나올 구멍 랜덤으로 선택하기

hole을 모두 선택해온 다음, 랜덤으로 하나의 hole을 선택한다.

  const MINIMUM_HOLES = 1;

  function randomHole(max) {
    return Math.floor(Math.random() * (max - MINIMUM_HOLES) + MINIMUM_HOLES);
  }

사실상 변경할 일이 없어 그냥 1로 해주어도 상관없었지만... 왜 1이 들어갔는지, 혹은 랜덤값을 조정할 일이 있을 때를 고려해 상수값을 지정해주었다. 누군가와 협업한다는 가정하에, 가독성 좋고 확장성있는 코드를 작성하는 것에 대해 고민하는 습관을 기르고 싶으니까..!

2. 두더지 나오게 하기

  let timeOut = false;

  function handleHole() {
    if (timeOut) return;
    const selectedHole = holes[randomHole(holes.length)];
    selectedHole.classList.add('up');
    setTimeout(() => {
      selectedHole.classList.remove('up');
      handleHole();
    }, randomTime(1000))
  }

• 제한시간이 지나면 멈춘다.
• 랜덤으로 지정한 구멍에 클래스를 추가하여 위로 두더지가 나오게 만들고, 랜덤한 시간이 지난 후 다시 들어가게 만든다. 하나의 두더지가 나왔다 들어가면 바로 다음 두더지가 나와야 하므로 재귀호출 해주었다.

랜덤한 시간

  function randomTime(max) {
    return Math.random() * (max - MINIMUM_TIME) + MINIMUM_TIME;
  }

게임시작

 function startGame() {
    timeOut = false;
    score = 0;
    timer;
    handleHole();
  }

게임에 필요한 값들을 초기화하고, handleHole함수를 실행해준다.

timer

  const timer = setTimeout(() => {
    timeOut = true;
  }, 10000)

이미 몇 번 만들어본 순수 자바스크립트로 구현한 게임의 형태라, 크게 어려울 건 없었기 때문에 포스팅은 간결하게 마무리했다.
강의에서 작성한 코드와 비교해보았을 때 특별히 보완해야할 부분이나, 알아두어야 할 만한 부분도 크게 보이지 않는다.