2

2 つの div が重なっているかどうかを検出するにはどうすればよいですか?

div の幅を考慮しないと、基本的に垂直の線分になります。(上、左) ポイントはポイント A であり、下 (上 + 高さ) はポイント B などです。次に、各 div を divs 配列内の他の div と比較し、衝突する div の配列を作成します。ただし、これをプログラムで行う方法に行き詰まっています。

これは私のdivの配列です:

var divs = [
    {class:'A', top:0,   left:0,   height:'60px'},
    {class:'B', top:50,  left:60,  height:'60px'},
    {class:'C', top:30,  left:10,  height:'60px'},
    {class:'D', top:100, left:180, height:'60px'},
    {class:'E', top:80,  left:50,  height:'60px'},
    {class:'F', top:110, left:200, height:'60px'},
    {class:'G', top:55,  left:80,  height:'60px'}
];

これが私が始めた機能です：

    this.collide = function( divs )
{
    var collidingDivs = [], z = events.length;

    for(i; i<z; i++)
    {
        if
        (
           // Begin pseudocode
           ( divsB.top >= divsA.top ) && 
           ( (divsB.top + divsB.height) <= (divsA.top + divsA.height) ) 
        )
        {
            collidingDivs.push(divs[i].class);
        }
    }
    console.log(collidingDivs); // Array of divs that overlap (collide)
};

私はこの時点で完全に立ち往生しています。各 div を反復処理して、他の div と衝突するかどうかを確認するにはどうすればよいですか?

4

1 に答える 1

4

各 div をループしてから、ネストされたループ内の他のすべての div と比較する必要があります。次に、作成したようなロジックを使用して、各組み合わせを比較します。以下は、重複する div を単純に出力に出力する例です (height要素をテキストではなく数値に変更して、その値を計算に使用できるようにしたことにも注意してください)。

var divs = [
    {class:'A', top:0,   left:0,   height:60},
    {class:'B', top:50,  left:60,  height:60},
    {class:'C', top:30,  left:10,  height:60},
    {class:'D', top:100, left:180, height:60},
    {class:'E', top:80,  left:50,  height:60},
    {class:'F', top:110, left:200, height:60},
    {class:'G', top:55,  left:80,  height:60}
];

for (var i=0; i < divs.length - 1; i++)
    for (var j=i+1; j < divs.length; j++)
    {
        var I=divs[i];
        var J=divs[j];

        if ( (I.top <= J.top && (I.top + I.height) >= J.top) ||
             (J.top <= I.top && (J.top + J.height) >= I.top) )
            document.writeln(
                I.class + " collides with " + J.class + "<br />");
    }

出力：

A collides with B
A collides with C
A collides with G
B collides with C
B collides with D
B collides with E
B collides with F
B collides with G
C collides with E
C collides with G
D collides with E
D collides with F
D collides with G
E collides with F
E collides with G
F collides with G

サンプル作業コード: http://jsfiddle.net/QUrWM/

于 2011-09-27T22:29:50.980 に答える