- Ambos elementos son rectangulares (o se pueden considerar rectángulos). Como en tu caso son DIVs no habrá problemas con esto.
- Ambos elementos deben estar contenidos en el mismo "padre posicionado": esto es para que al preguntar la posición de cada elemento, esta sea siempre relativa al mismo sistema de referencia (su padre).
- Solo necesitas detectar colisiones entre dos elementos. Si son más de dos (pero no demasiados!) puedes detectar las colisiones por pares de objetos.
Básicamente, dos elementos a y b colisionan si se cumplen estas cuatro condiciones a la vez:
- El lado izquierdo de a se encuentra a la izquierda del lado derecho de b.
- El lado derecho de a se encuentra a la derecho del lado izquierdo de b.
- El lado inferior de a se encuentra debajo del lado superior de
b. - El lado superior de a se encuentra encima del lado inferior de
b.
Claro, dependiendo de lo que deseas verificar, las cuatro desigualdades pueden ser estrictas (<
) o no (<=
)