Como criar Tanques em seu jogo HTML5

Este tipo de jogo dá-lhe algum tipo de mecanismo de lançamento para o seu jogo HTML5 com a física semi-realista, e tem de lançar projéteis (aves com problemas de raiva ou de outra forma) em algum tipo de alvo.

Tanques, torres, e conchas

A coisa mais interessante sobre um jogo de estilo tanque é a relação entre o tanque, sua torre, e as balas ele é acionado.

O tanque é um sprite, mas a imagem do tanque não inclui uma torre. A torre é um sprite, destinados a ser ligados ao tanque e rodado sobre si próprio. Quando o jogador se move no tanque, a torre se move com ela. Quando o utilizador roda a torre, a torre rodar, mas o tanque não.

A bala é uma terceira sprite, que aparece quando o usuário dispara o tanque. posição inicial da bala é determinado pela posição do tanque, e ângulo de movimento inicial da bala é determinada pelo ângulo da torre.

Aqui está o código para o tanque:

 função UserTank () {tTank = new Sprite (jogo ", greenTank.png", 50, 25) -tTank.setSpeed ​​(0) -tTank.setPosition (100, 550) -tTank.turret = new Sprite (jogo ", turret .png ", 50, 25) -tTank.bullet = new bullet (tTank) -tTank.checkKeys = function () {if (keysDown [K_A]) {this.changeXby (-2) -} if (keysDown [K_D] ) {this.changeXby (2) -} // sempre mover torre com me.this.turret.setPosition (this.x, this.y) - // girar turretif (keysDown [K_W]) {this.turret.changeImgAngleBy ( -5) -se (this.turret.getImgAngle () lt; 0) {this.turret.setImgAngle (0) -} // end if} if (keysDown [K_S]) {this.turret.changeImgAngleBy (5) -se (this.turret.getImgAngle ()> 90) {this. turret.setImgAngle (90) -}} if (keysDown[K_SPACE]){this.bullet.fire()-}this.turret.update()-this.bullet.checkGravity()-this.bullet.update()-} // Fim checkKeysreturn tTank-} // tanque final

O projeto de tanque é ligeiramente complicada por ter um sprite turret dependente, e um sprite bala. Aqui é como construir esta miscelânea de bondade Sprite blindada:

1. Construir o sprite primeiro tanque.

   Tal como acontece com a maioria dos exemplos simpleGame, começar por construir um sprite temporária para o tanque (chamado tTank).

2. Construir um sprite torre.

   A torre é uma segunda entidade gráfica. É uma propriedade do tanque, bem como um sprite no seu próprio direito. A torre é bastante simples, por isso pode ser um sprite estoque. Ele não necessita de ser uma subclasse completa.

3. Construir um sprite bala.

   Cada tanque tem um sprite e uma bala. A bala vai precisar de alguns comportamentos específicos, por isso vai ser uma subclasse da duende objeto. Por enquanto, só sei que o tanque vai precisar de uma bala. Note-se que a bala vai precisar saber qual o depósito a que pertence.

4. Leia o teclado.

   O tanque está definido para usar as teclas WASD para entrada.

5. Mova o tanque de esquerda e direita.

   Os controles de esquerda e direita mover o próprio Sprite tanque. Movimentar a torreta de modo seu centro é sempre o mesmo que o centro do tanque. Isto faz com que a torre para sempre mover-se com o tanque.

6. Girar a torre.

   Os controlos cima e para baixo causar a torre rodar. Definir valores mínimo e máximo para manter a torre dentro de um intervalo razoável de ângulos.

7. Disparar a bala.

   No comando de fogo (barra de espaço por padrão), invocar a bala de fogo() método. (Claro, você vai precisar de escrever que na Bala classe.)

8. Atualizar a torre.

   Até agora, todos os atualizar() chamadas ter acontecido na principal atualizar() função. No entanto, o jogo principal não é realmente necessário atualizar a torre. Uma vez que a torre é parte do tanque, a actualização do tanque deve actualizar a torreta. Porque o checkKeys () método vai acontecer a cada quadro, atualizar a torre para garantir que ele chama corretamente.

9. Mova a bala.

   Se uma bala está ativa, utilize o checkGravity () método para controlar seu curso atual, tendo força gravitacional em conta. Se não há nenhuma bala ativa no momento, esta linha será ignorado.

10. Atualizar a bala.

    Mais uma vez, a bala se sente como parte do tanque, por isso deve ser atualizado automaticamente.

Como construir uma bala

A classe bala vai ser disparado por um tanque. A bala é uma classe surpreendentemente sofisticado, como ele precisa de um fogo() Método (que irá disparar a bala baseado no tanque e situação atual da torre) e uma checkGravity () Método (que traça a trajetória da bala no espaço).

Aqui está o Bala código de classe:

 Bala função (proprietário) {// proprietário é o tanque de possuir este bullettBullet = new Sprite (jogo ", bullet.png", 5, 5) -tBullet.owner = owner-tBullet.hide () - tBullet.setBoundAction (DIE) -tBullet.fire = function () {// começar no centro do meu tanque // apontando na directionthis.setPosition tanque da torre (this.owner.x, this.owner.y) -this.setMoveAngle (this.owner.turret. getImgAngle ()) - this.setSpeed ​​(20) -this.show () -} // firetBullet.checkGravity end = function () {this.addVector (180, 1) -} // fim checkGravityreturn tBullet-} // fim bala

Aqui está a história de vida de uma bala em um jogo:

1. Especifique o tanque proprietário.

   Quando este jogo tem vários tanques disparando um para o outro (o que ele precisa claramente), deve haver um monte de balas voando ao redor. Cada bala vai precisar saber qual o depósito a que pertence para que ele possa disparar a partir da posição direita na direção certa.

2. Esconder.

   o Bala objeto é criado no início do jogo, mas passa a maior parte de sua vida escondido invisível. Uma das primeiras coisas que você faz é esconder a bala por isso vai ser visível apenas depois que ele é demitido.

3. Definir ação fronteira para MORRER.

   Balas normalmente morrem quando chegar ao final da tela. O sprite não é removido da memória. Ele simplesmente não é exibida na tela e não responde a colisões. Configurando a ação de fronteira para MORRER irá fazer com que o comportamento desejado.

4. Fogo da posição do tanque de proprietário.

   Quando a bala é disparada, colocá-lo na posição do tanque de proprietário.

5. Defina o ângulo movimento para ângulo torre do tanque proprietário.

   o trabalho principal do torreão é indicar que ângulo é usado como trajetória de partida da bala.

6. Fornecer uma grande velocidade de movimento.

   Balas deve mover-se rapidamente, para definir uma velocidade inicial de 20 pixels por quadro. (Você pode adicionar outro controle para permitir que o usuário para modificar a velocidade inicial, se desejar.)

7. Revelar a bala.

   Invocar a bala de exposição() método para fazer a bala aparecer na tela.

8. Verifique se há gravidade.

   Tudo esta função faz é compensar a força gravitacional com a addVector () método.