Cómo agregar colisiones a su juego html5
Las cosas más interesantes en los juegos de vídeo HTML5 ocurren cuando los sprites conk y chocan entre sí. motores de juego normalmente tienen algún tipo de herramienta para probar si dos sprites se superponen. Se llama detección de colisiones, y se puede hacer de varias maneras. Este ejemplo utiliza la norma rectángulo de delimitación esquema. No es perfecto, pero es muy fácil de implementar y es de uso general.
Cómo configurar saltando colisiones rectángulo en su juego
Echa un vistazo a colTest.html y verá un ejemplo sencillo.
En el colTest.html ejemplo, el usuario mueve el bicho con el ratón, y obtendrá un mensaje cuando la criatura está en contacto con la caja en el centro de la pantalla.
Video: 7.- Curso Juego Plataformas con HTML5 - Algoritmo de colisiones
colTest.html vacío
Un número de cosas interesantes están sucediendo en este código:
Ocultar el cursor de ratón normal.
Cuando usted va a tener algún otro objeto sigue el ratón, que normalmente se desea ocultar el cursor de flecha normal. En simpleGame, utilizar el game.hideCursor () método para ocultar el cursor del ratón dentro de la pantalla del juego.
Crear más de un sprite.
Se necesitan dos para bailar el tango, o chocan. En este ejemplo, la caja permanecerá estacionario, y un bicho que sigue el ratón.
Dar a la criatura una followMouse () método.
En este ejemplo, usted tiene el bicho sigue el ratón. Comience por la creación de una followMouse () método.
Determinar la posición del ratón.
La posición del ratón se determina (en simpleGame.js) con el document.mouseX y document.mouseY propiedades.
Copiar la posición del ratón a la posición bicho.
Utilice la posición x del ratón para fijar la posición x del critter, y repetir con y.
Llame a la criatura de followMouse () método cada trama.
Video: Juegos con HTML5 y JS - 17 - Colisión básica
Como de costumbre, el actualizar() función es donde se coloca el código que debería ocurrir en repetidas ocasiones.
Si juegas un poco con el colTest.html página, probablemente notará que las colisiones no son exactas. Es posible tener un registro de colisión incluso cuando el bicho no está tocando realmente la caja. Esto es importante porque simpleGame utiliza un esquema llamado que limita las colisiones caja.
Esto significa que usted no está realmente la comprobación para ver si las imágenes chocan pero si los rectángulos alrededor de las imágenes chocan. En este ejemplo, la diferencia es menor, pero a veces se verá errores significativos con este mecanismo, sobre todo con elementos que son largas y delgadas. Como un sprite gira, el tamaño del rectángulo delimitador puede cambiar.
colisiones basados en la distancia para su juego
Una forma alternativa de detección de colisiones, llamado círculo de delimitación colisiones, está disponible. Con este mecanismo, sólo tiene que calcular la distancia entre el centro de dos sprites, y si este valor es menor que un umbral, se tiene en cuenta que una colisión. Este enfoque tiene dos ventajas:
La distancia de colisión es constante. La distancia entre los centros de imagen no cambiará cuando se giran las imágenes, aunque las imágenes cambian de tamaño.
El umbral de colisión se puede variar. Se puede establecer cualquier sensibilidad que desea. Establecer un radio de colisión grande para facilitar las colisiones y una más pequeña cuando se quiere colisiones, que se activará sólo cuando los sprites están muy cerca el uno al otro.
los simpleGame biblioteca Duende objeto tiene una distanceTo () método, que calcula la distancia de un sprite para otro. Se puede ver un ejemplo de este código en el distance.html ejemplo:
Video: 17.- Curso Juego Plataformas en HTML5 - Colisiones básicas
distance.html vacío
El método de colisión basada en la distancia es muy similar a la versión de delimitación-rectángulo. Crear un checkDistance () función que actuará al igual que el antiguo checkCollisions (). Estos son los pasos para lo que sucede en checkDistance:
Encuentra la distancia entre los dos sprites.
Video: Tutorial 15 Curso Juego HTML5 (colisiones)
Utilice la década de los sprites distanceTo () método para determinar la distancia entre los dos sprites.
Si la distancia es inferior a un umbral determinado, contará como una colisión.
En general, usted debe utilizar el ancho del sprite más pequeño como un punto de partida para un umbral de colisión, pero puede ajustar esto para hacer las colisiones más o menos probable.
Informar del estado de colisión.
En este ejemplo, sólo tiene que imprimir “colisión” o “ninguna colisión”, pero en un juego real, las colisiones son factores desencadenantes de otras acciones: el aumento de la puntuación, disminuyendo el número de vidas, el cambio de la velocidad o la posición de los elementos chocaron, o lo que sea . (Con suerte, se trata de explosiones.)