크롬 공룡 게임 만들기(4/4): 장애물 충돌 체크

이번에는 공룡과 장애물이 충돌하는 경우를 체크하고, 우리의 주인공들을 네모네모가 아니라 캐릭터 이미지로 바꿔보도록 하겠다. 매우 허접하지만 이 단계까지 하고 나면 대충 게임의 구색은 갖출 수 있다.

---

우선 두 유닛이 충돌하는지를 확인하는 함수 isBumped를 구현했다.

function isBumped(dino, cactus) {
  var xDif = cactus.x - (dino.x + dino.width);
  var yDif = cactus.y - (dino.y + dino.height);
  if (xDif < 0 && yDif < 0) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    cancelAnimationFrame(animation);
  }
}

충돌 여부는 좌표를 계산해서 확인한다. 두 유닛이 충돌한다는 것은 겹치는 영역이 있다는 의미다. x 좌표 차와 y 좌표 차를 모두 계산했고, 두 값이 모두 음수일 경우 충돌했다고 판단한다.

처음에는 x축 방형으로 겹치든 y축 방향으로 겹치든 충돌하는 거니까 &&가 아니라 ||을 써야 하지 않나? 라고 생각할 수 있는데 직접 계산해보면 아니라는걸 알 수 있다. 

개판인 그림이지만 도움이 되길 바라며...^^

이렇게 계산한 값을 이용해 충돌한다는 것을 확인했다면 프레임마다 실행되던 애니메이션을 중단해 주기로 했다. 게임 종료를 표현한 것이다. 이걸 위해서는 executePerFrame()에 있던 requestAnimationFrame(executePerFrame)을 animation이라는 변수에 담은 후 cancelAnimationFrame()에 매개변수로 전달해 주면 된다. window.cancelAnimationFrame() 메서드는 이전에 window.requestAnimationFrame() 을 호출하여 스케줄된 애니메이션 프레임 요청을 취소한다.

---

마지막으로 네모네모에 갇힌 우리 캐릭터들을 그럴듯한 이미지로 변경해 줄 차례다. 

원하는 이미지를 코드와 같은 폴더에 넣고, Image 객체를 만들어 할당해 준다. 다음은 선인장 그림을 화면에 표시하도록 하는 코드다.

var img1 = new Image();
img1.src = "cactus.png";

class Cactus {
  constructor() {
    this.x = 500;
    this.y = 325;
    this.width = 25;
    this.height = 25;
  }
  draw() {
    // ctx.fillStyle = "red";
    // ctx.fillRect(this.x, this.y, this.width, this.height); //네모는 일명 hitbox
    ctx.drawImage(img1, this.x, this.y, this.width, this.height);
  }
}

당연히 선인장 파일은 cactus.png로 저장되어 있어야 한다. drawImage() 메서드를 이용해 이미지를 그려 넣어주면 끝!

인데 나는 처음에 이미지 사이즈를 조절하는 법을 몰라서 공룡이 화면에 꽉 차는 참사가 일어났었다. 구글링 0.5초 결과 답을 찾았는데, 내가 위 코드에 쓴 것처럼 너비와 높이를 4, 5번째 인자로 전달해 주면 된다.

---

대충 구글에 "크롬 공룡게임 png"라고 쳐서 나온거 잘라 썼더니 캐릭터가 깔끔해 보이진 않지만, 어쨌든 게임의 본래 목적은 달성했다.

 

여기까지가 영상을 보면서 배운 내용을 기반으로 조금씩 수정해 본 내용이다. 어떻게 발전시킬지는 우선 코드 정리부터 해보고 결정해야겠다.