Detectar cuándo dos objetos se tocan en pantalla es una de las mecánicas fundamentales al programar un videojuego. Entender la lógica detrás de las colisiones te permite construir interacciones reales entre personajes, enemigos y obstáculos. A continuación se explica paso a paso cómo funciona este sistema utilizando coordenadas, condiciones lógicas y funciones reutilizables.
¿Cómo funciona la lógica de colisiones entre dos objetos?
El punto de partida es imaginar cada personaje como un cuadrado dentro de una grilla o cuadrícula [0:14]. Aunque visualmente sean imágenes con formas irregulares, el área que ocupa cada uno se representa como un rectángulo definido por cuatro bordes: arriba, abajo, izquierda y derecha.
Para determinar que no hay colisión, al menos una de estas condiciones debe cumplirse:
- La parte de abajo del objeto principal es menor que la parte de arriba del otro objeto.
- La parte de arriba del objeto principal es mayor que la parte de abajo del otro objeto.
- La derecha del objeto principal es menor que la izquierda del otro objeto.
- La izquierda del objeto principal es mayor que la derecha del otro objeto.
Si ninguna de estas condiciones se cumple, entonces los dos objetos se están superponiendo y existe una colisión [1:25]. Este método se conoce como detección de colisiones por bounding box o caja delimitadora, y es el más utilizado en juegos 2D sencillos.
¿Cómo se calculan los bordes de cada objeto?
Cada objeto tiene una posición inicial definida por sus coordenadas X e Y. A partir de ahí se calculan los cuatro bordes [3:15]:
- Arriba: equivale a la posición Y del objeto.
- Abajo: posición Y más la altura del objeto.
- Izquierda: equivale a la posición X del objeto.
- Derecha: posición X más el ancho del objeto.
Esta misma lógica se aplica tanto para el enemigo como para la mascota o jugador. La clave está en entender que la posición X e Y marca el punto donde se comienza a pintar el objeto, y sumándole el ancho o alto se obtiene dónde termina.
¿Cómo se implementa la función de colisión en código?
La función revisar_colisión recibe como parámetro el objeto del enemigo, ya que necesitamos comparar la mascota contra cada enemigo por separado [2:45].
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 = mascota.y;
const abajoMascota = mascota.y + mascota.alto;
const derechaMascota = mascota.x + mascota.ancho;
const izquierdaMascota = mascota.x;
if (
abajoMascota < arribaEnemigo ||
arribaMascota > abajoEnemigo ||
derechaMascota < izquierdaEnemigo ||
izquierdaMascota > derechaEnemigo
) {
return; // No hay colisión
}
detenerMovimiento();
alert("Colisión con " + enemigo.nombre);
}
El return dentro del if hace que la función termine de inmediato cuando no existe colisión. Si ninguna condición se cumple, se ejecuta la lógica de colisión: se detiene el movimiento y se muestra una alerta con el nombre del enemigo [7:08].
¿Cuándo se debe llamar a la función de colisión?
La revisión de colisiones se ejecuta dentro de la función pintarCanvas, justo después de dibujar todos los elementos en pantalla [5:00]. Solo se revisa cuando la mascota se está moviendo, verificando si tiene velocidad en X o en Y distinta de cero:
javascript
if (mascota.velocidadX !== 0 || mascota.velocidadY !== 0) {
revisarColision(iPododgeEnemigo);
revisarColision(capipepoEnemigo);
revisarColision(ratiHuellaEnemiga);
}
Un error común es comparar la mascota consigo misma en lugar de contra el enemigo. Todas las mascotas inician en la misma posición del mapa, así que si no se distingue correctamente entre jugador y enemigo, la colisión se detecta de inmediato al comenzar [5:45].
¿Qué limitaciones tiene este método de detección?
Este enfoque revisa colisiones entre rectángulos, no entre los bordes exactos de las imágenes [6:30]. Esto significa que puede detectarse un choque cuando visualmente los personajes aún no se tocan del todo. Para lograr mayor precisión se requieren técnicas avanzadas como pixel-perfect collision o el uso de polígonos de colisión, temas que se profundizan en cursos especializados en desarrollo de videojuegos.
Si lograste implementar esta función, ya tienes las bases para agregar mecánicas como ataques, recolección de objetos o detección de límites del mapa. ¿Te resultó claro el cálculo de los bordes o necesitas repasar alguna parte? Comparte tu experiencia en los comentarios.
