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

PS: Diese Panzerschlacht wurde von mir neu geschrieben, nachdem ich einen Teil des Quellcodes online heruntergeladen habe. An sich gibt es nichts zu Schwieriges. Dieser Fall verwendet js objektorientiert besser und kann als Einführungs-Tutorial für js objektorientiert verwendet werden.

1. Erstellen Sie grundlegende Objekte, um einfache Bewegungen von Panzern zu realisieren

1.1 Wie zeichne ich eine Leinwand in die Karte?

Unter Berücksichtigung des Problems der Browserkompatibilität verwenden wir die Methode des Betriebsdoms, um das Zeichnen und Aktualisieren von Spielobjekten zu realisieren. Wie speichern wir unsere Karte? Wir sollten die Karte in einem zweidimensionalen Array speichern. In js gibt es kein zweidimensionales Array, aber dies kann durch Speichern des Arrays in einem eindimensionalen Array erreicht werden.

1.2 Code-Implementierung

Wir entwerfen die Leinwand als zweidimensionales Array von 13 * 13. Die entsprechende Länge und Breite jedes Elements in der Karte beträgt 40 Pixel. Die gesamte Karte kann als eine Zelle mit einer Größe von 40 Pixel x 40 Pixel betrachtet werden , dann beträgt die Größe unserer gesamten Leinwand 520px * 520px;
Bevor ich den Code lade, möchte ich Ihnen ein Objektbeziehungsdiagramm geben:

1.2.1 Objekte der obersten Ebene erstellen

HTML-Code:

Code kopieren Der Code lautet wie folgt:

<script><br>            window.onload = function () {<br>                                                                                   // Rufen Sie das Spielladeobjekt <br> auf             var loader = new GameLoader();<br> Loader.Begin();<br>          }<br> </script>

TankObject.js-Datei:

Code kopieren Der Code lautet wie folgt:

// Objekt der obersten Ebene
TankObject = function () {
This.XPosition = 0; // Die X-Position des Objekts in der Karte (13*13)
This.YPosition = 0;
This.UI = null; // dom element
}
//Statische UI-Methode ändern
TankObject.prototype.UpdateUI = function (battlFiled) { }
//Stellen Sie die Position ein, die Parameter lauten wie folgt: 1*40,6*40
TankObject.prototype.SetPosition = function (leftPosition, topPosition) {
// Math.round am Kartenstandort
This.XPosition = Math.round(leftPosition / 40);
This.YPosition = Math.round(topPosition / 40);
//Legen Sie die Position im Formular fest
If (this.UI != null && this.UI.style != null) {
This.UI.style.left = leftPosition "px";
This.UI.style.top = topPosition "px";
}
}



Hier verwenden wir X- und Y-Koordinaten, um den Standort des Objekts auf der Karte darzustellen. Später werden wir jedes Objekt in der Karte in ein zweidimensionales Array einfügen. Zu diesem Zeitpunkt können wir das entsprechende Objekt über die X- und Y-Koordinaten erhalten.
Verwenden Sie dann links und oben in CSS, um die Position unseres Objekts im Formular zu steuern. (bewegliche Gegenstände: Panzer, Kugeln)

1.2.2 Öffentliche Objekte erstellen

Wir müssen außerdem ein öffentliches Objekt erstellen, um einige unserer häufig verwendeten Methoden zu schreiben.

Common.js:

Code kopieren Der Code lautet wie folgt:

//Vier Richtungen der Panzerbewegung
var EnumDirection = {
Oben: „0“,
Rechts: „1“,
Unten: „2“,
Links: „3“
};
//Allgemeines Methodenobjekt
var UtilityClass = {
//Dom-Element in parentNode erstellen, Sie können ID, Klassenname
angeben CreateE: Funktion (Typ, ID, Klassenname, ParentNode) {
        var J = document.createElement(type);
If (id) { J.id = id };
If (className) { J.className = className };
          return parentNode.appendChild(J);
}, // Element entfernen
​ RemoveE: Funktion (obj, parentNode) {
         parentNode.removeChild(obj);
},
GetFunctionName: Funktion (Kontext, ArgumentCallee) {
for (var i im Kontext) {
If (context[i] == argumentCallee) { return i };
}
         return "";
}, // Binden Sie das Ereignis und geben Sie die Funktion func zurück. Dies ist das eingehende Objekt
BindFunction: Funktion (obj,func) {
         Return-Funktion () {
                 func.apply(obj, arguments);
        };
}
};

1.2.3 Bewegte Objekte erstellen

Mover.js

Code kopieren Der Code lautet wie folgt:

//Objekt verschieben, geerbt vom Objekt der obersten Ebene
Mover = Funktion () {
This.Direction = EnumDirection.Up;
This.Speed ​​​​= 1;
}
Mover.prototype = new TankObject();
Mover.prototype.Move = function () {
If (this.lock) {
             return;/* Deaktiviert oder noch in Bearbeitung, der Vorgang ist ungültig */
}
//Stellen Sie das Hintergrundbild des Tanks entsprechend der Richtung ein
This.UI.style.backgroundPosition = "0 -" this.Direction * 40 "px";
// Wenn die Richtung oben und unten ist, ist vp oben; wenn die Richtung oben und links ist, ist val -1
var vp = ["top", "left"][((this.Direction == EnumDirection.Up) || (this.Direction == EnumDirection.Down)) 0 : 1];
var val = ((this.Direction == EnumDirection.Up) || (this.Direction == EnumDirection.Left)) ? -1 : 1;
This.lock = true;/* Lock */
//Speichern Sie das aktuelle Objekt unter This
var This = this;
//Startposition der Objektbewegung aufzeichnen
var startmoveP = parseInt(This.UI.style[vp]);
var xp = This.XPosition, yp = This.YPosition;
var subMove = setInterval(function () {
                           // Beginnen Sie mit der Bewegung, jedes Mal 5 Pixel
This.UI.style[vp] = parseInt(This.UI.style[vp]) 5 * val "px";
                       // Verschieben Sie jeweils eine Zelle um 40 Pixel
If (Math.abs((parseInt(This.UI.style[vp]) - startmoveP)) >= 40) {
                 clearInterval(subMove);
This.lock = false;/* Entsperren, erneutes Betreten zulassen */
// Notieren Sie die Position des Objekts in der Tabelle, nachdem Sie
verschoben haben This.XPosition = Math.round(This.UI.offsetLeft / 40);
This.YPosition = Math.round(This.UI.offsetTop / 40);
         }
}, 80 - this.Speed ​​​​* 10);
}

Das Move-Objekt hier erbt von unserem Objekt der obersten Ebene und stellt hier das Objekt dar, das die Move-Methode aufruft.
Die Funktion „Objekt verschieben“ bewegt sich entsprechend der Richtung und Geschwindigkeit des Objekts. Jedes Mal, wenn es sich um 5 Pixel bewegt, bewegt es sich insgesamt um 40 Pixel um eine Zelle. Dieses Objekt wird später erweitert und um Funktionen wie die Kollisionserkennung erweitert.

1.2.4 Tankobjekt erstellen

Tank.js-Datei:

Code kopieren Der Code lautet wie folgt:

//Tankobjekt, geerbt von Mover
Tank=function(){}
Tank.prototype = new Mover();

//Erstelle einen Spielertank, geerbt vom Tankobjekt
SelfTank = Funktion () {
This.UI = UtilityClass.CreateE("div", "", "itank", document.getElementById("divMap"));
This.MovingState = false;
This.Speed ​​​​= 4;
}
SelfTank.prototype = new Tank();
//Stellen Sie die Position des Tanks ein
SelfTank.prototype.UpdateUI = function () {
This.UI.className = "itank";
// Objektmethode der obersten Ebene, Position des Tanks festlegen
This.SetPosition(this.XPosition * 40, this.YPosition * 40);
}

Jetzt wurden nur Spielerpanzer erstellt, und wir werden ihnen später feindliche Panzer hinzufügen.

1.2.5 Spielladeobjekt (Kern) erstellen

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
}
GameLoader.prototype = {
Beginn: Funktion () {
// Spielerpanzer initialisieren
        var selfT = new SelfTank();
            selfT.XPosition = 4;
            selfT.YPosition = 12;
            selfT.UpdateUI();
This._selfTank = selfT;
                           // Schlüsselereignis hinzufügen
          var wrapper = UtilityClass.BindFunction(this, this.OnKeyDown);
             window.onkeydown = document.body.onkeydown = warpper;
            warpper = UtilityClass.BindFunction(this, this.OnKeyUp);
            window.onkeyup = document.body.onkeyup = warpper;
                    // Hauptschleife des Spiels
           warpper = UtilityClass.BindFunction(this, this.Run);
/*Long-Timer-Überwachungssteuertaste*/
This._gameListener = setInterval(warpper, 20);
}
// Drücken Sie die Tastatur und der Panzer des Spielers beginnt sich zu bewegen
, OnKeyDown: Funktion (e) {
switch ((window.event || e).keyCode) {
Fall 37:
This._selfTank.Direction = EnumDirection.Left;
This._selfTank.MovingState = true;
brechen; Fall 38:
This._selfTank.Direction = EnumDirection.Up;
This._selfTank.MovingState = true;
brechen; Fall 39:
This._selfTank.Direction = EnumDirection.Right;
This._selfTank.MovingState = true;
brechen; Fall 40:
This._selfTank.Direction = EnumDirection.Down;
This._selfTank.MovingState = true;
brechen;          }
}
//Drücken Sie die Taste, um die Bewegung zu stoppen
, OnKeyUp: Funktion (e) {
switch ((window.event || e).keyCode) {
Fall 37:
Fall 38:
Fall 39:
Fall 40:
This._selfTank.MovingState = false;
                  Pause;
         }
}
/*Funktion zum Ausführen der Hauptschleife des Spiels, das Herzstück und der Mittelpunkt des Spiels*/
, Führen Sie aus: function () {
If (this._selfTank.MovingState) {
This._selfTank.Move();
         }
}
};

Der Objektcode zum Laden des Spiels scheint viel zu sein, aber er bewirkt tatsächlich zwei Dinge:
​ ​ 1. Erstellen Sie ein Spielerpanzerobjekt.
​ ​ 2. Fügen Sie ein Tastenabhörereignis hinzu. Wenn der Spieler die Bewegungstaste drückt, wird die Tank-Move-Methode aufgerufen, um den Tank zu bewegen.

Zusammenfassung: An diesem Punkt kann sich unser Panzer durch Drücken von Knöpfen frei bewegen. Als nächstes müssen wir die Karten- und Kollisionserkennung verbessern.