BinaryDevelop
  1. ホーム
  2. javascript

jQuery/JavaScript 衝突検出機能

2023-07-17 12:13:02

質問

どのようにして、2つの <div> 要素が衝突したかどうかを検出する方法は？

2つのdivは単純なカラーボックスで、互いに垂直に移動しているので、複雑な形や角度はありません。

どのように解決するのですか？ 

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

body {
    padding: 30px;
    color: #444;
    font-family: Arial, sans-serif;
}

h1 {
    font-size: 24px;
    margin-bottom: 20px;
}

#area {
    border: 2px solid gray;
    width: 500px;
    height: 400px;
    position: relative;
}

#area > div {
    background-color: rgba(122, 122, 122, 0.3);
    position: absolute;
    text-align: center;
    font-size: 50px;
    width: 60px;
    height: 60px;
}

#box0 {
    background-color: rgba(255, 0, 0, 0.5) !important;
    top: 150px;
    left: 150px;
}

#box1 {
    top: 260px;
    left: 50px;
}

#box2 {
    top: 110px;
    left: 160px;
}

#box3 {
    top: 200px;
    left: 200px;
}

#box4 {
    top: 50px;
    left: 400px;
}

p {
    margin: 5px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<h1>Detect overlapping with JavaScript</h1>
<div id="area">
    <div id="box0"></div>
    <div id="box1">1</div>
    <div id="box2">2</div>
    <div id="box3">3</div>
    <div id="box4">4</div>
</div>

一般的な考え方 - 箱のオフセットと寸法を取得し、それらが重なるかどうかをチェックします。

更新させたい場合は setInterval : 

function detectOverlapping() {
    // code that detects if the box overlaps with a moving box
    setInterval(detectOverlapping, 25);
}

detectOverlapping();

また、特定の例に対して関数を最適化することができることに注意してください。

  • ボックスの寸法は固定されているので、(私のコードで行っているように) 繰り返し読み込む必要はありません。ページ読み込み時に (変数に) 読み込むことができ、その後、その変数を読み込むだけです。

  • は、小さなボックスの水平方向の位置は（ユーザーがウィンドウのサイズを変更しない限り）変更されません。車の箱の垂直方向の位置は変わりません。したがって、それらの値も繰り返し読み込む必要はなく、変数に格納することができます。

  • 小さなボックスがすべての車のボックスと常に重なっているかどうかをテストする必要はありません。垂直方向の位置から、そのボックスが現在どの車線にいるかを把握し、その車線から特定のカーボックスのみをテストすることができます。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します