JavaScript에서 서로 상호 작용하는 단색 원을 만듭니다.

Question

저는 기본적인 물리학으로 작은 게임을 만들고 있습니다. 원을 서로 그리고 직사각형과 상호 작용시키는 방법을 알아낼 수 없습니다. 내가 원하는 건 게임에서 단단한 물체를 만드는 것이다. 엔진이나 라이브러리를 사용할 수 없습니까?

Answer 1

tutorials on MSDN을 보았습니까? 특히 Detecting collisions in a 2D HTML5 game은 (는) 귀하의 관심 분야와 관련이있는 것으로 보입니다. 튜토리얼에서 사용되는 기술은 기본적 것을

var circlesOverlap = function(circleA, circleB) { // Public. Returns true if the SVG circles A and B overlap, false otherwise. 
    var deltaX = circleA.cx.baseVal.value - circleB.cx.baseVal.value; 
    var deltaY = circleA.cy.baseVal.value - circleB.cy.baseVal.value; 
    var distance = Math.sqrt((deltaX*deltaX) + (deltaY*deltaY)); // The classic distance-between-two-points formula. 
    var radiusA = circleA.r.baseVal.value; // The radius of circle A. 
    var radiusB = circleB.r.baseVal.value; // The radius of circle B. 

    if (circleA.id == circleB.id) // If true, circleA and circleB are the same circle. 
    return false; 

    return distance <= (radiusA + radiusB); 
}; // circlesOverlap() 

that.circlesOverlap = circlesOverlap; 

주 : 특히

는 여기에 튜토리얼에서 충돌을 감지하는 데 사용되는 코드입니다

• 트랙 각 개체
• 을 계산 객체 간의 거리
• 이에 따라 적절하게 응답하십시오 (예 : 거리가 0 인 경우).

(업데이트 : 아래의 의견에 따라, 질문 내용과 관련성이 가장 높은 샘플 추가) 전체 문맥하지만, 전체 튜토리얼을 읽을 시간이 걸릴 말고 인해 신용을 보장하기 위해

을 정당하게 적립됩니다. 이 도움이

희망 ...

- 랜스

Answer 2

개체를 사용하여 각 원의 x 및 y 좌표, x 및 y 속도 (픽셀 단위) 및 반경을 저장합니다. 모든 서클의 목록을 유지하십시오. 애니메이션 루프를 반복 할 때마다 x 및 y 속도로 표시된 픽셀 수만큼 원이 앞으로 이동하면 각 원의 x 및 y 좌표가 반지름을 더한 값 또는 빼기 값이 서로 겹치지 않는지 확인합니다. 그럴 경우 원하는 방향 (예 : 방향 변경, 정지 등)을 처리 한 다음 다시 그립니다.