Erstellen einer vollständigen Aufzeichnung von Panzerschlachten mit Javascript (2)_Javascript-Kenntnissen

2. Verbessern Sie die Karte

Auf unserer Karte gibt es Hindernisse wie Freiflächen, Mauern, Stahl, Gras, Wasser und Hauptquartiere. All dies können wir als Objekte gestalten.

2.1 Hindernisobjektgruppe erstellen

Die Objektgruppe speichert Objekte auf verschiedenen Karten. Wir verwenden die Eigenschaften der Objekte, um zu bestimmen, ob die Objekte durchquert oder angegriffen werden können.

Barrier.js:

Code kopieren Der Code lautet wie folgt:

// Hindernis-Basisklassenobjekt, geerbt von TankObject
Barriere = Funktion () {
This.DefenVal = 1; // Verteidigungsstärke
This.CanBeAttacked = true; // Ob es angegriffen werden kann
}
Barrier.prototype = new TankObject();
// Wand
WallB = Funktion () { }
WallB.prototype = new Barrier();
// Freiraum
EmptyB = Funktion () {
This.CanAcross = true; // Kann durchgereicht werden
}
EmptyB.prototype = new Barrier();
// Fluss
RiverB = Funktion () {
This.DefenVal = 0;
This.CanBeAttacked = false; // Die Mitglieder des Objekts werden zuerst übernommen und die von der übergeordneten Klasse geerbten werden überschrieben.
}
RiverB.prototype = new Barrier();
// Stahl
SteelB = Funktion () {
This.DefenVal = 3;
}
SteelB.prototype = new Barrier();
// Grasobjekt
TodB = Funktion () {
This.CanBeAttacked = false;
This.DefenVal = 0;
This.CanAcross = true;
}
TodB.prototype = new Barrier();
//Hauptquartier
PodiumB = Funktion () {
This.DefenVal = 5;
}
PodiumB.prototype = new Barrier();

2.2 Auf die Karte geschriebene Daten.

Fügen Sie den folgenden Code in Common.js hinzu:

Code kopieren Der Code lautet wie folgt:

//Aufzählung des Kartenelementtyps
/*
0: Freiraum
1: Wand
2: Stahl
3: Büsche
4:Fluss
5: Hauptquartier
*/
var EnumMapCellType = {
Leer: „0“
, Wand: „1“
, Stahl: „2“
, Tod: „3“
, Fluss: „4“
, Podium: „5“
};
//Der Stilname, der jedem Gelände entspricht
var ArrayCss = ['empty', 'wall', 'steel', 'tod', 'river', 'podium'];
// Levelkarte
/*Stufe*/
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';
//Speicherebenenkarte 0,1,2,3... sind jeweils 1-n...Ebene
var Top_MapLevel = [str];

2.3 Zeichnen Sie eine Karte

Nachdem die Vorbereitungen nun abgeschlossen sind, beginnen wir mit dem Servieren der Gerichte und dem Zeichnen der Karte. Wie bereits erwähnt, ist unsere Karte eine 13 * 13-Tabelle. Daher fügen wir dem Spielladeobjekt Zeilen- und Spaltenattribute sowie eine Initialisierungskartenmethode hinzu.

Frame.js:

Code kopieren Der Code lautet wie folgt:

// Spielladeobjekt Das Kernobjekt des gesamten Spiels
GameLoader = function () {
This._mapContainer = document.getElementById("divMap"); // Das div
, das die Spielkarte speichert This._selfTank = null; // Spielertank
This._gameListener = null; // Spiel-Hauptschleifen-Timer-ID
/*Neue Attribute in v2.0 hinzugefügt*/
This._level = 1;
This._rowCount = 13;
This._colCount = 13;
This._battleField = []; // Zweidimensionales Array von Kartenobjekten speichern
}
//Kartenmethode laden
Laden: Funktion () {
// Initialisiere die Karte entsprechend der Ebene
        var map = Top_MapLevel[this._level - 1].split(",");
        var mapBorder = UtilityClass.CreateE("div", "", "mapBorder", this._mapContainer);
// Jede Zelle in der Kartentabelle durchlaufen
for (var i = 0; i < this._rowCount; i ) {
                                   // Erstellen Sie ein Div, und die Karte jeder Zeile wird in diesem Div gespeichert
            var divRow = UtilityClass.CreateE("div", "", "", mapBorder);
//Erstelle ein weiteres Array im eindimensionalen Array
This._battleField[i] = [];
for (var j = 0; j < this._colCount; j ) {
// Kartendaten lesen, Standardwert: 0
              var v = (map[i] && map[i].charAt(j)) || 0;
// Span-Element einfügen, ein Span-Element ist eine Karteneinheit
              var spanCol = UtilityClass.CreateE("span", "", "", divRow);
                     spanCol.className = ArrayCss[v];
                         // Platzieren Sie das Kartenobjekt in einem zweidimensionalen Array, um die spätere Kollisionserkennung zu erleichtern.
              var to = null;
Schalter (v) {
case EnumMapCellType.Empty:
                                 to = new EmptyB();
Pause;
case EnumMapCellType.Wall:
                                 to = new WallB();
Pause;
case EnumMapCellType.Steel:
                                  to = new SteelB();
Pause;
case EnumMapCellType.Tod:
                                 to = new TodB();
Pause;
case EnumMapCellType.River:
                             to = new RiverB();
Pause;
case EnumMapCellType.Podium:
                              to = new PodiumB();
Pause;
                                                                                                                                                                                                                  Standard:
throw new Error("Kartennummer außerhalb der Grenzen!");
Pause;
                 }
                     to.UI = spanCol;
                         // j ist hier X, da die innere Schleife horizontal ist, ist x die Abszisse
                          to.XPosition = j;
                        to.YPosition = i;
                                           // Das aktuelle Kartenobjekt in einem zweidimensionalen Array speichern, obj ist das Hindernisobjekt und occupier ist das besetzende Objekt
This._battleField[i][j] = { obj: to, occupier: null, lock: false };
                                          //Ende für
                                     // Ende für
                                                                                                                     // In die Fenster-Globalvariable
einfügen             window.BattleField = this._battleField;
}

ok, unsere Karte ist hier fertig. Die Kommentare hier sind sehr detailliert. Wenn Sie etwas immer noch nicht verstehen, laden Sie den Quellcode herunter und debuggen Sie ihn.

Hier laden wir hauptsächlich Kartendaten und fügen jede Karte als Span-Element in das HTML-Dokument ein. Und speichern Sie das Kartenobjekt in einem zweidimensionalen Array. Wenn wir in Zukunft eine Kollisionserkennung durchführen, können wir das entsprechende Array-Objekt direkt über die Koordinaten des Objekts abrufen, was sehr praktisch ist.

Anbei ist der Quellcode: http://xiazai.jb51.net/201411/yuanma/jstankedazhan(jb51.net).rar