[TIL-115] 위코드 14일차: enemyRain 게임 - 유령 잡기

Javascript

 

clearInterval()

개념

setInterval 함수의 반복 실행을 멈추려면, setInterval()을 변수에 할당해주고 멈추고 싶을 때 clearInterval(변수);를 실행하면 된다.

 

사용법

function moveGhost() {
  const ghostsArr = document.getElementsByClassName("ghost");
  const ghostsLeng = ghostsArr.length;
  if (ghostsLeng > 0) {
    for (let i = 0; i < ghostsLeng; i++) {
      const ghost = ghostsArr[i];
      let ghostTop = parseInt(ghost.style.top);
      if (ghostTop < 536) {
        ghostTop += 15;
        ghost.style.top = ghostTop + "px";
      } else {
        clearInterval(createInterval);
        clearInterval(moveInterval);
      }
    }
  }
}

const createInterval = setInterval(createGhost, 8000);
const moveInterval = setInterval(moveGhost, 1000);

setInterval로 인해 1초마다 반복 실행되는 moveGhost() 함수 안에 clearInterval을 사용하여 두 개의 setInterval() 함수를 모두 중지시켰다. 유령 element의 top 속성 값이 536 이상이 되어 유령이 바닥까지 내려왔을 때, 유령 element가 더 이상 생성되지 않고 아래로 움직이지도 않게 했다.

 

 

---

 

Collision Detection

개념

요소가 그래픽 상으로 겹쳐지는 상황을 감지하는 것을 말한다. 각 요소의 x, y 좌표를 비교한다.