2
私はユーザーが指定したサークルをクリックしなければならない小さなhtml5ゲームに取り組んでいます。私は、サークルがランダムに1秒ごとにポジションを変更したいと思っています。私はthisを作ることができました。私の唯一の問題は、サークルが互いに重なることが多いことです。私がこれを防ぐ方法はありますか？私はマージンを使ってみましたが、サークルは絶対的な位置を取っているので動作しません。 は、ここでのコードです：絶対配置されたdivをオーバーラップする
//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>どれレスポンスが大幅に高く評価されています。
2つのオブジェクトが交差しているかどうかを確認する必要があります。 http://stackoverflow.com/questions/4230029/jquery-javascript-collision-detectionまたはこれに近づくスタックオーバーフローに関するその他の回答を確認してください。 –