Das asynchrone Programmierfunktion von JavaScript ist sowohl ein Segen als auch ein Fluch, weil es "Rückrufhölle" verursacht. Während Versorgungsbibliotheken wie async.js organisieren können, ist es immer noch schwierig, Steuerflüsse effektiv zu verfolgen und die Logik des asynchronen Codes zu schließen.
In diesem Artikel wird das Konzept der reaktionsschnellen Programmierung vorgestellt, bei dem Bibliotheken wie Bacon.js verwendet werden, um die asynchronen Merkmale von JavaScript zu bewältigen.
SchlüsselpunkteResponsive Programming behandelt asynchrone Datenflüsse, wodurch die asynchronen Funktionen von JavaScript verwaltet und "Callback -Hölle" vermieden werden. Bibliothek wie Bacon.js kann verwendet werden, um dieses Konzept zu implementieren.
reaktionsschnelle Programmierungsprozesse Asynchroner Datenfluss. Es ersetzt den Iteratormodus durch den beobachtbaren Modus. Dies unterscheidet sich von der imperativen Programmierung, bei der Sie über Daten aktiv iterieren, um Transaktionen zu verarbeiten. Bei reaktionsschneller Programmierung abonnieren Sie Daten und reagieren asynchron auf Ereignisse.
Bart de Smet erklärt diese Verschiebung in seiner Rede. André Staltz untersucht in diesem Artikel die reaktionsschnelle Programmierung.
Sobald Sie die Reaktionsprogrammierung verwenden, wird alles zu einem asynchronen Datenstrom: Datenbanken auf dem Server, Mausereignissen, Versprechen und Serveranforderungen. Auf diese Weise können Sie das sogenannte "Callback Hell" vermeiden und eine bessere Fehlerbehandlung bieten. Ein weiteres leistungsstarkes Merkmal dieses Ansatzes ist die Fähigkeit, Datenströme zu kombinieren, die Ihnen eine große Kontrolle und Flexibilität bieten. Jafar Husain erklärt diese Konzepte in seiner Rede.
bacon.js ist eine reaktionsschnelle Programmierbibliothek, die eine Alternative zu RXJs ist. Im nächsten Abschnitt werden wir Bacon.js verwenden, um eine weithin bekannte Version des Pac-Man-Spiels zu erstellen.
Projekteinstellungen
Um Bacon.js zu installieren, können Sie Bower verwenden, um den folgenden Befehl auf der CLI auszuführen:
Nach der Installation der Bibliothek können Sie die Responsive -Programmierung verwenden.
$ bower install bacon
Pac Man Game API und Unicodetiles.js
Zuerst habe ich eine Klasse namens Pacmangame erstellt, die die Spiellogik übernimmt. Es liefert die folgenden Methoden:
Zusätzlich enthält es den folgenden Rückruf:
Um diese API zu verwenden, werden wir das Spiel starten, Spawnghost regelmäßig anrufen, um Geister zu generieren, auf OnpacmanMove -Rückrufe zu hören, und wenn dies passiert, rufen Sie MovePacman an, um Pacman tatsächlich zu bewegen. Wir rufen auch regelmäßig Update -Kateghosts an, um die Bewegung des Geistes zu aktualisieren. Schließlich rufen wir Tick regelmäßig an, um die Änderungen zu aktualisieren. Wichtig ist, dass wir Bacon.js verwenden, um uns mit Ereignissen umzugehen.
Erstellen wir vor dem Start das Spielobjekt:
$ bower install bacon
Wir erstellen einen neuen Pacmangame und passieren in einem übergeordneten DOM -Objekt ParentDiv, in dem das Spiel rendert. Jetzt sind wir bereit, unser Spiel zu bauen.
Ereignisstrom oder beobachtbares Objekt
Ereignisstrom ist ein beobachtbares Objekt, das Sie abonnieren können, um Ereignisse asynchron zu beobachten. Sie können diese drei Arten von Ereignissen mit den folgenden drei Methoden beobachten:
Jetzt, da wir die grundlegende Nutzung von Ereignisströmen verstanden haben, lassen Sie uns sehen, wie Sie einen Ereignisstrom erstellen. Bacon.js bietet verschiedene Methoden, mit denen Sie Ereignisströme von JQuery Events, AJAX Promise, DOM EventTarget, einfachen Rückrufen und sogar Arrays erstellen können.
Ein weiteres nützliches Konzept zum Ereignisfluss ist das Konzept der Zeit. Das heißt, Ereignisse können in Zukunft zu einem bestimmten Zeitpunkt kommen. Diese Methoden erstellen beispielsweise einen Ereignisstrom, der Ereignisse innerhalb eines bestimmten Zeitintervalls übergibt:
Für mehr Kontrolle können Sie Bacon.Frombinder () verwenden, um Ihren eigenen Ereignisstrom zu erstellen. Wir werden dies im Spiel zeigen, indem wir eine MoveStream -Variable erstellen, die Ereignisse für unsere Pac Man Moves erzeugt.
var game = new PacmanGame(parentDiv);
Wir können Sink mit einem Wert anrufen, der ein Ereignis sendet, den der Beobachter anhören kann. Der Anruf zum Senken befindet sich in unserem OnpacmanMove-Rückruf-das heißt, wenn der Benutzer eine Taste drückt und Pac-Man auffordert, sich zu bewegen. Daher erstellen wir ein beobachtbares Objekt, das Ereignisse über Pac-Man-Bewegungsanfragen ausgibt.
Beachten Sie, dass wir die Spüle mit einem einfachen Wert MoveV angerufen haben. Dadurch wird der Value MoveV verwendet, um das Move -Ereignis voranzutreiben. Wir können auch Ereignisse wie Bacon.Error oder Bacon.end vorantreiben.
Erstellen wir einen anderen Ereignisstrom. Dieses Mal möchten wir Benachrichtigungen ausstellen, um Geisterereignisse zu generieren. Wir werden dafür eine Spawnstream -Variable erstellen:
$ bower install bacon
bacon.sexus () erstellt einen Strom, der die Werte in bestimmten Intervallen übergibt. In unserem Fall wird es alle 800 Millisekunden eine Geisterfarbe erbringen. Wir haben auch einen Anruf bei der Delay () -Methode. Es verzögert den Stream, sodass das Ereignis nach einer Verzögerung von 2,5 Sekunden abgibt.
In diesem Abschnitt werde ich einige weitere praktische Methoden auflisten, die für Ereignisströme verwendet werden können:
Weitere Methoden zum Ereignis -Streaming finden Sie auf der offiziellen Dokumentationsseite. Sie können ein Marmordiagramm verwenden, um den Unterschied zwischen Drossel und Enttäuschung anzusehen:
var game = new PacmanGame(parentDiv);
Wie Sie sehen können, drosselt das Drossel routinemäßig Ereignisse, während es nach einer bestimmten "Stillezeit" nur Ereignisse abgibt.
Diese Dienstprogramme sind einfach und leistungsstark und in der Lage, den Fluss zu konzipieren und zu kontrollieren, wodurch die darin enthaltenen Daten gesteuert werden. Ich empfehle, diesen Vortrag darüber zu sehen, wie Netflix diese einfachen Methoden verwendet, um automatische Kartons zu erstellen.
beobachten
Bisher haben wir den Ereignisstrom erstellt und manipuliert und jetzt werden wir Ereignisse beobachten, indem wir den Stream abonnieren.Überprüfen Sie den MoveStream und den Spawnstream, den wir zuvor erstellt haben. Lassen Sie uns sie jetzt abonnieren:
var moveStream = Bacon.fromBinder(function(sink) {
game.onPacmanMove = function(moveV) {
sink(moveV);
};
});Obwohl Sie Stream.SubScribe () verwenden können, um Streams zu abonnieren, können Sie auch Stream.onValue () verwenden. Der Unterschied besteht darin, dass das Abonnieren diese drei Arten von Ereignissen, die wir zuvor gesehen haben, emittieren, während Onvalue nur Ereignisse des Specks ausstrahlt. Das heißt, es wird die Ereignisse von Bacon.Error und Bacon.end ignorieren.
Wenn ein Ereignis auf Spawnstream erscheint (Unfall alle 800 Millisekunden), ist sein Wert eine der Geisterfarben, mit denen wir Geister erzeugen. Wenn ein Ereignis auf MoveStream erscheint, denken Sie daran, dass dies geschieht, wenn der Benutzer eine Taste drückt, um den PAC -Man zu bewegen. Wir nennen Game.Movepacman mit der Richtung MoveV: Es erscheint mit der Veranstaltung, also Pacman Moves.
Sie können Ereignisströme kombinieren, um andere Streams zu erstellen. Es gibt viele Möglichkeiten, Ereignisströme zu kombinieren, und hier sind einige von ihnen: <🎜>
Schauen wir uns ein Beispiel von Bacon.comBinTemplate an:
$ bower install bacon
Wie Sie sehen, verwenden wir Vorlagen, um Ereignisströme (d. H. Passwort, Benutzername, FirstName und LastName) in einen kombinierten Ereignisstrom namens LoginInfo zu kombinieren. Immer wenn ein Ereignisstrom ein Ereignis erhält, emittiert der LoginInfo -Stream ein Ereignis und kombiniert alle anderen Vorlagen zu einem einzelnen Vorlagenobjekt.
bacon.js Es gibt auch eine Methode zum Kombinieren von Bächen, nämlich Bacon.bus (). Bacon.bus () ist ein Ereignisstrom, mit dem Sie Werte in den Strom drücken können. Es ermöglicht auch, dass andere Bäche in den Bus eingefügt werden. Wir werden es verwenden, um den letzten Teil des Spiels zu erstellen:
var game = new PacmanGame(parentDiv);
Jetzt verwenden wir Bacon.interval, um einen anderen Strom zu erstellen - Ghoststream. Dieser Stream wird alle 1 Sekunde 0 ausstrahlen. Diesmal abonnieren wir es und rufen game.updateghosts an, um den Geist zu bewegen. Dies soll den Geist alle 1 Sekunde bewegen. Bitte beachten Sie, dass das Spiel.tick ausgezeichnet wurde und sich an andere Spiele erinnern. Ticks in MoveStream? Beide Streams aktualisieren das Spiel und rufen schließlich Game auf. Strom.
Um Ströme zu kombinieren, können wir Bacon.bus verwenden. Dies ist der letzte Strom von Ereignissen in unserem Spiel, den wir CombinedTickstream nennen. Dann fügen wir MoveStream und Ghoststream ein und abonnieren es schließlich und rufen Sie das Spiel ein.
Das war's, wir sind fertig. Das einzige, was noch übrig ist, ist, das Spiel mit Game.start ();.
bacon.property und weitere Beispiele
bacon.property ist eine reaktionsschnelle Eigenschaft. Stellen Sie sich vor, eine reaktionsschnelle Eigenschaft ist die Summe eines Arrays. Wenn wir dem Array ein Element hinzufügen, reagiert das Responsive Attribut und aktualisiert sich. Um Bacon.Property zu verwenden, können Sie es abonnieren und auf Änderungen anhören oder die Eigenschaft (OBJ, Methode) verwenden, die die Methode des angegebenen Objekts beim ändert Hier ist ein Beispiel für die Verwendung von Bacon.Property:
var moveStream = Bacon.fromBinder(function(sink) {
game.onPacmanMove = function(moveV) {
sink(moveV);
};
});Erstens erstellen wir einen Ereignisstrom, der die Werte des angegebenen Array in 1 Sekunden lang Intervalle erzeugt - 1, 2, 3 und 4, und dann erstellen wir eine reaktionsschnelle Eigenschaft, die das Scan -Ergebnis ist. Dadurch werden Reaktivwert Werte von 1, 3, 6 und 10 zugewiesen.
Erfahren Sie mehr Informationen und Echtzeitdemonstration
In diesem Artikel stellen wir reaktionsschnelle Programme mit Bacon.js vor, indem wir Pac Man Games erstellen. Es vereinfacht unser Spieldesign und bietet uns mehr Kontrolle und Flexibilität durch das Konzept des Event -Streaming. Der vollständige Quellcode ist auf GitHub verfügbar, und hier finden Sie eine Live -Demo.
Folgendes sind einige nützliche Links:
Um mit Bacon.js ein eigenes PAC -Man -Spiel aufzubauen, müssen Sie zunächst die Grundlagen von JavaScript und funktionalem reaktionsschnellem Programmieren (FRP) verstehen. Sobald Sie dieses Wissen gemeistert haben, können Sie eine Entwicklungsumgebung einrichten. Sie müssen Node.js und NPM (Node Package Manager) auf Ihrem Computer installieren. Danach können Sie Bacon.js mit NPM installieren. Sobald Sie alles eingerichtet haben, können Sie mit dem Schreiben von Spielcode beginnen. Sie können die Tutorials auf unserer Website für eine Schritt-für-Schritt-Anleitung zum Bau von PAC-Man-Spielen mit Bacon.js befolgen.
bacon.js ist eine funktionelle reaktive Programmierbibliothek (FRP) für JavaScript. Sie können asynchrone Ereignisse wie die Eingabe von Benutzer auf eine verwaltbare und lesbare Weise verarbeiten. Beim Aufbau von PAC -Man -Spielen kann Bacon.js verwendet werden, um Benutzereingaben (z. B. Tastaturereignisse), Spiellogik (wie Bewegungen von Pac Man und Ghost) zu verarbeiten und den Spielstatus auf dem Bildschirm zu rendern.
natürlich! Nachdem Sie ein grundlegendes PAC -Man -Spiel mit Bacon.js errichtet haben, können Sie es nach Ihren Wünschen anpassen. Sie können die visuellen Effekte des Spiels ändern, neue Funktionen hinzufügen und sogar die Spielregeln ändern. Die Möglichkeiten sind endlos, und das Beste daran ist, dass Sie alles tun können, während Sie dennoch von der Macht und Einfachheit von Spacon.js und funktional reagierenden Programmen profitieren.
Debugging Pac-Man-Spiele, die mit Bacon.js gebaut wurden, ähnelt der Debugie für andere JavaScript-Anwendungen. Sie können die Entwickler -Tools des Browsers verwenden, um den Code zu überprüfen, Breakpoints festzulegen und den Code durchzusetzen. Darüber hinaus bietet Bacon.js eine Methode namens "OnError", mit der Sie Fehler in Ereignisströmen verarbeiten können.
Es gibt verschiedene Möglichkeiten, die Leistung von Pac Man -Spielen zu optimieren, die mit Bacon.js gebaut wurden. Eine Möglichkeit besteht darin, die Anzahl der DOM -Updates zu minimieren. Sie können die Funktion "combinETEMplate" von bacon.js verwenden, um dies zu erreichen, indem Sie mehrere Streams in einem einzigen Stream kombinieren, der das DOM aktualisiert. Eine andere Möglichkeit besteht darin, die Funktion "FlatMap" zu verwenden, um unnötige Ströme zu erstellen.
Ja, Sie können Bacon.js verwenden, um jeden Spieltyp zu erstellen, der mit asynchronen Ereignissen umgehen muss. Dies schließt nicht nur klassische Arcade-Spiele wie Pac Man, sondern auch komplexere Spiele wie Echtzeit-Strategiespiele oder Multiplayer-Online-Spiele ein.
Hinzufügen von Multiplayer -Funktionen zum PAC -Man -Spiel, das mit Bacon.js erstellt wurde, erfordert, dass ein Server die Kommunikation zwischen Spielern übernimmt. Dafür können Sie Node.js und WebSockets verwenden. Auf dem Kunden verwenden Sie Bacon.js, um eingehende und ausgehende WebSocket -Nachrichten zu verarbeiten.
Ja, Sie können PAC -Man -Spiele mit Bacon.js auf Ihrer Website einsetzen. Sie müssen Ihren JavaScript -Code mit Tools wie WebPack oder Browserify bündeln. Anschließend können Sie den gebündelten Code und die Spielressourcen wie Bilder und Sounds auf Ihrem Webserver hosten.
Ja, Sie können Bacon.js mit anderen JavaScript -Bibliotheken oder Frameworks verwenden. Bacon.js ist eine eigenständige Bibliothek und hängt daher nicht von anderen Bibliotheken oder Frameworks ab. Es kann jedoch in Verbindung mit anderen Bibliotheken oder Frameworks verwendet werden, um komplexere Anwendungen zu erstellen.
Es sind viele Ressourcen online verfügbar, um funktionale reaktive Programmierung (FRP) und Bacon.js zu lernen. Sie können mit der offiziellen Dokumentation von Bacon.js beginnen, die einen umfassenden Leitfaden für die Funktionen und APIs der Bibliothek bietet. Es gibt auch viele Tutorials, Blog -Beiträge und Online -Kurse, die fp und bacon.js genauer abdecken.
Das obige ist der detaillierte Inhalt vonAufbau eines Pacman -Spiels mit Bacon.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
