重疊絕對定位divs

我正在一個小的html5遊戲，用戶必須點擊指定的圓。我希望圈子每秒隨機改變一次位置。我能夠做出this。我唯一的問題是，這些圈子經常互相重疊。有什麼辦法可以防止這種情況發生？我嘗試過使用邊距，但這不起作用，因爲這些圈子有絕對的位置。下面是它的代碼：重疊絕對定位divs

//circles for game 
 
var circle1 = document.getElementById('circle1'); 
 
var circle2 = document.getElementById('circle2'); 
 
var circle3 = document.getElementById('circle3'); 
 

 
//viewport height and width 
 
var vh = 100; 
 
var vw = 100; 
 

 
//when the document loads, the circles change their position on screen 
 
function changePosition() { 
 
    //Intercval that runs every second 
 
    setInterval (function() { 
 
    //generates random numbers and assings them to the top and 
 
    //left properties of the circles 
 
    var circle1Top = Math.floor(Math.random() * vh) + 1; 
 
    var circle2Top = Math.floor(Math.random() * vh) + 1; 
 
    var circle3Top = Math.floor(Math.random() * vh) + 1; 
 
    var circle1Left = Math.floor(Math.random() * vw) + 1; 
 
    var circle2Left = Math.floor(Math.random() * vw) + 1; 
 
    var circle3Left = Math.floor(Math.random() * vw) + 1; 
 

 
    //if the random number is greater than or equal to the device size, another number is generated 
 
    //this prevents the circles from appearing off screen 
 

 

 
    //circle1 
 
while (circle1Top >= vh - 16 || circle1Top > vh) { 
 
    circle1Top = Math.floor(Math.random() * vh) + 1; 
 
    }; 
 

 
    while (circle1Left >= vw - 15 || circle1Top > vw) { 
 
    circle1Left = Math.floor(Math.random() * vw) + 1; 
 
    }; 
 

 

 
    //circle2 
 
    while (circle2Top >= vh - 16 || circle2Top > vh) { 
 
    circle2Top = Math.floor(Math.random() * vh) + 1; 
 
    }; 
 

 
    while (circle2Left >= vw - 15 || circle2Top > vw) { 
 
    circle2Left = Math.floor(Math.random() * vw) + 1; 
 
    }; 
 

 

 
    //circle3 
 
    while (circle3Top >= vh - 16 || circle3Top > vh) { 
 
    circle3Top = Math.floor(Math.random() * vh) + 1; 
 
    }; 
 

 
    while (circle3Left >= vw - 15 || circle3Top > vw) { 
 
    circle3Left = Math.floor(Math.random() * vw) + 1; 
 
    }; 
 

 
    //once the numbers are generated, they are assigned to the circles accordingly 
 
    circle1.style.top = circle1Top + 'vh'; 
 
    circle1.style.left = circle1Left + 'vw'; 
 
    circle2.style.top = circle2Top + 'vh'; 
 
    circle2.style.left = circle2Left + 'vw'; 
 
    circle3.style.top = circle3Top + 'vh'; 
 
    circle3.style.left = circle3Left + 'vw'; 
 

 

 
}, 1000); 
 
};

body { 
 
background-color: aliceblue; 
 
height: 100vh; 
 
width: 100vw; 
 
margin: 0; 
 
overflow: hidden; 
 
} 
 

 
main { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 

 
.circle { 
 
    width: 110px; 
 
    height: 110px; 
 
    background-color: blue; 
 
    border-radius: 50%; 
 
    position: absolute; 
 
} 
 

 
#circle1 { 
 
    background-color: red; 
 
} 
 

 
#circle2 { 
 
    background-color: blue; 
 
} 
 

 
#circle3 { 
 
    background-color: yellow; 
 
} 
 

 

 

 
/*media queries*/ 
 
@media only screen and (max-width: 435px) { 
 
    .circle { 
 
    width: 70px; 
 
    height:70px; 
 
    } 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <link type="text/css" rel="stylesheet" href="test.css"> 
 
    </head> 
 

 
    <body onload="changePosition()"> 
 

 
    <main> 
 
     <div class="circle" id="circle1"></div> 
 
     <div class="circle" id="circle2"></div> 
 
     <div class="circle" id="circle3"></div> 
 
    </main> 
 

 
    <!-- Scripts --> 
 
    <script type="text/javascript" src="test.js"></script> 
 
    </body> 
 

 
</html>

任何響應都十分讚賞。

來源

2016-10-08 J. Doe

您需要檢查兩個對象是否已經相交。檢查http://stackoverflow.com/questions/4230029/jquery-javascript-collision-detection或任何其他堆棧溢出的解決辦法。 –

您必須檢查圓圈是否重疊，如果是，請重新加載腳本。要檢查它們重疊，你必須做一些數學：

1）找出圓心是什麼：

var circle1centerX = circle1Left * document.documentElement.clientHeight * 0.65 + 55; 
var circle1centerY = circle1Top * document.documentElement.clientHeight * 0.65 + 55;

document.documentElement.clientHeight * 0.65是你需要乘以以VH轉換或因素vw到px。 55是圓圈半徑的一半。

2）檢查圓重疊：

如果圓重疊，則它們的中心之間的距離必須大於兩倍的半徑小。如果中心之間的距離等於或大於半徑的兩倍，則它們不重疊。（你的情況的2倍的半徑爲110px）

var distanceBetween1and2 = Math.sqrt(Math.pow(circle2centerX - circle1centerX, 2) + Math.pow(circle2centerY - circle1centerY)); 
var distanceBetween1and3 = Math.sqrt(Math.pow(circle3centerX - circle1centerX, 2) + Math.pow(circle3centerY - circle1centerY)); 
var distanceBetween2and3 = Math.sqrt(Math.pow(circle3centerX - circle2centerX, 2) + Math.pow(circle3centerY - circle2centerY));

（勾股定理）

if(distanceBetween1and2 < 2*radius || distanceBetween2and3 < 2*radius || distanceBetween1and3 < 2*radius) { 
    changePosition(); 
} else { 
    //place the circles 
}

但是有這種方法的一個缺點，當在其中圓圈是區域，是足夠小，所以必須有圓圈重疊，會有一個無限循環。您可以通過在放置圓圈的屏幕上設置最小尺寸來防止此問題。

來源

2016-10-08 15:40:12 user3722860

非常感謝。我一定會嘗試這個。 –

重疊絕對定位divs

回答

相關問題