Création d'un enregistrement complet des batailles de chars avec les compétences javascript (2)_javascript

2. Améliorer la carte

Notre carte comporte des obstacles tels que des espaces ouverts, des murs, de l'acier, de l'herbe, de l'eau et un quartier général. Nous pouvons concevoir tout cela comme des objets.

2.1 Créer un groupe d'objets obstacle

Le groupe d'objets stocke les objets sur diverses cartes. Nous utilisons les propriétés des objets pour déterminer si les objets peuvent être traversés ou attaqués.

Barrière.js :

Copier le code Le code est le suivant :

// Objet de classe de base d'obstacle, hérité de TankObject
Barrière = fonction () {
This.DefenVal = 1; // Puissance de défense
This.CanBeAttacked = true; // Peut-il être attaqué
>
Barrier.prototype = new TankObject();
// Mur
MurB = fonction () { }
WallB.prototype = new Barrier();
// Espace ouvert
VideB = fonction () {
This.CanAcross = true; // Peut être transmis
>
EmptyB.prototype = new Barrier();
// Rivière
RiverB = fonction () {
This.DefenVal = 0;
This.CanBeAttacked = false; // Les membres de l'objet sont pris en premier et ceux hérités de la classe parent seront écrasés.
>
RiverB.prototype = new Barrier();
// Acier
SteelB = fonction () {
This.DefenVal = 3;
>
SteelB.prototype = new Barrier();
// Objet herbe
TodB = fonction () {
This.CanBeAttacked = false;
This.DefenVal = 0;
This.CanAcross = true;
>
TodB.prototype = new Barrier();
//Siège social
PodiumB = fonction () {
This.DefenVal = 5;
>
PodiumB.prototype = new Barrier();

2.2 Données écrites sur la carte.

Ajoutez le code suivant dans Common.js :

Copier le code Le code est le suivant :

//Énumération du type d'élément de carte
/*
0 : Espace ouvert
1 : Mur
2 : Acier
3 : Les buissons
4：Rivière
5 : Quartier général
*/
var EnumMapCellType = {
Vide : "0"
, Mur : "1"
, Acier : "2"
, Tod : "3"
, Rivière : "4"
, Podium : "5"
};
//Le nom du style correspondant à chaque terrain
var ArrayCss = ['vide', 'mur', 'acier', 'tod', 'rivière', 'podium'];
// Carte des niveaux
/*Niveau*/
var str = '0000000000000';
str = ',0011100111010';
str = ',1000010000200';
str = ',1200333310101';
str = ',0000444400001';
str = ',3313300001011';
str = ',3011331022011';
str = ',3311031011011';
str = ',0101011102010';
str = ',0101011010010';
str = ',0100000000110';
str = ',0100012101101';
str = ',0010015100000';
//La carte des niveaux de stockage 0,1,2,3... sont respectivement 1-n...Niveau
var Top_MapLevel = [str];

2.3 Dessiner une carte

Maintenant que les préparatifs sont terminés, commençons à servir les plats et à dessiner la carte. Comme mentionné précédemment, notre carte est un tableau 13*13. Nous ajoutons donc des attributs de ligne et de colonne à l'objet de chargement du jeu, ainsi qu'une méthode de mappage d'initialisation.

Frame.js :

Copier le code Le code est le suivant :

// Objet de chargement du jeu L'objet principal de tout le jeu
GameLoader = fonction () {
This._mapContainer = document.getElementById("divMap"); // Le div
qui stocke la carte du jeu This._selfTank = null; // Réservoir du joueur
This._gameListener = null; // ID du minuteur de la boucle principale du jeu
/*Nouveaux attributs ajoutés dans la v2.0*/
Ce._level = 1;
This._rowCount = 13;
This._colCount = 13;
This._battleField = []; // Stocke le tableau bidimensionnel d'objets cartographiques
>
//Charger la méthode de la carte
Charger : fonction () {
                // Initialise la carte en fonction du niveau
        var map = Top_MapLevel[this._level - 1].split(",");
        var mapBorder = UtilityClass.CreateE("div", "", "mapBorder", this._mapContainer);
// Parcourez chaque cellule de la table cartographique
pour (var i = 0; i < this._rowCount; i ) {
                                   // Créez un div et la carte de chaque ligne est enregistrée dans ce div
            var divRow = UtilityClass.CreateE("div", "", "", mapBorder);
//Créer un autre tableau dans le tableau unidimensionnel
This._battleField[i] = [];
pour (var j = 0; j < this._colCount; j ) {
// Lire les données cartographiques, valeur par défaut : 0
              var v = (map[i] && map[i].charAt(j)) || 0;
// Insérer un élément span, un élément span est une unité cartographique
              var spanCol = UtilityClass.CreateE("span", "", "", divRow);
                      spanCol.className = ArrayCss[v];
                               // Placez l'objet cartographique dans un tableau bidimensionnel pour faciliter la détection de collision ultérieure.
              var à = null;
interrupteur (v) {
cas EnumMapCellType.Empty :
                               à = new EmptyB();
                              pause ;
cas EnumMapCellType.Wall:
                                 à = nouveau WallB();
                              pause ;
cas EnumMapCellType.Steel :
                                  à = new SteelB();
                              pause ;
cas EnumMapCellType.Tod :
                                 à = new TodB();
                              pause ;
cas EnumMapCellType.River :
                              à = new RiverB();
                              pause ;
cas EnumMapCellType.Podium :
                               à = nouveau PodiumB();
                              pause ;
                                                                                                                                                                                                                                                                  par défaut :
throw new Error("Le numéro de carte est hors limites!");
                              pause ;
                 }
                     to.UI = spanCol;
                         // j voici X, car la boucle intérieure est horizontale, x est l'abscisse
                          to.XPosition = j;
                        to.YPosition = i;
                                           // Stocke l'objet cartographique actuel dans un tableau bidimensionnel, obj est l'objet obstacle et l'occupant est l'objet occupant
This._battleField[i][j] = { obj : to, occupant : null, lock : false };
                                             //fin pour
                                   // fin pour
                                            // Mettre dans la variable globale de la fenêtre
            window.BattleField = this._battleField;
>

ok, notre carte est faite ici. Les commentaires ici sont très détaillés. Si vous ne comprenez toujours pas quelque chose, téléchargez le code source et déboguez-le vous-même.

Ici, nous chargeons principalement des données cartographiques et insérons chaque carte dans le document HTML en tant qu'élément span. Et stockez l'objet cartographique dans un tableau bidimensionnel. À l'avenir, lorsque nous effectuerons une détection de collision, nous pourrons obtenir directement l'objet tableau correspondant via les coordonnées de l'objet, ce qui est très pratique.

Ci-joint le code source : http://xiazai.jb51.net/201411/yuanma/jstankedazhan(jb51.net).rar