javascript - 检测两个 div 是否太近或碰撞/重叠

Question

我正在尝试检测两个给定的 div 是否太靠近或碰撞/重叠。

我有下面的 codepen，它尝试生成 20 个随机 div，并且仅在它们的位置不太接近其他现有 div 时才将它们附加到 body。

这就是想法，但在我得到 div 并通过与现有 div 的关闭/重叠位置的位置时，它没有按预期工作。 (如果第一次是完美的，请多次运行它，你应该会遇到它)。

http://codepen.io/anon/pen/fHLzj

谁能看出其中的错误和解决方法？

Answer 1

这有点难以解释和理解..但是这里是:

通过运行 for 循环检查每个 div 与每个 div。

x,y,h,w

• x 是左上角到左边的距离。
• y 是左上角到顶部的距离。
• h 是 div 的高度。
• w 是 div 的宽度。

要考虑的一点......你真的不需要检查每个 div..考虑一下

有 10 个 div...

• 首先，您将检查 1 和 9。
• 第二个 1 对 8。
• .................
• 八一对二。
• 第九对 1.
• 不要最后一个。

此外，在将数据分配给 dom 之前分配值并检查数据中的冲突也是一个好主意。 Dom 应该只是为了渲染最终结果。

我假设您不想保留任何两个碰撞的 div。

预览 http://jsfiddle.net/techsin/m4fSf/6/

正如预期的那样，代码量很大

var
div={},
number=10,
size=20,
m = ele('main');
mw= parseFloat(getComputedStyle(m).getPropertyValue("width"))-size,
mh= parseFloat(getComputedStyle(m).getPropertyValue("height"))-size,
f=true,
nn;    

var i
for (i = 0; i < number; i++) {
    div[i] = {};
    var t = true, newX, newY, nn;
   if (i!=0){ 
       while (t) {

        newX = rand(mw);
        newY = rand(mh);

        for (nn = 0; nn < i; nn++) {
            if (!(((newX > div[nn].x + size+5) || (newY > div[nn].y + size+5)) ||
             ((newX + size+5 < div[nn].x) || (newY + size+5 < div[nn].y)))) {
                    break;
                }
                if (nn == i-1) t = false;
            }}} else {
        newX = rand(mw);
        newY = rand(mh);
            }


console.log(newX);
    div[i].x = newX;
    div[i].y = newY;
}

for (i = 0; i < number; i++) {
render(div[i]);
}


console.log(div);
function render(x){
var d=document.createElement('div');
    d.style.position='absolute';
    d.style.left=(x.x+'px');
    d.style.top=(x.y+'px');
    m.appendChild(d);
}
function rand(x) { return Math.random()*x;} 
function ele(x){return document.getElementById(x);}

此代码来 self 的碰撞站点...我会尝试将其放入上面的代码中，但这是避免碰撞和缩小间隙所需要的。

if (xpost+30>xx.left && xx.left>xpost && xx.top+30>ypost  && xx.top<ypost+30)  { xspeed = -speed; }
            if (xpost<xx.left+30 && xx.left<xpost && xx.top+30>ypost  && xx.top<ypost+30)  { xspeed = speed; }
            if (ypost+30>xx.top && xx.top>ypost && xx.left+30>xpost  && xx.left<xpost+30)  { yspeed = -speed; }
            if (ypost<xx.top+30 && xx.top<ypost && xx.left+30>xpost  && xx.left<xpost+30)  { yspeed = speed; }