Question

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

我有以下的codepen，它尝试生成20个随机div，只有当它们的位置与其他现有div不太接近时才将它们附加到正文。

这就是这个想法但是它没有按预期工作，我得到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。
第二对八。
.............
八对二。
第九对一。
不要做最后一次。

在将数据分配给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);}

这段代码来自我的碰撞网站...生病并尝试将其放在上面的代码中，但这需要避免碰撞和缩小差距。

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

Answer 2

我更改了碰撞逻辑。它通过比较对象之间的距离来检测对象是否靠近另一个对象。我也将逻辑包装在一个do-while循环中，这样它就会继续尝试找到放置正方形的位置，你将有20个正方形。

这有效：

var positions = [];  //stroe positions of appended divs
var divsize = 20; 
var topGap = 40;  // gap from top
var leftGap = 80;  //gap from left

function generateRandomPositionedDiv(){
    for(var c = 0; c < 20; c++){
        var color = '#'+ Math.round(0xffffff * Math.random()).toString(16);

            $newdiv = $('<div/>').css({
                'width':divsize+'px',
                'height':divsize+'px',
                'background-color': color
            }); 



                var posLeft;
                var posTop;
                var checkObj;
                var collide = false;

                posLeft = Math.floor((Math.random() * ($(document).width() - divsize)));//.toFixed();
                posTop = Math.floor((Math.random() * ($(document).height() - divsize)));//.toFixed();
                checkObj = {x: posLeft, y: posTop};

                collide = checkForCollisions(checkObj);

            if(!collide) {

                positions.push({x: posLeft, y: posTop});

                $newdiv.css({
                    'position':'absolute',
                    'left':posLeft+'px',
                    'top':posTop+'px'
                });

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

    }
}

/*function getPositions(box) {
  var $box = $(box);
  var pos = $box.position();
  var width = $box.width();
  var height = $box.height();
  return [ [ pos.left, pos.left + width + leftGap ], [ pos.top, pos.top + height + topGap ] ];
}*/


function comparePositions(obj1, obj2) { 
    if(Math.abs(obj1.x - obj2.x) <= (divsize + leftGap) && Math.abs(obj1.y - obj2.y) <= (divsize + topGap)) {
        return true;
    } else {
        return false;
    }
}

function checkForCollisions(posObj){
    for(var i = 0; i < positions.length; i++){
        var match = comparePositions(positions[i], posObj);
        if (match) { 
                //return true if two positions are close or overlapping
                return match;
            }
    }
}

generateRandomPositionedDiv();

Answer 3

如何使用其中一个库来检测碰撞？

http://sourceforge.net/projects/jquerycollision/

http://gamequeryjs.com/

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

3 个答案: