重叠绝对定位的div

Question

我正在开发一个小的 html5 游戏，用户必须点击指定的圆圈。 我希望圆圈每秒随机改变位置。 我能够做到这一点。 我唯一的问题是圆圈经常相互重叠。 有什么办法可以防止这种情况吗？ 我试过使用边距，但这不起作用，因为圆圈的位置是绝对的。 这是它的代码：

 //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>

任何回应都非常感谢。

Answer 1

您必须检查圆圈是否重叠，如果重叠，请重新加载脚本。 要检查它们是否重叠，您必须做一些数学运算：

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
}

但是这种方法有一个缺点，当圆圈所在的区域足够小时，所以必须有圆圈重叠，就会出现无限循环。 您可以通过在放置圆圈的屏幕上设置最小尺寸来防止这种情况发生。

重叠绝对定位的div

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-10-08 15:40:12

重叠绝对定位的div

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-10-08 15:40:12

解决方案1
1 已采纳 2016-10-08 15:40:12