Cómo agregar efectos de deriva a su juego html5

Puede utilizar vectores de fuerza de una manera interesante en su juego HTML5. Muchos juegos de carreras incluyen mecanismos que patinan o la deriva. Conseguir este comportamiento exactamente correcto requiere matemáticas muy sofisticadas, pero se puede hacer una aproximación razonable de este comportamiento sin demasiado esfuerzo.

Esta imagen no es suficiente. Que realmente necesita para ver esto como un programa de trabajo porque es muy fresco. A medida que avanza el barco alrededor de la pantalla, las derivas del barco y patines. Es muy divertido para jugar.

¿Cómo añadir un comportamiento a la deriva al objeto de su juego

Para conseguir un comportamiento deriva sencillo, sólo tiene que añadir un pequeño vector de fuerza en la dirección de la corriente del barco independientemente de si el usuario está presionando actualmente el acelerador.

Video: Juego Del Gato Basico HTML5 y javascript

Esta técnica es un compromiso entre el movimiento basado en el espacio (donde se añade el vector de fuerza sólo cuando se presiona el acelerador) y el comportamiento de coche estándar (donde la dirección de desplazamiento está siempre siguiendo la nariz del vehículo). Cada cuadro tiene un poco de cada comportamiento.

Aquí está el código:

drift.html

Cómo agregar a la deriva de los sprites de su juego

Es un procedimiento muy simple.

Video: Como hacer efecto partículas en movimiento con javascript

  1. Construir un modelo de vehículo estándar.

    Considerar la posibilidad de un barco, sólo por variación.

  2. Utilizar un vector de fuerza para la aceleración.

    Video: #5 Diseño Web Html5 y Css3 - Slider con Efecto de Partículas - jQuery & Particles.js

    Una vez más, que está controlando manualmente la velocidad, por lo que la addVector () mecanismo le da un gran poder. El vector de fuerza de aceleración (utilizado en la prensa tecla de flecha hacia arriba) puede ser un valor literal, pero no tiene que ser enorme. Debido a que usted está realmente va a ser la adición de un segundo vector de fuerza, es posible que desee bajar el tono del vector de aceleración.

  3. Añadir una pequeña fuerza de vectores cada cuadro.

    Video: css3 - Efecto en Imágenes

    El vector de fuerza primaria ocurre sólo cuando se acelera, pero un vector secundario más pequeño se añade cada cuadro. Este vector va en la dirección que el barco se enfrenta actualmente. Este pequeño vector de movimiento simulará impulso. Es importante que este vector de fuerza sea un porcentaje de la velocidad en lugar de un valor literal. Si siempre avanzar un píxel, por ejemplo, el barco no dejar nunca.

Artículos Relacionados