If you're seeing this message, it means we're having trouble loading external resources on our website.

웹 필터가 올바르게 작동하지 않으면 도메인 *. kastatic.org*.kasandbox.org이 차단되어 있는지 확인하세요.

주요 내용

막대기 충돌

깡총 깡총 뛰는 비버가 있고 막대기를 보이도록 했습니다. 비버와 막대기를 합치기만 하면 됩니다. 비버가 막대기 바로 위에 닿으면 성공적으로 막대기를 잡은 것으로 셉니다. 이것은 두 개의 객체의 기본적인 충돌 확인을 할 필요가 있다는 것을 의미합니다. 이 기능은 두 객체를 처리하기 때문에 전역함수, Stick 객체의 메소드, Beaver 객체의 메소드 중에 하나로 만들 수 있습니다. 그 중, Beaver에 일단 넣어 봅시다.
Beaver.prototype.checkForStickGrab = function(stick) {
  // 비버가 막대기 위에 있으면 무엇인가를 합니다
};
이 함수에서 비버와 막대기가 충돌하면 참이 되고 그렇지 않으면 거짓이 될 조건을 작성해야 합니다. 예를 들어 비버의 손의 위치에 따라 정하는 것처럼 복잡하고 엄격하게 만들 수도 있겠지만 지금은 기본만 만듭니다. 만약 다음의 경우라면 "충돌"했다고 합니다.
  • 막대기 중심의 x 위치가 비버의 양 측 사이에 존재할 때
  • 막대기 중심의 y 위치가 비버의 맨 위쪽과 맨 아래쪽 사이에 위치할 때
rect 명령어를 이용하여 막대기를 그리므로 일반적으로 xy 속성은 막대기의 왼쪽 상단 모서리의 좌표를 표시합니다. 그러나 충돌 계산을 단순하게 하기 위해 rect를 중심을 기준으로 그리는 방식으로 바꿀 수 있습니다.
rectMode(CENTER);
rect(this.x, this.y, 5, 40);
또한 비버에 대한 이미지도 기본적으로 왼쪽 상단 모서리에서부터 그릴 수 있지만 계산과 상관 없으므로 지금 방식을 유지할 것입니다. 첫 번째 조건을 확인하기 위해 막대기의 x가 비버의 왼쪽 (x)보다 크거나 같은지, 그리고 비버의 오른쪽 (x+40)보다 작거나 같은지 확인합니다.
stick.x >= this.x && stick.x <= (this.x + 40)
y 위치를 확인하기 위해 비슷하게 막대기의 y가 비버의 위쪽 (y)보다 크거나 같은지, 그리고 비버의 아래쪽 (y+40)보다 작거나 같은지를 확인합니다.
stick.y >= this.y && stick.y <= (this.y + 40)
이제 일단 비버와 막대기 간 충돌을 감지하면 실제로는 무엇을 해야 할까요? 화면에서 막대기를 제거해서 이후의 충돌을 방지해야 합니다. 이렇게 하기 위해 간단한 방법은 막대기의 y 좌표를 변경하여 막대기를 화면 밖으로 내보내는 것입니다:
stick.y = -400;
동시에 비버가 얼마나 많은 막대기를 "잡았는지를" 기억하기 위해 내부 sticks 프로퍼티를 증가시킬 것입니다.
this.sticks++;
마지막으로 적절한 시기에 이 메소드를 호출해야 합니다. 각 막대기를 그린 바로 직후에 하면 어떨까요?
    for (var i = 0; i < sticks.length; i++) {
        sticks[i].draw();
        beaver.checkForStickGrab(sticks[i]);
        sticks[i].x -= 1;
    }
이제 모든 것을 합쳐 보았습니다. 막대기 위로 뛰면 막대기가 없어지는지 확인해 보세요!