JavaScript와 jQuery를 사용하여 두 Div 간의 충돌을 감지하는 방법은 무엇입니까?

두 DIV 간의 충돌을 감지하는 방법

웹 페이지에서 동적 요소로 작업할 때 두 DIV 간의 충돌을 감지할 수 있어야 합니다. 그들을. 이 예에서는 서로 수직으로 움직이는 두 개의 간단한 색상 div를 다루고 있습니다.

해결책:

div가 충돌하는지 확인하려면 JavaScript와 jQuery 라이브러리를 활용합니다. 해결 방법은 다음과 같습니다.

1. 위치 가져오기: 먼저 getPositions() 함수를 사용하여 두 div의 위치를 ​​계산합니다. 이 함수는 위치를 나타내는 2차원 배열을 반환합니다. 각 div의 왼쪽 및 위쪽 좌표.
2. 위치 비교: ComparePositions() 함수를 사용하여 각 div의 위치를 ​​비교합니다. 한 div의 왼쪽 가장자리가 다른 div의 왼쪽 가장자리보다 작고 첫 번째 div의 오른쪽 가장자리가 두 번째 div의 왼쪽 가장자리보다 크면 충돌이 발생합니다. 마찬가지로 수직 방향의 충돌도 확인합니다.
3. 겹침 확인: 두 개의 div를 입력으로 사용하는overlaps() 함수는 이전 함수를 결합하여 겹치는지 확인합니다. 그렇다면 함수는 true를 반환합니다. 그렇지 않으면 false를 반환합니다.
4. JavaScript로 구현: 빨간색 div(box0)가 다른 div( 상자 1-4). 그런 다음 결과가 페이지 본문에 추가됩니다.

예제 코드:

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]);
    };
})();

$(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);
});

이 솔루션은 수직 방향 충돌을 효율적이고 정확하게 감지합니다. div를 이동합니다. 게임, 시뮬레이션 등 다양한 대화형 웹 애플리케이션에 유용한 도구를 제공합니다.

위 내용은 JavaScript와 jQuery를 사용하여 두 Div 간의 충돌을 감지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!