重叠绝对定位的div

道伊

我正在开发一个小的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>

任何答复都将不胜感激。

用户名

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

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
}

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

TOP 榜单

热门标签

归档