[javascript] 자바스크립트를 활용한 충돌 감지 및 처리

14 Dec 2023

javascript

게임이나 시뮬레이션을 개발할 때, 오브젝트들 간의 충돌 감지는 매우 중요합니다. 이 포스트에서는 자바스크립트를 사용하여 충돌을 감지하고 처리하는 방법을 알아보겠습니다.

충돌 감지

1. 바운딩 박스(Collision Box)활용

바운딩 박스는 각 게임 오브젝트의 영역을 나타냅니다. 이를 이용해 오브젝트 간의 충돌을 탐지합니다.

class GameObject {
  constructor(x, y, width, height) {
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
  }

  checkCollision(otherObject) {
    if (this.x < otherObject.x + otherObject.width &&
        this.x + this.width > otherObject.x &&
        this.y < otherObject.y + otherObject.height &&
        this.y + this.height > otherObject.y) {
      // 충돌 발생!
      return true;
    }
    return false;
  }
}

2. 픽셀 충돌 감지

두 개체의 픽셀 간의 교차점을 확인하여 더 정확한 충돌 감지를 수행할 수 있습니다.

function pixelCollision(obj1, obj2) {
  // 픽셀 간 충돌 검사 로직
}

충돌 처리

1. 충돌 후 행동 변경

충돌이 감지된 후에는 오브젝트의 움직임을 조절하거나 특정한 액션을 수행해야 합니다. 예를 들어, 충돌이 발생한 오브젝트의 이동을 중지하거나, 충돌 효과를 발생시킬 수 있습니다.

if (obj1.checkCollision(obj2)) {
  obj1.stopMoving();
  obj2.playCollisionEffect();
}

2. 충돌 제거

충돌이 감지된 후에는 해당 오브젝트를 게임 화면에서 제거하는 등의 처리를 할 수 있습니다.

if (obj1.checkCollision(obj2)) {
  obj1.remove();
  obj2.remove();
}

마치며

이렇게 자바스크립트로 충돌을 감지하고 처리하는 방법을 소개했습니다. 각 프로젝트의 요구에 따라 적절한 충돌 처리 방법을 선택하여 게임이나 시뮬레이션을 더욱 흥미롭게 만들 수 있습니다.

참고 자료: MDN Web Docs