PS: Dieser Panzerschlacht war nach einem Quellcode online und offline ein Umschreiben. Es gibt nichts zu schwierig an sich. In diesem Fall wird JS-Objektorientierung verwendet, das als einführendes Tutorial für JS-Objektoriented verwendet werden kann.
1. Erstellen Sie grundlegende Objekte, um die einfache Bewegung von Panzern zu erkennen
1.1 Wie zeichne ich eine Leinwand in einer Karte ?
In Anbetracht des Problems der Browserkompatibilität verwenden wir das DOM, um Spielobjekte zu zeichnen und zu aktualisieren. Wie speichern wir unsere Karten? Wir sollten die Karte als zweidimensionales Array speichern. Es gibt kein zweidimensionales Array in JS, aber es kann erreicht werden, indem das Array in einem eindimensionalen Array gespeichert wird.
1.2 Code -Implementierung
Wir entwerfen die Leinwand als zweidimensionales Array von 13 * 13. Jedes Element hat eine entsprechende Länge und Breite in der Karte. Wir können die gesamte Karte als eine Tabelle betrachten, die aus Zellen mit 40px * 40px -Größe besteht, sodass die Größe unserer gesamten Leinwand 520px * 520px beträgt.
Bevor ich den Code eingehe, werde ich Ihnen ein Objektbeziehungsdiagramm geben:
1.2.1 Erstellen eines Objekts auf oberster Ebene
HTML -Code:
Die Codekopie lautet wie folgt:
<! DocType html public "-// w3c // dtd html 4.0 transitional // en">
<html>
<kopf>
<title> Panzerkrieg </title>
<link rel = stylesheet href = "css /main.css" />
<script src = "js/Common.js"> </script>
<script src = "js/tankObject.js"> </script>
<script src = "js/mover.js"> </script>
<script src = "js/tank.js"> </script>
<script src = "js/frame.js"> </script>
<Script>
window.onload = function () {
// Rufen Sie das Spiel für das Ladungsobjekt an
var loader = new gameloader ();
lader.begin ();
}
</script>
</head>
<body>
<!-Kartenbehälter->
<div id = "divmap">
</div>
<div id = "debuginfo">
</div>
</body>
</html>
TankObject.js Datei:
Die Codekopie lautet wie folgt:
// Objekt mit Top-Level
TankObject = function () {
this.xposition = 0; // die Position des Objekts in x in der Karte (13*13)
this.yposition = 0;
this.ui = null; // DOM -Element
}
// UI statische Methode ändern
TankObject.Prototype.Updateui = Funktion (battlfiled) {}
// Setzen Sie die Position, die Parameter sind wie folgt: 1*40, 6*40
TankObject.Prototyp.SetPosition = Funktion (Linksposition, Belastung) {
// Runde im Kartenstandort math.round
this.xposition = math.round (links / 40);
this.yposition = math.round (Topposition / 40);
// Stellen Sie die Position auf dem Formular ein
if (this.ui! = null && this.ui.style! = null) {
this.ui.Style.left = linksposition + "px";
this.ui.style.top = Topposition + "px";
}
}
Hier verwenden wir X- und Y -Koordinaten, um die Position des Objekts auf der Karte darzustellen. Später setzen wir jedes Objekt in die Karte in ein zweidimensionales Array und können das entsprechende Objekt über die X- und Y-Koordinaten erhalten.
Verwenden Sie dann links und oben in CSS, um die Position unseres Objekts in der Form zu steuern. (Typbare Objekte: Tanks, Kugeln)
1.2.2 Erstellen eines öffentlichen Objekts
Wir müssen auch ein öffentliches Objekt erstellen, um einige unserer häufig verwendeten Methoden zu schreiben.
Common.js:
Die Codekopie lautet wie folgt:
// vier Richtungen der Panzerbewegung
var enumdirection = {
Up: "0",
Richtig: "1",
Down: "2",
Links: "3"
};
// Allgemeines Methodenobjekt
var UtilityClass = {
// DOM -Element in ParentNode erstellen, ID und 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);
}, // Elemente entfernen
REMETEE: Funktion (OBJ, ParentNode) {
parentNode.removechild (OBJ);
},
GetFunctionName: Funktion (Kontext, ArgumentCallee) {
für (var i im Kontext) {
if (context [i] == argumentCallee) {return i};
}
zurückkehren "";
}, // Binden Sie das Ereignis, geben Sie die Func -Methode zurück, dies ist die bestandene OBJ
Bindfunktion: Funktion (OBJ, Func) {
return function () {
func.apply (obj, argumente);
};
}
};
1.2.3 Erstellen eines sich bewegenden Objekts
Mover.js
Die Codekopie lautet wie folgt:
// Verschieben Sie das Objekt, erben Sie vom obersten Objekt
Mover = function () {
this.direction = enumdirection.up;
this.speed = 1;
}
Mover.Prototype = new TankObject ();
Mover.Prototype.move = function () {
if (this.lock) {
Rückgabe;/* deaktiviert oder noch in Arbeit ist, ist die Operation ungültig*/
}
// Stellen Sie das Hintergrundbild des Tanks gemäß der Richtung ein
this.ui.style.backgroundPosition = "0 -" + this.Direction * 40 + "px";
// Wenn die Richtung auf und ab ist, ist VP oben; Wenn die Richtung auf und links ist, ist Val -1 -1
var vp = ["top", "links"] [((this.direction == "-Erumdirection.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 dazu
var this = this;
// Startposition der Objektbewegung aufnehmen
var startMovep = parseInt (this.ui.style [vp]);
var xp = this.xposition, yp = this.yposition;
var submove = setInterval (function () {
// Bewegen Sie sich jedes Mal 5px
This.ui.style [vp] = parseInt (this.ui.style [vp]) + 5 * val + "px";
// 40px pro Zelle
if (math.abs ((parseInt (this.ui.style [vp]) - startMovep))> = 40) {
ClearInterval (Untermove);
This.lock = false;/* entsperren und ermöglicht das erneutes Schritt*/
// Notieren Sie die Position des Objekts in der Tabelle, nachdem es bewegt wurde
This.xposition = math.round (this.ui.OffsetLeft / 40);
This.yposition = math.round (this.ui.offsettop / 40);
}
}, 80 - this.speed* 10);
}
Das sich bewegende Objekt hier erbt aus unserem obersten Objekt, und dies repräsentiert das Objekt, das die Verschiebungsmethode aufruft.
Die Funktion des Bewegungsobjekts bewegt sich entsprechend der Richtung und Geschwindigkeit des Objekts. Bewegen Sie jedes Mal, wenn Sie 5px bewegen, insgesamt 40px eine Zelle. Das Objekt wird später erweitert und die Kollisionserkennung und andere Funktionen werden hinzugefügt.
1.2.4 Erstellen eines Panzerobjekts
Tank.js Datei:
Die Codekopie lautet wie folgt:
// Das Tankobjekt erbt von Mover
Tank = function () {}
Tank.Prototyp = new Mover ();
// Erstellen Sie einen Player -Tank, erben Sie von einem Tankobjekt
Selftank = function () {
this.ui = UtilityClass.crereee ("Div", "", "Itank", document.getElementById ("divmap");
this.movingState = false;
this.speed = 4;
}
Selftank.prototype = neuer Tank ();
// Stellen Sie die Position des Tanks ein
Selftank.prototype.updateui = function () {
this.ui.className = "itank";
// TOP -Objektmethode setzen die Position des Tanks
this.setPosition (this.xposition * 40, this.yposition * 40);
}
Jetzt wurden nur noch Spieler Tanks erstellt, und wir werden ihnen später feindliche Panzer hinzufügen.
1.2.5 Erstellen Sie ein Spiel -Ladeobjekt (Kern)
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
}
Gameloader.prototype = {
Beginnen Sie: function () {
// Initialisieren Sie den Spielertank
var selft = new selftank ();
selft.xposition = 4;
selft.yposition = 12;
selft.updateui ();
this._elftank = selfT;
// Schlüsselereignis hinzufügen
var warpper = UtilityClass.bindfunction (this, this.onkeydown);
window.onkeydown = document.body.onkeydown = WARPPER;
Warpper = UtilityClass.bindfunction (this, this.onkeyUp);
window.onkeyUp = document.body.onkeyUp = WARPPER;
// die Hauptschleife des Spiels
Warpper = UtilityClass.bindfunction (this, this.run);
/*Long Timer -Überwachungssteuerungsschlüssel*//
this._gamelistener = setInterval (Warpper, 20);
}
// Drücken Sie den Player -Tank auf der Tastatur, um sich zu bewegen
, Onkeydown: Funktion (e) {
Switch ((window.event || e) .KeyCode) {
Fall 37:
this._selfTank.Direction = EnumDirection.Left;
this._selftank.movingState = true;
brechen; //links
Fall 38:
this._selftank.direction = enumDirection.Up;
this._selftank.movingState = true;
brechen; //An
Fall 39:
this._selftank.direction = EnumDirection.Right;
this._selftank.movingState = true;
brechen; //Rechts
Fall 40:
this._selftank.direction = enumdirection.down;
this._selftank.movingState = true;
brechen; //Nächste
}
}
// Die Tasten tauchen auf und hören auf, sich zu bewegen
, OnKeyUp: Funktion (e) {
Switch ((window.event || e) .KeyCode) {
Fall 37:
Fall 38:
Fall 39:
Fall 40:
this._selftank.movingState = false;
brechen;
}
}
/*Die Hauptschleifelauffunktion des Spiels, das Herz des Spiels, der Hub*/
, Run: function () {
if (this._selftank.movingState) {
this._selftank.move ();
}
}
};
Das Lade -Objektcode des Spiels sieht viel aus, aber tatsächlich macht er nur zwei Dinge:
1. Erstellen Sie ein Player -Panzerobjekt.
2. Fügen Sie ein wichtiges Überwachungsereignis hinzu. Wenn der Spieler die mobile Taste drückt, rufen Sie die Tank -Move -Methode an, um den Tank zu verschieben.
Zusammenfassung: Zu diesem Zeitpunkt kann sich unser Tank durch Drücken der Tasten frei bewegen. Nächster Schritt müssen wir die Erkennung von Karte und Kollision verbessern.