2. Améliorer la carte
Notre carte a des obstacles tels que l'espace ouvert, les murs, l'acier, l'herbe, l'eau, le siège social, etc. Nous pouvons concevoir tout cela comme des objets.
2.1 Création d'un groupe d'objets d'obstacle
Le groupe d'objets enregistre des objets sur diverses cartes. Nous utilisons les propriétés de l'objet pour déterminer si l'objet peut être passé ou attaqué.
Barrière.js:
La copie de code est la suivante:
// objet de classe de base d'obstacles, hérité de TankObject
Barrière = fonction () {
this.defenval = 1; // Défense
this.CanbeAtTacked = true; // est-il possible d'être attaqué
}
Barrière.prototype = new TankObject ();
// Mur
Wallb = function () {}
Wallb.prototype = new Barrière ();
// terre vide
VideB = fonction () {
this.Canacross = true; // peut être croisé
}
VideB.prototype = new Barrier ();
// Rivière
RiverB = fonction () {
this.defenval = 0;
this.CanbeAtTacked = false; // Les membres de l'objet sont préférés, et ceux qui ont hérité de la classe parent seront écrasés.
}
RiverB.prototype = new Barrière ();
// Acier
Steelb = fonction () {
this.defenval = 3;
}
Steelb.prototype = new Barrière ();
// Objet de l'herbe
Todb = function () {
this.CanbeAtTacked = false;
this.defenval = 0;
this.Canacross = true;
}
Todb.prototype = new Barrière ();
// Siège
Podiumb = function () {
this.defenval = 5;
}
Podiumb.prototype = new Barrière ();
2.2 Écrivez des données sur la carte.
Ajoutez le code suivant en commun.js:
La copie de code est la suivante:
// Énumération des types d'éléments de carte
/ *
0: terre vide
1: mur
2: acier
3: Groves
4: rivière
5: quartier général
* /
var edummapcellType = {
Vide: "0"
, Mur: "1"
, Acier: "2"
, Tod: "3"
, River: "4"
, Podium: "5"
};
// Le nom de style correspondant de chaque terrain
var arraycss = [«vide», «mur», «acier», «tod», «rivière», «podium»];
// carte de niveau
/*Niveau*/
var str = '0000000000000';
str + = ', 0011100111010';
str + = ', 1000010000200';
str + = ', 1200333310101';
str + = ', 0000444400001';
str + = ', 3313300001111';
str + = ', 3011331022011';
str + = ', 3311031011011';
str + = ', 0101010102010';
str + = ', 0101011010010';
str + = ', 010000000110';
str + = ', 0100012101101';
str + = ', 0010015100000';
// Cartes de niveau de stockage 0, 1, 2, 3 ... sont respectivement 1-N ...
var top_maplevel = [str];
2.3 Dessinez une carte
Une fois les travaux de préparation terminés, nous commencerons à servir la vaisselle et à dessiner une carte. Mentionné ci-dessus, notre carte est 13 * 13. Nous ajoutons donc deux attributs à l'objet de chargement de jeu et ajoutons la méthode de carte initiale.
Frame.js:
La copie de code est la suivante:
// Le jeu charge l'objet de l'objet de base du jeu entier
GameLoader = function () {
this._mapContainer = document.getElementById ("divmap"); // la div qui stocke la carte du jeu
this._selftank = null; // Tank des joueurs
this._gameListener = null; // L'ID de minuterie de boucle principale du jeu
/*v2.0 Propriétés nouvellement ajoutées * /
this._level = 1;
this._rowCount = 13;
this._colCount = 13;
this._battlefield = []; // Stockez un tableau bidimensionnel d'objets de carte
}
// Méthode de chargement de la carte
Chargement: fonction () {
// initialise la carte en fonction du niveau
var map = top_maplevel [this._level - 1] .split (",");
var mapborder = utilityClass.createe ("div", "", "mapborder", this._mapContainer);
// voyage à travers chaque cellule dans la table de carte
pour (var i = 0; i <this._rowCount; i ++) {
// Créez un div, et la carte de chaque ligne est enregistrée dans cette div
var divrow = utilityClass.createe ("div", "", "", mapborder);
// Créer un autre tableau dans un tableau unidimensionnel
this._battlefield [i] = [];
pour (var j = 0; j <this._colcount; j ++) {
// Lire les données de la carte, valeur par défaut: 0
var v = (map [i] && map [i] .charat (j)) || 0;
// insérer l'élément de portée, un élément de portée est une unité de carte
var spancol = utilityClass.createe ("span", "", "", divrow);
spanCol.className = arraycss [v];
// Mettez les objets MAP dans un tableau bidimensionnel pour une détection de collision plus facile.
var à = null;
commutateur (v) {
cas edummapcellType.Empty:
à = new videB ();
casser;
Case enummapcellType.wall:
à = new WallB ();
casser;
casemapcellType.Steel:
à = new SteelB ();
casser;
casemapcellType.tod:
à = new todb ();
casser;
casemapcellType.river:
à = new RiverB ();
casser;
case enummapcelltype.podium:
à = nouveau podiumb ();
casser;
défaut:
Jetez une nouvelle erreur ("Les numéros de carte traversent la limite!");
casser;
}
to.ui = spancol;
// Le j ici est x, car la boucle interne est horizontale et x est l'axe horizontal.
à.xposition = j;
to.yposition = i;
// Enregistrez l'objet de carte actuel dans un tableau bidimensionnel OBJ comme objet d'obstacle, et occupant en tant qu'objet d'occupation
this._battlefield [i] [j] = {obj: to, occup: null, lock: false};
} // fin pour
} // fin pour
// Mettez des variables globales de fenêtre
window.battlefield = this._battlefield;
}
Ok, notre carte est terminée ici. Les commentaires ici sont déjà très détaillés. Si vous ne comprenez toujours pas, téléchargez le code source et déboguez-le vous-même. Ce sera facile à comprendre.
Ici, nous chargeons principalement les données de la carte et insérons chaque carte en tant qu'élément de portée dans le document HTML. Et stockez les objets de la carte dans un tableau bidimensionnel. À l'avenir, lorsque nous effectuons une détection de collision, nous pouvons récupérer directement l'objet de tableau correspondant via les coordonnées de l'objet, ce qui est très pratique.
Code source ci-joint: http://xiazai.vevb.com/201411/yuanma/jstankedazhan(vevb.com).rar