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 do tanque é a relação entre o tanque, sua torre, e as balas que dispara.

O tanque é um sprite, mas a imagem do tanque não inclui uma torre. A torre é um sprite, destinados a ser ligado ao tanque e rodado por conta própria. Quando o jogador move o tanque, a torre se move com ele. Quando o usuário gira a torre, a torre gira, mas o tanque não.

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

Video: Supertank!!! Jogo novo! Tank ultapower o/

Aqui está o código para o tanque:

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

A concepção do tanque é ligeiramente complicado por ter um sprite torreta dependente, e um sprite bala. Aqui é como construir esta miscelânea de bondade Sprite blindado:

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 é um segundo do sprite. É uma propriedade do tanque, bem como um sprite em seu próprio direito. A torre é bastante simples, por isso pode ser um sprite estoque. Ele não precisa 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. Mover a torre para que seu centro é sempre a mesma como o centro do tanque. Isso faz com que a torre para sempre mover-se com o tanque.

6. Girar a torre.

   Os controles cima e para baixo causar a torre de 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 para escrever que no 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 o revólver. Porque a torre é parte do tanque, atualizando o tanque deve atualizar a torre. 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. Atualize 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 da classe:

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

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. Ocultar.

   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 limite para MORRER.

   Balas tipicamente morrem quando atingem a extremidade da tela. O sprite não é removido da memória. Ele simplesmente não é exibido 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.

   Video: Como criar jogos - Construct2 - Aula 1

   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.