2. Mejorar el mapa
Nuestro mapa tiene obstáculos como espacios abiertos, paredes, acero, hierba, agua, sede, etc. Podemos diseñar todos estos como objetos.
2.1 Creación de un grupo de objetos de obstáculos
El grupo de objetos guarda objetos en varios mapas. Usamos las propiedades del objeto para determinar si el objeto puede pasar o atacar.
Barrera.js:
La copia del código es la siguiente:
// Objeto de clase de base de obstáculos, heredado de TankObject
Barrera = function () {
this.defenval = 1; // defensa
this.canbeatTacked = true; // es posible ser atacado
}
Barrera.prototype = new TankObject ();
// Muro
Wallb = function () {}
Wallb.prototype = new Barrier ();
// tierra vacía
VacíaB = function () {
this.canacross = true; // se puede cruzar
}
VacíaB.Prototype = new Barrier ();
// Río
Riveb = function () {
this.defenval = 0;
this.canbeatTacked = false; // se prefieren los miembros del objeto, y los heredados de la clase matriz se sobrescribirán.
}
Riveb.prototype = new Barrier ();
// Acero
Steelb = function () {
this.defenval = 3;
}
Steelb.prototype = new Barrier ();
// objeto de hierba
Todb = function () {
this.canbeatTacked = false;
this.defenval = 0;
this.canacross = true;
}
Todb.prototype = new Barrier ();
// sede
Podiumb = function () {
this.defenval = 5;
}
Podiumb.prototype = new Barrier ();
2.2 Escribir datos en el mapa.
Agregue el siguiente código en común.js:
La copia del código es la siguiente:
// Enumeración de tipos de elementos de mapa
/*
0: tierra vacía
1: Muro
2: acero
3: Groves
4: Río
5: sede
*/
var enummapCellType = {
Vacío: "0"
, Pared: "1"
, Acero: "2"
, TOD: "3"
, Río: "4"
, Podio: "5"
};
// El nombre de estilo correspondiente de cada terreno
var arraycss = ['vacía', 'muro', 'acero', 'Tod', 'río', 'podio'];
// Mapa de nivel
/*Nivel*/
var str = '000000000000000';
str += ', 0011100111010';
str += ', 1000010000200';
str += ', 12003333310101';
str += ', 0000444400001';
str += ', 33133300001011';
str += ', 3011331022011';
str += ', 3311031011011';
str += ', 010101011102010';
str += ', 0101011010010';
str += ', 010000000110';
str += ', 0100012101101';
str += ', 0010015100000';
// Mapas de nivel de almacenamiento 0, 1, 2, 3 ... son 1-N respectivamente ...
var top_maplevel = [str];
2.3 Dibuja un mapa
Una vez finalizado el trabajo de preparación, comenzaremos a servir los platos y dibujar un mapa. Mencionado anteriormente nuestro mapa es 13 * 13 tabla. Entonces agregamos dos atributos al objeto de carga del juego y agregamos el método de mapa inicial.
Frame.js:
La copia del código es la siguiente:
// El juego carga el objeto del objeto central de todo el juego
Gameloader = function () {
this._mapContainer = document.getElementById ("DivMap"); // El div que almacena el mapa del juego
this._SelfTank = null; // tanque de jugador
this._gamelistener = null; // La ID de temporizador de bucle principal del juego
/*v2.0 Propiedades recién agregadas*/
this._level = 1;
this._rowCount = 13;
this._colcount = 13;
this._battlefield = []; // almacenar la matriz bidimensional de objetos de mapa
}
// Método de carga del mapa
Load: function () {
// Inicializar el mapa de acuerdo con el nivel
var map = top_maplevel [this._level - 1] .split (",");
var mapBorder = UtilityClass.Createe ("div", "", "mapborder", this._mapContainer);
// viajar a través de cada celda en la tabla de mapas
para (var i = 0; i <this._rowcount; i ++) {
// Crear un DIV, y el mapa de cada fila se guarda en este DIV
var divrow = UtilityClass.Createe ("Div", "", "", MapBorder);
// Crear otra matriz en una matriz unidimensional
this._battlefield [i] = [];
para (var j = 0; j <this._colcount; j ++) {
// Leer datos del mapa, valor predeterminado: 0
var v = (map [i] && map [i] .charat (j)) || 0;
// Insertar el elemento SPAN, un elemento SPAN es una unidad de mapa
var spancol = utilityclass.createe ("span", "", "", divrow);
spancol.classname = arraycss [v];
// Ponga objetos de mapa en una matriz bidimensional para una detección de colisión más fácil.
var a = nulo;
Switch (V) {
case enummapCellType.Epty:
to = new vacíaB ();
romper;
case enummapCellType.wall:
a = new WallB ();
romper;
Case enummapCellType.steel:
a = nuevo Steelb ();
romper;
case enummapCellType.tod:
a = nuevo Todb ();
romper;
case enummapCellType.River:
a = new Riverb ();
romper;
case enummapCellType.podium:
a = nuevo podiumb ();
romper;
por defecto:
arrojar un nuevo error ("Los números de mapa cruzan el límite!");
romper;
}
to.ui = spancol;
// La j aquí es x, porque el bucle interno es horizontal y x es el eje horizontal.
to.xPosition = j;
to.yposition = i;
// Guardar el objeto de mapa actual en una matriz bidimensional OBJ como un objeto de obstáculo, y el ocupante como objeto de ocupación
this.
} // finalizar para
} // finalizar para
// Poner las variables globales de la ventana
Window.battlefield = this._battlefield;
}
Ok, nuestro mapa se realiza aquí. Los comentarios aquí ya son muy detallados. Si aún no comprende, descargue el código fuente y depurarlo usted mismo. Será fácil de entender.
Aquí cargamos principalmente los datos del mapa e insertamos cada mapa como un elemento SPAN en el documento HTML. Y almacene los objetos del mapa en una matriz bidimensional. En el futuro, cuando hacemos detección de colisiones, podemos recuperar directamente el objeto de matriz correspondiente a través de las coordenadas del objeto, lo cual es muy conveniente.
Código fuente adjunto: http://xiazai.vevb.com/201411/yuanma/jstankedazhan(vevb.com).rar