2. Melhore o mapa
Nosso mapa possui obstáculos como espaço aberto, paredes, aço, grama, água, sede, etc. Podemos projetar tudo isso como objetos.
2.1 Criando um grupo de objetos de obstáculos
O grupo de objetos salva objetos em vários mapas. Usamos as propriedades do objeto para determinar se o objeto pode ser passado ou atacado.
Barrier.js:
A cópia do código é a seguinte:
// Objeto de classe base de obstáculos, herdado do TankObject
Barreira = function () {
this.defenval = 1; // Defesa
this.CanBeatTacked = true; // é possível ser atacado
}
Barrier.prototype = new TankObject ();
// Parede
WallB = function () {}
WallB.Prototype = new Barrier ();
// Terra vazia
VazioB = function () {
this.Canacross = true; // pode ser cruzado
}
Emptyb.prototype = new barrier ();
// Rio
Riverb = function () {
this.defenval = 0;
this.CanBeatTacked = false; // Os membros do objeto são preferidos e os herdados da classe pai serão substituídos.
}
Riverb.prototype = new Barreira ();
// Aço
SteelB = function () {
this.defenval = 3;
}
SteelB.Prototype = new Barrier ();
// objeto de grama
Todb = function () {
this.CanBeatTacked = false;
this.defenval = 0;
this.Canacross = true;
}
Todb.prototype = new Barrier ();
// sede
Podiumb = function () {
this.defenval = 5;
}
Podiumb.prototype = new Barrerier ();
2.2 Escreva dados no mapa.
Adicione o seguinte código em Common.js:
A cópia do código é a seguinte:
// Enumeração dos tipos de elementos do mapa
/*
0: Terra vazia
1: parede
2: Aço
3: Groves
4: Rio
5: Sede
*/
var enummapCellType = {
Vazio: "0"
, Parede: "1"
, Aço: "2"
, Tod: "3"
, Rio: "4"
, Pódio: "5"
};
// o nome de estilo correspondente de cada terreno
var Arraycss = ['vazio', 'parede', 'aço', 'Tod', 'rio', 'pódio'];
// mapa de nível
/*Nível*/
var str = '0000000000000';
str += ', 0011100111010';
str += ', 1000010000200';
str += ', 1200333310101';
str += ', 0000444400001';
str += ', 3313300001011';
str += ', 3011331022011';
str += ', 3311031011011';
str += ', 0101011102010';
str += ', 0101011010010';
str += ', 010000000110';
str += ', 0100012101101';
str += ', 0010015100000';
// mapas de nível de armazenamento 0, 1, 2, 3 ... são 1-n, respectivamente ...
var top_maplevel = [str];
2.3 Desenhe um mapa
Após o término do trabalho de preparação, começaremos a servir os pratos e desenhar um mapa. Acima mencionado, nosso mapa está 13 * 13 tabela. Portanto, adicionamos dois atributos ao objeto de carregamento do jogo e adicionamos o método do mapa inicial.
Frame.js:
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
/*v2.0 Propriedades recém -adicionadas*/
this._level = 1;
this._rowCount = 13;
this._colcount = 13;
this._battlefield = []; // Armazene a matriz bidimensional de objetos de mapa
}
// Método de carregar mapa
Load: function () {
// inicialize o mapa de acordo com o nível
var map = top_maplevel [this._level - 1] .split (",");
var mapborder = utilityclass.createe ("div", "", "mapborder", this._mapContainer);
// viaje por cada célula na tabela de mapas
for (var i = 0; i <this._rowcount; i ++) {
// Crie uma div, e o mapa de cada linha é salvo nesta div
var divrow = utilityclass.createe ("div", "", "", mapborder);
// Crie outra matriz em uma matriz unidimensional
this._battlefield [i] = [];
for (var j = 0; j <this._colcount; j ++) {
// Leia os dados do mapa, valor padrão: 0
var V = (mapa [i] && map [i] .Charat (j)) || 0;
// Insira o elemento Span, um elemento de span é uma unidade de mapa
var spancol = utilitárioclass.createe ("span", "", "", divrow);
spancol.className = Arraycss [v];
// Coloque os objetos do mapa em uma matriz bidimensional para facilitar a detecção de colisão.
var para = nulo;
switch (v) {
case enummapcelltype.empty:
para = new emptyb ();
quebrar;
case enummapcelltype.wall:
para = new WallB ();
quebrar;
case enummapcelltype.steel:
para = new SteelB ();
quebrar;
case enummapcelltype.tod:
para = novo Todb ();
quebrar;
case enummapcelltype.river:
para = new Riverb ();
quebrar;
case enummapcelltype.podium:
para = new podiumB ();
quebrar;
padrão:
lançar um novo erro ("Os números do mapa cruzam o limite!");
quebrar;
}
to.ui = spancol;
// O j aqui é x, porque o loop interno é horizontal e x é o eixo horizontal.
para.xposition = j;
to.yPosition = i;
// Salve o objeto de mapa atual em uma matriz bidimensional OBJ como um objeto de obstáculos e ocupante como objeto de ocupação
this._battlefield [i] [j] = {obj: to, occurer: null, bloqueio: false};
} // termina para
} // termina para
// coloque variáveis globais de janela
window.battlefield = this._battlefield;
}
OK, nosso mapa é feito aqui. Os comentários aqui já estão muito detalhados. Se você ainda não entende, faça o download do código -fonte e depra -o você mesmo. Será fácil de entender.
Aqui, carregamos principalmente os dados do mapa e inserimos cada mapa como um elemento de span no documento HTML. E armazene os objetos do mapa em uma matriz bidimensional. No futuro, quando fazemos detecção de colisão, podemos recuperar diretamente o objeto de matriz correspondente através das coordenadas do objeto, o que é muito conveniente.
Código fonte anexado: http://xiazai.vevb.com/201411/yuanma/jstankedazhan(vevb.com).rar