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

时间:2013-08-05 14:34:27

标签: javascript html random overlap

我一直在研究一个随机概念,即在页面上出现6个云,并从数据库中提取随机注释。这部分很容易,但是我发现要确保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 个答案:

答案 0 :(得分:1)

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

  1. 获取文档的高度和宽度 y = docH,x = docW
  2. 减去<div>的高度和宽度, y = y - divH,x = x - divH
  3. 0..x,0..y
  4. 之间选择随机坐标 curX,curY
  5. newX = curX,newY = curY
  6. 对于之前的<div>
    1. 调用它的信息 prevX,prevy,prevW,prevH
    2. 如果 prevX&lt; curX 然后 newX = newX + prevW
    3. 如果 prevY&lt; curY 然后 newY = newY + prevH
  7. newX,newY
  8. 附加<div>
  9. 保存<div>信息 curX,curY,divW,divH
  10. 如果还有其他<div>,请转到第2步。