Colisión entre objetos JS

[SrTrp]

Tengo una pregunta como evitar que se encimen objetos en JS, bueno tengo un generador que cada cierto tiempo regenera un recuadro aleatoria mente con la función random pero quisiera evitar que se encimen porque a veces se pone uno sobre otro.

[engel lex]

esto se llama "colision de elementos", usado sobre todo en juegos

puedes hacerlo con el bounding rect de el elemento (el rectangulo) un ejemplo

Código (javascript) [Seleccionar] Expandir



function detectar_colision(el1, el2) {
    return !(el1.right < el2.left ||
                el1.left > el2.right ||
                el1.bottom < el2.top ||
                el1.top > el2.bottom)
}

var elemento1 = document.getElementById("elemento1").getBoundingClientRect();
var elemento2 = document.getElementById("elemento2").getBoundingClientRect();



if( detectar_colision(elemento1, elemento2)){

  hacer_algo()
}


[SrTrp]

Ya eh intentado carias formas con tu función que me brindaste y funciona me detecta cuando se juntan 2 objetos, pero de una forma y otra intente hacer que no aparecieran los que se juntaran, pero dejan de aparecer todos y no me genera nada pero ya encontré el error y ahora estoy intentando solucionarlo pero voy a las matemáticas xd intentare hacer los calculos igualmente gracias

Código (javascript) [Seleccionar] Expandir

egenerados[i].x=random(canvas.width/40)*40;

[engel lex]

No dijiste que era canvas este método es por ejemplo para elementos div span y esos

[SrTrp]

Con razon igual intentare solucionarlo pero si pudieses brindarme un poco de ayuda yo lo complementaria.

[engel lex]

Primero aclara cuales son tus objetos, porque así no podemos saber cómo son o como hacer que interactuen

[SrTrp]

Mi objeto es una variable llamada egenerados que genera enemigos cada cierto tiempo o acción por ejemplo si elimino a un enemigo o pasan 5 segundos se generan aleatoriamente de posiciones horizontal

Código (javascript) [Seleccionar] Expandir

egenerados [i].x=random(canvas.width/40)*40;//10)*10;
                            egenerados [i].y=0;
                            egenerados [i].evida=2;
                            egenerados .push(new Rectangle(random(canvas.width/40)*40,0,40,40,0,2));