How can I generate a random position for an element so that it does not overlap with the position of a different element in javascript?
Question
I am trying to generate random player locations that do not overlap. My initial assumption is that maybe I should (1) generate random positions, (2) check if random positions are overlapping, (3) regenerate positions that are overlapping.
Edit: Simplified the code to more directly point out the problem.
function randomPosition() { let random = parseInt( (50 + Math.random()*100)); return random } let div01 = document.createElement('div'); div01.setAttribute('class', 'div01'); let div02 = document.createElement('div'); div02.setAttribute('class', 'div02'); document.body.append(div01, div02); div01.style.top = randomPosition() + 'px'; div01.style.left = randomPosition()+ 'px'; div02.style.top = randomPosition() + 'px'; div02.style.left = randomPosition() + 'px';
.div01 { position: absolute; background-color: red; width: 50px; height: 50px; }.div02 { position: absolute; background-color: blue; width: 50px; height: 50px; }
<.DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> <title>random position</title> </head> <body> <script src="script.js" type="text/javascript"></script> </body> </html>
2 answers
solution1
1 2022-12-08 08:59:23
You need to go with your idea 1. For most games, this is something you handle at the beginning when the character is being drawn. Given a player already at (x1,y1) and a random position (x2,y2) at which you'd like to place a new player, and a desired minDistance between characters, you need a function of the sort (Java).
boolean isPlayerPositionValid(int x1, int y1, int x2, int y2, int minDistance) {
double clearance = Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2));
return clearance >= minDistance;
}
When characters are drawn on the game frame, minDistance must of course be chosen according to the dimension (size in pixels) of your characters.
solution2
0 2022-12-08 10:16:19
My current solution:
(1) Generate random coordinates (2) Use the checkPosition() function to compare if the players overlap (3) Added a minimum distance variable to increase the allowable space between each player when they are placed.
**The if statement that checks for overlap would normally be written as:
if((x2 > x1 - x2.width) && (x2 <= x1 + x1.width) && (y2 > y1 - y2.height) && (y2 <= y1 + y1.height)) { console.log("is overlapping") }
function randomPosition() { let random = parseInt( (50 + Math.random()*100)); return random } let playerWidth = 50; let playerHeight = 50; let minDist = 20; let div01 = document.createElement('div'); div01.setAttribute('class', 'div01'); let div02 = document.createElement('div'); div02.setAttribute('class', 'div02'); function checkPosition() { let x1 = randomPosition(); let y1 = randomPosition(); let x2 = randomPosition(); let y2 = randomPosition(); if((x2 > x1 - playerWidth - minDist) && (x2 <= x1 + playerWidth + minDist) && (y2 > y1 - playerHeight - minDist) && (y2 <= y1 + playerHeight + minDist)) { console.log("player is less than minimum distance"); checkPosition(); } else { div01.style.top = x1 + 'px'; div01.style.left = y1 + 'px'; div02.style.top = x2 + 'px'; div02.style.left = y2 + 'px'; document.body.append(div01, div02); } } checkPosition();
.div01 { position: absolute; background-color: red; width: 50px; height: 50px; }.div02 { position: absolute; background-color: blue; width: 50px; height: 50px; }
<.DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> <title>random position</title> </head> <body> <script src="script.js" type="text/javascript"></script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.