Kommentar: Im vorherigen Artikel habe ich vorgestellt, wie HTML5 zur Implementierung eines mobilen kleinen Tanks verwendet wird. In diesem Artikel werde ich Sie in den Panzerkrieg führen. Freunde, die HTML5 mögen, sollten es nicht verpassen.
<pre> tank.html </pre> <pre> <! docType html>
<html>
<kopf>
<meta charset = "utf-8"/>
</head>
<Body Onkeydown = "getCommand ();">
<h1> HMTL5-Klassiker Panzerkrieg </h1>
<!-das Schlachtfeld des Panzerkrieges->
<Canvas> </canvas>
<Pan> Daten </span>
<!-Tankgames.js in dieser Seite vorstellen->
<script type = "text/javaScript" src = "tank.js"> </script>
<script type = "text/javaScript">
// Holen Sie sich die Leinwand
var canvas1 = document.getElementById ("Tankmap");
// Erhalten Sie den Zeichnungskontext (Sie können ihn als Pinsel verstehen)
var cxt = canvas1.getContext ("2d");
// mein Panzerheld
//Richtung
var hero = neuer Held (140.140,0, Herokolor);
// Definieren Sie eine leere Kugel
var Herobullet = null;
// Definieren Sie den Tank des Feindes (wie viele feindliche Panzer gibt es? Gibt es eine einzige Definition oder in ein Array?)
var EnemyTanks = new Array ();
// Zuerst sterbe und dann lebe, setze 3 und dann werden wir Variablen für die Anzahl der feindlichen Panzer machen.
// 0-> obere, 1-> rechts, 2-> unten 3-> links
für (var i = 0; i <3; i ++) {
// Erstellen Sie einen Tank
var EnemyTank = new EnemyTank ((i+1)*50,0,2, Enmeycolor);
// Steck diesen Tank in ein Array
fegetanks [i] = fegetank;
}
// Rufen Sie es einmal an
FlashTankMap ();
// eine spezielle Funktion schreiben, um unsere Kampfzone regelmäßig zu aktualisieren und Elemente einzubeziehen, die in der Kampfzone erscheinen (eigene Tanks, feindliche Panzer, Kugeln, Bomben,
//obstructions...)-> Game-Gedanken
Funktion FlashTankMap () {
// die Leinwand reinigen
CXT.ClearRect (0,0,400.300);
// mein Tank
Drawtank (Held);
// Zeichne deine eigene Kugel
// Wie erscheint der Bullet -Flugeffekt? [Antwort: Zunächst sollten wir die Kampfzone jedes Mal aktualisieren (setInterval). Wenn sich die Kugelkoordinaten beim Erfrischen ändern, geben die Kugelkoordinaten den Menschen das Gefühl, dass die Kugel fliegt!]
Drawherobullet ();
// feindlicher Panzer
// alle feindlichen Panzer zeichne
für (var i = 0; i <3; i ++) {
Drawtank (fegeTanks [i]);
}
}
// Dies ist eine Funktion, die Benutzertastenanschläge akzeptiert
Funktion getCommand () {
// Woher weiß ich, welche Taste der Spieler drückt?
// Anweisungen: Ereignisobjekt -------> Ereignishandlerfunktion ()
var code = event.keycode; // ASCII-Code für die entsprechenden Buchstaben-> Sehen wir uns die Code-Tabelle an
Switch (Code) {
Fall 87: // on
Hero.MoveUp ();
brechen;
Fall 68:
Hero.Moveright ();
brechen;
Fall 83:
Hero.Movedown ();
brechen;
Fall 65:
Hero.Moveleft ();
brechen;
Fall 74:
Hero.Shotenemy ();
brechen;
}
// diese Funktion auslösen FlashTankMap ();
FlashTankMap ();
// Alle feindlichen Panzer neu streichen. Sie können hier Code schreiben (denken Sie an, lassen Sie uns nur eine Funktion haben, die unsere Leinwand regelmäßig auffrischen, [Kriegsgebiet]).
}
// Die Kampfzone alle 100 Millisekunden aktualisieren
window.setInterval ("FlashTankMap ()", 100);
</script>
</body>
</html> </pre>
Tank.js
<pre> </pre>
<pre> <pre> // Für die programmierende Bequemlichkeit definieren wir zwei Farbarrays
var herokolor = new Array ("#ba9658", "#fef26e");
var enmeycolor = new Array ("#00A2B5", "#00FEFE");
// Die Erweiterung anderer feindlicher Panzer hier ist ziemlich gut.
// Kugeln
Funktionsbullet (x, y, direkt, Geschwindigkeit) {
this.x = x;
this.y = y;
this.direct = Direct;
this.speed = Geschwindigkeit;
this.timer = null;
this.islive = true;
this.run = function run () {
// Wenn die Koordinaten dieser Kugel angezeigt werden, bestimmen wir zunächst, ob die Kugel die Grenze erreicht hat
if (this.x <= 0 || this.x> = 400 || this.y <= 0 || this.y> = 300) {
// Die Kugeln müssen aufhören.
window.clearinterval (this.timer);
// Die Kugel starb
this.islive = false;
}anders{
// Dies kann verwendet werden, um die Koordinaten zu ändern
Switch (this.direct) {
Fall 0:
this.y- = this.speed;
brechen;
Fall 1:
this.x+= this.speed;
brechen;
Fall 2:
this.y+= this.speed;
brechen;
Fall 3:
this.x- = this.speed;
brechen;
}
}
document.getElementById ("aa"). InnerText = "Bullet x ="+this.x+"Bullet y ="+this.y;
}
}
// Dies ist eine Panzerklasse
Funktionstank (x, y, direkt, Farbe) {
this.x = x;
this.y = y;
this.speed = 1;
this.direct = Direct;
// Ein Tank benötigt zwei Farben.
this.color = color;
// nach oben bewegen
this.movEUp = function () {
this.y- = this.speed;
this.direct = 0;
}
//Nach rechts
this.moveright = function () {
this.x+= this.speed;
this.direct = 1;
}
// nach unten bewege
this.Movedown = function () {
this.y+= this.speed;
this.direct = 2;
}
//Links
this.Moveleft = function () {
this.x- = this.speed;
this.direct = 3;
}
}
// eine Heldenklasse definieren
// x repräsentiert die horizontale Koordinate des Tanks, y repräsentiert die vertikale Koordinate, direkte Richtung
Funktionsheld (x, y, direkt, Farbe) {
// Der Zweck der folgenden zwei Sätze besteht darin, die Wirkung der Vererbung durch die Identität von Objekten zu erreichen
this.tank = Tank;
diese.tank (x, y, direkt, Farbe);
// Fügen Sie eine Funktion hinzu, um feindliche Panzer zu schießen.
this.shotenemy = function () {
// Erstellen Sie eine Kugel, die Position der Kugel sollte mit Helden und der Richtung des Helden verwandt sein ... !!!
//this.x ist die horizontale Koordinate des aktuellen Helden. Hier werden wir einfach verarbeiten (verfeinern)
Switch (this.direct) {
Fall 0:
Herobullet = New Bullet (this.x+9, this.y, this.direct, 1);
brechen;
Fall 1:
Herobullet = New Bullet (this.x+30, this.y+9, this.direct, 1);
brechen;
Fall 2:
Herobullet = New Bullet (this.x+9, this.y+30, this.direct, 1);
brechen;
Fall 3: // rechts
Herobullet = New Bullet (this.x, this.y+9, this.direct, 1);
brechen;
}
// Wenn Sie unseren Bullet -Lauf rufen, ist 50 eine Schlussfolgerung, die durch die mehrfachen Tests des Lehrers erhalten wird.
var timer = window.setInterval ("Herobullet.run ()", 50);
// diesen Timer dieser Kugel zuweisen (JS -Objekt ist Referenzpass!)
Herobullet.Timer = Timer;
}
}
// Definieren Sie eine feindliche Klasse
Funktion EnemyTank (x, y, direkt, Farbe) {
// Erben des Panzers durch Imitieren eines Objekts
this.tank = Tank;
diese.tank (x, y, direkt, Farbe);
}
// Zeichne deine eigene Kugel und sage noch etwas, du kannst die Funktion auch in die Heldenklasse einschränken
Funktion drawherobullet () {
// Wir haben hier einen Satz hinzugefügt, aber Sie müssen wissen, dass Sie hier hinzufügen, dass Sie sich des gesamten Programms sicherstellen müssen
if (Herobullet! = NULL && Herobullet.islive) {
cxt.fillStyle = "#fef26e";
Cxt.FillRect (Herobullet.x, Herobullet.y, 2,2);
}
}
// den Tank zeichne
Funktionsabzugs (Tank) {
// Betrachten Sie die Richtung
Switch (Tank.Direct) {
Fall 0: // on
Fall 2: // unten
// Zeichnen Sie Ihren eigenen Tank und verwenden Sie die vorherige Zeichentechnik
// die Farbe einstellen
Cxt.FillStyle = Tank.Color [0];
// Lehrer Han verwendet zuerst den Tod ---> und dann lebt (es ist am besten für Anfänger)
// Zeichne das Rechteck zuerst links
Cxt.FillRect (Tank.x, Tank.Y, 5,30);
// Zeichnen Sie das Rechteck rechts (Bitte denken Sie zu diesem Zeitpunkt darüber nach -> haben Sie unbedingt einen Referenzpunkt).
Cxt.FillRect (Tank.x+15, Tank.Y, 5,30);
// das mittlere Rechteck zeichne
Cxt.FillRect (Tank.x+6, Tank.Y+5,8,20);
// die Tankabdeckung zeichne
Cxt.FillStyle = Tank.Color [1];
cxt.arc (Tank.x+10, Tank.Y+15,4,0,360, true);
cxt.fill ();
// Zeichne die Kanone (gerade Linie)
cxt.strokestyle = Tank.Color [1];
// Setzen Sie die Breite der Linie
CXT.LineWidth = 1,5;
cxt.beginPath ();
cxt.moveto (Tank.x+10, Tank.Y+15);
if (Tank.direct == 0) {
cxt.lineto (Tank.x+10, Tank.Y);
} else if (tank.direct == 2) {
Cxt.lineto (Tank.x+10, Tank.Y+30);
}
CXT.CLOSEPATH ();
cxt.stroke ();
brechen;
Fall 1: // rechts und links
Fall 3:
// Zeichnen Sie Ihren eigenen Tank und verwenden Sie die vorherige Zeichentechnik
// die Farbe einstellen
Cxt.FillStyle = Tank.Color [0];
// Lehrer Han verwendet zuerst den Tod ---> und dann lebt (es ist am besten für Anfänger)
// Zeichne das Rechteck zuerst links
Cxt.FillRect (Tank.x, Tank.Y, 30,5);
// Zeichnen Sie das Rechteck rechts (Bitte denken Sie zu diesem Zeitpunkt darüber nach -> haben Sie unbedingt einen Referenzpunkt).
Cxt.FillRect (Tank.x, Tank.Y+15,30,5);
// das mittlere Rechteck zeichne
Cxt.FillRect (Tank.x+5, Tank.Y+6,20,8);
// die Tankabdeckung zeichne
Cxt.FillStyle = Tank.Color [1];
cxt.arc (Tank.x+15, Tank.y+10,4,0,360, true);
cxt.fill ();
// Zeichne die Kanone (gerade Linie)
cxt.strokestyle = Tank.Color [1];
// Setzen Sie die Breite der Linie
CXT.LineWidth = 1,5;
cxt.beginPath ();
cxt.moveto (Tank.x+15, Tank.Y+10);
//Nach rechts
if (Tank.direct == 1) {
cxt.lineto (Tank.x+30, Tank.Y+10);
} else if (tank.direct == 3) {// links
Cxt.lineto (Tank.x, Tank.Y+10);
}
CXT.CLOSEPATH ();
cxt.stroke ();
brechen;
}
}
</pre>
<pre> </pre>
</pre>