JavaScript로 2D 게임 개발 시 충돌 감지

적중 테스트라고도 하는 충돌 감지는 단순히 두 물체가 서로 접촉하는 시기를 결정하는 것입니다.

객체의 충돌은 대부분의 게임 경험과 사용자 인터페이스의 기초가 됩니다.
야구 방망이가 공과 충돌하고, 좀비가 벽에 부딪히고, Mario가 플랫폼에 착지하고 거북이를 밟습니다.

충돌 감지를 위한 일반 공식

각 개체의 위치를 ​​감지하고 서로 겹치는지 비교하고 계산합니다.

인스턴스

두 물체 간의 충돌 예:-

포인트/포인트

CIRCLE/CIRCLE

직사각형/직사각형

포인트/포인트
테스트하기 가장 쉬운 충돌은 두 지점 사이입니다. 두 지점이 충돌하는지 테스트하려면 단순히 X와 Y 좌표가 같은지 확인합니다! (즉, 위치가 동일한 경우).

if (x1 == x2 && y1 == y2) {
  // Points are in the same place: collision
}
else {
// Not colliding
}

원 ⭕/원 ⭕

각각 반지름이 있는 두 개의 원이 있다고 상상해 보십시오. 그들은 그들 사이에 거리를두고 배치됩니다. 거리가 두 원의 반지름의 합보다 작으면 원이 겹칩니다.



두 원의 중심 사이의 거리를 계산하려면 중학교 수학 및 피타고라스 정리를 기억해야 합니다.Opp² + Adj² = Hyp² 간단히 ∆x² + ∆y² = d² ;d = √(∆x² + ∆y²) ;

코드로 번역하면 다음과 같습니다.

d = Math.sqrt((∆x*∆x) + (∆y*∆y))

따라서 이 거리가 원-a의 반지름과 원-b의 반지름을 더한 값보다 작거나 같으면 원이 겹치거나 닿게 됩니다. 이 원칙은 다음 함수에서 사용됩니다.

const circlesCollide = (x1, y1, r1, x2, y2, r2) => {

    // Calculate the distance between the two circles
    let squareDistance = (x1-x2)*(x1-x2) + (y1-y2)*(y1-y2);

    // When the distance is smaller or equal to the sum
    // of the two radius, the circles touch or overlap
    return squareDistance <= ((r1 + r2) * (r1 + r2))
}

보시다시피 공식이 약간 수정되었습니다. 곱셈은 ​​제곱근을 구하는 것보다 훨씬 빠릅니다.Math.sqrt() 그래서 루트를 얻지 않고 거리가 계산되고 반지름의 합이 자체적으로 곱해집니다. 결과는 동일하게 유지되지만 성능은 더 좋습니다.