把div放在隨機沒有覆蓋的地方

Question

我想隨意在窗戶上放置div而沒有覆蓋。 therfore即時 創造一些陣列，

widthArray，heightArray，XP = xPosition位置，YP = yPosition，XPRT = rightCornerX（XPOS +寬度） yPRT = rightCornerY等

因此Im給所有這些一個隨機的位置，我計算所有的角點。 之後，我計算內兩個循環，如果其中一個div的角落之一是 另一個div，如果這是真的，即時給予一個新的隨機位置，只要它 不與另一個div疊加。

這裏是代碼：

for(var i = 0; i<xP.length; i++) { 
      for(var k = 0; k<xP.length; k++) { 

       if(i == k) { 
        //alert(Math.random()); 
       } else { 

        while((xP[i]>xP[k] && yP[i]>yP[k] && xP[i]<xPRB[k] && yP[i]<yPRB[k]) || (xPRT[i]<xPRT[k] && yPRT[i]>yPRT[k] && xPRT[i]>xP[k] && yPRT[i]<yPRB[k]) || (xPRB[i]<xPRB[k] && yPRB[i]<yPRB[k] && xPRB[i]>xP[k] && yPRB[i]>yP[i]) || (xPLB[i]>xPLB[k] && yPLB[i]<yPLB[k] && xPLB[i]<xPRB[k] && yPLB[i]>yP[k])) { 
         //alert("i: "+i+" k: "+k+" xP: "+xP[i]+" > xP2: "+xP[k]+" & yP: "+yP[i]+" > yP2: "+yP[k]); 
         xP[i] = GetRandom(0, window.innerWidth - widthArray[i]-2); 
         yP[i] = GetRandom(0, window.innerHeight - heightArray[i]-2); 

         xPRT[i] = xP[i] + widthArray[i]; 
         yPRT[i] = yP[i]; 

         xPRB[i] = xP[i]+ widthArray[i]; 
         yPRB[i] = yP[i]+ heightArray[i]; 

         xPLB[i] = xP[i]; 
         yPLB[i] = yP[i] + heightArray[i]; 
         count++; 

        }; 
       } 
      } 
     } 

，即時通訊定位後創建的瓦爾的div。 但仍有覆蓋divs。我的邏輯有問題嗎？ 是不是寫得不對？

感謝您的幫助和抱歉不好英語:)

Answer 1

我認爲，如果你檢查DIV碰撞，你都將它們添加到窗口算法將運行得更快。不是隨機調整它們，然後檢查是否有任何碰撞，隨機計算每個DIV的位置並在添加之前檢查該位置是否發生碰撞。如果是，重新計算一個新的位置並再次檢查。我認爲這將大O從N^2減少到N * log（N）。

編輯 - 下面是一些示例代碼：

function Rect(x, y, w, h) 
{ 
    this.x = x; 
    this.y = y; 
    this.w = w; 
    this.h = h; 

    this.hitTest = function(x, y) 
    { 
    return(x >= this.x && x <= this.x + this.width && 
      y >= this.y && y <= this.t + this.height); 
    } 
} 

var numDivs = 10; 
var divList = new Array(); 

for(var i = 0 ; i < numDivs ; i++) 
{ 
    var doesOverlap = false; 
    do 
    { 
    divList[i] = new Rect(Math.random() * (window.innerWidth - 50), Math.random() * (window.innherHeight - 50), 50, 50); 
    for(var y = 0 ; y < i && !doesOverlap ; y++) 
    { 
     doesOverlap |= divList[y].hitTest(divList[i].x, divList[i].y); 
     doesOverlap |= divList[y].hitTest(divList[i].x + divList[i].width, divList[i].y); 
     doesOverlap |= divList[y].hitTest(divList[i].x, divList[i].y + divList[i].height); 
     doesOverlap |= divList[y].hitTest(divList[i].x + divList[i].width, divList[i].y + divList[i].height); 
    } 
    } 
    while(doesOverlap); 

    // No colision, add div 
} 

我沒有的正確性測試它，只是寫它從我的頭頂。希望它會給你一個想法，你錯了什麼。