크롬 공룡 게임 만들기(3/4): 장애물 관리 및 점프 구현

앞의 포스팅에서 일정 시간마다 장애물을 생성해 cactuses 배열에 넣어 관리하는 코드를 작성했었다. 

오늘은 게임 키를 구현하기에 앞서 이미 지나간 장애물을 삭제하는 코드를 먼저 추가해 보겠다.

---

이미 지나가 화면에 보이지 않는 장애물을 배열에서 제거해 주지 않는다면, 게임 플레이 시간이 늘어남에 따라 배열에 담긴 장애물 수도 계속해서 증가할 것이다. 이건 바람직하지 않기 때문에 장애물을 생성하고 배열에 추가한 후 화면에 그리는 코드를 수정해 보도록 하겠다.

if (timer % 240 === 0) {
    var cactus = new Cactus();
    cactuses.push(cactus);
  }

  cactuses.forEach((a, i, o) => {
    if (a.x < 0) {
      o.splice(i, 1);
    }
    a.x -= 2;
    a.draw();
  });

반복문을 돌며 장애물의 x 좌표가 0 미만이면 배열에서 삭제하도록 수정한 코드다.

이 코드를 이해하려면 forEach()에 대해 알아야 한다.

 

forEach() 메서드는 주어진 함수를 배열 요소 각각에 대해 실행한다. 사용 형태는

arr.forEach(callback(currentvalue[, index[, array]])[, thisArg])

와 같은데, currentValue는 처리할 현재 요소, index는 처리할 현재 요소의 인덱스, array는 forEach()를 호출한 배열, thisArg는 callback을 실행할 때 this로 사용할 값이다. currentValue를 제외하고는 필요한 매개변수만 전달해 주면 된다. 

즉, 위 코드의 forEach 반복문을 해석하면 cactuses 배열을 순회하며 현재 요소의 x 좌표가 0 미만일 경우 cactuses 배열에서 해당 요소를 splice해 삭제하고, (프레임마다) 모든 요소의 x 좌표를 2씩 감소시킨 후 화면에 표시하는 코드다.

 

참고로 코드를 실행해 보니 장애물의 속도가 너무 느리고 자주 생성되길래 생성 속도와 장애물 속도, 장애물 크기를 약간 수정했다.

---

그럼 이제 점프 기능을 구현해 보겠다. 아래 코드는 스페이스바를 눌렀을 때 공룡을 점프시키는 코드다.

if (jump == true) {
    dino.y -= 2; 
    jumpTimer++; 
  }
  if (jump == false) {
    if (dino.y < 300) {
      dino.y += 2;
    }
  }
  if (jumpTimer > 40) {
    jump = false;
    jumpTimer = 0;
  }
  dino.draw();
}
executePerFrame();

var jump = false;

document.addEventListener("keydown", function (e) {
  if (e.code === "Space") {
    jump = true;
  }
});

이벤트 리스너를 추가해 게임이 스페이스바에 반응하도록 했다.

공룡이 현재 점프 상태인지 아닌지를 저장하는 jump 변수를 선언했다. jump는 스페이스바를 누르면 true가 되었다가, 점프 시간이 80 프레임 이상이 되면 false로 바뀐다. 이 때 점프 시간을 기록하는 변수가 jumpTimer다.

공룡이 점프 상태인 경우 공룡의 y좌표는 프레임마다 줄어들고, 공룡이 점프 상태가 아닌 경우 (상한값까지) 늘어난다.

---

이렇게 점프 키를 구현했지만, 아직 장애물과 충돌해도 어떤 일도 일어나지 않는다. 다음에는 장애물과 공룡의 충돌을 확인해 보도록 하겠다.