Comentário: No artigo anterior, introduzi como usar o HTML5 para implementar um pequeno tanque móvel. Neste artigo, eu o levarei à guerra dos tanques. Amigos que gostam de HTML5 não devem perder.
<pre> tank.html </pre> <pre> <! doctype html>
<html>
<head>
<meta charset = "utf-8"/>
</head>
<corpo onkeydown = "getCommand ();">
<H1> HMTL5-CLASSIC TANK WAR </H1>
<!-O campo de batalha de Tank War->
<lVAs> </canvas>
<span> dados </span>
<!-Apresente tankgames.js nesta página->
<script type = "text/javascript" src = "tank.js"> </script>
<script type = "text/javascript">
// Obtenha a tela
var Canvas1 = document.getElementById ("TankMap");
// Obtenha o contexto de desenho (você pode entendê -lo como um pincel)
var cxt = canvas1.getContext ("2D");
// meu herói do tanque
//direção
var herói = novo herói (140.140,0, herocolor);
// Defina uma bala vazia
var herobullet = nulo;
// Defina o tanque do inimigo (quantos tanques inimigos existem? É uma única definição ou colocada em uma matriz?)
var inimyTanks = new Array ();
// morre primeiro e depois vive, defina 3, e depois faremos variáveis para o número de tanques inimigos.
// 0-> superior, 1-> à direita, 2-> Down 3-> esquerda
for (var i = 0; i <3; i ++) {
// Crie um tanque
Var EnemyTank = New EnemyTank ((i+1)*50,0,2, EnmeyColor);
// Coloque este tanque em uma matriz
EnemyTanks [i] = inimigo;
}
// Ligue para isso uma vez
flashTankMap ();
// escrevendo uma função especial para atualizar nossa zona de combate regularmente e incluir elementos para aparecer na zona de combate (tanques próprios, tanques inimigos, balas, bombas,
//Obstructions....)-> Pensamento do jogo
função flashTankMap () {
// Limpando a tela
cxt.clearrect (0,0,400.300);
// meu tanque
drawtank (herói);
// desenhe sua própria bala
// Como o efeito do vôo da bala aparece? [Resposta: Antes de tudo, devemos atualizar a zona de combate a cada determinada tempo (setInterval). Se as coordenadas da bala mudarem quando refrescantes, as coordenadas da bala dão às pessoas a sensação de que a bala está voando!]
drawHerobullet ();
// Tanque inimigo
// desenha todos os tanques inimigos
for (var i = 0; i <3; i ++) {
drawTank (inimigo [i]);
}
}
// Esta é uma função que aceita teclas de usuário
função getCommand () {
// como eu sei qual chave o jogador pressiona
// Instruções: Objeto do evento -------> Função de manipulador de eventos ()
var code = event.KeyCode; // Código ASCII para as letras correspondentes-> Vejamos a tabela de código
Switch (código) {
Caso 87: // ON
Hero.MoveUp ();
quebrar;
Caso 68:
Hero.Moveright ();
quebrar;
Caso 83:
Hero.MoveDown ();
quebrar;
Caso 65:
Hero.moveleft ();
quebrar;
Caso 74:
Hero.Shotenemy ();
quebrar;
}
// aciona esta função flashTankMap ();
flashTankMap ();
// repintar todos os tanques inimigos. Você pode escrever código aqui (pense, vamos ter uma função dedicada para atualizar nossa tela regularmente [zona de guerra])
}
// Atualize a zona de combate a cada 100 milissegundos
window.setInterval ("flashTankMap ()", 100);
</script>
</body>
</html> </pre>
tank.js
<pre> </pre>
<pre> <pre> // Para conveniência de programação, definimos duas matrizes coloridas
var herocolor = new Array ("#BA9658", "#FEF26E");
var enmeyColor = new Array ("#00A2B5", "#00fefe");
// A expansão de outros tanques inimigos aqui é muito boa.
// balas
Função Bullet (x, y, direto, velocidade) {
this.x = x;
this.y = y;
this.direct = direto;
this.speed = speed;
this.timer = null;
this.islive = true;
this.run = function run () {
// Quando as coordenadas desta bala são mostradas, primeiro determinamos se a bala atingiu o limite
if (this.x <= 0 || this.x> = 400 || this.y <= 0 || this.y> = 300) {
// As balas precisam parar.
window.clearInterval (this.timer);
// A bala morreu
this.islive = false;
}outro{
// Isso pode ser usado para modificar as coordenadas
switch (this.direct) {
Caso 0:
this.y- = this.speed;
quebrar;
Caso 1:
this.x+= this.speed;
quebrar;
Caso 2:
this.y+= this.speed;
quebrar;
Caso 3:
this.x- = this.speed;
quebrar;
}
}
document.getElementById ("aa"). InnerText = "Bullet x ="+this.x+"bala y ="+this.y;
}
}
// Esta é uma aula de tanque
tanque de função (x, y, direto, cor) {
this.x = x;
this.y = y;
this.speed = 1;
this.direct = direto;
// Um tanque requer duas cores.
this.color = cor;
// sobe para cima
this.moveup = function () {
this.y- = this.speed;
this.direct = 0;
}
//Para a direita
this.Moveright = function () {
this.x+= this.speed;
this.direct = 1;
}
// mova para baixo
this.MoveDown = function () {
this.y+= this.speed;
this.direct = 2;
}
//Esquerda
this.moveleft = function () {
this.x- = this.speed;
this.direct = 3;
}
}
// define uma aula de herói
// x representa a coordenada horizontal do tanque, y representa a coordenada vertical, direção direta
função herói (x, y, direto, cor) {
// O objetivo das duas frases a seguir é alcançar o efeito da herança através da representação de objetos
this.Tank = Tank;
this.Tank (x, y, direto, cor);
// Adicione uma função para atirar em tanques inimigos.
this.shotenemy = function () {
// Crie uma bala, a posição da bala deve estar relacionada ao herói e à direção do herói ... !!!
//this.x é a coordenada horizontal do herói atual. Aqui vamos simplesmente processar (refinar)
switch (this.direct) {
Caso 0:
herobullet = novo bala (this.x+9, this.y, this.Direct, 1);
quebrar;
Caso 1:
herobullet = nova bala (this.x+30, this.y+9, this.Direct, 1);
quebrar;
Caso 2:
herobullet = nova bala (this.x+9, this.y+30, this.Direct, 1);
quebrar;
Caso 3: // Certo
herobullet = nova bala (this.x, this.y+9, this.Direct, 1);
quebrar;
}
// chamando nossa corrida de bala, 50 é uma conclusão obtida pelos múltiplos testes do professor.
var timer = window.setInterval ("Herobullet.run ()", 50);
// Atribua este cronômetro a este bala (o objeto JS é o passe de referência!)
herobullet.timer = timer;
}
}
// Defina uma classe inimiga
função inimytank (x, y, direto, cor) {
// herdou o tanque, se passando por um objeto
this.Tank = Tank;
this.Tank (x, y, direto, cor);
}
// Desenhe sua própria bala e diga mais uma coisa, você também pode encapsular a função na aula de herói
função drawHerobullet () {
// Aqui, adicionamos uma frase, mas você precisa saber que a adição aqui exige que você tenha certeza de todo o programa
if (herobullet! = null && herobullet.islive) {
cxt.fillstyle = "#fef26e";
cxt.fillrect (herobullet.x, herobullet.y, 2,2);
}
}
// desenhe o tanque
função drawTank (tank) {
// Considere a direção
switch (tank.direct) {
Caso 0: // ON
Caso 2: // Down
// desenhe seu próprio tanque e use a técnica de desenho anterior
// Defina a cor
cxt.fillstyle = tank.color [0];
// O professor Han usa a morte primeiro ---> e depois vive (é melhor para iniciantes)
// Desenhe o retângulo à esquerda primeiro
cxt.fillrect (tank.x, tank.y, 5,30);
// Desenhe o retângulo à direita (por favor, pense sobre isso neste momento -> Certifique -se de ter um ponto de referência)
cxt.fillrect (tank.x+15, tank.y, 5,30);
// Desenhe o retângulo do meio
cxt.fillrect (tank.x+6, tank.y+5,8,20);
// Desenhe a tampa do tanque
cxt.fillstyle = tank.color [1];
cxt.arc (tank.x+10, tank.y+15,4,0,360, verdadeiro);
cxt.fill ();
// Desenhe o canhão (linha reta)
cxt.strokestyle = tank.color [1];
// Defina a largura da linha
cxt.LineWidth = 1,5;
CXT.BEGINPATH ();
cxt.moveto (tank.x+10, tank.y+15);
if (tank.direct == 0) {
cxt.lineto (tank.x+10, tank.y);
} else if (tank.direct == 2) {
cxt.lineto (tank.x+10, tank.y+30);
}
cxt.closePath ();
cxt.stroke ();
quebrar;
Caso 1: // direita e esquerda
Caso 3:
// desenhe seu próprio tanque e use a técnica de desenho anterior
// Defina a cor
cxt.fillstyle = tank.color [0];
// O professor Han usa a morte primeiro ---> e depois vive (é melhor para iniciantes)
// Desenhe o retângulo à esquerda primeiro
cxt.fillrect (tank.x, tank.y, 30,5);
// Desenhe o retângulo à direita (por favor, pense sobre isso neste momento -> Certifique -se de ter um ponto de referência)
cxt.fillrect (tank.x, tank.y+15,30,5);
// Desenhe o retângulo do meio
cxt.fillrect (tank.x+5, tank.y+6,20,8);
// Desenhe a tampa do tanque
cxt.fillstyle = tank.color [1];
cxt.arc (tank.x+15, tank.y+10,4,0,360, verdadeiro);
cxt.fill ();
// Desenhe o canhão (linha reta)
cxt.strokestyle = tank.color [1];
// Defina a largura da linha
cxt.LineWidth = 1,5;
CXT.BEGINPATH ();
cxt.moveto (tank.x+15, tank.y+10);
//Para a direita
if (tank.direct == 1) {
cxt.lineto (tank.x+30, tank.y+10);
} else if (tank.direct == 3) {// à esquerda
cxt.lineto (tank.x, tank.y+10);
}
cxt.closePath ();
cxt.stroke ();
quebrar;
}
}
</pre>
<pre> </pre>
</pre>