So erstellen Sie Pong in Ihr HTML5 Spiel

Keine HTML5-Spiele-Entwicklung Diskussion wäre ohne eine Erwähnung des berühmten Pong Spiel abgeschlossen sein. Während dies technisch nicht das erste Spiel, Video, war es die erste populäre Aufmerksamkeit zu erregen, und es ist bei weitem eines der einflussreichsten Spiele aller Zeiten.

Erstellen Sie das Spiel Paddel

Das Paddel-Objekt ist recht einfach, aber es gibt tatsächlich zwei Paddel mit unterschiedlichen Verhaltensweisen. In dieser Version des Spiels wird der linke Paddels von dem Spieler gesteuert wird, und die rechte paddle wird durch einen Computer gesteuert AI. Ein einzelnes Paddel Objekt kann als dienen entweder einen Spieler oder KI-Paddel. Der Spieler Paddel folgt einfach mit der Maus:

 tPaddle.followMouse = function () {// folgt Maus für Spieler controlthis.setImgAngle (90) -this.setPosition (this.x, scene.getMouseY ()) -} // end followMouse Methode

In künstlichen Dummheit zu Ihrem Spiel

Es ist eigentlich sehr einfach, eine künstliche Intelligenz (KI) für den Gegner zu bauen. Setzen Sie einfach Y-Wert ist das Paddel gleich dem Y-Wert des Balles. Dies wird jedoch langweilig sein, weil der Gegner nie verpassen, und wird an den Ball genau in der Mitte des Paddels immer getroffen, so dass es leicht zurück. Das ist kein Spaß. Geben Sie dem AI Paddel eine Art von Aufmerksamkeit Fragen.

Die KI sollte nicht direkt den Ball folgen. Stattdessen sollte es überprüfen, um zu sehen, ob der Ball darüber oder darunter ist, und entsprechend reagieren.

Zwei Variablen wurden hinzugefügt, um die AI Paddel die Bewegung zu steuern. Das BRAINS Konstante ist ein Prozentsatz. Ob BRAINS eingestellt ist 0,5, wird das Paddel prüfen Ballposition nur die Hälfte der Zeit. Für eine einfachere Spiel, Satz der BRAINS Wert niedrig.

Der andere Primärwert ist V_SPEED, oder die Vertikalgeschwindigkeit des Paddels. Dies zeigt an, wie schnell das Paddel in Richtung der Ball bewegen. Ein höherer Wert wird eine leistungsstärkere KI-Spieler erstellen. Finden Sie die richtige Kombination aus diesen beiden Werten die KI von Ihnen gewünschte Verhalten zu erhalten. Hier ist der Code für die automove () Verfahren:

 tPaddle.autoMove = function () {// automatisch movesthis.setImgAngle (90) - // bewegen sich nicht auf jedem turnif (Math.random () lt; Brains) {if (this.y> ball.y) {this.setMoveAngle (0) -} else {this.setMoveAngle (180) -} // end ifthis.setSpeed ​​(V_SPEED) -} // end if} // Ende automove

Erstellen Sie eine Kugel Grenzen abprallen

Während der Ball eine scheinbar simple Sprite ist, ist es etwas interessantes Verhalten haben. Der Ball hat eine eindeutige Grenzkontrollregelung. Es springt die oberen und unteren Rand des Bildschirms ab, aber wenn es um die Seiten verlässt, ist es umschließt.

Wenn Sie nicht über eine Grenze Schema haben, das eines der Standardmuster passt, können Sie einfach die überschreiben Checkbounds () Verfahren zu tun, was Sie wollen. (Beachten Sie, dass Sie nicht brauchen, explizit zu nennen Checkbounds (). Es wird automatisch durch den Sprites genannt aktualisieren() Verfahren. Die benutzerdefinierte Version von Checkbounds einfach ersetzt die integrierte Version. Hier ist eine Variante:

 tBall.checkBounds = function () {// überschreiben Funktion Checkbounds // individuelle Verhalten zu geben // abprallen von oben und bottomif (this.y lt; 0) {this.setDY (this.dy * -1) -} if (this.y> scene.height) {this.setDY (this.dy * -1) -} off von sidesif wickeln // (this.x lt; 0) {this.setPosition (scene.width - 150, this.y) - // Computer Partituren} // end IFIF (this.x> scene.width) {this.setPosition (150, this.y) - // Spieler Partituren} // end if} // end Checkbounds

Wenn der Ball geht an den oberen oder unteren Rand des Bildschirms, Invertzuckersirup dy machen es abprallen. Wenn es mit der linken oder rechten Seite des Bildschirms trifft, verschieben Sie es auf die andere Seite.

Legen Sie einige Spin auf den Ball Spiel

In der traditionellen Versionen von Pong, kann der Ball durch die Wahl, wo auf dem Paddel zu schlagen den Ball kontrolliert werden. Wenn Sie den Ball in der Nähe der Spitze des Schlägers getroffen, wird der Ball nach oben zu bewegen. Wenn Sie den Ball in der Nähe der Mitte des Schläger treffen, wird es horizontal über den Bildschirm fliegen, und wenn man in der Nähe der Talsohle erreicht, wird der Ball nach unten bewegen.

 tBall.checkBounce = function (paddle) {// reagiert auf eine Kollision mit dem gegebenen paddle // Max und Min Dymax = 10Wenn (this.collidesWith (Paddle)) {this.setDX (this.dx * -1) = dy this.y - paddle.y-dy = ((dy / paddle.height) * 2) -dy * = MAX-this.setDY (dy) -} // end if} // end checkBounce

Das dx Wert ist leicht zu berechnen, weil Sie einfach umkehren dx in die andere Richtung zu bewegen. Das dy Wert wird durch Bestimmen der Differenz zwischen der Kugel des berechneten y Position und die des Paddels:

1. Bestimmen Sie einen Maximum dy.

   Dieser Wert bestimmt den höchsten Grad an Ablenkung Sie ermöglichen. wenn der MAX Wert wird auf 10, der Ball gesetzt dy Wert -10 an der Spitze des Paddels, 0 in der Mitte und 10 an der Unterseite des Paddels sein.

2. Umkehren dx.

   Wenn der Ball nach links bewegt, multiplizieren die dx Wert von -1, um es richtig zu gehen. Wenn es richtig abgeht, wird die gleiche Operation (Multiplikation mit -1) wird es nach links zu gehen. Jede Paddel Kollision kehrt der Ball dx.

3. Finden Sie die Rohdifferenz in y Werte.

   Berechnen Sie, wie weit auseinander die y Wert des Paddels und die Kugel sind.

4. Normalisieren diesen Wert.

   Wenn Sie die rohe teilen dy Wert durch die Höhe des Paddels, werden Sie einen Bereich zwischen ± 5 und 0,5 erhalten. Multiplizieren Sie diesen Wert um 2 eine -1 bis 1 Bereich zu erhalten.

5. Multiplizieren Sie die normalisierte dy durch MAX.

   Multipliziert man die normalisierte dy Wert durch die MAX Wert geben ein dy Wert zwischen -MAX und MAX.

Wie Sie das Pong-Spiel zu verbessern

Während dieses Pong Spiel nach unten das grundlegende Verhalten hat, ist es bei weitem nicht bereit für die eigentliche Spiel. Hier sind ein paar Dinge zu beachten, und fügte hinzu:

• In Ästhetik. Sie können viel tun, um es besser aussehen zu lassen, von der Paddel Anpassen Ball Animationen und Sound-Effekte hinzufügen.

• In scorekeeping. Fügen Sie die Fähigkeit, Partituren Benutzer und Computer zu verfolgen. Fügen Sie auch in gewisser Weise das Ende des Spiels zu bestimmen.

• In Powerups. Ändern Sie die Größe jedes Paddel, das gesamte Steuerung des Players Paddel, die Ballgeschwindigkeit zu ändern, machen den Ball gelegentlich unsichtbar, oder Invertzucker den Ball-Paddel Kollisionsalgorithmus für den Anfang.

• Tunen Sie die KI. Es wird ziemlich nervös, wenn der Ball in einer flachen Flugbahn fährt. Sehen Sie, wenn Sie einen Weg finden, kann dieses Verhalten zu glätten.