jQuery/JavaScript를 사용하여 직사각형 요소 간의 충돌 감지를 어떻게 수행할 수 있습니까?

jQuery/JavaScript 충돌 감지

웹 개발 영역에서는 페이지의 두 요소가 충돌하는 시기를 감지해야 하는 경우가 많습니다. 이 정보는 대화형 게임, 애니메이션, 공간 레이아웃 등 다양한 애플리케이션에서 매우 중요합니다.

<div> 요소가 수직 방향으로 이동하는 경우 충돌 감지는 간단한 작업이 될 수 있습니다. 다음은 이를 수행하기 위해 jQuery를 활용하는 JavaScript 솔루션입니다.

var overlaps = (function () {
    function getPositions( elem ) {
        var pos, width, height;
        pos = $( elem ).position();
        width = $( elem ).width();
        height = $( elem ).height();
        return [ [ pos.left, pos.left + width ], [ pos.top, pos.top + height ] ];
    }

    function comparePositions( p1, p2 ) {
        var r1, r2;
        r1 = p1[0] < p2[0] ? p1 : p2;
        r2 = p1[0] < p2[0] ? p2 : p1;
        return r1[1] > r2[0] || r1[0] === r2[0];
    }

    return function ( a, b ) {
        var pos1 = getPositions( a ),
            pos2 = getPositions( b );
        return comparePositions( pos1[0], pos2[0] ) && comparePositions( pos1[1], pos2[1] );
    };
})();

이 함수는 두 개의 jQuery 요소(a 및 b)를 인수로 사용하고 중첩 여부를 나타내는 부울을 반환합니다. 먼저 요소의 위치와 크기를 계산하고 이를 비교하여 교차점이 있는지 확인합니다.

기능을 시연하기 위해 다음은 여러 색상 상자가 내부에서 이동하는 직사각형 영역을 정의하는 HTML 스니펫입니다. it:

<div>

마지막으로 jQuery를 사용하여 충돌을 동적으로 확인합니다.

$(function () {
    var area = $( '#area' )[0],
        box = $( '#box0' )[0],
        html;
    
    html = $( area ).children().not( box ).map( function ( i ) {
        return '<p>Red box + Box ' + ( i + 1 ) + ' = ' + overlaps( box, this ) + '</p>';
    }).get().join( '' );

    $( 'body' ).append( html );
});

이 코드는 빨간색 상자(#box0)를 제외한 영역 내의 상자를 반복하고 각 상자가 충돌하는지 계산합니다. 결과는

이 접근 방식은 <div> 요소에 맞게 getPositions() 함수를 수정하여 더 복잡한 모양과 궤적을 처리하도록 쉽게 조정할 수 있습니다.

위 내용은 jQuery/JavaScript를 사용하여 직사각형 요소 간의 충돌 감지를 어떻게 수행할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!