Detección de Colisiones en Videojuegos con JavaScript

¿Cómo detectar y manejar colisiones en un videojuego?

Detectar colisiones en un videojuego es esencial para ofrecer una experiencia de juego dinámica y realista. Aprender a programar las colisiones permite interactuar distintos objetos en la pantalla, como personajes y enemigos, agregando una capa de complejidad y estrategia al juego. Vamos a ver cómo podemos implementar esto en nuestro código.

¿Qué es una colisión?

Una colisión ocurre cuando dos objetos en la pantalla se tocan o se superponen. Para determinar si hay una colisión entre un objeto principal (en este caso, un cuadrado verde) y dos objetos pequeños (cuadrados morado y naranja), se deben verificar ciertas condiciones geométricas usando una cuadrícula conceptual para identificar si sus dimensiones se cruzan.

Condiciones para evitar colisiones:

1. Parte inferior del verde < Parte superior del pequeño
2. Parte superior del verde > Parte inferior del pequeño
3. Derecha del verde < Izquierda del pequeño
4. Izquierda del verde > Derecha del pequeño

Si alguna de estas condiciones es cierta, no hay colisión. Veamos cómo se desarrolla el proceso en el código.

¿Cómo implementar colisiones en el código?

Partiremos creando una función que verifique estas condiciones para dos cuadrados: el objeto principal (mascota) y un enemigo. Esta función nos permitirá modularizar el código y manejar múltiples enemigos.

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

    // Similar para mascota
    const arribaMascota = mascotaJugadorObjeto.y;
    const abajoMascota = mascotaJugadorObjeto.y + mascotaJugadorObjeto.alto;
    const derechaMascota = mascotaJugadorObjeto.x + mascotaJugadorObjeto.ancho;
    const izquierdaMascota = mascotaJugadorObjeto.x;

    // Verificando colisión
    if (
        abajoMascota < arribaEnemigo ||
        arribaMascota > abajoEnemigo ||
        derechaMascota < izquierdaEnemigo ||
        izquierdaMascota > derechaEnemigo
    ) {
        return; // No hay colisión
    }

    alert("Hay colisión con " + enemigo.nombre); // Hay colisión
    detenerMovimiento(); // Detener el movimiento de la mascota
}

¿Cómo manejar múltiples enemigos?

Para evaluar colisiones con diferentes enemigos, podemos llamar repetidamente la función revisarColision dentro de otra función que se ejecuta cada vez que el juego detecta un movimiento de la mascota. Este enfoque asegura que siempre revisemos las colisiones en tiempo real.

function verificarColisiones() {
    if (mascotaJugadorObjeto.velocidadX !== 0 || mascotaJugadorObjeto.velocidadY !== 0) {
        revisarColision(hipodogeEnemigo);
        revisarColision(capipepoEnemigo);
        revisarColision(ratigueyaEnemigo);
    }
}

// Llamar a verificarColisiones dentro de pintarCanvas

Conclusión y recomendaciones

La funcionalidad de colisiones es esencial en el desarrollo de videojuegos para ofrecer realismo y dinamismo. Asegúrate de entender bien los principios para poder aplicarlos de diferentes maneras en distintos tipos de juegos. No dudes en practicar y ajustar las condiciones hasta que logres el comportamiento esperado en tu juego.

Recuerda, si deseas profundizar en la programación de videojuegos y aprender más sobre cómo detectar colisiones precisas en sprites o imágenes complejas, puedes explorar más sobre esta área en plataformas de aprendizaje como Platzi. La práctica y la repetición son clave: sigue explorando y mejorando tus habilidades de programación. ¡Sigue adelante y crea experiencias de juego asombrosas!