Question

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

//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 个答案: