colisiones de imagenes

[sfx4ever]

Hola!, he estado utilizando el buscador del foro y google pero no he encontrado nada al respecto.

Me interesaria conocer como detectar colisiones entre imagenes, divs, spans o cualquier otra etiqueta html con javascript.

La verdad es que no se por donde empezar. ¿alguna idea sobre el tema?

GRACIAS.

[Kelpie]

Perdona la ignorancia pero, ¿qué es una colisión?

[sfx4ever]

una colision es cuando un elemento (IMG, DIV, etc) esta encima de otro, es decir que se estan tocando. No se si habra algun manera eficaz de detectar esos choques...

[derkenuke]

Hola sfx4ever:

¿Significa "esta encima de otro, es decir que se estan tocando" que los dos elementos tienen position:absolute y que pueden estar superpuestos? ¿Quieres estudiar esa superposición?

Yo creo que sí se podría. Si es eso confirmalo y lo intentamos.

Un saludo.

[sfx4ever]

efectivamente derkenuke, los dos elementos tendrian position:absolute.

Buscando por ahi he encontrado esto: http://www.java2s.com/Code/JavaScrip...imaenglish.htm

En la función detectar_colision () nos encontramos con esto:

//Calcular si coinciden horizontalmente:
if (personaje_pos_x + 40 > enemigo_pos_x && personaje_pos_x < enemigo_pos_x || personaje_pos_x < enemigo_pos_x + 40 && personaje_pos_x > enemigo_pos_x)
{
//Calcular si tambien coinciden verticalmente:
if (personaje_pos_y < enemigo_pos_y + 40 && personaje_pos_y > enemigo_pos_y || personaje_pos_y + 40 > enemigo_pos_y && personaje_pos_y < enemigo_pos_y)
{

¿Creeis que es una buena forma de detectar la colision o existe alguna otra más optima?

[Kelpie]

La mejor manera de detectar 'solapes' entre objetos es comprobar la interferencia de sus posiciones.

El código que plenteas es bastante raro...

El código genérico podría ser algo así:

Código PHP:

  function solapa(obj1,obj2){ 
    h=false; //Flag de solape horizontal 
    v=false; //Flag de solape vertical 
    if (obj1.x1>obj2.x1 && obj1.x1<obj2.x2 || obj1.x2>obj2.x1 && obj1.x2<obj2.x2) h=true; 
    if (obj1.y1>obj2.y1 && obj1.y1<obj2.y2 || obj1.y2>obj2.y1 && obj1.y2<obj2.y2) v=true; 
    return (h&&v); //Devolver la unión de flags. Solo será true si ambos es true 
}  
   

Esto no considera el caso de que se rocen. Si se rozan devuelve que no solapan, aunque en realidad solapan 1px. Para modificar este comportamiento hay que cambiar los "menor" y "mayor" por "menor o igual" y "mayor o igual".

Luego, y ya para nota, se podría hacer una función que devuelva si solapan, se rozan o ni se tocan...

[derkenuke]

Sí, yo lo habría hecho igual que el compañero Kelpie, creo que sería la manera más óptima de hacerlo (tampoco es muy complejo el código).

Lo único que pondría es un par de paréntesis más... hay que tener cuidado con la preferencia de &&, || y >.

Un saludo.

[Kelpie]

Derkenuke tiene razón. Le faltan unos paréntesis que dejen claro el orden:

if ((obj1.x1>obj2.x1 && obj1.x1<obj2.x2) || (obj1.x2...

[derkenuke]

Nunca me acabé de aprender del todo la preferencia de los operadores...

Según este enlace, && funciona antes que ||, entonces se supone que si escribimos:

true && false || true
va a ser equivalente a
(true && false) || true
con lo que el resultado de la expresión será true. ¿Me equivoco?

Es decir, en nuestro ejemplo

Código:

if (obj1.x1>obj2.x1 && obj1.x1<obj2.x2 || obj1.x2>obj2.x1 && obj1.x2<obj2.x2)

Se evaluarían primero todos los < y >, luego todos los &&, y finalmente los ||. Entonces estaría bien escrito ¿no? Sería lo mismo que escribir:

Código:

if ( ( (obj1.x1>obj2.x1) && (obj1.x1<obj2.x2) )  || ( (obj1.x2>obj2.x1) && (obj1.x2<obj2.x2 ) )  )

¿Lo estoy haciendo bien? Es que yo siempre lo escribo con paréntesis (y creo que lo seguiré haciendo por legibilidad), pero por curiosidad...

[sfx4ever]

muchisimas gracias Kelpie por tu funcion, aunque la verdad es que si que se parece al ejemplo que puse, lo que pasa es que en el ejemplo esta teniendo en cuenta el ancho y alto de la imagen ( ese +40), y tu script es más genérico.

Probare tu código a ver que tal va... (con los parentesis para hacerlo mas legible ;D )

saludos!

[sfx4ever]

una preguntilla sobre tu script Kelpie:

Cuando te refieres a: obj1.x1, ¿quieres decir: document.getElementById('obj1').style.left ????

y cuando dices obj1.x2, ¿quieres decir: (document.getElementById('obj1').style.left + document.getElementById('obj1').style.width) ???, osea la coordenada x mas el ancho del elemento..

es que no me ha quedado muy claro eso...

[Kelpie]

Efectivamente.
Para cada objeto, (x1,y1) es la esquina superior izquierda y (x2,y2) la inferior derecha. (En realidad funciona aunque les des la vuelta... )

Tal y como apuntas, x1 sería el left, x2 el left+width, y1 el top, y2 el top+height...