So erstellen Sie Tanks in Ihr HTML5 Spiel

Diese Art von Spiel gibt Ihnen eine Art Startmechanismus für die HTML5-Spiel mit semi-realistische Physik und hat Sie starten Geschosse (Avianer mit Wut Fragen oder auf andere Weise) an irgendeiner Art von Ziel.

Tanks, Türmchen und Muscheln

Die interessanteste Sache über einen Tank-Spiel ist die Beziehung zwischen dem Tank, dessen Türmchen, und die Kugeln sie abfeuert.

Der Tank ist ein Sprite, aber der Tank Bild enthält kein Turm. Der Revolverkopf ist ein separates Sprite mit dem Tank verbunden werden soll und auf eigene gedreht. Wenn der Spieler den Tank bewegt, bewegt sich der Revolverkopf mit. Wenn der Benutzer den Revolver dreht, dreht sich der Revolver, aber der Tank nicht.

Die Kugel ist ein drittes Sprite, die erscheint, wenn der Benutzer den Behälter abfeuert. Die Ausgangsposition der Kugel wird durch die Tankposition bestimmt, wobei die Anfangsbewegungswinkel des Kugel wird durch den Revolver-Winkel bestimmt.

Hier ist der Code für den Tank:

 Funktion UserTank () {tTank = new Sprite (Spiel "greenTank.png", 50, 25) -tTank.setSpeed ​​(0) -tTank.setPosition (100, 550) -tTank.turret = new Sprite (Spiel "Revolver .png ", 50, 25) -tTank.bullet = new bullet (tTank) -tTank.checkKeys = function () {if (keysDown [K_A]) {this.changeXby (-2) -} if (keysDown [K_D] ) {this.changeXby (2) -} // immer Revolver mit me.this.turret.setPosition (this.x, this.y) bewegen - // turretif drehen (keysDown [K_W]) {this.turret.changeImgAngleBy ( -5) -wenn (this.turret.getImgAngle () lt; 0) {this.turret.setImgAngle (0) -} // end if} if (keysDown [K_S]) {this.turret.changeImgAngleBy (5) -wenn (this.turret.getImgAngle ()> 90) {dies. turret.setImgAngle (90) -}} if (keysDown[K_SPACE]){this.bullet.fire()-}this.turret.update()-this.bullet.checkGravity()-this.bullet.update()-} // End checkKeysreturn tTank-} // end Tank

Der Tank-Design ist leicht kompliziert durch eine abhängige Revolver Sprite und mit einer Kugel Sprite. Hier ist, wie diese Mischmasch von gepanzerten Sprite Güte zu bauen:

1. Bauen Sie den Tank Sprite zuerst.

   Wie bei den meisten Beispielen in simpleGame, zunächst eine temporäre Sprite für den Behälterbau (genannt tTank).

2. Bauen Sie ein Türmchen Sprite.

   Der Turm ist ein zweites Sprite. Es ist eine Eigenschaft des Tanks sowie ein Sprite in seinem eigenen Recht. Der Turm ist ziemlich einfach, so ist es ein Lager Sprite sein kann. Es muss nicht eine vollständige Unterklasse sein.

3. Erstellen Sie eine Kugel Sprite.

   Jeder Tank hat ein Sprite und eine Kugel. Die Kugel wird einige bestimmte Verhaltensweisen benötigen, so dass es eine Unterklasse der sein wird, Elf Objekt. Denn jetzt weiß nur, dass der Tank eine Kugel benötigen. Beachten Sie, dass die Kugel müssen wissen, welche Tank es gehört.

4. Lesen Sie die Tastatur.

   Der Tank ist zur Zeit stellen Sie die WASD-Tasten für die Eingabe zu verwenden.

5. Bewegen Sie den Tank links und rechts.

   Die linke und rechte Kontrollen bewegen Sie den Tank Sprite selbst. Bewegen Sie den Turm so ihr Zentrum immer der gleiche wie der Tank des Zentrums ist. Dies bewirkt, dass der Revolver immer mit dem Tank zu bewegen.

6. Drehen Sie den Turm.

   Die nach oben und unten Kontrollen bewirken, dass der Revolver drehen. Stellen Sie Minimal- und Maximalwerte des Revolvers in einem angemessenen Bereich von Winkeln zu halten.

7. Feuer die Kugel.

   Auf dem Feuerbefehl (Leertaste in der Standardeinstellung), rufen Sie die Kugel des Feuer() Verfahren. (Natürlich müssen Sie, dass in der zu schreiben Kugel Klasse.)

8. Aktualisieren Sie den Turm.

   Bisher all aktualisieren() Anrufe sind in der Haupt passiert aktualisieren() Funktion. Allerdings ist das Hauptspiel nicht wirklich brauchen, den Turm zu aktualisieren. Weil der Revolver Teil des Tanks ist, sollte der Tank Aktualisieren des Revolvers aktualisieren. Weil das checkKeys () Verfahren wird für jeden Rahmen geschehen, aktualisieren Sie den Turm, um sicherzustellen, dass es richtig anzieht.

9. Bewegen Sie die Kugel.

   Wenn eine Kugel aktiv ist, verwenden Sie die checkGravity () Verfahren seinen aktuellen Kurs zu verfolgen, während Schwerkraft zu berücksichtigen. Wenn es keine Kugel gerade aktiv ist, wird diese Zeile ignoriert.

10. Aktualisieren Sie die Kugel.

    Auch fühlt sich die Kugel wie ein Teil des Tanks, so sollte es automatisch aktualisiert werden.

Wie eine Kugel zu bauen

Die Kugel-Klasse wird von einem Panzer abgefeuert werden. Die Kugel ist eine überraschend anspruchsvolle Klasse, da es ein muss Feuer() Verfahren (das Feuer wird die Kugel auf der Grundlage der Tank und die aktuelle Situation der Revolver) und ein checkGravity () Methode (die die Kugel Flugbahn im Raum Plots).

Hier ist die Kugel Klassencode:

 Funktion Bullet (Inhaber) {// Besitzer ist der Tank dieses bullettBullet = new Sprite besitzen (Spiel "bullet.png", 5, 5) -tBullet.owner = inhaber tBullet.hide () - tBullet.setBoundAction (DIE) -tBullet.fire = function () {// in der Mitte von meinem Tank begin // zeigt in directionthis.setPosition den Panzerturm (this.owner.x, this.owner.y) -this.setMoveAngle (this.owner.turret. getImgAngle ()) - this.setSpeed ​​(20) -this.show () -} // end firetBullet.checkGravity = function () {this.addVector (180, 1) -} // end checkGravityreturn tBullet-} // end Kugel

Hier ist die Lebensgeschichte von einer Kugel in einem Spiel:

1. Geben Sie den Eigentümer Tank.

   Wenn dieses Spiel bei jedem anderen feuern mehrere Tanks hat (was es braucht deutlich), sollte es um fliegen viele Kugeln sein. Jede Kugel wird müssen wissen, welche Tank es gehört, so dass es von der rechten Position in die richtige Richtung feuern.

2. Verstecken.

   Das Kugel Objekt befindet sich ganz am Anfang des Spiels erstellt, aber es verbringt die meiste Zeit seines Lebens unsichtbar versteckt. Eines der ersten Dinge, die Sie tun, ist die Kugel verstecken, so dass es nur zu sehen sein wird, nachdem er gefeuert.

3. Gesetzt Begrenzungs Aktion STERBEN.

   Bullets sterben normalerweise auf, wenn sie das Ende des Bildschirms erreichen. Das Sprite wird nicht aus dem Speicher entfernt. Es ist einfach nicht auf dem Bildschirm angezeigt und reagiert nicht auf Kollisionen. Einstellen der Grenze Aktion STERBEN wird das gewünschte Verhalten verursachen.

4. Feuer von der Position des besitzenden Tank.

   Wenn die Kugel abgefeuert wird, legen Sie sie an der Position des besitzenden Tank.

5. Stellen Sie den Bewegungswinkel zur Revolverwinkel des besitzenden Tank.

   Die Hauptaufgabe des Revolvers ist, um anzuzeigen, in welchem ​​Winkel als Startbahn die Kugel verwendet wird.

6. Geben Sie eine große Bewegungsgeschwindigkeit.

   Bullets sollte schnell bewegen, um eine Anfangsgeschwindigkeit von 20 Pixeln pro Rahmen festgelegt. (Sie können ein anderes Steuerelement hinzufügen, damit der Benutzer die Anfangsgeschwindigkeit zu ändern, wenn Sie es wünschen.)

7. Reveal die Kugel.

   Rufen Sie die Kugel des Show() Methode, um die Kugel auf dem Bildschirm erscheinen zu lassen.

8. Prüfen Sie, ob die Schwerkraft.

   All diese Funktion tut, ist für Gravitationskraft kompensieren mit der addVector () Verfahren.