Cómo crear tanques en su juego html5

Este tipo de juego le da algún tipo de mecanismo de lanzamiento de su juego HTML5 con la física semi-realista, y tiene que inicie proyectiles (aves con problemas de ira o de otro tipo) en algún tipo de objetivo.

Los tanques, torretas y conchas

Lo más interesante acerca de un juego de estilo tanque es la relación entre el depósito, su torre, y las balas se dispara.

El depósito es un sprite, pero la imagen tanque no incluye una torreta. La torreta es un sprite separado destinado a ser vinculado a el tanque y se hace girar por sí mismo. Cuando el jugador mueve el tanque, la torreta se mueve con él. Cuando el usuario gira la torreta, la torreta gira, pero el tanque no lo hace.

La bala es un tercio sprite, que aparece cuando el usuario dispara el tanque. Posición inicial de la bala está determinado por la posición del tanque, y el ángulo de movimiento inicial de la bala está determinada por el ángulo de la torreta.

Aquí está el código para el tanque:

 UserTank function () {tTank = new Sprite (juego "greenTank.jpg", 50, 25) -tTank.setSpeed ​​(0) -tTank.setPosition (100, 550) -tTank.turret = new Sprite (juego ", torreta .jpg ", 50, 25) -tTank.bullet = new Bullet (tTank) -tTank.checkKeys = function () {if (keysDown [K_A]) {this.changeXby (-2) -} if (keysDown [K_D] ) {this.changeXby (2) -} // Mover siempre torreta con me.this.turret.setPosition (this.x, this.y) - // gire turretif (keysDown [K_W]) {this.turret.changeImgAngleBy ( -5), si (this.turret.getImgAngle () lt; 0) {this.turret.setImgAngle (0) -} // end if} if (keysDown [K_S]) {this.turret.changeImgAngleBy (5), si (this.turret.getImgAngle ()> 90) {esto. turret.setImgAngle (90) -}} si (keysDown[K_SPACE]){this.bullet.fire()-}this.turret.update()-this.bullet.checkGravity()-this.bullet.update()-} // Fin checkKeysreturn tTank-} // tanque final

El diseño del tanque está medianamente complicada por tener un sprite torreta dependiente y un sprite bala. He aquí cómo construir este batiburrillo de la bondad de sprites blindado:

1. Construir el sprite tanque de primera.

   Al igual que con la mayoría de los ejemplos en simpleGame, comenzar construyendo un sprite temporal para el tanque (llamado tTank).

2. Construir un sprite torreta.

   La torreta es un segundo de sprites. Es una propiedad del tanque, así como un sprite en su propio derecho. La torreta es bastante simple, lo que puede ser una acción de sprites. No necesita ser una subclase completa.

3. Construir un sprite bala.

   Cada tanque tiene un sprite y una bala. La bala se necesitan algunos comportamientos específicos, por lo que será una subclase de la Sprite objeto. Por ahora, sólo sé que el tanque tendrá una bala. Tenga en cuenta que la bala tendrá que saber que el tanque al que pertenece.

4. Lea el teclado.

   El tanque está configurado actualmente para utilizar las teclas WASD para la entrada.

5. Mueve el tanque de izquierda y derecha.

   Los controles de izquierda y derecha mueven el propio sprite de tanque. Mover la torreta de modo que su centro es siempre el mismo que el centro del tanque. Esto hace que la torreta para mover siempre con el tanque.

6. Gire la torreta.

   Los de arriba y abajo los controles hacen que la torreta gire. Establecer valores mínimo y máximo para mantener la torreta dentro de un rango razonable de ángulos.

7. Disparar la bala.

   En el comando de incendios (barra de espacio por defecto), invocar la bala de fuego () método. (Por supuesto, usted tendrá que escribir que en el Bullet clase.)

8. Actualización de la torreta.

   Hasta ahora, todo update () llamadas han sucedido en el principal update () función. Sin embargo, el juego principal en realidad no necesita actualizar la torreta. Debido a que la torreta es parte del tanque, la actualización del tanque debe actualizar la torreta. Porque el checkKeys () método va a suceder cada fotograma, actualice la torreta para asegurar que se dibuja correctamente.

9. Mueva la bala.

   Si una bala está activo, utilice el checkGravity () método para el seguimiento de su curso actual, teniendo en cuenta la atracción gravitatoria. Si no hay ninguna bala activo actualmente, se tendrá en cuenta esta línea.

10. Actualización de la bala.

    Una vez más, la bala se siente como parte del tanque, por lo que debería actualizarse automáticamente.

¿Cómo construir una bala

La clase bullet será despedido por un tanque. La bala es una clase sorprendentemente sofisticada, ya que necesita un fuego () método (que se dispara la bala basado en el tanque y la situación actual de la torreta) y una checkGravity () método (que traza la trayectoria de la bala en el espacio).

Aquí está la Bullet código de clase:

 Bullet función (propietario) {// propietario es el tanque de poseer este bullettBullet = new Sprite (juego "bullet.jpg", 5, 5) -tBullet.owner = propietario tBullet.hide () - tBullet.setBoundAction (DIE) -tBullet.fire = function () {// comenzar en el centro de mi tanque // apuntando en directionthis.setPosition tanque de torreta (this.owner.x, this.owner.y) -this.setMoveAngle (this.owner.turret. getImgAngle ()) - this.setSpeed ​​(20) -this.show () -} // firetBullet.checkGravity final = function () {this.addVector (180, 1) -} // fin checkGravityreturn tBullet-} // fin bala

Aquí está la historia de vida de una bala en un juego:

1. Especifique el tanque propietario.

   Cuando este juego tiene varios tanques que disparan el uno al otro (que necesita claramente), debe haber un montón de balas volando alrededor. Cada bala tendrá que saber que el tanque pertenece a lo que puede disparar desde la posición correcta en la dirección correcta.

2. Esconder.

   los Bullet objeto se crea en el comienzo del juego, pero pasa la mayor parte de su vida escondido invisible. Una de las primeras cosas que hace es ocultar la bala, así que será visible sólo después de que se disparó.

3. Establecer límites a la acción DIE.

   Balas normalmente mueren cuando llegan al final de la pantalla. El sprite no se elimina de la memoria. Simplemente no se visualiza en la pantalla y no responde a las colisiones. Configurar la acción al límite DIE hará que el comportamiento deseado.

4. Bomberos desde la posición del tanque propietaria.

   Cuando se dispara la bala, colóquelo en la posición del tanque propietaria.

5. Ajuste el ángulo de movimiento al ángulo de la torreta del tanque propietaria.

   El trabajo principal de la torreta es indicar qué ángulo se utiliza como trayectoria de partida de la bala.

6. Proporcionar una gran velocidad de movimiento.

   Las balas deben actuar con rapidez, por lo que establecer una velocidad inicial de 20 píxeles por cuadro. (Usted puede agregar otro control para permitir al usuario modificar la velocidad inicial si lo desea.)

7. Revelar la bala.

   Invocar la bala de espectáculo() método para hacer la bala aparece en la pantalla.

8. Compruebe si hay gravedad.

   Todo hace esta función es compensar atracción gravitatoria con la addVector () método.