Game of popping balls on the screen

I posted only the JS, I think it's enough, I'm still new in JS and programming so I know almost nothing of the commands, I want to compare the position of the balls and the area that they appear so as not to" be born " one inside the other, with the Can I make this comparison inside the if?

function addBola () {
    var bola = document.createElement("div");
    bola.setAttribute("class", "bola");
    var p1 = Math.floor(Math.random() * 1000);
    var p2 = Math.floor(Math.random() * 500);

    var corBolinha = Math.floor(Math.random() * 999);

    bola.setAttribute("style", "left:" + p1 + "px; top:" + p2 +
    "px; background-color: #" + corBolinha);

    bola.setAttribute("onmousedown", "estourar(this)");

    if(/*comparação vai aqui!!!*/) {
        return false;
    }else {
        document.body.appendChild(bola);

    }
}

function estourar(elemento) {
    document.body.removeChild(elemento)
    document.getElementById("placar").innerHTML++;
}

function errar(missed) {
    document.getElementById("missClick").innerHTML++;
}

function iniciar() {
    document.getElementById("placar").innerHTML = 0;
    document.getElementById("missClick").innerHTML = 0;
    setInterval(addBola, 600);
}
Author: Sam, 2019-07-18
Source

2 answers

One idea would be to have access to the coordinates (left and top) of each ball.

You can have a collection with all divs bolas using: 

var bolasDivs = document.getElementsByClassName('bola');

To have coordinates in an array you can use: 

var bolasCoordenadas = Array.prototype.map.call(bolasDivs, b => ({

    left: b.getBoundingClientRect().left + document.documentElement.scrollLeft,
    top: b.getBoundingClientRect().top + document.documentElement.scrollTop,

}));

Now within a do...while will receive coordinates until this new coordinate is 'available'..

var p1, p2;

do {
    p1 = Math.floor(Math.random() * 1000);
    p2 = Math.floor(Math.random() * 500);
}
while (bolasCoordenadas.find(b => Math.sqrt((b.left - p1) * (b.left - p1) + (b.top - p2) * (b.top - p2)) < 50) !== undefined)

You can see the collision between circles in this link.

Link ueis

See working at: https://jsfiddle.net/0b8f34no /

 4
Author: vik, 2019-07-19 06:16:18

Create an array and add objects with 3 Information: 

{p1, p2, id_da_bola}

The p1 is the X position, the p2 The Y position and the id_da_boa an id to identify the ball.

Use a for to scroll through the array objects looking for an X and Y position that is between the range of the position returned by the variables p1 and p2, that is, that can overlap an existing element in the array.

Inside for you use a if to do this check. If you answer, it means that the element to be inserted will overlap an existing one, so you change the state of a control variable (I called it flag) to not insert the element.

When the ball is burst , you will remove the object that has the ball id from the array, freeing that space for a new ball. In this way, one ball will never occupy the same space as another, see: 

var bolaPos = [], bolaId = 0;
function addBola () {
    var bola = document.createElement("div");
    bola.setAttribute("class", "bola");
    var p1 = Math.floor(Math.random() * 1000);
    var p2 = Math.floor(Math.random() * 500);

   var flag;
   for(var x=0; x < bolaPos.length; x++){
      if( ((p1 > bolaPos[x].p1-50 && p1 < bolaPos[x].p1) || (p1 < bolaPos[x].p1+50 && p1 >= bolaPos[x].p1))
         &&
         ((p2 > bolaPos[x].p2-50 && p2 < bolaPos[x].p2) || (p2 < bolaPos[x].p2+50 && p2 >= bolaPos[x].p2)) ){
            flag = true;
            break;
      }
   }

    if(flag) {
        return;
    }else {
       bolaId++;
       bolaPos.push({ p1, p2, bolaId: "b_"+bolaId });
       var corBolinha = Math.floor(Math.random() * 999);
   
       bola.setAttribute("style", "left:" + p1 + "px; top:" + p2 +
       "px; background-color: #" + corBolinha);
      bola.id = "b_"+bolaId;
       bola.setAttribute("onmousedown", "estourar(this)");
        document.body.appendChild(bola);

    }
}

function estourar(elemento) {
    document.body.removeChild(elemento)
    document.getElementById("placar").innerHTML++;

   var b_id = elemento.id;
   bolaPos = bolaPos.filter(function(e){
     return e.bolaId != b_id;
   });

}

function errar(missed) {
    document.getElementById("missClick").innerHTML++;
}

function iniciar() {
    document.getElementById("placar").innerHTML = 0;
    document.getElementById("missClick").innerHTML = 0;
    setInterval(addBola, 600);
}
iniciar()
.bola{
   width: 50px;
   height: 50px;
   position: absolute;
   border-radius: 25px;
}
<span id="placar"></span>
<span id="missClick"></span>
 3
Author: Sam, 2019-07-18 16:57:38