Javascript随机定位的Div而不重叠它们

Posted 2023-02-25

【中文标题】Javascript随机定位的Div而不重叠它们

【英文标题】：Javascript Randomly Positioned Div's without overlapping them

【发布时间】：2013-08-06 07:37:26

【问题描述】：

我一直在研究一个随机概念，即在一个页面上出现 6 朵云，并从数据库中提取随机 cmets。这部分很简单，但是我发现确保 6 朵云不会相互重叠非常困难。我已经研究了很多碰撞检测，发现在将新的“随机定位”div 放置在页面上之前，没有真正合适的方法来检查 X 或 Y 范围内的 DIV。我有我的代码，我知道现在非常混乱。我目前有它检查最后一个 DIV 并取得了合理的成功，但如果 DIV 1 和 DIV 3 例如，具有相似的 X Y 位置，那么这是一个问题。对不起，如果我没有任何意义.. 这是我的代码和 jsFiddle

$(document).ready(function () 
var counter = 0;
//var colide = ;
var px = 0;
var py = 0;

var clouds = new Array("cloud1", "cloud2", "cloud3", "cloud4", "cloud5", "cloud6");
var cloudtext = new Array("This is text for cloud 1 :D", "This is text for cloud 2 :D", "This is text for cloud 3 :D", "This is text for cloud 4 :D", "This is text for cloud 5 :D", "This is text for cloud 6 :D");

function makeDiv() 
    if (counter < 6) 
        counter++;

        //var divsize = ((Math.random() * 100) + 50).toFixed();
        //var color = '#' + Math.round(0xffffff * Math.random()).toString(16);
        $newdiv = $('<div class="' + clouds[counter - 1] + '">' + cloudtext[counter - 1] + '<div/>').css(

            'width': '354px',
                'height': '202px'

            //'width': divsize + 'px',
            //'height': divsize + 'px',
            //'background-color': color,
        );

        var posx = (Math.random() * ($(document).width() - 354)).toFixed();
        var posy = (Math.random() * ($(document).height() - 202)).toFixed();

        while (posy < 180) 
            posy = (Math.random() * ($(document).height() - 202)).toFixed();
        


        if ((px > posx + 354) || (px < posx - 354)) 
            if ((py > posy + 202) || (py < posy - 202)) 


                //alert(px + ' - ' + posx + ' px(temp) - posx(newdiv) - good to go!');
                py = posy;
                px = posx;
                $newdiv.css(
                    'position': 'absolute',
                        'left': posx + 'px',
                        'top': posy + 'px',
                        'display': 'none',
                        'background-image': 'url(http://www.demixgaming.co.uk/cloud/images/Cloud.png)',
                        'text-align': 'center',
                        'line-height': '202px',
                        'color': '#000'
                ).appendTo('body').fadeIn(150).delay(300, function () 
                    makeDiv();
                );
             else 
                counter--;
                px = posx;
                py = posy;
                makeDiv();
            
         else 
            counter--;
            px = posx;
            py = posy;
            makeDiv();
        ;

    

makeDiv();

);

JS 小提琴 - Link to JSFiddle

【参考方案1】：

算法看起来像这样；不过我可能犯了一个错误

获取文档的高度和宽度y = docH, x = docW 减去<div>的高度和宽度，y = y - divH, x = x - divH 在 0..x, 0..y 之间选择随机坐标 curX, curY newX = curX，newY = curY 对于之前的每个<div>
称之为信息prevX, prevY, prevW, prevH 如果 prevX 那么 newX = newX + prevW 如果 prevY 那么 newY = newY + prevH
在 newX, newY 处附加 <div> 保存<div> 信息curX、curY、divW、divH 如果有另一个<div>，请转到步骤2。

【讨论】：

5以下的子步骤应该更像'if (curX > prevX - divW && curX < prevX + divW && curY > prevY - divH && curY < prevY + divH) pick new position and start checks over '

@ejegg 您添加的项目越多，随机“挑选新”的想法就越糟糕，因此我尝试将其翻译。

是的，但是如果 div 在 X 和 Y 上重叠，您仍然只需要移动它 - 如果它只是在现有 div 的上方/下方或左/右对齐，则无需移动它。

非常感谢大家。我对 javascript 还是很陌生，所以我花了一些时间来理解它。我将按照该算法的规则重新编写我的代码，看看我能想出什么