How can I generate a random position for an element so that it does not overlap with the position of-CodePudding

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>

CodePudding user response：

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.

CodePudding user response：

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>