Flappy Vogel: Erstellen eines klassischen Spiels mit Javascript & P5.js Framework

1. Promo: Hi, mein Name ist Saran. In diesem Kurs werde ich Ihnen zeigen, wie Sie ein einfaches, einfach zu verfolgendes, klassisches Flappy Bird Spiel mit JavaScript und P5 Framework erstellen. Wir werden einen kostenlosen Online-Editor verwenden, der auf jedem Webbrowser läuft. Ich werde Ihnen zeigen, wie Sie die Grundformen zeichnen und ein Objekt bewegen. Dann werde ich einen Vogel zeichnen, ihn auf den Boden fallen lassen, indem ich die Schwerkraft simuliere. Lass den Vogel springen, und lass ihn aufhören zu springen , wenn er tot ist. Dann würde ich die beweglichen Rohre erstellen und die Kollisionserkennung zu den Rohren hinzufügen. Schließlich werde ich das Punktesystem hinzufügen und es schwieriger machen. Du kannst mir folgen, um weitere Spiel-Tutorials zu erhalten. Nun lasst uns die nächste Lektion öffnen und loslegen! 2. Grundlagen: In diesem ersten Video werden wir über die Grundlagen von P5.js Framework sprechen. Öffnen Sie einen Browser, und gehen Sie zu editor.p5js.org. Auf diesem Bildschirm haben wir das Codierfeld auf der linken Seite und eine Vorschau auf der rechten Seite. Klicken Sie auf die Schaltfläche Ausführen, um den Code auszuführen. Das Ergebnis wird auf der rechten Seite angezeigt. Ich empfehle, sofort ein Konto zu erstellen, da Sie die Projekte speichern und versehentlich die Aktualisierung der Website vermeiden können, wodurch der Fortschritt gelöscht wird, den Sie gemacht haben. Wenn Sie das tun, benennen Sie den Titel in „Flappy Bird“ um und speichern Sie ihn. Sie können Ihre gespeicherten Projekte im Menü Öffnen durchsuchen. Um es leichter zu sehen, werden wir von nun an das dunkle Thema verwenden. Hier haben wir zwei grundlegende Funktionen — die Setup-Funktion und die Draw-Funktion. Die Setup-Funktion enthält Code für die Zuweisung der Anfangswerte. Code innerhalb der geschweiften Klammern wird nur einmal am Anfang ausgeführt. Darin gibt es eine Funktion im Inneren - CreateCanvas, die den Bildschirm auf 400 Pixel Breite und 400 Pixel Höhe setzt. Wir können die Breite auf 600 ändern. Klicken Sie dann auf Ausführen, um die Änderung anzuzeigen. Lass es uns wieder auf 400 ändern. In der Zeichenfunktion haben wir eine Hintergrundfunktion aufgerufen , die den gesamten Bildschirm mit 220 malt. 220 ist eine hellgraue Farbe auf der Graustufe. Ändern Sie es auf 0 für die dunkelste Farbe oder 255 für die hellste Farbe. Für andere Farben können wir Google „RGB Color Picker“, und wählen Sie die Farbe, die wir wollen. In diesem Fall wollen wir die Farbe eines blauen Himmels. Kopieren Sie dann diese RGB-Nummern und setzen Sie sie in die Klammern im Hintergrund. Wenn wir auf run klicken, wird der Code in der Setup-Funktion aufgerufen. Dann wird die Zeichenfunktion wiederholt aufgerufen, was bedeutet, dass alles innerhalb der Zeichenfunktion 60 Mal pro Sekunde oder 60 FPS standardmäßig aufgerufen wird. Zum Beispiel, wenn wir eine Funktion drucken, Klammern, FrameCount, und drücken Sie ausführen. Wir werden sehen, dass es den FrameCount in das Konsolenfenster unten mit einer Geschwindigkeit von 60 Zeilen pro Sekunde druckt . Wir können es verlangsamen, indem Sie die FrameRate auf 1 Frame pro Sekunde setzen. Jetzt in der Konsole zeichnet es den blauen Himmel und druckt die Frame-Anzahl jede Sekunde. 60 ist der Standardsatz. Also lasst uns das entfernen. Lassen Sie uns über das Koordinatensystem sprechen. In den meisten 2D-Spiel-Engines beginnt der Ursprung in der linken oberen Ecke, wobei die x-Position 0 und y-Position 0 ist. Durch Verschieben nach rechts wird der x-Wert erhöht. Abwärtsbewegung erhöht sich auf den y-Wert. Dies ist das Gegenteil von dem, was ein normales Koordinatensystem verwendet. Also bitte bedenken Sie das. Als nächstes zeichnen wir die grundlegenden Formen, die wir in unserem Spiel verwenden werden. Das erste ist ein Rechteck. Ich werde hier einen Kommentar abgeben. Du musst dich nicht aufschreiben. Wir würden eine rect-Funktion aufrufen, die 4 Eingabeparameter benötigt. x-Position, y-Position, seine Breite und seine Höhe. Um ein 60 x 30 Rechteck in der oberen linken Ecke zu zeichnen, rufen wir rect x 0, y 0, Breite 60 und Höhe 30. Die x und y in einem Rechteck definieren, wo die obere linke Position sein soll. So können wir sagen, dass sich der Drehpunkt in der oberen linken Ecke befindet. Um das Rechteck in die Mitte zu verschieben. Wir werden x Position zu Breite/2 und y zu Höhe/2 ändern. Breite und Höhe, die in rosa hervorgehoben sind, sind die konstanten Variablen aus der Leinwand — von hier aus. Die nächste Form ist eine Ellipse. Um eine Ellipse zu zeichnen, müssen wir 4 Parameter angeben. x, y, horizontaler Durchmesser und vertikaler Durchmesser. Wenn der horizontale und der vertikale Durchmesser gleich sind, ist es ein Kreis. Zeichnen wir einen Kreis über das Rechteck. Ellipse, Klammern, Hälfte der Breite, die Hälfte bis zur Höhe. Horizontaler Durchmesser ist 50, und der vertikale Durchmesser ist auch 50. Führen Sie es aus. Im Gegensatz zu einem Rechteck, in dem sich der Drehpunkt in der oberen linken Ecke befindet, befindet sich ein Ellipsendrehpunkt in der Mitte. Lassen Sie uns als nächstes über Farbwechsel sprechen. Um die Farbe dieses Rechtecks zu ändern, rufen wir eine Füllfunktion vor dem Zeichnen des Rechtecks, Die wenigen Funktion verwendet die gleichen Parametertypen wie die Hintergrundfunktion. Es könnte eine Graustufennummer oder 3 RGB-Zahlen sein. Wenn ich das Rechteck mit einer grünen Farbe füllen möchte, wäre es, fill, rot 0, grün 255 und blau 0. Nachdem ich das Rechteck gezeichnet hatte, könnte ich die Füllfarbe auf Rot umstellen. So füllen, rot 255, grün 0, und blau 0. Um die Umrisse zu entfernen, verwenden Sie NoStroke in der Setup-Funktion. Lassen Sie uns schließlich über die Animation sprechen. Obwohl es auf dem vorherigen Bildschirm wie ein Standbild aussieht, läuft die Zeichenfunktion 60 Mal pro Sekunde. Lassen Sie uns die x-Position in FrameCount ändern. Weil der FrameCount in jedem Frame um 1 erhöht wird. Wenn die Zeichenfunktion aufgerufen wird, bewegt sich das Rechteck jetzt nach rechts, beginnend bei 1. Und es geht schließlich aus dem Bildschirm. wir nun die Grundlagen behandelt haben, im nächsten Video werden wir im nächsten Videoeinen Flappy Bird erstellen. Vielen Dank. 3. Vogel: In diesem Video werden wir Klasse in JavaScript verwenden. Um mehr darüber zu erfahren, empfehle ich eine schnelle Lektüre von W3Schools Website. Um unseren Code einfach zu organisieren, erstellen wir eine Vogelklasse in einer neuen Datei. Klicken Sie auf das Pfeilsymbol, um den Skizzenordner anzuzeigen. Klicken Sie dann auf Create File, benennen Sie eine Datei „bird.js“. Wechseln Sie zur Datei index.html, und fügen Sie bird.js als Teil der Skripte hinzu. Diese öffnen bird.js, werden wir eine Vogelklasse erstellen, Klasse, Vogel, und ein Paar Klammern. Wir brauchen einen Konstruktor, um ein Vogelobjekt zu erstellen. Konstruktor, Klammern und Klammern. Hier werden wir die X und Y Position des Vogels initialisieren. Dies, Punkt, der sich auf die Variablen innerhalb der Klasse bezieht. Dann x gleich 1/3 der Bildschirmbreite, this.y entspricht der Hälfte der Bildschirmhöhe. Wir müssen auch die Größe des Vogels definieren. Machen wir es 5% der Bildschirmbreite, auch sollte die Vogelklasse ihre eigene Zeichnung behandeln. So werden wir eine Zeichenfunktion erstellen, die später in der Skizzendatei aufgerufen wird. Und lassen Sie uns einen Kreis mit der lokalen Variablen x und y, Ellipse, dieses x, dieses y, seine Größe für die Breite und seine Größe für die Höhe zeichnen. Gehen Sie dann zur Skizzendatei, Erstellen Sie ganz oben eine globale Variable namens bird. Initialisieren Sie im Setup den Vogel, indem Sie ihn dem neuen Vogel in Klammern gleich machen. Zeichnen Sie dann in der Draw-Funktion den Vogel, Vogel, Punkt-Draw. Führen Sie es aus. Jetzt zeigen wir den Vogel. Lassen Sie uns dies beenden, indem wir seine Farbe ändern. Ich werde den Farbwähler wieder benutzen und eine gelbe Farbe auswählen. Kopieren Sie die RGB-Nummern. Fügen Sie dann eine Füllfunktion hinzu, fügen Sie die Nummer ein, und das war's. Im nächsten Video werden wir dem Spiel Physik hinzufügen. Vielen Dank. 4. Tropfgebäck: Lassen Sie uns ein wenig über die Beschleunigung der sich bewegenden Objekte sprechen. Um ein Objekt zu bewegen, müssen wir seine Position ständig ändern. Zum Beispiel habe ich die Geschwindigkeit auf 1 gesetzt, und wir werden die Geschwindigkeit zu der Position x hinzufügen. Das neue x, gleich, das alte x, plus, Geschwindigkeit. Wir könnten also sagen, dass sich dieser Block mit der konstanten Geschwindigkeit von 1 Pixel pro Frame bewegt. Nun, wenn wir es schneller und schneller bewegen wollen, wenn die Zeit weitergeht, könnten wir die Geschwindigkeit in jedem Frame erhöhen, indem wir eine weitere Variable hinzufügen, die wir es als Beschleunigung bezeichnen können. Wenn die Beschleunigung gleich 1 ist, bedeutet dies, dass die Geschwindigkeit von 1, dann 2, dann 3 usw. beginnt . Wir könnten ein fallendes Objekt mit diesem Konzept simulieren. Zurück zur Bird-Klasse werden wir die Schwerkraft simulieren, indem wir zuerst eine Geschwindigkeit auf der y-Richtung erzeugen. this.vy ist gleich 1. Fügen Sie dann vor dem Zeichnen des Vogels die Geschwindigkeit zur y-Position hinzu. Das neue y entspricht dem alten y, plus der Geschwindigkeit y. Jetzt bewegt es sich mit konstanter Geschwindigkeit nach unten. Wir werden die Beschleunigung einführen. Setzen Sie vy auf 0. Dann fügen Sie ay gleich 0,15 hinzu. Bevor wir die y-Position aktualisieren, erhöhen wir die Geschwindigkeit. Das neue vy ist das alte vy, plus ay. Obwohl ay, ist nur 0,15, die Geschwindigkeit summiert sich, und der Vogel fliegt aus dem Bildschirm. Wir brauchen einen Boden unten. Also, wenn der Vogel auf den Boden trifft, endet das Spiel, und es sollte aufhören, sich zu bewegen. Wechseln Sie zur Skizzierdatei, erstellen Sie eine globale Variable, FLOory. Lassen Sie uns den Boden so einstellen, dass er 90% der Bildschirmhöhe beträgt — 0,9 * Höhe. Dann zeichnen Sie den Boden hinter dem Vogel. Wir verwenden rect, x ist 0, y ist FloorY, width ist die Bildschirmbreite und height ist die Bildschirmhöhe minus Floory. Machen Sie es braun, indem Sie eine Füllfunktion darüber hinzufügen. Wählen Sie eine braune Farbe und rufen Sie füllen an, dann die Farbnummern. Schließlich könnten wir verhindern, dass die Vogelform durch den Boden geht. Zurück zur Bird-Klasse, in der Zeichenfunktion, fragen Sie in der Zeichenfunktion,ob die Position von y größer ist als FloorY aus der Skizze. Wenn es wahr ist, wird der Code in Klammern aufgerufen, und wir wollen, dass er sich nicht mehr bewegt. Daher sollten sowohl Geschwindigkeit als auch Beschleunigung 0 sein. Schließlich, wenn es unter den Boden geht, sollte der Vogel an der Oberfläche des Bodens landen. Die Position von y sollte gleich dem FloorY sein. Und so lässt man den Vogel auf den Boden fallen. Im nächsten Video werden wir daran arbeiten, seine Flügel zu flattern. Vielen Dank. 5. Flap: Der Vogel sollte springen, wenn er eine Eingabe von einem Benutzer erhält. Es kann durch einen Mausklick oder durch Drücken einer Leertaste auf der Tastatur erfolgen. Ich werde euch beide Wege zeigen. Zuerst, unterhalb der Zeichenfunktion, fügen Sie unsere eigene Funktion hinzu, nennen Sie es - DoAction. Diese Funktion behandelt das Sprungteil und fügt dann eine Systemfunktion namens MousePressed hinzu. Diese Funktion wird jedes Mal aufgerufen, wenn ein Benutzer eine Maustaste drückt. Wenn der Benutzer innerhalb des Bildschirms klickt, sollte er DoAction aufrufen. Darunter fügen Sie eine weitere Systemfunktion namens KeyPressed hinzu. Diese Funktion wird jedes Mal aufgerufen, wenn ein Benutzer eine Taste auf der Tastatur drückt . Um zu überprüfen, ob die Leertaste gedrückt wird. Fragen Sie, ob Schlüssel, ==, zwei einfache Anführungszeichen, und setzen Sie ein Leerzeichen hinein. Wenn wahr ist, dann rufen wir DoAction auf. Jetzt sollte DoAction den Vogel springen lassen. Lassen Sie uns das Sprungteil in der Bird-Klasse implementieren. Erstellen Sie eine neue Funktion namens springen. Dieser Teil ist nicht realistisch, aber wenn der Vogel springt, werden wir seine Geschwindigkeit auf 0 zwingen. vy ist gleich 0. Und dann, machen Sie es gegen die Schwerkraft nach oben zu beschleunigen. ay entspricht -1.7. Gehen wir zurück zur Skizzendatei und implementieren die Sprungfunktion. Innerhalb der DoAction, legen Sie Vogel, Punkt springen. Jetzt geht es aus dem Bildschirm, weil es schneller in die entgegengesetzte Richtung bewegt. Die Beschleunigung sollte jedoch schrittweise auf ihren ursprünglichen 0,15 zurückwechseln. Um dies zu tun, werden wir eine weitere konstante Variable machen — aMax, setzen Sie es auf 0,15, setzen Sie ay auf aMax. Dann über der if-Anweisung werden wir fragen, ob das aktuelle ay kleiner als AMax ist. Das gilt, wenn der Vogel springt, denn jetzt ist er auf der negativen Seite, wir müssen ihn erhöhen. Also das neue ay, gleich altem ay, plus einer steigenden Rate, die jetzt machen wir es 0.4. Es würde weiter addieren, bis die if-Anweisung falsch ist. Wenn es falsch ist, wollen wir es auf den Maximalwert beschränken. Also, setzen Sie das Ay, auf das AMax. Der Vogel kann nun seine Flügel klappen. Im nächsten Video werden wir den Death Screen implementieren. Danke. 6. Tod: Der Vogel, auf dem Boden, sollte nicht in der Lage sein zu springen. Wir werden eine neue Variable namens Gesundheit erstellen. Stellen Sie es auf 1 ein. Wenn der Vogel auf den Boden trifft, werden wir nicht nur die Bewegung stoppen, sondern auch den Vogel töten, indem wir seine Gesundheit auf 0 setzen. Mit dieser Variablen können wir dann in der Skizze fragen, dass nur wenn der Vogel am Leben ist, er springen kann. Vogel dot health, ==, 1. Jetzt, nachdem es auf den Boden trifft, kann es nicht mehr springen. Ein weiterer Ort, um den Vogel zu töten, ist, wenn er über den Bildschirm geht. Wir werden fragen, ob die Position von y kleiner als 0 ist, dann sollte y bei 0 sein. Setzen Sie die Geschwindigkeit zurück auf 0. Und es könnte mit der maximalen Geschwindigkeit beginnen — aMax. Und schließlich, töten Sie es, Gesundheit ist gleich 0. Jetzt, wenn es auf den Bildschirm trifft, kann es nicht mehr springen. Als nächstes zeigen wir den Text auf dem Bildschirm wenn der Vogel tot ist. Gehen Sie zur Skizzendatei, in der Zeichenfunktion können wir fragen, ob der Vogel tot ist. Wenn die Integrität 0 ist, rufen Sie die Textfunktion auf. Die Textfunktion hat 3 Parameter — die Texte wie in String, x-Position und y-Position. Wir wollen „GAME OVER“ in der Mitte des Bildschirms zeigen . Ändern wir die Textfarbe in Schwarz. Rufen Sie über der if-Anweisung die fill-Funktion auf, setzen Sie sie auf 0. Der Standarddrehpunkt des Textes befindet sich in der unteren linken Ecke, was schwer zu zentrieren ist. Es gibt jedoch eine Funktion namens TextAlign, die den Pivot an alle 9 Positionen verschieben kann. Wir verwenden CENTER, CENTER. Oben auf dem Text. TextAlign, ZENTER, ZENTER. Rufen Sie schließlich die TextSize auf, und legen Sie die Größe auf 30. Jetzt, wenn der Vogel tot ist, klicken Sie auf den Bildschirm oder drücken Sie erneut eine Leertaste, sollte den Vogel wiederbeleben und das Spiel neu starten. In der Vogelklasse werden wir eine weitere Funktion erstellen, um alle Variablen zurückzusetzen. Nennen wir es „Reset“. Dadurch wird alles auf die ursprünglichen Werte vom Konstruktor zurückgesetzt. Nur die konstanten Werte wie Größe und AMax, die sich nicht ändern. Alles andere sollte zur Reset-Funktion gehen. Schneiden Sie sie aus und setzen Sie sie in die Reset-Funktion. Rufen Sie dann Reset am Ende der Zeile auf. Wechseln Sie schließlich zur Skizzierdatei. Und wenn der Vogel tot ist, sollte die DoAction die Werte des Vogels zurücksetzen. Wenn if Anweisung falsch ist, geht es an andere. In ihm, fügen Sie Vogel, Punkt-Reset. Und das war's. Das Spiel setzt sich zurück, nachdem der Vogel tot ist. Im nächsten Video werden wir eine Pipe erstellen. Vielen Dank. 7. Rohr: Es gibt viele Variablen in der Pipe. Erstens muss es eine x-Position haben, um den Überblick zu behalten, wo es horizontal ist. Es braucht keine y-Position, weil es immer an der Spitze ist. Das Rohr hat einen mittleren Spalt, in den der Vogel hindurchgehen kann. Wir müssen wissen, wo die Lücke beginnt, nennen wir es TopGap. Und die Höhe der Lücke selbst, nennen wir es gapHeight. Schließlich die Breite der Lücke. Lassen Sie uns das gapWidth nennen. Erstellen Sie eine neue Datei, nennen Sie sie „pipe.js“ und fügen Sie sie der Indexdatei hinzu. Erstellen Sie darin eine Pipe-Klasse. Die Pipe hat den Konstruktor, der die Startposition von x empfängt. Erstellen Sie eine lokale Variable x, und weisen Sie sie dem angegebenen x zu, fügen Sie die gapWidth und setzen Sie sie auf 15% der Bildschirmbreite, eine gapHeight, setzen Sie sie auf 30% der Bildschirmhöhe. Der letzte ist TopGap. Also werden wir eine Karte und eine zufällige Funktion verwenden. Die Kartenfunktion hat 5 Parameter — die Zahl, den tiefsten Punkt dieser Zahl, den höchsten Punkt dieser Zahl, das neue Tief und das neue Hoch. Und die Zufallsfunktion hat 2 Parameter — die niedrigste Zahl, die sie sein könnte, und die höchste Zahl, die sie sein könnte. Zuerst rufen wir zufällig auf, um eine Zufallszahl zwischen 0 und 1 zu erhalten. Dann verwenden Sie dies als ersten Parameter der Map-Funktion. Sagen Sie der Karte, dass der erste Parameter den niedrigsten Punkt bei 0 bis zum höchsten Punkt bei 1 hat . Dann wollen wir, dass der TopGap von 10% der Höhe bis zu weniger als 60% der Höhe beträgt. Lassen Sie uns eine Zeichenfunktion erstellen. Lassen Sie uns eine grüne Farbe wählen, um das Rohr zu tanken, rufen Sie die Füllfunktion auf und legen Sie die Farbe hinein. Zeichnen Sie den oberen Teil des Rohres mit rect, x ist x, y ist 0, was die gapWidth ist, height ist der TopLap. Der untere Teil beginnt mit x. y befindet sich bei einem TopGap plus der gapHeight. Die Breite ist gleich — gapWidth. Und Höhe ist die Bildschirmhöhe, minus TopGap, minus GapHeight. Wir würden dies vorerst mit nur einer Pipe testen. Wechseln Sie zur Skizzierdatei, erstellen Sie eine globale Variable - Rohr. Weisen Sie es in der Setup-Funktion zu. Pipe gleich neuer Pipe und setzen Sie 0 in den Konstruktor. Zeichnen Sie es hinter dem Boden, Pfeifpunktzeichnung. Und das war's. Im nächsten Video werden wir mehrere Pipes erstellen. Vielen Dank. 8. Illusion: Innerhalb dieses Kamerahmens sieht es so aus, als wären unendliche Objekte, die sich von rechts nach links bewegen. Obwohl wir in Wirklichkeit nur dasselbe Objekt auf die rechte Seite verschoben wenn es außerhalb des Bildschirms ist. Da wir zu einem bestimmten Zeitpunkt nur 3 Rohre auf dem Bildschirm sehen können, benötigen wir nur 3 Rohre, um diesen Effekt zu erzeugen. Ändern Sie den Namen von Pipe in Pipes, und setzen Sie ihn auf ein leeres Array. Wir werden 3 Rohre hineinlegen. Erstellen Sie eine for-Schleife. var i, gleich 0, i < 3, i++. Dann sind Rohre bei i für jedes Rohr gleich einem neuen Rohrobjekt. Die erste Pipe beginnt mit der Bildschirmbreite. Die nächste Pipe beginnt mit der Hälfte der Bildschirmbreite, mal d. Kopieren Sie diese Schleife, und verwenden Sie sie in der Zeichenfunktion. Innerhalb der Schleife werden wir jedes Rohr zeichnen, Rohre bei i, Punktzeichnung. Wir können auch Rohre Punktlänge verwenden, um die Anzahl der Rohre zu erhalten. Wir sollten hier nichts sehen, weil die Rohre nicht Jet bewegt haben. Gehen wir zur Pfeifenklasse. Nachdem Sie das Rohr gezeichnet haben, verschieben Sie das Rohr nach links, indem Sie das neue x eingeben, entspricht dem alten x, minus 2. Wenn das Rohr dann über einen bestimmten Bereich hinausgeht, schleifen Sie es nach rechts zurück. Wenn x kleiner als die negative Hälfte der Breite ist, verschieben Sie das x zurück zur Bildschirmbreite und die Hälfte der GapWidth. Nachdem es nach ganz rechts verschoben wurde, sollten wir auch die TopGap randomisieren, so dass es wie ein anderes Rohr aussieht. Kopieren Sie die obere Lücke, und fügen Sie sie in die if-Anweisung ein. Jetzt sieht es so aus, als hätten wir unendliche Rohre, mit verschiedenen TopGaps kommen durch. Als nächstes sollten die Rohre aufhören, sich zu bewegen sobald der Vogel tot ist. Wir können das Vogelobjekt an die Draw-Funktion der Rohre senden, die zur Zeichenfunktion geht, fügen Sie dem Parameter Vogel hinzu. Dann fragen Sie, ob der Vogel noch am Leben ist. Nur wenn es am Leben ist, kann sich die Pfeife bewegen. Schließlich sollte die Pipe eine Funktion haben, um sich selbst zurückzusetzen , wenn wir das Spiel neu starten, genau wie der Vogel. Und eine Reset-Funktion, wir müssen die ursprüngliche x-Position auf eine andere Variable speichern. Fügen Sie im Konstruktor also x0, gleich x hinzu, bewegen Sie dann x zusammen mit dem TopGap zur Reset-Funktion. Wenn die Pipe zurückgesetzt wird, wird x auf x0 gesetzt, und rufen Sie dann den Reset im Konstruktor auf. Schließlich, wenn wir den Vogel innerhalb der DoAction zurücksetzen, sollten wir auch alle Rohre zurücksetzen. Kopieren Sie die for-Schleife aus Zeichnen von Haltungen. Gehen Sie durch jede Pipe und rufen Sie die Reset-Funktion auf. Jetzt sind die Lücken in jedem Spiel randomisiert. Im nächsten Video werden wir den Vogel auf die Pfeifen treffen lassen. Vielen Dank. 9. Kollision: Der Vogel stirbt, wenn er mit einer Pfeife kollidiert. Wir müssen es eingrenzen, wo der Vogel nicht in x-Richtung gehen sollte. Wenn also sein x plus sein Radius größer als die x-Position des Rohres ist. Wenn die linke Seite der Gleichung darüber hinausgeht, tritt sie in die wahre Zone ein, lassen Sie sie weiter eingrenzen. Verwenden Sie und. Wenn das x des Vogels abzüglich seines Radius kleiner als das x der Pipe plus die GapWidth ist. Wenn beide Bedingungen erfüllt sind, könnte es die Pipe treffen. Lasst uns das zuerst aufschreiben. Als nächstes müssen wir überprüfen, ob der Vogel entweder die Ober- oder Unterseite des Rohres trifft. Also, wenn das y des Vogels, minus seinem Radius, kleiner als TopGap ist. Mit dieser Bedingung haben wir den oberen Teil. Verwenden Sie dann oder, das y des Vogels plus sein Radius ist größer als TopGap plus seine Lückenhöhe. Jetzt befindet sich die wahre Zone in diesen beiden Bereichen. Lasst uns das aufschreiben. Innerhalb des ersten if, fügen Sie ein weiteres, wenn. Wenn es auch wahr ist, dann töten wir den Vogel — setzen seine Gesundheit auf 0. Als nächstes, wenn der Vogel stirbt, wenn er auf die Seite des Rohres trifft, sollte der Vogel auf den Boden fallen. Aber wenn es in einer Lücke stirbt, entweder durch das Schlagen der oberen Lücke, auf der unteren Lücke, sollte der Vogel fallen und landen auf der unteren Lücke. Zuerst gehen Sie in die Bird-Klasse, und fügen Sie den Boden wertvoll. Stellen Sie es auf FloorY ein. Wechseln Sie von Dropping zu FloorY, zu diesem Punktboden. Auch hier drin. Wenn der Reset aufgerufen wird, sollte der Boden auf FloorY zurückgesetzt werden. Dann in der Rohrklasse, wenn der Vogel stirbt, müssen wir überprüfen, ob er innerhalb der Lücke stirbt. Wenn das x des Vogels größer als x und der Pipe ist , ist das x des Vogels kleiner als das x der Pipe plus die GapWidth. Wenn es wahr ist, sollte der Vogel auf der unteren Lücke landen. Lassen Sie uns den Code aufschreiben. Nachdem wir den Vogel getötet haben, wenn er hier drin stirbt, stellen Sie den Boden des Vogels auf die TopGap, plus GapHeight. Sonst fällt es auf die Floory runter. Und das war's. Im nächsten Video fügen wir das Punktesystem zum Spiel hinzu. Vielen Dank. 10. Ergebnis: Die Punktzahl sollte steigen, wenn der Vogel das Ende der Pipe passiert, das ist das x der Pipe, plus seine gapWidth. Und der Hiscore sollte die beste Punktzahl zeigen, die Sie gemacht haben. Wir werden die Punktzahl und den Hiscore innerhalb der Bird-Klasse hinzufügen. Wenn der Vogel zurückgesetzt wird, sollte die Punktzahl 0 sein. Der Hiscore sollte im Konstruktor sein, da er während des Spiels nicht zurückgesetzt wird. Um die Punktzahl zu erhöhen, sollte jede Pipe eine Punktzahl von 1 halten. Fügen Sie es der Reset-Funktion hinzu. Punktzahl entspricht 1. Wenn der Vogel die Pfeife passiert, übergibt die Pfeife dem Vogel die Partitur . Fragen Sie, ob das x des Vogels größer ist als das x der Pipe plus seine gapWidth, die die rechte Kante des Rohres ist. und, wenn die Pipe noch die Punktzahl von 1 enthält, die größer als 0 ist. Dekrementieren Sie die Punktzahl der Pfeife und erhöhen Sie die Punktzahl des Vogels. Wenn sich die Pipe nicht mehr auf dem Bildschirm befindet, stellen Sie die Partitur wieder auf 1 zurück. Lassen Sie es uns testen, indem Sie die Partitur in der Skizze zeichnen. In der Zeichenfunktion, fügen Sie eine Textfunktion hinzu — zeigen Sie den Text. Text, Partitur, Doppelpunkt, ein Leerzeichen, plus Vogelpunktwert, zeigen Sie es bei 10, 10. Darüber hinaus ändern wir die Textausrichtung in LINKS, TOP. Und ändern Sie die TextSize auf 16. Führen Sie es aus. Jetzt, da es funktioniert, lasst uns den Hiscore herausfinden. In der Vogelklasse werden wir die Punktzahl mit dem Hiscore vergleichen. Wenn die Punktzahl größer ist als der Hiscore, dann ist es der neue Highscore. Zurück zur Skizze, zeigen Sie Hiscore, Hiscore, Doppelpunkt, Raum, plus Vogelpunkt Hiscore, zeigen Sie es bei 10, 30. Führen Sie es aus. Und das war's. Im nächsten Video werde ich das Spiel schwieriger machen. Vielen Dank. 11. Endgültige Note: Eines der Dinge, die wir tun können, um es schwieriger zu machen, ist, die Rohre schneller zu bewegen wenn die Punktzahl steigt. Erstellen Sie zunächst eine globale Variable namens PipeSpeed, und legen Sie sie auf 2 fest. Wechseln Sie nun zur Pipe-Klasse und ersetzen Sie 2 durch das PipeSpeed. Zurück in der Skizze werden wir langsam die PipeSpeed mit der Punktzahl des Vogels erhöhen. PipeSpeed entspricht 2, plus Vogelpunktzahl, geteilt durch 10. Sie könnten es schneller machen, indem Sie diese Zahl senken. Als nächstes lassen Sie uns das Spiel einfrieren, wenn es zum ersten Mal läuft. Fügen Sie eine globale Variable hinzu, nennen Sie sie einfrieren. Weisen Sie es wahr zu. Jedes Mal, wenn die DoAction aufgerufen wird, tauen wir das Spiel auf. freeze gleich false. Dann sollten wir in der Vogelklasse die Position nicht aktualisieren, wenn das Spiel einfriert. Also wickeln Sie sie in die if-Anweisung ein und fragen Sie, ob es nicht einfriert. Ein weiterer Ort, um hinzuzufügen, ist in der Pipe-Klasse, wir müssen überprüfen, ob das Spiel einfriert, bevor wir die x-Position aktualisieren. Fügen Sie also freeze gleich false zur if-Anweisung hinzu, zusammen mit einem Operator und. Wenn wir nun ein Spiel starten, friert ein Spiel zuerst ein. Wenn Sie darauf klicken oder eine Leertaste drücken, wird es aufgehoben. Auf dem eingefrorenen Bildschirm konnten wir eine Anleitung zeigen, wie man das Spiel spielt. Sie also am Ende der Zeichenfunktion, FragenSie also am Ende der Zeichenfunktion,ob das Einfrieren wahr ist, fügen Sie dann einen Text hinzu. Drücken Sie die Leertaste oder klicken Sie, um zu springen. x ist die Hälfte der Breite. y ist 70% der Bildschirmhöhe. Machen Sie es zentriert, indem Sie TextAlign, CENTER, CENTER, und das war's. Im nächsten Video werden wir darüber sprechen, wie man es teilt. Danke. 12. TEILEN: Wenn du mit dem Ergebnis zufrieden bist, lass uns das endgültige Spiel teilen. Um einen freigegebenen Link zu erhalten, stellen Sie zunächst sicher, dass Sie sich angemeldet haben und das Projekt gespeichert ist. Gehen Sie dann zu Datei -> Teilen. Verwenden Sie den Vollbild-Link, wenn Sie möchten, dass andere den Code dahinter sehen. Verwenden Sie den vorliegenden Link, um ein eigenständiges Spiel zu erhalten. Oder einen eingebetteten iFrame, um ihn zu Ihrer Website hinzuzufügen. Um mehr über p5.js zu erfahren, schauen Sie sich meine neuesten Kurse in meinem Profil an. Bitte teilen Sie mir im Kommentarbereich mit, welche Themen Sie mehr erfahren möchten. Vielen Dank.