PS: Esta batalha de tanques foi uma reescrita após um código -fonte on -line e offline. Não há nada muito difícil em si. Este caso usa o JS Orientado a objetos, que pode ser usado como um tutorial introdutório para o JS Orientado a objetos.
1. Crie objetos básicos para realizar um movimento simples de tanques
1.1 Como desenhar uma tela em um mapa ?
Considerando o problema da compatibilidade do navegador, usamos o DOM para desenhar e atualizar objetos de jogo. Como armazenamos nossos mapas? Devemos salvar o mapa como uma matriz bidimensional. Não existe uma matriz bidimensional no JS, mas pode ser alcançada armazenando a matriz em uma matriz unidimensional.
1.2 Implementação de código
Projetamos a tela como uma matriz bidimensional de 13 * 13. Cada elemento tem um comprimento e largura correspondentes no mapa. Podemos considerar o mapa inteiro como uma tabela composta por células de 40px * 40px, portanto, o tamanho de toda a nossa tela é de 520px * 520px;
Antes de entrar no código, darei a você um diagrama de relacionamento com objetos:
1.2.1 Criando um objeto de nível superior
Código HTML:
A cópia do código é a seguinte:
<!
<html>
<head>
<title> Tank War </ititle>
<link rel = Stylesheet href = "css /main.css" />
<script src = "js/Common.js"> </sCript>
<script src = "js/tankObject.js"> </script>
<script src = "js/mover.js"> </script>
<script src = "js/tank.js"> </script>
<script src = "js/frame.js"> </script>
<Cript>
window.onload = function () {
// Ligue para o objeto de carregamento do jogo
var carregador = new gameloader ();
carregador.Begin ();
}
</script>
</head>
<Body>
<!-Map Container->
<div id = "divmap">
</div>
<div id = "debuginfo">
</div>
</body>
</html>
Arquivo TankObject.js:
A cópia do código é a seguinte:
// Objeto de nível superior
TankObject = function () {
this.xposition = 0; // a posição do objeto em x no mapa (13*13)
this.ypoition = 0;
this.ui = null; // elemento dom
}
// Alterar o método estático da interface do usuário
TankObject.prototype.UpdateUi = função (Battlfiled) {}
// Defina a posição, os parâmetros são os seguintes: 1*40, 6*40
TankObject.prototype.SetPosition = Função (LeftPosition, TopPosition) {
// Round in the Map Location Math.Round
this.xPosition = Math.Round (LeftPosition / 40);
this.ypoition = Math.Round (TopPosition / 40);
// defina a posição no formulário
if (this.ui! = null && this.ui.style! = null) {
this.ui.style.left = leftPosition + "px";
this.ui.style.top = topPosition + "px";
}
}
Aqui usamos coordenadas x e y para representar a posição do objeto no mapa. Mais tarde, colocaremos cada objeto no mapa em uma matriz bidimensional e, neste momento, podemos obter o objeto correspondente através das coordenadas X e Y.
Em seguida, use a esquerda e o topo no CSS para controlar a posição do nosso objeto no formulário. (Objetos típicos: tanques, balas)
1.2.2 Criando um objeto público
Também precisamos criar um objeto público para escrever alguns de nossos métodos comumente usados.
Common.js:
A cópia do código é a seguinte:
// quatro direções de movimento do tanque
var enumdirection = {
Up: "0",
Direita: "1",
Down: "2",
Esquerda: "3"
};
// objeto de método geral
var utilityClass = {
// Crie o elemento DOM no pislenode, especifique o ID e ClassName
Createe: function (tipo, id, className, parentNode) {
var j = document.createElement (tipo);
if (id) {j.id = id};
if (className) {j.className = className};
retornar parentnode.appendChild (j);
}, // Remova os elementos
Remonee: function (obj, parentnode) {
parentnode.removeChild (OBJ);
},
GetFunctionName: function (context, argumentCallee) {
para (var i no contexto) {
if (context [i] == argumentCallee) {return i};
}
retornar "";
}, // vincular o evento, retornar o método func, este é o OBJ aprovado
BindFunction: function (obj, func) {
Return function () {
func.apply (obj, argumentos);
};
}
};
1.2.3 Criando um objeto em movimento
Mover.js
A cópia do código é a seguinte:
// mova o objeto, herdado do objeto de nível superior
Mover = function () {
this.direction = enumdirection.up;
this.speed = 1;
}
Mover.Prototype = new TankObject ();
Mover.prototype.move = function () {
if (this.lock) {
retornar;/* desativado ou ainda está em andamento, a operação é inválida*/
}
// Defina a imagem de fundo do tanque de acordo com a direção
this.ui.style.backgroundposition = "0 -" + this.direction * 40 + "px";
// Se a direção estiver para cima e para baixo, o vice -presidente será o topo; Se a direção estiver para cima e para a esquerda, Val é -1
var vp = ["top", "esquerda"] [((this.direction == enumdirection.up) || (this.direction == enumdirection.down))? 0: 1];
var val = ((this.direction == enumdirection.up) || (this.direction == enumdirection.left))? -1: 1;
this.lock = true;/* bloqueio*/
// salve o objeto atual para este
var this = this;
// Registrar o movimento do objeto Posição de início
var startMovep = parseint (this.ui.style [vp]);
var xp = this.xposition, yp = this.ypoition;
Var subove = setInterval (function () {
// comece a se mover, 5px cada vez
This.ui.style [vp] = parseint (this.ui.style [vp]) + 5 * val + "px";
// 40px por célula
if (math.abs ((parseint (this.ui.style [vp]) - startMovep))> = 40) {
ClearInterval (suboveno);
This.lock = false;/* desbloqueio, permitindo que se vangloriou*/
// registra a posição do objeto na tabela após ser movida
This.xPosition = Math.Round (this.ui.offsetleft / 40);
This.yPosition = Math.Round (this.ui.offsettop / 40);
}
}, 80 - this.speed* 10);
}
O objeto em movimento aqui herda do nosso objeto de nível superior, e isso representa o objeto que chama o método de movimentação.
A função do objeto de movimentação se move de acordo com a direção e a velocidade do objeto. Cada vez que você move 5px, mova um total de 40px uma célula. O objeto será expandido posteriormente e a detecção de colisão e outras funções serão adicionadas.
1.2.4 Criando um objeto de tanque
Arquivo Tank.js:
A cópia do código é a seguinte:
// O objeto de tanque herda do Mover
Tank = function () {}
Tank.prototype = new Mover ();
// Crie um tanque de jogador, herdado de um objeto de tanque
SelfTank = function () {
this.ui = utilityclass.createe ("div", "", "iTank", document.getElementById ("divmap"));
this.movingState = false;
this.speed = 4;
}
SelfTank.prototype = new Tank ();
// Defina a posição do tanque
SelfTank.prototype.UpdateUi = function () {
this.ui.className = "Itank";
// Método de objeto superior, defina a posição do tanque
this.setPosition (this.xPosition * 40, this.ypoition * 40);
}
Agora, apenas os tanques de jogadores foram criados, e adicionaremos tanques inimigos a eles mais tarde.
1.2.5 Crie um objeto de carregamento de jogo (núcleo)
A cópia do código é a seguinte:
// O jogo carrega o objeto do objeto principal de todo o jogo
Gameloader = function () {
this.mapContainer = document.getElementById ("divmap"); // a div que armazena o mapa do jogo
this._selfTank = null; // tanque de jogador
this._gameListener = null; // O ID do timer de loop principal do jogo
}
Gameloader.prototype = {
BEGIN: function () {
// inicialize o tanque de jogador
var selft = new SelfTank ();
Selft.xPosition = 4;
Selft.ypoition = 12;
Selft.UpdateUi ();
this._selfTank = selft;
// Adicionar evento -chave
var warpper = utilityclass.bindfunction (this, this.onkeydown);
window.onkeydown = document.body.onkeydown = warpper;
warpper = utilityclass.bindfunction (this, this.onkeyup);
window.onkeyup = document.body.onkeyup = warpper;
// o loop principal do jogo
warpper = utilityclass.bindfunction (this, this.run);
/*Tecla de controle de monitoramento de temporizador longo*/
this._gameListener = setInterval (Warpper, 20);
}
// Pressione o tanque do jogador no teclado para começar a se mover
, OnKeydown: function (e) {
switch ((window.event || e) .KeyCode) {
Caso 37:
this._selfTank.direction = enumdirection.left;
this._selfTank.movingState = true;
quebrar; //esquerda
Caso 38:
this._selfTank.direction = enumdirection.up;
this._selfTank.movingState = true;
quebrar; //Sobre
Caso 39:
this._selfTank.direction = enumdirection.right;
this._selfTank.movingState = true;
quebrar; //Certo
Caso 40:
this._selfTank.direction = enumdirection.down;
this._selfTank.movingState = true;
quebrar; //Próximo
}
}
// Os botões aparecem e param de se mover
, Onkeyup: function (e) {
switch ((window.event || e) .KeyCode) {
Caso 37:
Caso 38:
Caso 39:
Caso 40:
this._selfTank.movingState = false;
quebrar;
}
}
/*A função de execução do loop principal do jogo, o coração do jogo, o hub*/
, Execute: function () {
if (this._selfTank.movingState) {
this._selfTank.move ();
}
}
};
O código do objeto de carregamento do jogo parece muito, mas, na verdade, apenas duas coisas:
1. Crie um objeto de tanque de jogador.
2. Adicione um evento de monitoramento -chave. Quando o jogador pressionar a tecla móvel, chame o método de movimentação do tanque para mover o tanque.
Resumo: Neste ponto, nosso tanque pode se mover livremente pressionando os botões. Próxima etapa, precisamos melhorar o mapa e a detecção de colisão.