2. Verbessere die Karte
Unsere Karte verfügt über Hindernisse wie offener Raum, Wände, Stahl, Gras, Wasser, Hauptquartier usw. Wir können alle diese als Objekte entwerfen.
2.1 Erstellen einer Gruppe von Hindernisobjekten
Die Objektgruppe speichert Objekte auf verschiedenen Karten. Wir verwenden die Eigenschaften des Objekts, um festzustellen, ob das Objekt durchlaufen oder angegriffen werden kann.
Barrier.js:
Die Codekopie lautet wie folgt:
// Hindernisbasisklassenobjekt, von TankObject geerbt
Barrier = function () {
this.defenval = 1; // Verteidigung
this.canbeattacked = true; // ist es möglich, angegriffen zu werden?
}
Barriere.Prototyp = new TankObject ();
// Wand
Wallb = function () {}
WallB.Prototype = New Barriere ();
// leeres Land
LeereB = function () {
this.canacross = true; // kann gekreuzt werden
}
LeseB.Prototype = new barriere ();
// Fluss
Riverb = function () {
this.defenval = 0;
this.canbeattacked = false; // Mitglieder des Objekts werden bevorzugt und die von der Elternklasse geerbten, werden überschrieben.
}
Riverb.Prototype = new barriere ();
// Stahl
SteelB = function () {
this.defenval = 3;
}
SteelB.Prototype = New Barriere ();
// Grasobjekt
Todb = function () {
this.canbeattacked = false;
this.defenval = 0;
this.canacross = true;
}
Todb.Prototype = new barriere ();
// Hauptquartier
Podiumb = function () {
this.defenval = 5;
}
Podiumb.Prototype = new barriere ();
2.2 Daten in die Karte schreiben.
Fügen Sie den folgenden Code in Common.js hinzu:
Die Codekopie lautet wie folgt:
// Aufzählung von Kartenelementtypen
/*
0: leeres Land
1: Wand
2: Stahl
3: Haine
4: Fluss
5: Hauptquartier
*/
var enummapcellType = {
Leer: "0"
, Wand: "1"
, Stahl: "2"
, Tod: "3"
, Fluss: "4"
, Podium: "5"
};
// Der entsprechende Stilname jedes Geländes
var arraycss = ['leer', 'wand', 'stahl', 'tod', 'river', 'podium'];
// Level -Karte
/*Ebene*/
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';
// Speicherpegelkarten 0, 1, 2, 3 ... sind 1-n ...
var top_maplevel = [str];
2.3 Zeichnen Sie eine Karte
Nach Abschluss der Vorbereitungsarbeiten werden wir damit beginnen, die Gerichte zu servieren und eine Karte zu zeichnen. Oben erwähnt unsere Karte ist 13 * 13 Tabelle. Daher fügen wir dem Spielladeobjekt zwei Attribute hinzu und fügen die Anfangskartenmethode hinzu.
Frame.js:
Die Codekopie lautet wie folgt:
// Das Spiel lädt das Objekt des Kernobjekts des gesamten Spiels
Gameloader = function () {
this._mapcontainer = document.getElementById ("divmap"); // das Div, das die Spielkarte speichert
this._selftank = null; // Spielerpanzer
this._gamelistener = null; // die Hauptschleifen -Timer -ID des Spiels
/*v2.0 Neu hinzugefügte Eigenschaften*/
this._level = 1;
this._rowcount = 13;
this._colcount = 13;
this._battlefield = []; // Das zweidimensionale Array von Kartenobjekten speichern
}
// Methode zum Laden der Karte
Laden: function () {
// Initialisieren Sie die Karte entsprechend der Ebene
var map = top_maplevel [this._level - 1] .split (",");
var mapborder = UtilityClass.crereee ("div", "", "mapborder", this._mapContainer);
// Reisen Sie durch jede Zelle in der Kartentabelle durch jede Zelle
für (var i = 0; i <this._rowcount; i ++) {
// Erstellen Sie eine DIV, und die Karte jeder Zeile wird in diesem Div gespeichert
var divrow = UtilityClass.crereee ("div", "", "", mapborder);
// Erstellen Sie ein anderes Array in einem eindimensionalen Array
this._battlefield [i] = [];
für (var j = 0; j <this._colcount; j ++) {
// Kartendaten lesen, Standardwert: 0
var v = (map [i] && map [i] .charat (j)) || 0;
// Fügen Sie das Span -Element ein, ein Spannelement ist eine Karteneinheit
var spancol = UtilityClass.crereee ("span", "", "", divrow);
spancol.className = arraycss [v];
// MAP-Objekte in ein zweidimensionales Array geben, um die Kollisionserkennung zu vereinfachen.
var to = null;
Schalter (v) {
CASE ENUMMAPCELLTYPE.EMPTY:
to = new leereb ();
brechen;
CASE ENUMMAPCELLTYPE.WALL:
to = new Wallb ();
brechen;
case enummapcellType.steel:
to = new Steelb ();
brechen;
CASE ENUMMAPCELLTYPE.TOD:
to = new Todb ();
brechen;
CASE ENUMMAPCELLTYPE.RIVER:
to = New Riverb ();
brechen;
CASE ENUMMAPCELLTYPE.PODIUM:
to = New Podiumb ();
brechen;
Standard:
Neuen Fehler werfen ("Kartennummern überqueren die Grenze!");
brechen;
}
to.ui = spancol;
// Das j hier ist x, da die interne Schleife horizontal und x die horizontale Achse ist.
to.xposition = j;
to.yposition = i;
// Speichern Sie das aktuelle Kartenobjekt in einem zweidimensionalen Array-OBJ als Hindernisobjekt und Besatzer als Besatzungsobjekt
this._battlefield [i] [j] = {obj: to, exclemer: null, lock: false};
} // Ende für
} // Ende für
// Globale Fensterglobalvariablen eingeben
window.battlefield = this._battlefield;
}
OK, unsere Karte ist hier erledigt. Die Kommentare hier sind bereits sehr detailliert. Wenn Sie immer noch nicht verstehen, laden Sie den Quellcode herunter und debuggen Sie ihn selbst. Es wird leicht zu verstehen sein.
Hier laden wir hauptsächlich Kartendaten und fügen jede Karte als Span -Element in das HTML -Dokument ein. Und speichern Sie die Objekte der Karte in einem zweidimensionalen Array. In Zukunft können wir bei der Kollisionserkennung das entsprechende Array -Objekt direkt über die Koordinaten des Objekts abrufen, was sehr bequem ist.
Angehängter Quellcode: http://xiazai.vevb.com/201411/yuanma/jstankedazhan(vevb.com).rar