Cómo añadir movimiento realista a su juego html5

Echa un vistazo a space.html

. Este sencillo juego es un buen ejemplo de aplicación de movimiento realista a su juego HTML5. Utiliza el esquema de control se hizo famoso en los juegos clásicos Asteroides y Spacewar! (Aunque Asteroides es mejor conocido, Spacewar! es con mucho el juego anterior y más influyente.)

imagen0.jpg

Haga clic aquí para obtener la experiencia completa.

Cómo agregar un vector de fuerza al objeto de su juego

El barco está controlado por las teclas de flecha, pero el efecto de Newton es más fácil de ver en el espacio que en el suelo (no hay fuerzas de arrastre molestos para ponerse en el camino). La izquierda; y la derecha; flechas girar la nave, pero no afectan el movimiento del barco. La flecha hacia arriba dispara un cohete, lo que añade un vector de fuerza en la dirección de la nave se enfrenta actualmente.

Aquí está el código:

espacio

Cómo simular el espacio en su juego

Aquí está el resumen:

  1. Comience el ejemplo de la manera normal.

    Me gusta más simpleGame demos, comienzan con un sprite y una escena. Debido a que la nave tendrá un método personalizado, que lo convierten en un objeto único.

  2. Dar a la nave un checkKeys (Método).

    los checkKeys () método busca pulsaciones de teclas y cambia el comportamiento del buque en consecuencia.

  3. Cambie el ángulo de imagen.

    Un sprite en realidad tiene dos ángulos distintos. Puede tener un ángulo que está apuntando (llamado imgAngle en simpleGame) Y el ángulo se está moviendo (llamado moveAngle). Cuando se cambia el ángulo, que está cambiando tanto el movimiento y los ángulos de imagen en el supuesto de que el objeto simplemente viajar en la dirección en que está enfrentando.

    Para ejemplos simples, esto está muy bien, pero muchas clases de movimiento requiere desacoplar los ángulos de imagen y movimiento. los changeImgAngleBy () método le permite cambiar la dirección de la imagen está señalando sin cambiar el ángulo de movimiento. (Hay un changeMotionAngle () método, también, pero no se utiliza muy a menudo.)

  4. Añadir un vector de fuerza para simular empuje.

    Cuando el usuario presiona la flecha hacia arriba, el barco dispara sus principales cohetes. Esto añade un pequeño vector de fuerza en la dirección de la nave se enfrenta actualmente. Utilizar el getImgAngle () Método para determinar la dirección de la nave se enfrenta actualmente, y utilizar este valor para especificar dónde se debe añadir la fuerza.

    Debido a que este código está sucediendo en el bucle de animación y se amplifica como la tecla de flecha se mantiene pulsado, sólo se necesita una fuerza muy pequeña.




» » » » Cómo añadir movimiento realista a su juego html5