Javascript posicionado al azar Div sin superponerlos

He estado trabajando en una idea de concepto aleatorio de tener 6 nubes aparecer en una página con comentarios aleatorios extraídos de una base de datos. Esa parte es fácil, sin embargo, me resulta extremadamente difícil asegurarme de que las 6 nubes no se superpongan entre sí. He investigado mucho la Detección de Colisiones y descubrí que no hay un método adecuado para verificar un DIV dentro de un rango en X o Y antes de colocar el nuevo div “posicionado al azar” en la página. Tengo mi código debajo que sé que es extremadamente desordenado en este momento. Actualmente lo tengo comprobando el último DIV con un éxito razonable, pero si DIV 1 y DIV 3, por ejemplo, tienen posiciones XY similares, entonces es un problema. Lo siento, si no tengo sentido … aquí está mi código y un 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 = $('
' + cloudtext[counter - 1] + '
').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 posx + 354) || (px 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.miximages.com/javascript/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 Fiddle – Enlace a JSFiddle

El algoritmo se vería algo así; Aunque podría haber cometido un error

  1. Obtenga la altura y el ancho del documento y = docH, x = docW
  2. Resta la altura y el ancho de

    , y = y – divH, x = x – divH

  3. Elija coordenadas aleatorias curX, curY entre 0..x, 0..y
  4. newX = curX, newY = curY
  5. Para cada

    1. Llame a su información prevX, prevY, prevW, prevH
    2. Si prevX entonces newX = newX + prevW
    3. Si prevy entonces newY = newY + prevH
  6. Añadir

    en newX, newY

  7. Guardar

    información curX, curY, divW, divH

  8. Si hay otro

    , vaya al paso 2.

    Intereting Posts