이 JavaScript Collision Detection을 개선하려면 어떻게해야합니까?

Question

Raphael.js를 사용하여 직사각형간에 콜리 손 감지를 생성하는 테스트 응용 프로그램이 있습니다. 내가 너무 빨리 마우스를 이동할 때

내가 제대로 작동 콜리슨 탐지를 얻을 수 있어요,하지만 난 주위 slooowly 드래그해야합니다 .... 문제가 발생합니다. draggable rect를 감지 할만큼 충분히 빠르게 새로 고쳐지지 않는 것 같습니다.

보라색 사각형 드래그있는 유일한 사람입니다.

JS Fiddle

나는 내 질문에 내가/감지 기능을 향상 내 문제를 해결할 수있는 방법을 추측?

미리 감사드립니다. move 이후

Answer 1

각 픽셀 이동 전화지고, 당신은 부드러운을 유지하기 위해 계산의 방법으로 많은 일을 할 시간이 없습니다. 첫째, 난 당신이 더 표준 하나 중복을 결정하는 기능을 대체 :

이것은 단지 하나 개의 사각형이 다른 하나의, 오른쪽, 위, 아래 왼쪽으로 완전히 있는지 확인

var rect_collision = function (x1, y1, size1, x2, y2, size2) { 
    var a = {top: y1, bottom: y1+size1, left: x1, right: x1+size1}; 
    var b = {top: y2, bottom: y2+size2, left: x2, right: x2+size2}; 

    // this is the general way to figure out if two rects are overlapping 
    return !(a.left >= b.right || a.right <= b.left ||       
      a.top >= b.bottom || a.bottom <= b.top); 
}; 

. 그렇지 않은 경우 겹쳐 야합니다. 이것은 단지 참 또는 거짓 값을 제공하기 때문에 충돌이 어느 쪽에서 발생했는지 파악해야했습니다.

나는, 두 가지 구성 요소 내로 x 충돌과 처음에만 dx는 만 dy 변경 변경 척하여 y 충돌을 충돌을 깨고, 그 알아낼합니다. 어떤 방향에서 겹침이 발생하는지 알았 으면 방향 변경을 사용하여 겹침이 어느 측면에서 발생했는지 판단 할 수 있습니다. 예를 들어, x 경우 충돌 발생 이전 현재 dx dx 다음 충돌이 우측보다 더 컸다.

// check the x and y directions separately           
    var x_collide = rect_collision(r2_x, r2_y, rectSize, x, r1_y, rectSize); 

    // see if we are currently overlapping 
    if (!x_collide) { 
    // not colliding, update our x position normally 
    this.attr({x:x}); 
    this.pdx = dx;       
    } 
    else { 
    // we are, stick the moving rect to the correct side of the stationary one 
    // based on the drag direction that got us stuck 
    this.attr({x: this.pdx > dx ? r2_x + rectSize + 1 : r2_x - rectSize - 1});      
    } 

나는 다음 고정 하나를 통해 직접 사각형을 드래그에서 사용자를 방지하려면 한 기능에 맞게 추가 로직의 약간을 추가했다. 기본적으로 움직이는 직사각형을 정지 된 사각형의 반대편에 직접 배치 할 것인지를 확인하고, 그렇다면 방지합니다.

국경에 대한 수표를 정리하여 Math.min 및 Math.max 호출을 모두 없애기 때문에 실제로 필요하지 않으므로 호출합니다. 퍼포먼스 이슈가 많이 발생했다는 것을 의문시하는 것이기 때문에 그것은 더 중요한 일입니다.

당신은 http://jsfiddle.net/X7H9G/3/에서 결과를 볼 수 있습니다. 나는 이것이 최선의 해결책인지 잘 모르겠지만 일을하는 것처럼 보인다.