Detectar colisiones en JavaScript te permite saber cuándo dos objetos de tu juego se tocan, como una mascota chocando con un enemigo. Aquí aprendes a construir esa lógica paso a paso usando coordenadas, condiciones y una función reutilizable que puedes adaptar a cualquier videojuego 2D.

Cómo funciona la detección de colisiones en un videojuego 2D

Imagina una cuadrícula con un cuadrado verde grande (tu mascota) y dos cuadrados pequeños (los enemigos), uno morado y otro naranja. Para saber si chocan, comparas sus bordes: arriba, abajo, izquierda y derecha.

La lógica funciona al revés de lo que parece: en vez de buscar cuándo sí hay colisión, buscas cuándo no la hay. Si alguna de estas condiciones se cumple, los cuadros están separados [00:32]:

• La parte de abajo del verde es menor que la parte de arriba del enemigo.
• La parte de arriba del verde es mayor que la parte de abajo del enemigo.
• La derecha del verde es menor que la izquierda del enemigo.
• La izquierda del verde es mayor que la derecha del enemigo.

Si ninguna se cumple, los cuadros están encimados y hay choque.

¿Por qué se detectan las colisiones con condiciones negativas? Porque comparar bordes para descartar separación es más eficiente que calcular intersección de áreas. Si los rectángulos no están separados en ningún eje, entonces se están tocando.

Cómo se prueba la lógica con valores reales

Con el cuadrado morado, ninguna condición se cumple, así que hay colisión. Con el naranja, la tercera condición se cumple (la derecha del verde es menor que la izquierda del naranja), así que no hay choque [02:10]. Esa misma lógica la trasladas al código.

Cómo escribir la función revisarColisión en JavaScript

La función revisarColision recibe como parámetro al enemigo, porque tu juego puede tener varios y necesitas comparar contra el correcto [03:20]. Dentro de la función calculas las cuatro coordenadas de cada objeto.

Para el enemigo:

• arribaEnemigo equivale a enemigo.y.
• abajoEnemigo equivale a enemigo.y más el alto del enemigo.
• izquierdaEnemigo equivale a enemigo.x.
• derechaEnemigo equivale a enemigo.x más el ancho del enemigo.

La coordenada y marca dónde empieza a pintarse el objeto, y al sumarle el alto obtienes dónde termina. Lo mismo aplica para x con el ancho.

Luego repites el cálculo para la mascota usando mascotaJugador.objeto. Un truco práctico: copia el bloque del enemigo y reemplaza las palabras clave en todas las líneas a la vez con selección múltiple [04:55].

javascript function revisarColision(enemigo) { const arribaEnemigo = enemigo.y; const abajoEnemigo = enemigo.y + enemigo.alto; const derechaEnemigo = enemigo.x + enemigo.ancho; const izquierdaEnemigo = enemigo.x;

const arribaMascota = mascotaJugador.objeto.y; const abajoMascota = mascotaJugador.objeto.y + mascotaJugador.objeto.alto; const derechaMascota = mascotaJugador.objeto.x + mascotaJugador.objeto.ancho; const izquierdaMascota = mascotaJugador.objeto.x;

if ( abajoMascota < arribaEnemigo || arribaMascota > abajoEnemigo || derechaMascota < izquierdaEnemigo || izquierdaMascota > derechaEnemigo ) { return; }

mascotaJugador.detenerMovimiento(); alert('Hay colisión con ' + enemigo.nombre); }

Cuándo llamar a revisarColisión dentro del juego

No tiene sentido revisar colisiones todo el tiempo. Solo importan cuando la mascota se mueve. Dentro de la función pintarCanvas, agrega un if que valide si la velocidad en x o en y es diferente de cero [06:40]. Si lo es, llamas a revisarColision pasando cada enemigo: iPodoshEnemigo, capipepoEnemigo y ratihuellaEnemiga.

¿Cómo sé si mi personaje se está moviendo en JavaScript? Revisa si su velocidad en x o en y es distinta de cero. Si alguna lo es, el personaje está en movimiento y debes evaluar colisiones.

Cómo evitar errores comunes al programar colisiones

Un error típico aparece cuando todas las mascotas inician en la misma posición del mapa. Si comparas la mascota del jugador contra ella misma (por ejemplo, iPodosh contra iPodosh), siempre dará colisión [08:05]. La solución es comparar siempre contra la versión enemiga del personaje, no contra el modelo base.

Otro detalle importante: las imágenes de los personajes son cuadrados, así que la colisión se dispara cuando los cuadros se tocan, no cuando los bordes visuales del dibujo se rozan. Para detectar bordes exactos necesitas técnicas más avanzadas de pixel perfect collision.

Cómo detener el movimiento al chocar

Si solo lanzas un alert, el personaje sigue moviéndose en el fondo. Para arreglarlo, llama a detenerMovimiento dentro del bloque que se ejecuta cuando sí hay colisión [09:30]. Y para que el mensaje sea más claro, concatena el nombre del enemigo con enemigo.nombre. Así cada choque te dice exactamente con quién fue.

Practica este flujo varias veces y cuéntame en los comentarios qué enemigo te costó más detectar.