Detección de Colisiones en Videojuegos con JavaScript

Clase 67 de 84 • Curso Gratis de Programación Básica

Resumen

¿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:

Parte inferior del verde < Parte superior del pequeño
Parte superior del verde > Parte inferior del pequeño
Derecha del verde < Izquierda del pequeño
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!

al mn

student•

Con este curso he aprendido Matemáticas, Lógica de razonamiento, Programación CSS JS, THML Y DE VIDEOJUEGOS 😎😎😎

Luis Carlos Zapata García

student•

Dennis David Sejas Mamani

student•

¿Ese anuncio es de verdad? Y si es así, ¿en qué país es?

tiken .

student•

Una maravilla de curso. Disfrutándolo como un niño pequeño 🙏🏼❤️

Aquí les dejo una idea o propuesta. Cuando haya una colisión pueden probar a hacer sus propios alerts(), así tendrán sus propios estilos y no los que muestra el navegador. También pueden añadirle todo los tipos de datos que venimos utilizando. Como el nombre del enemigo, incluso hacer un tipo de mensaje personalizado si el enemigo es uno u otro. También pueden añadirle un intervalo de tiempo para que el Modal desaparezca automáticamente con el método setTimeOut().

M Nox

student•

Hola, a grandes rasgos como se haria? Busque en internet y no entendi muy bien como hacerlo sin que sea muy complicado

tiken .

student•

Saludos, te refieres a hacer un modal personalizado ?

Usuario anónimo

user•

Si la colisión sucede mucho antes de lo planeado por las imágenes que están usando se puede ajustar de la siguiente manera

let arribaNerd = namePjPlayerObjeto.y +25
let abajoNerd = namePjPlayerObjeto.y + namePjPlayerObjeto.alto -25
let derechaNerd = namePjPlayerObjeto.x + namePjPlayerObjeto.ancho -25
let izquierdaNerd = namePjPlayerObjeto.x +25

Por cierto yo usé let y no const porque la posición cambia conforme muevo el personaje, es decir no es constante según yo

Alvaro Torres Sánchez

student•

Muy buen tip, gracias. No hay problema si se usa const, ya que dentro del contexto de la función solo se están consultando esos valores y no se reasignan.

Eddie Mora

student•

Es una constante en esa instancia de la función.

Xiomara Alejandra Hernández Arzola

student•

En esta parte del curso habría estado genial que nos enseñaran a separar por modulos el codigo js, y exportarlo e importarlo porque ya es muy extenso, pero imagino que para fines didácticos esta bien. Sigo re emocionada aprendiendo :3

Gabriel López

student•

si tienes mucha razon

Kevin Daniel Hincapie Lumbaque

student•

Desde que empecé a armar el juego a mi modo quise que muchas cosas fueran al AZAR (manteniendo el espíritu de piedra, papel o tijera) así que esta vez me pareció un poco aburrido que lo personajes enemigos no se movieran... les mostrare mi codigo que hace que se muevan: -Uso mi funcion que me arma el array con los enemigos para darle un valor inicial de movimiento a los enemigos(valores diferentes para que no tomen en la misma dirección)

function IndiceEnemigos (){
    enemigos = invocaciones.filter(function(pj){
        return pj.nombre != invocaciones[indiceInvocacion_p1].nombre
    })
    enemigos[0].velY = -2
    enemigos[0].velX = -3
    enemigos[1].velX = 2
    enemigos[1].velY = 3
}

-Necesito así como para mover nuestro personaje(actualizar coordenadas en pantalla), una función que los mueva a ellos, esta función la activa otro intervalo

function movEnemigos (){
    enemigos[0].x += enemigos[0].velX
    enemigos[0].y += enemigos[0].velY

    enemigos[1].x += enemigos[1].velX
    enemigos[1].y += enemigos[1].velY

    controlMovEnem(0)
    controlMovEnem(1)  
}

-Luego necesito ponerles un límite o se saldrán de la pantalla, para ello usó las coordenadas del borde de mi canva, al "chocar" contra el borde cambian de dirección con una velocidad aleatoria y desvían ligeramente en el otro eje para que sea menos predecible el movimiento

function controlMovEnem (index){
    if(enemigos[index].x < 0 ){
        enemigos[index].velX = aleatorio(7,25)
        enemigos[index].velY += aleatorio(-5,5)
    }
    if (enemigos[index].x > 480) {
        enemigos[index].velX = aleatorio(-7,-25)
        enemigos[index].velY += aleatorio(-5,5)
    }
    if (enemigos[index].y < 0) {
        enemigos[index].velY = aleatorio(7,25)
        enemigos[index].velX += aleatorio(-5,5)
    }
    if (enemigos[index].y > 315) {
        enemigos[index].velY = aleatorio(-7,-25)
        enemigos[index].velX += aleatorio(-5,5)
    }
}

Con esto ya se mueven los enemigos, toca hacer unos ajustes adicionales para que se detengan luego de chocar pero no es nada que no se pueda hacer con lo que hemos visto... de hecho todo lo que se me ocurre hacer lo hago con lo visto porque básicamente no se mucho XD, cuando no se algo pero "pienso" se que se puede hacer le pregunto a google :p para ver cómo se hace.

Diego Alejandro Moreno Pedroza

student•

Wow, está genial esta implementación, ya puedes hacer un pacman!!!!

Marcos Monteverde

student•

genial

Diego Gordillo

student•

Me parece que la Profesora explica demasiado rápido y lo hace ver demasiado simple y solo se limita a escribir en el código. Me parece que debería pausar un poco, dando un poco más de profundidad en la explicación de lo que se está haciendo en el código.

wilking trinidad

student•

puedes repetir el video si quieres

Felipe Madrigal

student•

x2 Repita el video y ya, quiere mas profundidad, googleelo

Sonia Silva Contreras

student•

😄 Tan feliz que siente uno cuando nota todo lo aprendido no? 😃 😃

Eddie Mora

student•

Si pues !!

Arnaldo Medina

student•

A base sufrimiento :D no mentira, pero sí ha estado complicado el curso desde hace muchas clases. Pero con paciencia, ahí vamos.

Juana Barreto

student•

no entiendo casi

Diego Alejandro Moreno Pedroza

student•

No te rindas juana! Puedes preguntar lo que no entiendas y con gusto la comunidad te ayudará

Esmeralda Anaya Mauri

student•

yo tampoco, me estresa avanzar sin entender

Sebastián Caraballo Marzola

student•

rayos no entendí muy bien lo de os cuadro, ósea la explicación de la grilla

Esmeralda Anaya Mauri

student•

yo no entendi nada, lo peor es que ella lo da por simple y solo pasa al codigo

Juan David Vanegas Roldán

student•

Yo tampoco entendí nada, es decir, nunca explica de dónde provienen esos números, si corresponden a las coordenadas o que, porque yo no veo que el cuadro verde tenga como valor 1 y aun asi lo compara en 1>3. Lo he repetido varias veces y no entiendo nada de nada.

Irving Caamal

student•

Que buen curso!

Que manera de conectar y abordar cada tema.

Juan David Rueda Quiroga

student•

Han mejorado, aunque los anteriores eran buenos, este es mil veces mejor !!!

Eddie Mora

student•

Lo mismo me decía hoy. Todo estaba fríamente calculado. Como una estafa pero al revés. Me han ido llevando y perdiendo en el oscuro mundo de la programación. Gracias.

Jorge Iván Vázquez Hernández

student•

amigos no entendi lo de los cuadros, alguien me puede explicar, ya regrese el video varias veces

Juan Ramirez Bastidas

student•

Hola, han pasado varios días desde tu pregunta. ¿Todavía necesitas una explicación o ya entendiste? Quiero ayudarte :)

Sebastián Caraballo Marzola

student•

yo tambien no entendi muy bien lo de la grilla

Frandel Corporan Rodríguez

student•

No se si mi cerebro aguantara hasta el final del curso 😂😂

Johan Rodriguez

student•

Como aprendimos en clases anteriores, si en un futuro queremos agregar más mokepones enemigos, entonces sería mejor optimizar la parte del código donde generamos los mokepones enemigos. Yo lo hice de esta manera:

Primero creé un array donde guardaremos los objetos de los mokepones enemigos:

let enemyMokepons = []; // Save enemy's mokepons

Ahora le aplicamos un ForEach para recorrer el array y que con cada mokepon que esté ahí dentro haga algo:

enemyMokepons.forEach((enemyMokepon) => {
    enemyMokepon.paintMokepon(); // con solo esta línea de código estamos pintando los mokepones enemigos que queramos
  });

De paso podemos también comprobar si nuestro mokepon choca o colisiona con uno de esos mokepones enemigos, tal como lo vimos en esta clase. Quedaría de la siguiente manera:

enemyMokepons.forEach((enemyMokepon) => {
    enemyMokepon.paintMokepon();

    if (playerPetSelected.speedX || playerPetSelected.speedY) {
      checkCollision(enemyMokepon); // con solo esta línea de código estamos comprobando si nuestro mokepon colisiona con cualquiera de los mokepones enemigos que tengamos
    }
  });

Y listo! ya nuestro código no solo quedaría optimizado si no abierto a que le agreguemos más mokepones, solo tendríamos que crear nuevos objetos con sus propiedas y métodos y esta parte no tendríamos que tocarla.

Esto no es nuevo, ya lo habíamos hecho en anteriores clases. Espero les sirva para mejorar su código. Saludos!

Hannymer Linares

student•

Me sirvió mucho para entender lo de las colisiones primero determinar que x es Horizontal y sobre el van los movimientos de arriba y abajo (la primera y segunda condición) y el eje Y es vertical y en el van los movimientos de izquierda y derecha (la 3era y la 4ta condición).

luego sobre la grilla inicial fui marcando mis resultados con azul los de x y con rojo los de y.

Manuela Sanchez Gómez

student•

excelente explicación, gracias!!

Juan Esteban Giraldo viviescas

student•

Es mi impresión o faltó una explicación más detallada de la cuadricula? por ejemplo, cómo así que la parte de ArribaCuadroPequeño es 2 si en la pantalla se ve como si estuviera en el punto (3,3)

Juan David Vanegas Roldán

student•

Total, además cual cuadro pequeño si todos tienen el mismo tamaño, lo que cambia es el color. Pésima explicación.

Maurizio José Caballero Hernández

student•

si se fijan bien arriba de la cuadricula están los números del 1 al 5... y a la izquierda de la cuadricula también están los números del 1 al 5.....

si se fijan de cada uno de esos números del 1 al 5 sale una linea que recorre toda la cuadricula... por ejemplo la linea que sale del numero 2 de la izquierda pasa justo por el borde de arriba del cuadro morado.... por esa razon la parte de arriba del cuadro morado pequeño es 2

Marcos Monteverde

student•

esta clase me costo mucho 😁 el tema de las funciones me viene pesando a lo largo del curso

Nestor Rios Garcia

student•

Esto les ahorrará unas cuantas líneas.


mokeponesEnemigos.forEach((mokeponEnemigo) => {
mokeponEnemigo.pintarMokepon()
if (mascotaJugadorObjeto.velocidadX !== 0 || mascotaJugadorObjeto.velocidadY !== 0) {
            revisarColision(mokeponEnemigo)
        }
})

Ramiro Colmenares

student•

Les recomiendo hacer notas en su código para que no olviden lo que están aprendiendo, mucho éxito a todos los que están llegando a estas zonas del curso de programación, vamos, ¡SI PUEDES!

Jonathan Fernando Ramirez Valencia

student•

Alan Yahir Juárez Rubio

student•

Yo en vez de crear cada una de las variables en la función, lo que hice fue crearlas en el constructor de las clase mokepon

class mokepon{ // we set a prototype (class in other languages) with class
	constructor(name, image, live, x = 10, y = 10){ 
		...
		
		this.x = x // x-axis
		this.y = y // y-axis
		this.w = 80 // width
		this.h = 80 // height
		...

		this.right = this.x + this.w
		this.left = this.x
		this.top = this.y
		this.bottom = this.y + this.h
	}

Después le añadí un método para que cada vez que, si cambiaban los valores de x oy, se actualizaran los lados:

setSides(){
		this.right = this.x + this.w
		this.left = this.x
		this.top = this.y
		this.bottom = this.y + this.h
	}

Y al final así quedó mi función:

function checkColision(enemy){
	playersMokeponObject.setSides()
	if(
		playersMokeponObject.top > enemy.bottom ||
		playersMokeponObject.bottom < enemy.top ||
		playersMokeponObject.left > enemy.right ||
		playersMokeponObject.right < enemy.left
	){
		return
	}
	console.log("Hay colisión con " + enemy.name)
}

Código completo