Game of popping polka dots on the screen

Question

I only posted the JS, I think it’s enough, I’m still new to JS and programming so I know almost nothing of the commands, I want to compare the position of the balls and the area they appear so that they do not "be born" one inside the other, with what I can do 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);
}

Answer 1

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 inside 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 uteis

• getElementsByClassName

• map

• getBoundingClientRect

• find

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

Answer 2

Create an array and add objects with 3 information:

{p1, p2, id_da_bola}

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

Use a for to go 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, it can override an existing element in the array.

Within the for you use a if to make that check. If meet means that the element to be inserted will override an existing one, then you change the state of a control variable (called flag) not to insert the element.

When the ball goes burst, you will remove from the array the object that has the id of the ball, releasing that space for a new ball. This way, never a ball will occupy the same space of 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>