我正在尝试检测两个给定div
的是否太近或碰撞/重叠。
我有下面的代码笔,它试图生成 20 个随机div
的,并且只有在它们的位置不太靠近其他现有的 时才将它们附加到 body 中div
。
这就是想法,但它并没有按预期工作,因为我得到的 ' 通过与现有s 的div
接近/重叠位置获得通过。div
(如果第一次是完美的,请多次运行它并且你应该遇到它)。
http://codepen.io/anon/pen/fHLzj
任何人都可以看到错误和使它起作用的方法吗?
我正在尝试检测两个给定div
的是否太近或碰撞/重叠。
我有下面的代码笔,它试图生成 20 个随机div
的,并且只有在它们的位置不太靠近其他现有的 时才将它们附加到 body 中div
。
这就是想法,但它并没有按预期工作,因为我得到的 ' 通过与现有s 的div
接近/重叠位置获得通过。div
(如果第一次是完美的,请多次运行它并且你应该遇到它)。
http://codepen.io/anon/pen/fHLzj
任何人都可以看到错误和使它起作用的方法吗?
这有点难以解释和理解..但是这里有:
通过运行 for 循环检查每个 div 与每个 div 。
x,y,h,w
要考虑的点...您实际上并不需要检查每个 div ..考虑一下
有10个div...
在将它们分配给 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; }
我改变了碰撞逻辑。它通过比较对象之间的距离来检测对象是否靠近另一个对象。我也将逻辑包装在一个 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();