2

Postei somente o JS, creio que seja o suficiente, sou novo ainda em JS e em programação então não sei quase nada dos comandos, quero comparar a posição das bolinhas e da área que elas aparecem pra que não "nasça" uma dentro da outra, com o posso fazer essa comparação dentro do 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);
}
2
  • quais são as dimensões da bolinha? largura, altura ou raio?
    – vik
    18/07/2019 às 14:27
  • div é de 50px por 50px radius 25 para deixar a div redonda 18/07/2019 às 14:30

2 Respostas 2

4

Uma ideia seria ter acesso às coordenadas (left e top) de cada bola.

Você pode ter uma colecção com todas divs bolas usando:

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

Para ter coordenadas num array pode usar:

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

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

}));

Agora dentro de um do...while vai recebendo coordenadas até essa nova coordenada estar 'disponivel'..

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)

Pode ver a colisão entre circulos neste link.

Link uteis

Veja funcionando em :https://jsfiddle.net/0b8f34no/

4
  • while (bolasCoordenadas.find(b => Math.sqrt((b.left - p1) * (b.left - p1) + (b.top - p2) * (b.top - p2)) < 50) !== undefined) pode explicar oq isso faz? 18/07/2019 às 22:09
  • não sei pq mas seu código quebra quando dou scroll, aí elas entram umas nas outras depois disso! 18/07/2019 às 22:17
  • @RicardoGava, editei a resposta, parece que adicionando document.body.scrollLeft e top resolve o problema, esse linha é para calcular a colisão entre circulos como está no link, o find retorna o primeiro item/objecto quando acha e undefined quando não acha..
    – vik
    18/07/2019 às 22:44
  • @RicardoGava document.documentElement.scrollLeft
    – vik
    19/07/2019 às 6:15
3

Crie uma array e vá adicionando objetos com 3 informações:

{p1, p2, id_da_bola}

O p1 é a posição X, o p2 a posição Y e o id_da_boa um id para identificar a bola.

Use um for para percorrer os objetos da array procurando uma posição X e Y que esteja entre o range da posição retornada pelas variáveis p1 e p2, ou seja, que possa sobrepor um elemento já existente na array.

Dentro do for você usa um if para fazer essa verificação. Se atender, significa que o elemento a ser inserido irá sobrepor um já existente, então você alterar o estado de uma variável de controle (chamei de flag) para não inserir o elemento.

Quando a bolinha for estourada, você irá remover da array o objeto que tem o id da bola, liberando aquele espaço para uma nova bola. Desta forma, nunca uma bolinha irá ocupar o mesmo espaço de uma outra, veja:

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>

5
  • Vlw pela ajuda Sam, mas esse código é complexo demais pra mim que é iniciante, mal consigo ler seu código e entender oq ele está fazendo, dei preferência paro o outro por ser um código mais "simplificado", abraços! 18/07/2019 às 22:54
  • 1
    Não é complexo. Dê uma boa olhada, é o seu próprio código só que funcionando. 19/07/2019 às 3:08
  • Não entendi....
    – Sam
    19/07/2019 às 5:25
  • 1
    Se for eu. Só disse que o código não é de difícil compreensão e o operador que deveria dar uma olhada mais atenta pois a resposta é baseada no código da pergunta. 19/07/2019 às 17:16
  • 2
    Ah tah. Agora entendi rs.. Tranquilo, amigo. Se o outro código funciona bem, isso que importa. Abs!
    – Sam
    19/07/2019 às 17:24

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .