Multiplayer-TicTacToe-Spiel mit Flutter, Socket und MongoDB

1. Einführung in den Kurs: Sind Sie bereit, Ihrer Kreativität freien Lauf zu lassen und Menschen durch die Kraft der Technologie zusammenzubringen Menschen durch die Kraft der Technologie zusammenzubringen ? Suchen Sie nicht weiter Dieser umfassende Kurs bietet alles, was Sie benötigen, um ein erfahrener Flatter-Entwickler zu werden ein erfahrener Flatter-Entwickler Stellen Sie sich den Nervenkitzel vor, Ihre Freunde und Familie zu einer Partie Detecto herauszufordern Ihre Freunde und Familie zu einer Partie Detecto In diesem Kurs lernen Sie, wie Sie leistungsstarke Framework von Sake Do Ao, die nahtlose Echtzeitkommunikation von Sake Do Ao und die flexible Datenbank von Mongo Davis nutzen nahtlose Echtzeitkommunikation von Sake Do Ao und die Statusverwaltung bereitstellen können, um ein immersives, sicheres Multiplayer-Spielerlebnis zu schaffen Sie werden verstehen, wie Sie Ihr eigenes benutzerdefiniertes Backback erstellen sodass Sie die volle Kontrolle und Flexibilität über Ihre Daten haben Das bedeutet, dass Sie sich nicht mehr ständig auf Fireway verlassen müssen. Egal, ob Sie ein Anfänger oder ein erfahrener Entwickler sind , der Ihre Fähigkeiten erweitern möchte, dieser Kurs ist für Sie konzipiert ohne weitere Zeit zu verschwenden Melden Sie sich jetzt an, ohne weitere Zeit zu verschwenden, und legen wir los 2. Erstelle ein neues Projekt: Hallo. in dem wir lernen, wie man eine multipletische Techno-Anwendung mit Platter, No Js, Mongo DV und Socket D IO erstellt eine multipletische Techno-Anwendung mit Platter, No Js, Mongo DV Willkommen zum allerersten Video des Kurses, in dem wir lernen, wie man eine multipletische Techno-Anwendung mit Platter, No Js, Mongo DV und Socket D IO erstellt. Wenn es um die Entwicklung einer Rail-World-Anwendung oder irgendein seriöses Startup geht , bevorzugen große Unternehmen maßgeschneiderte Backends gegenüber Firebase, weil sie natürlich kostengünstig sind und es kein Problem Herstellerbindung gibt Ihre Fähigkeiten angeht, müssen Sie also wissen, wie Sie Ihr eigenes Backend erstellen können Sie sollten sich nicht nur auf die Feuerbasis verlassen. In diesem Kurs werden Sie natürlich am Ende alles lernen und können daher für alle großen Unternehmen oder Startups arbeiten. Also lass uns anfangen. Jetzt werden wir als Erstes ein neues Flatter-Projekt erstellen Ich gehe davon aus, dass Sie Flutter S DC bereits in Ihrem System installiert haben Flutter S DC bereits in Ihrem System installiert Gehen Sie also einfach in Ihr gewünschtes Verzeichnis. Und dann ein Terminal und schreibe den Befehl flutter, create tack Also gebe ich dem Projekt diesen Namen. Natürlich kannst du ihm alles geben, was du willst. Außerdem möchte ich Ihnen zeigen, welche Flutter-Version ich verwende, da sie offensichtlich alle paar Wochen alle paar Wochen Updates veröffentlichen Ich verwende Flutter 3.10 0.1. Stellen Sie also sicher, dass Sie dies verwenden oder wenn es in Zukunft grundlegende Änderungen gibt, müssen Sie sich daran anpassen Also, das ist das Projekt. Öffnen Sie es jetzt im VS-Code. Öffnen Sie einfach den Ordner. Buchstaben cos und tto. Das Erste, was wir tun können ist, unsere Bewerbung auf organisierte Weise zu strukturieren . Erstellen Sie also im Ordner drei neue Ordner wie Screens, Badges und Utils Ich hoffe natürlich, dass Sie alle Grundlagen der Servierplatte kennen. Ich glaube, das ist es, was Yamal tut Wozu dient die Hauptfunktion? Weil dieser Kurs nichts für Anfänger ist. Sie müssen auch ein grundlegendes Verständnis von Platter und auch haben. Sie dann innerhalb der Bildschirme einen neuen Bildschirm, Erstellen Sie dann innerhalb der Bildschirme einen neuen Bildschirm, den so genannten Hauptmenübildschirm Dies wird der Startbildschirm sein. Wenn der Benutzer unsere Anwendung öffnet, wird ihm dieser Bildschirm angezeigt. Lassen Sie uns dann hier einen Zustand erzeugen, der weniger starr ist. Und. Und nenne es Hauptmenübildschirm. Nur für den Moment, gib ihm ein Gerüst und in der Leiche, gib ihm einen Besuch und schreib Erstellen Sie im Ordner utils eine neue Datei namens Colors do Dart Diese Datei enthält normalerweise alle Farben Ihrer Anwendung Aber in unserer App werden wir nur eine Farbe haben, also importieren Sie einfach zuerst Material. Und schreiben Sie die konstante BG-Farbe als Hintergrundfarbe, entspricht der Farbe von RGB O dann 161334 und geben Sie die Opazität Das ist nur eine Farbe, sonst nichts. Sehen Sie, es ist ein schwarzer Farbton. Wenn Sie möchten, können Sie natürlich die Hintergrundfarbe eines Spiels ändern. nun in der Haupt-Do-Dirt-Datei Entfernen Sie nun in der Haupt-Do-Dirt-Datei zunächst diesen Kommentar. Es sieht nicht gut aus. Dann unter der M-App, das ist diese Homepage, alles aus der Zeile 23 bis zum Ende entfernen. Und dann hier auf der Startseite machen wir unseren Hauptmenübildschirm als Startseite, dann ändern wir diesen Titel in Tack Tack Tack Tack Tack Tack Tack Tick T bis dann das Debug-Banner ist der Fall. Das Thema sollte Theme Theta Dark Do Copywed sein. Ich werde das dunkle Thema mit diesen Eigenschaften verwenden und hier werde ich die SCA-Hintergrundfarbe als BG-Farbe hinzufügen Das heißt, ich möchte, dass die Hintergrundfarbe schwarz ist. Jetzt werde ich einen Android-Simulator verwenden und auch hier werde ich nur die App-Namen ändern. Ich denke, der App-Name ist Ditto. Es sollte kein Problem sein. Wir haben die Hauptquelle der Android-App. Ja, das Gleiche gilt, es ist in Ordnung. Also fang einfach an zu debuggen. Lassen Sie uns Ihre Anwendung ausführen. Dies ist das erste Mal, obwohl es einige Zeit dauern kann. Es hängt auch von Ihrem System ab. Die App läuft also und wir sehen, dass unser Hauptmenübildschirm da ist. Das war's also für dieses Video. Im nächsten Video werden wir am I des Hauptmenüs arbeiten . Danke. 3. Arbeite an der Hauptmenü-Benutzeroberfläche: Hi, willkommen zurück. Also was ich will, ist im Hauptmenü, es sollte zwei Knöpfe geben. Eine, um ein Spiel zu erstellen, bei dem ein Raum erstellt wird , und zweitens, um dem Spielraum beizutreten. Lassen Sie uns also eine separate Schaltfläche für den benutzerdefinierten Widget-Bereich erstellen , damit wir sie an mehreren Stellen verwenden können. einfach im Widgets-Ordner Erstellen Sie einfach im Widgets-Ordner eine neue Datei mit benutzerdefiniertem Button-Pfeil und importieren Sie Material und statusfreies Widget, machen Sie es zu einem statusfreien Widget und schreiben Sie In einer Schaltfläche benötigen wir den Text, in die Schaltfläche geschrieben werden soll, sowie die Funktion, die sie Nehmen wir diese Argumente im Konstruktor. Schreiben Sie final, das ist void cab on tap. Und der letzte String-Text. Nun, dieser ungültige Rückruf bedeutet einfach eine Funktion, aber er gibt nichts zurück denn wenn Sie hier function schreiben, dann ist es auch in Ordnung. Aber da wir wissen, dass wir nichts zurückgeben werden, verwende ich void call back. Stellen Sie jetzt hier die erforderlichen Eigenschaften ein. Das ist das auf Tap, re dieser Punkttext. Jetzt hier, Return und erhöhte Taste. In der Eigenschaft press geben wir die Funktion ONT an. Und im Kind. Wir geben Text als Texteigenschaft an und geben ihm einen gewissen Stil. Größe des Textstils bei 16. Außerdem geben wir der Schaltfläche eine Mindestgröße. zunächst Lassen Sie uns dazu zunächst die Größe der Bildschirmmedienabfrage ermitteln. Der Punkt des Kontextes entspricht der Größe wd. Damit erhalten wir die Größe des Bildschirms. Hier unter der Presse schreibe ich einfach den Stil der erhöhten Taste, ab Mindestgröße wäre die Rasterbreite die Breite und die Höhe, so dass es 50 sein wird Es wird also den kompletten Witz brauchen , den wir später ändern werden Das heißt, wir werden auch ein gewisses Maß an Reaktionsfähigkeit walten lassen. Aber das ist unser benutzerdefinierter Button. Das haben wir, alles ist in Ordnung, glaube ich. Okay. Gehen wir jetzt zu unserem Hauptmenübildschirm. Hier werden wir zwei Schaltflächen erstellen, mit denen Benutzer einen Spielraum erstellen oder einem beitreten können. Also gebe ich diesem Bildschirm zuerst oder ganz oben einen Routennamen. Das ist eine statische Zeichenfolge, der Routenname ist ein Go-Hauptmenü. Wir werden also Namensrouten verwenden. Deshalb schreibe ich die Routen hier , damit sie nicht verwirrend sind, und wir können diesen Routennamen einfach aufrufen , ohne eine Instanz zu erstellen, da es sich um eine statische Variable handelt. Jetzt hier, entferne den mittleren Git und gib eine Spalte an. Ausrichtung der Hauptachse der Spalte, Mitte der Hauptachse, dann Kinder. Als Erstes wird es eine benutzerdefinierte Schaltfläche sein, unsere eigene, die wir erstellt haben. Ein Tab wird vorerst leer sein. Wir werden später daran arbeiten, zuerst werden wir einen erstellen. Sie dann bei den Kindern Geben Sie dann bei den Kindern ein Komma ein und schreiben Sie dann große Werke Stellen Sie sicher, dass die Größe funktioniert, geben Sie eine Höhe von 20 und erstellen Sie dann erneut eine zweite benutzerdefinierte Schaltfläche Sehen Sie, so nützlich ist unsere Schaltfläche , damit wir unseren Code nicht wiederholen müssen. Und hier schreib einfach Join Room. Schauen wir uns die Benutzeroberfläche an. Wir haben die zwei Knöpfe. Geben Sie einfach etwas Polster. Wickeln Sie hier die Spalte mit einem Abstand ein und geben Sie einen Abstand von 20 Pixeln ein Sag, es sieht anständig genug aus. Das war's für dieses Video, wir sehen uns in der nächsten Sitzung. 4. Arbeite an der Reaktionsfähigkeit: Hallo, willkommen zurück. Unsere Anwendung sieht in diesem Android-Emulator gut aus. Aber was ist, wenn ich versuche, es auch in Chrome zu öffnen? Also lass es uns machen. Sie können die Anwendung auf zwei Geräten gleichzeitig ausführen . Das ist also eine gute Sache. Okay. O C. Wenn die App hier im Web- oder Desktop-Modus läuft, können wir sehen, dass die Tasten gestreckt sind und das ganze WLAN beanspruchen, und es sieht nicht gut aus. Also werden wir ein responsives Widget erstellen , das Einschränkungen hinzufügt. Lass uns daran arbeiten. Erstellen Sie innerhalb von ib einen neuen Ordner und nennen Sie ihn Onsive Und dann schreibe ich Responsive Dot Dart hinein. Importieren Sie Material und erstellen Sie einen State-GID-Namen Diese GID akzeptiert ein Kind, was ein GID-Eigenschaftsdatentyp sein wird Hier ist lediglich dieses DO-Kind erforderlich, und hier im Abschreckungszentrum im Feld Child DO-Kind erforderlich, und hier im Abschreckungszentrum im Feld . Hier ist lediglich dieses DO-Kind erforderlich, und hier im Abschreckungszentrum im Feld Child constrained. Hier können wir Einschränkungen angeben. Einschränkungen werden Cont-Box-Einschränkungen sein. Die maximale Breite würde 600 s betragen. Sie sollte nicht größer als dieser Wert sein, wenn es kleiner ist, ist es in Ordnung. Und wird es sein. Okay. Fügen Sie jetzt einfach die Spalte in den Hauptmenübildschirm ein. Diese Spalte umschließt sie einfach mit Responsive wie folgt. Im Kind fügen wir hinzu oder im Kind haben wir diese Spalte Git. Speichern wir es. Lass uns sehen , welcher gerettet wird. Ich bin mir nicht sicher. Ja, S. Also im Android-Emulator sieht es gut aus und auch im Desktop- oder Web-Modus sieht es auch Also kannst du es ändern . Das ist 600. Du kannst tun, was du willst. So fügen Sie Antworten auf sehr einfache Weise hinzu. Im nächsten Video werden wir also mehr Routen erstellen und diese Routen in unserer Hauptpunktdatei registrieren. Danke. 5. Registrieren benannte Routen: Fi. Lassen Sie uns nun Bildschirme für Create Room und Join Rope erstellen. Erstellen Sie im Ordner Screens eine neue Datei und nennen Sie sie Create Room Screen. Außerdem erstellen wir eine neue Datei, die dem Raum beitritt, Bildschirm, Punkt. Importieren Sie im Bildschirm „Raum erstellen“ einfach Material. Erstellen Sie dann einen Status „Voll“. Nennen Sie create ro screen und geben Sie vorerst einfach ein leeres Gerüst zurück, und ähnlich auch hier im Join-Screen Importieren Sie Material und erstellen Sie dann einen Status mit voller ID. Benennen Sie den Verbindungsbildschirm. Gib dann einen leeren Scaffold Gin zurück. Leeres Gerüst. Ebenso wie wir den Routennamen in den Hauptbildschirm schreiben, auf den Bildschirm Mein Veranstaltungsort, ähnlich im Erstellungsbildschirm, setzen wir die statische Zeichenfolge Schrägstrich Dies ist der Name der Route und wir gehen auch hier zum Verbindungsraum statische Routenname mit der Zeichenfolge entspricht dem Verbindungsraum, so wie Wir haben die Routen. Wir müssen sie nur noch in der Hauptdatei registrieren. Gehen Sie hier zur Haupt-DO-Datei. geht's Unten einfach nach Hause, dann gebt ihr eine Karte. Hier ist es ein Schlüsselwertpaar. Der Routenname und dann dieser Routenname zeigen auf den Bildschirm. Einfach Hauptmenübildschirm, Routenname. Es leitet den Hauptmenübildschirm weiter. Ja, es sollte ein Tempo haben. Ähnliches gilt für den Bildschirm „Raum erstellen“, der Routenname. Es ist rot, um den Raumbildschirm zu erstellen. Dann dem Raumbildschirm beitreten. Es wird wie folgt zum ständigen Bildschirm „Raum beitreten“ weitergeleitet. Und wenn wir Namensrouten verwenden, also sollten wir diese Home-Eigenschaft nicht nach der Route verwenden . Schreiben Sie einfach die erste Route und geben Sie ihr den Hauptmenübildschirm, Schreiben Sie einfach die erste Route und geben Sie ihr um die Route wie folgt auszuführen. Und dann starten Sie die Anwendung , weil wir diese Route geändert haben. Aber wenn Sie das wollen, funktioniert alles perfekt wie zuvor. Aber jetzt haben wir Namensrouten in unserer Anwendung. Danke. 6. Benutzerdefinierte wiederverwendbare Widgets: Hallo. Willkommen zurück. Ähnlich wie bei einer benutzerdefinierten Schaltfläche erstellen wir auch ein benutzerdefiniertes Widget für Text. Da wir Text mehrmals anzeigen werden. Gehen Sie also zu Widgets in Widgets und erstellen Sie eine neue Datei mit einem Punktpunkt als Textpunkt. Lassen Sie uns zuerst Material importieren und einen benutzerdefinierten Text erstellen. Hier, das wird ein Text sein. Hier werden wir Text zurückgeben. Die erste Eigenschaft wird sein , was wird die Zeichenfolge sein? Lassen Sie uns das im Konstruktor fragen oder akzeptieren. Endgültiger String-Text. Dann müssen wir sowohl die Schriftgröße als auch die Schriftgröße angeben. Und nur zu Styling-Zwecken werden wir auch Schatten geben. Liste der Schatten. Schatten. Machen Sie jetzt diese Dinge erforderlich. A sind erforderliche Eigenschaften. Ordnen Sie sie dann dem Text zu. Die erste ist die Schnur, dann gibt es etwas Styling-Textil. Die Farbe wird weiß sein. Schriftstärke wird als Schriftstärke mit Punkt fett angezeigt. F-Größe entspricht der Pon-Größe, die im Konstruktor angegeben ist, und dann wird Shadows die Eigenschaft Shadows wie folgt sein Dies ist ein benutzerdefiniertes Widget für Text. Und dann werden wir auch Textdatei wigd mehrmals verwenden Lassen Sie uns auch dafür ein benutzerdefiniertes Widget erstellen. Erstellen Sie in Perücken einfach einen neuen Stapel und nennen Sie ihn benutzerdefinierten Text, Füllung, Punkt, Punkt , Import Material, größter Wert, weniger benutzerdefinierter Text ist fehlgeschlagen Nun, das sind Textfehler. Die Eigenschaften, die wir akzeptieren werden , sind zuerst Controller und dann letzte Zeichenkettenhinweis-Text Das letzte B ist fertig. Ist schreibgeschützt, s schreibgeschützt. Dies ist eine Eigenschaft, bei der der Benutzer das Textfeld nicht bearbeiten kann. Dies wird später verwendet. Aber jetzt lassen Sie uns all diese Dinge im Controller wiedergeben. Der Text muss nur leicht zu lesen sein. Geben Sie jetzt hier eine Textfüllung zurück. Der Controller ist schreibgeschützt . Die Eigenschaft ist schreibgeschützt. Und dieser Schreibschutz ist hier nicht erforderlich, er hat den Standardwert False. Also nur ein Text res. Das macht es für andere Textfüllungen falsch. Und hier Dekoration Eingabe, Dekoration. Die Pillenfarbe sollte die Hintergrundfarbe sein. Das Feld sollte wahr sein. Hinweistext sollte Hinweistext im Konstruktor sein. Dieser. Nun, das ist in Ordnung, aber ich möchte ein paar Schatteneffekte hinzufügen. Wickeln Sie das einfach mit einem Behälter ein, dann geben Sie hier etwas Dekoration, konstante Schachteldekoration, dann geben Sie hier ein paar Schachtelschatten. Die Schattenfarbe der rechten Box blau, der Blutradius S fünf, Spreizradius S zwei. Diese Dekoration erzeugt nur einen Schatteneffekt hinter oder um das Textfeld herum. Das ist es. Das waren die beiden benutzerdefinierten Widgets, die ich schreiben wollte. Im nächsten Video werden wir an der Benutzeroberfläche arbeiten, werden wir an der Benutzeroberfläche arbeiten Spielraum zu erstellen und Spielraum beizutreten. Danke. 7. Erstelle und trete der Spiel-Benutzeroberfläche bei: Hallo, willkommen zurück. Lassen Sie uns jetzt an der Benutzeroberfläche des Bildschirms „Raum erstellen“ arbeiten. Wir werden ein Text-Widget haben, dann ein Textfeld und dann eine Schaltfläche Also lasst uns anfangen, daran zu arbeiten. Hier im Gerüst. Im Körper werde ich es von Anfang an mit der responsiven Perücke umwickeln, weil ich möchte, dass es Einschränkungen in der Breite gibt Dann mache ich eine einzelne untergeordnete Scroll-Ansicht und dann wird Tile zum Container. Innerhalb des Containers wird ein Spielraum als Kosten in sts Punkt symmetrisch horizontal S 20 angegeben, dann wird das Kind des Containers eine Spalte sein, von der Hauptachsenausrichtung ihr Hauptachsenausrichtung Punktmitte, Querachsenausrichtung, Kreuzachsenausrichtung Punktmitte geben Querachsenausrichtung, Kreuzachsenausrichtung , dann die Kinder Das erste Element in den Kindern, das ich geben werde, ist ein benutzerdefinierter Text Hier wird Text erzeugt, die Raumgröße wird 70 sein. Zeigt an, dass ich mit nur einer Schatteneigenschaft mit einem Unschärferadius von 40 als Farben das Blau aufgeführt nur einer Schatteneigenschaft mit Unschärferadius von 40 als Farben das Blau So wie das. Speichern Sie es einfach jetzt, ich möchte sagen, weil ich zu diesem Bildschirm gehen möchte. Wenn ich also zur Schaltfläche „Erstellen“ gehe, dann gehen wir hier hin. Nein. Und dann in der benutzerdefinierten Schaltfläche hier. Sagen wir Navigator, Punkt des Kontextes, drücken Sie den Namen. Ich werde einen Raumplan erstellen Wenn ich zu C gehe, habe ich den Text, der den leuchtenden Effekt hat und der sieht sehr gut Gehen Sie jetzt wieder zum Text. Entschuldigung, zum Erstellungsbildschirm. Lassen Sie uns diesen Text schreiben. Wir verlangen, dass die benutzerdefinierte Textfüllung zuerst ein bestimmtes Größenfeld angibt, Höhe entspricht der Höhe und wir benötigen auch die Größeneigenschaft. Der Name des Controllers für die Textbearbeitung oben entspricht dem Namen des Controllers für die Textbearbeitung. Dann entsorgen Sie diesen Controller, um ihn zu entsorgen. Dann habe ich im Build eine Größeneigenschaft dieser Medienabfrage ähnelt, Punkt der Kontext-Punktgröße Und dann geben Sie dieses Größenfeld als Höhe Größe Höhe multiplizieren mit 0,08 Dann möchte ich ein benutzerdefiniertes Textfeld. Der Controller wird der Name Controller sein. H im Text wird der Spielername eingegeben. Unter diesem benutzerdefinierten Text wird erneut ein Größenfeld angezeigt. Das ist ein gewisser Abstand. Acht. Diesmal wird Größe und Höhe mit 0,05 multipliziert Und unter acht geben Sie ihm eine benutzerdefinierte Schaltfläche. Tippen Sie darauf und erstellen Sie Text. Speichere es und lass uns auschecken und sehen, unser Erstellungsraum sieht anständig aus. Wir haben auch die richtigen Schatten rund um das Textfeld. ähnliche Weise Lassen Sie uns auf ähnliche Weise auch die Benutzeroberfläche für Join Room erstellen. Kopieren Sie einfach alles aus Create Room und fügen Sie es ein. Ich möchte warten. Lass uns hierher gehen. Zuallererst werde ich die Build-Methode kopieren. B sowie Textbearbeitungs-Controller. Ich werde einfach alles hier einfügen. Dann sind alle fehlenden Bibliotheken okay. Jetzt muss der Spieler im Join-Raum seinen Namen sowie die Raum-ID eingeben. Also hier werde ich den endgültigen Textbearbeitungscontroller hinzufügen, Game ID-Controller entspricht dem Textbearbeitungscontroller. Dann entsorge das auch. Dann hier wird der benutzerdefinierte Text hier der benutzerdefinierte Text für den Raum sein , dieser wird derselbe Interplayer-Name sein, aber unter diesem benutzerdefinierten Feld, gib ein Feld mit einer Größe von 20 an, mach die Kosten darunter, erstelle wieder einen benutzerdefinierten Text, weil wir zwei Texte benötigen, Controller ist Game ID-Controller Der H-Text wird die Spiel-ID sein. Dann ändere es einfach in der Schaltfläche, um Mitglied zu werden. Wenn ich jetzt zum Hauptmenübildschirm gehe und dann auf dem Bildschirm „Beitreten“ hier auf dem Bildschirm „Beitreten“ tippe , schreibe ich den Routennamen. Okay. Wenn ich zurückgehe und auf Join Screen C klicke, haben wir den Join-Raum. Es fragt nach dem Spielernamen sowie der Spiel-ID. Also ist sowohl die Benutzeroberfläche fertig. Im nächsten Video werden wir auf der No GS-Serverseite arbeiten . Danke. 8. Einrichten eines Knotenprojekts: Hallo, willkommen zurück. Jetzt ist es an der Zeit, dass wir an unserem Backend arbeiten , damit die Raumdaten in der Datenbank gespeichert werden können, denn das werden wir natürlich tun, wenn wir einen Raum erstellen, müssen wir diese Daten richtig speichern. dazu zunächst zur Gehen Sie dazu zunächst zur Zange RG und laden Sie die empfohlene Version herunter Also ich habe es bereits heruntergeladen, also werde ich dir die Website hier zeigen Klicken Sie einfach entsprechend Ihrem Betriebssystem hier und laden Sie die von No GS empfohlene Version herunter. Und NPM wird automatisch ohne GAS installiert. Sie müssen es also nicht separat installieren. Und auch nur um zu überprüfen , ob kein JS erfolgreich installiert wurde oder nicht. Einfach den Terminalknoten V. C eintippen, ich habe die Version 18.15 0.0 Also ich verwende diese Version. Also ist kein GS installiert, dann lassen Sie uns ein No-GS-Projekt erstellen. Jetzt zeige ich Ihnen einfach, dass Sie im Stammverzeichnis, also im Ti Teco-Verzeichnis, einen Ordner-Namenserver erstellen Und natürlich können Sie einen beliebigen Standort wählen, aber ich erstelle den Server nur in unserer Plattenanwendung Denken Sie daran, dieser Server befindet sich außerhalb der Bibliothek. jetzt im Terminal Ändern Sie jetzt im Terminal einfach Ihren Standort in den Ordner auf den CD-Server und initialisieren Sie NPM, indem Sie NPM it y eingeben. Dadurch wird eine Paket-JS-Datei initialisiert, das ist ein das ist Jetzt benötigen wir einen Einstiegspunkt für unseren neuen GS-Server. Genau wie in Flutter ist es die wichtigste Punktdatei also im Serverordner Erstellen Sie also im Serverordner eine neue JavaScript-Datei namens Index do GS Und auch in der Paket-JCN-Datei. Sie können sehen, dass die Haupteintragsdatei standardmäßig Index do JS ist Sie können diesen Namen auch ändern. Nehmen wir an, das ist Server-DGS, dann machen Sie diesen Dateiserver auch zu JS Aber das ist nicht wichtig. Außerdem werden alle externen Pakete , die wir installieren werden in dieser Paket-JS-Datei angezeigt. Wenn wir über Pakete sprechen, installieren wir unser erstes Paket. Ich werde das Express-Paket verwenden. Express GS ist ein Framework , das auf keinem GS-Webserver aufbaut, um seine APIs zu vereinfachen und hilfreiche neue Funktionen hinzuzufügen. Es macht es einfacher, Anwendungsfunktionen mit Middleware und Routing zu organisieren Anwendungsfunktionen mit Middleware und also im Terminal im Geben Sie also im Terminal im Serverordner NPM Mit diesem Befehl können Sie alle externen Pakete installieren und sie im Paket oder in der JCN-Datei sehen Hier sind die Express-Abhängigkeit und alle Module, die sich auf die Express-Pakete beziehen, in den Nod-Modulen geschrieben und alle Module, die sich auf die Express-Pakete beziehen, in den Nod-Modulen geschrieben Das nächste Paket, das wir installieren werden, heißt Node Moon. Wenn wir also den Node-Server jetzt starten, wir, wann immer wir Änderungen am Code vornehmen, müssen wir, wann immer wir Änderungen am Code vornehmen, den Server stoppen und immer wieder neu starten, um das Update zu sehen. Das ist keine gute Entwicklungserfahrung. Um dieses Problem zu lösen, werden wir ein Paket verwenden, das als Node Moon bekannt ist. Von Anfang an ermöglicht es die Live-Aktualisierung des Servers , also wenn wir Änderungen vornehmen, und es wird der Server selbst neu gestartet und die Änderungen werden übernommen. Schreiben Sie im Terminal einfach NPM install G node one und drücken Sie die Eingabetaste Also hier installiere ich das mit der G that is G-Syntax, sodass es in Ihrem System installiert ist, nicht nur im Projekt, und Sie müssen es nicht immer wieder installieren Drücken Sie also die Eingabetaste und ich habe es bereits global installiert, also installiere ich es nicht erneut. Nachdem wir dieses Paket hinzugefügt haben, müssen wir ein Skript in die Paket-JN-Datei in dieser Datei schreiben . Hier haben wir das Skript. Ich brauche das Testskript nicht. Ich werde ein Skript namens Start schreiben, das den Codeknotenindex S ausführt, und für Dv wird es Nd ein Index sein Wenn wir also NPM run D eingeben, wird dieser Code ausgeführt und unser Server wird mit dem Numon-Paket ausgeführt Und wenn Sie diesen Server in der C- oder Railway-App bereitstellen , die sich auf dem Live-Server befindet, wird standardmäßig diese T-Methode aufgerufen Also da wird dieses Entwicklungs-Nudmon nicht funktionieren. Das nächste Paket, das wir installieren wollen, ist Bongos Wir werden die Mongo DVs-Datenbank verwenden , um unsere N JS-Anwendung zu verbinden Zu diesem Zweck werden wir also Bongos werden wir also Bongos Es wird bei der Erstellung von Datenmodellen und deren Speicherung in der Datenbank helfen und auch CRD-Methoden bereitstellen, die sehr einfach zu verwenden sind Also einfach wieder im Terminal, Code bewerten, NPM, Mong Gos MON GOOSE installieren Also das ist auch installiert. Hier haben wir Express, hier haben wir Mongo Das letzte Paket, das jetzt installiert werden muss, ist Socket IO. Wir werden das Socket IO-Paket verwenden , um eine Echtzeitverbindung herzustellen, was einfach bedeutet, dass das Frontend weiterhin alle Änderungen in der Datenbank abhört und diese widerspiegelt, ohne die App neu zu starten Einfach ausgedrückt, du kannst dir die Socheat-IO als Streams ansehen die Socheat-IO als , wenn du aus Feuerwachen kommst. Ve. Im Terminal NPM installieren Sie Socket IO. Dies ist der NPM-Paketname des Pakets. Das ist es Wir haben die drei Pakete installiert Express Mongo und Socket Dot IO Im nächsten Video werden wir mit der Arbeit an der API beginnen und sie auch mit der Mongo-DB-Datenbank weiterentwickeln . 9. Erstelle einen Express-Server: Hallo. Jetzt müssen wir als Erstes einen Server erstellen. Dafür müssen wir unserem Projekt mitteilen , dass wir Express verwenden werden. Gehen Sie also zu Index oder JS-Datei und importieren Sie alle erforderlichen Pakete. Zuallererst werde ich Constant Express to Require schreiben. So importieren wir Pakete in Java-Skript. Dann ist so gleich, IO zu benötigen, dann HTTP al, um das HTTP-Paket zu benötigen. Dies ist standardmäßig im No JS-Projekt. Wir müssen keine weitere Abhängigkeit für HTTP hinzufügen. Dann müssen wir das Express-Paket initialisieren und fügen einfach die Cost-App hinzu, die Express entspricht und das Das ist der Punkt, an dem wir es initialisieren. Dann Server erstellen und so ich. Ich werde schreiben Server nach STP Server erstellen soll Und die Express-App weitergeben. Und dann schreibe R IO in den Socket, und wir werden den Server an diesen Socket übergeben. Wann immer Sie Socket IO verwenden, erstellen Sie auf diese Weise einen Server. Aber wenn Sie Socket That Io nicht verwenden, müssen Sie diese beiden Zeilen nicht schreiben. Direkt können wir die App machen, um zuzuhören und so. Dann ist der nächste Code, den ich will, eine Middleware. Und ich hoffe, du weißt, was Middleware ist . Es ist einfach richtig Es manipuliert und manipuliert Daten vom Client zum Server kommen Unabhängig davon, welche Daten vom Client zum Server kommen, können Sie den Mittleren Weg verwenden, um zuerst diesen Mittleren Krieg zu durchlaufen und dann unseren Server zu erreichen Also was ich will ist, dass ich App Dot benutze Express Dot JS. Was macht es? Es konvertiert alle eingehenden Daten in das Jasen-Formular Das ist also eine Pflichtfüllung. Sie können auch ein Paket namens Body Parser verwenden . Es liegt an dir Aber offensichtlich ist dieser Express-Hund ein Prozess. Als Nächstes benötigen wir einen Port , um unseren Server zu starten. Sie können hier direkt 3.000 schreiben. Wenn Sie jedoch planen, diesen Server bereitzustellen, schreiben Sie einfach process env, und wenn der Wert Null ist, verwenden Sie 3.000 Das heißt, wenn Sie diesen Server auf Hiroku oder einem anderen Live-Server bereitstellen , wird dieser Code ausgeführt, weil die No-JS-Bereitstellung so funktioniert, und in der Entwicklungsphase werden diese 3.000 bis 3.000 der Wert des Ports sein Schreiben Sie jetzt einfach Server Listen. Wir werden auf den Port hören , der diese Portvariable ist. Dann ist die nächste die IP-Adresse. Wir werden 0,0 0,0 schreiben, das sind vier Nullen Und das bedeutet, dass jeder auf die App zugreifen kann und nicht nur meine eigene IP-Adresse Und dann schreibe in der Callback-Funktion einfach das Punktprotokoll für die Konsole. Dann verwende ich Bat, das ist die Taste auf Ihrer Tastatur über dem Tab Button, den Mantel findest du hier. Wir können einfach sowohl Zeichenketten als auch Variablen verketten. Ich werde einen Pot hinzufügen, dann werde ich diese Port-Variable Und speichere es. Nein. Tut mir leid, das ist nicht Ja. Speichern Sie es. Um den Server im Terminal laufen zu lassen, löschen Sie ihn. Und jetzt hier rechts NPM, führe das Innere des Serverordners aus. Und sieh dir an, dass der Knoten Moon neu gestartet wurde und S auf P 3.000 läuft Und jetzt, nehmen wir an, wenn ich irgendwelche Änderungen vornehme und sie speichere, wird der Server automatisch neu gestartet Das ist also die Macht von Nodemon. Das war's also für dieses Video. Wir sehen uns in der nächsten Sitzung. Danke. 10. Setup MongoDB Atlas: Hallo, willkommen zurück. In diesem Video werden wir also an unserer Mongo DB-Datenbank arbeiten Zuallererst werde ich unseren Server einfach mit Control C beenden . Öffnen Sie dann Ihren Browser und gehen Sie zu Ihren Browser und gehen Sie Mo DV Slash Wir werden eine Cloud-Datenbank verwenden, die Atlas heißt Dann melden Sie sich hier einfach an oder registrieren Sie sich Ich habe bereits ein Konto und werde mich direkt anmelden, aber natürlich müssen Sie sich für ein neues Konto anmelden. Wenn Sie Wenn Sie ein neues Konto erstellen, werden Sie aufgefordert, Ihrer Organisation einen Namen zu geben und dort die Option Wong DB Atlas auszuwählen Also er, ich habe den Namen meiner Organisation als Raja G angegeben . Das ist alles. Und danach wirst du zu diesem Tag geschickt. Sie können das Video pausieren, wenn Sie möchten. nach einer Organisation hier Klicken Sie nach einer Organisation hier auf ein neues Projekt. Geben Sie dann einen Projektnamen ein. Ich nenne es Tack to und klicke auf Weiter. Dann klicken Sie einfach auf Projekt erstellen. Dann müssen wir hier eine Datenbank erstellen, auf diese Schaltfläche klicken, eine Datenbank erstellen. Dann verwende hier eine Vorlage, wähle aus. O das ist freie Null. Wählen Sie A S. Wählen Sie die Region, die U am nächsten ist. Ich werde den Clusternamen nicht ändern. Wenn Sie möchten, können Sie ihn ändern. Es liegt an dir. Ich belasse es einfach bei Cluster Null und klicke dann auf Erstellen. nach dem hier sicher, dass Sie einen neuen Benutzernamen und ein neues Passwort für Ihre Datenbank erstellen . Diese Anmeldeinformationen werden später benötigt. Also schreibe ich einfach den Benutzernamen und hier ist das Passwort eins, zwei, drei, f. Das war's. Und klicke auf Benutzer erstellen. Wählen Sie hier die lokale Umgebung. in der IP-Adresse Geben Sie in der IP-Adresse die IP-Adressen 0,0 0,0 ein, dann wieder Null, dann Null. Diese IP-Adresse bedeutet natürlich, dass jeder auf diesen Server zugreifen kann, denn wenn wir eine Anwendung erstellen, möchten wir natürlich wenn wir eine Anwendung erstellen, , dass andere Benutzer sie verwenden. Wenn wir es also nur auf meine eigene IP beschränken, kann nur ich meine Spielanwendung verwenden. Einfach anklicken, fertig stellen und schließen, dann auf klicken, zur Datenbank gehen. Sie können sehen, dass unser Cluster bereit ist. Im nächsten Schritt benötigen wir eine Verbindungszeichenfolge, um unsere App zu verbinden. Das heißt, die Brief-App mit dieser Datenbank zu verbinden. Klicken Sie einfach auf die Schaltfläche Verbinden in der Nähe des Clusters. Wählen Sie dann den Bongo VS-Code und die Verbindungszeichenfolge. Okay. Okay. Das ist es. Gehen Sie zu Ihrem VS-Code-Editor und lassen Sie uns nun eine Verbindung zwischen unserer Flutter-App und Mongo Entschuldigung, nicht die Flutter-App, ich werde sagen, die neue GS und diese Also unter diesem App-Punkt. Zuallererst müssen wir das Mongo-Paket benötigen. Mongos mögen das. Dann lassen Sie uns hier die Verbindungszeichenfolge einfügen Der Benutzername ist korrekt. Aber hier müssen wir auch das Passwort schreiben, wie hier Ra eins, zwei, drei, vier. Und ganz am Ende werde ich den Datenbanknamen entsprechend schreiben. Das heißt, der Cluster ist anders, aber innerhalb eines Clusters wird die Datenbank intakt sein. Danach schreibe einfach mongoose dot connect. Wir müssen diese Datenbank übergeben und nachdem sie verbunden ist, erhalten wir einen Anruf und hier schreiben wir einfach Mongo DB DB-Verbindung war erfolgreich und wir werden auch einen Wenn es einen Fehler gibt, werde ich den Fehler in der Konsole protokollieren Das ist es. Speichern Sie es. Wenn ich jetzt zum Terminal gehe und mit der rechten Maustaste NPM Dev starte Dann habe ich den Server laufen lassen und die Mongo Divi-Verbindung Unser NJ-Server ist also erfolgreich mit der Mongo DV-Datenbank verbunden . Danke. 11. Installiere Socket-IO-Client: Hallo. Jetzt ist es an der Zeit, dass wir an der Konfiguration von Socket IO arbeiten. Wir werden das Paket Socket IO Client in Flutter verwenden , um eine Verbindung mit Sockets auf dem Server Das wird also auf der Client-Seite funktionieren. Also hier werde ich zuerst den Server stoppen, dann das Verzeichnis in das Hauptverzeichnis ändern und Flutter Pub einen Socket-IO-Client schreiben Flutter Pub einen Socket-IO-Client Wir haben die Abhängigkeit. Wenn Sie zur Prospect Dot YML-Datei C wechseln, haben wir die Flatter-Abhängigkeit des Socket-IO-Clients Dann müssen wir auf Client-Seite an der Socket-Funktionalität arbeiten Das ist das Flatter-Projekt, gehe zum Ordner, erstelle einen neuen Ordner namens resources Und erstellen Sie darin einen Punktpunkt für den Datei-Socket-Client. Importieren Sie zunächst den Paket-Socket-Client, und wir werden ihn als IO importieren. Dann werden wir eine Klasse erstellen, die eine Instanz des Socket-IO-Clients zurückgibt. Es wird Singleton sein. Es wird also nur eine Instanz erstellt. Hier Klasse Socket-Client. Dann der IO-Socket-Datentyp und der Name Socket, dann die ästhetische Variable, was die Socket-Client-Instanz ist, und das ist privat Das ist privat, Sie werden verstehen, dann machen Sie den Konstruktor mit dieser internen Komponente als privat konstruiert . Jetzt initialisieren Sie hier einfach den Socket, welcher Socket IO IO Wir müssen die IP-Adresse des Servers übergeben. Jetzt können Sie hier nicht einfach den lokalen Host 3.000 schreiben. Denn wann immer wir einen Emulator oder Ihr echtes Gerät verwenden , kennt es dieses System nicht Das ist das MACOS. Sie müssen also die IP-Adresse Ihres Systems angeben. Also in Windows war es wohl IP-Konfiguration oder so ähnlich. Sie können es einfach selbst suchen. Gehen Sie in macOS einfach zu den Systemeinstellungen, dann zu Netzwerk, sorry, Netzwerk-WLAN, dann, mit welchem WLAN Sie verbunden sind, klicken Sie einfach auf Netzwerkeinstellungen. Und hier bekommst du deine IP-Adresse, kopiere sie einfach und füge die IP-Adresse ein. Schreiben Sie am Ende 3.000 ss. Das ist der Hafen. also später Wenn Sie also später Ihren Server bereitstellen möchten, müssen Sie den Serverlink in dieser IO hinzufügen. Und wir müssen diesem IO-Client einige Dinge geben. Einfach genau hier. Transport als Trap wie Socket in einem Array und dieser Socket. Vergewissern Sie sich, dass die Schreibweise stimmt. Und das werden Transporte sein. Und dann wird Auto Connect falsch sein. Und dann einfach die richtige Buchse. Das ist nicht Null und verbinde den Socket. Erstellen Sie dann eine Getter-Instanz , die einen Getter für diese Instanzvariable erstellt , sodass immer dann, wenn jemand versucht , eine Instanz dieses Socket-Clients zu erstellen, er immer diese eine bestimmte Instanz erhält Einfach Socket Get Instance Wenn die Instanz Null ist, dann schreibe Socket Internal, initialisiere sie und kehre dann zur Instanz zurück Ich weiß also, dass dieser Code etwas knifflig sein kann. Bevor Sie weitermachen, können Sie, wenn Sie möchten, nach Möglichkeiten suchen, wie Sie eine einzelne Stadt in Flatter erstellen alles verstehen Mit dieser Art der Google-Suche werden Sie innerhalb von fünf bis zehn Minuten Aber verstehen Sie einfach , dass dieser Code einfach eine Instanz erstellt und sie zurückgibt, wenn Sie danach gefragt werden, und nur eine Instanz gesendet wird. Das war's für dieses Video. Im nächsten Video werden wir daran arbeiten, Methoden für die Sockets zu erstellen. Danke. 12. Socket-Methodenklasse: Hallo, willkommen zurück. Jetzt haben wir das Socket- oder Client-Paket. Außerdem benötigen wir Funktionen, um mit dem Socket zu interagieren. Lassen Sie uns dafür eine separate Klasse für alle Methoden erstellen , die sich auf der Client-Seite auf Socket beziehen . hier im Ressourcenordner eine Datei, Erstellen Sie hier im Ressourcenordner eine Datei, die Socket-Methoden tun. Zunächst müssen wir importieren. Wir müssen den Socket-Client importieren. Das ist die eine Woche, die gerade im letzten Video erstellt wurde. Und dann schreibe Klassen-Socket-Methoden. Erstellen Sie dann eine Instanz des Socket-Clients. Der Socket-Client entspricht der Socket-Client-Instanz. Siehst du, wir initialisieren nicht so und so. Wir rufen einfach den Instance-Getter auf. Das ist eine private Variable. Schreiben wir den Socket , der vom Socket-IO-Client kommt. Und ich werde nur in dieser Datei einen Getter für den Socket-Client erstellen nur in dieser Datei einen Getter für den Socket-Client Socket-Client. Und das sollte ein Instanz-Socket wie dieser sein. So gelangen Sie in die Instanz des Socket-Clients. Dann erstellen wir unsere erste Methode zum Speichern neuer Raumdaten. D Erstelle den Raum Ting, wir werden nach dem Spielernamen fragen. Wenn der Spielername dann nicht leer ist , Sie einfach ein Ereignis , damit der Server es sich anhören kann. Ich schreibe einen zweiten Client, der einen Namen ausgibt , der Eventname wird erstellt oder dann übergeben wir den Datenspielernamen als Spielernamenvariable. Aber so arbeiten wir mit Sockets. Wann immer Sie möchten, dass ein Server eine Aktion ausführt, gebe ich ein Ereignis aus und übergebe Daten. Dann werden diese Daten an den Server übergeben, und dann kann der Server diese Daten verwenden und in der Datenbank speichern . In den meisten kommenden Videos werden wir also nur daran arbeiten, werden wir also nur daran arbeiten zuerst entweder vom Server oder vom Client aus zu senden. diesem Fall senden wir ein Ereignis vom Client aus, und der Server hört es sich an. Und wenn wir ein Ereignis vom Server ausgeben, hört der Client es sich an. Das wird die ganze Logik hinter diesem Takto sein. Sie müssen sich mit diesen Terminologien vertraut machen. Das ist es. Das war ein sehr kurzes Video. Im nächsten Video werden wir auch auf der Serverseite am Socket IO arbeiten . Danke. 13. Socket-Server-Verbindung: Hallo. Jetzt müssen wir auch den Node-Server konfigurieren, um diese Socket-Verbindung herzustellen und Ereignisse abzuhören. Gehen Sie also zur Indexpunkt-JS-Datei im Serverordner. Hier. Wir haben die Ovariable, das ist eine Buchse Schreiben Sie einfach io dot auf die Verbindung. Das heißt, wenn die Verbindung erfolgreich ist, holen wir uns einen Socket und schreiben dann als erstes den Konsolen-Dot-Log-Socket, der schreiben dann als erstes den Konsolen-Dot-Log-Socket verbunden ist. Und dann, wie ich in der Socket-Methode des Clients gesagt habe, geben wir diesen Create Room aus. Also hören wir uns das Ereignis an und wir könnten es einfach machen, aber socket on create room, das ist der Name des Ereignisses. Wenn das ausgegeben wird, erhalten wir hier die Daten, also den Spielernamen , da ich diesen Spielernamenschlüssel gesendet habe. Ich destrukturiere es hier so und schreibe einfach den Spielername für das Konsolenprotokoll Also nur zu Testzwecken machen wir es. Gehen Sie hier auch zum Bildschirm „ Raum erstellen“. Lassen Sie uns die Socket-Methode binden, um einen Raum zu erstellen. Erstellen Sie ganz oben eine Instanz von Socket-Methoden. Socket-Methoden. Socket-Methoden stehen für Socket-Methoden wie diese. Dann schreibe in den benutzerdefinierten Button von Create Room hier einfach die Socket-Methoden create und der Spielername lautet Roller. Das ist es. Das war das Einzige, was wir tun mussten. und führen Sie dort NPM aus, Gehen Sie nun zunächst im Terminal zum Serverordner um unseren Node-Server zu starten Außerdem müssen Sie Ihre Anwendung auf Ihrem Gerät ausführen Ihre Anwendung auf Ihrem Gerät , damit Sie die Verbindung zwischen dem Frontend und dem Backend überprüfen können Verbindung zwischen dem Frontend und dem Backend Es lässt es hier eine Verbindung herstellen. Also werde ich einfach nach Schema schreiben und nicht mit Alpha beginnen. Was? Okay. Ich erinnere mich. Du musst HTTP hinzufügen. Hier im Socket-Client müssen Sie HTTP hinzufügen, müssen Sie HTTP hinzufügen da es sich offensichtlich um eine Serververbindung handelt. So schreiben wir google.com einfach so. Klicken Sie einfach erneut auf D. Okay. Wenn ich jetzt auf Create through, S klicke, ist der Socket Connected da. Und wenn ich als Spielernamen schreibe und auf Erstellen klicke. Sehen Sie, dass diese Daten erfolgreich an den Server gesendet wurden, und wir können sie im Terminal sehen , so wie wir es gemacht haben, Consol Dot Log Das heißt, wir haben erfolgreich eine Socket-Verbindung zwischen dem Frontend und dem Backend hergestellt zwischen dem Frontend und dem Backend Das war's also dafür. In den kommenden Videos werden wir anhand der Modellierung Raumdaten und Schemata und viele andere Dinge erstellen Raumdaten und Schemata . 14. Erstellen von Raummodell: I. Also unsere Steckdose funktioniert. Und als Nächstes müssen wir, wann immer wir einen Raum erstellen, die Daten in Mongo DV speichern Wir werden die Daten in einer Sammlung mit dem Namen „Räume“ speichern. Um also Daten für die Sammlung von Räumen zu modellieren, erstellen Sie einen neuen Ordner auf dem Server, der sich hier befindet, erstellen Sie einen neuen Ordner namens Models. Und erstellen Sie darin eine Datei Room Dot JS. Wir werden Mongoose für die Datenmodellierung verwenden. An oberster Stelle benötigen wir also Mongoose, dann müssen wir ein Schema für das Raummodell erstellen Schema bedeutet, welche Pillen da sein werden und welche Datentypen oder Eigenschaften Schreiben Sie also ein Raumschema. Das ist ein Variablenname, dann ein neues Mongo-Punktschema wie dieses Darin befand sich ein Javascript-Objekt. Und jetzt geben wir uns die Fehler, die ein Raum haben wird. Zuallererst wird ein Zimmer belegt sein. Belegungsart wird nummeriert, in diesem Feld kann nur eine Zahl gespeichert werden und die Standardbelegung ist zwei, da nur zwei Spieler in einem Raum spielen dürfen. Das ist ein Unentschieden, das Spiel erlaubt nur zwei Spieler. Diese Belegung bedeutet also , wie viele Spieler in einem Spielzimmer sein können. Okay. Dann haben wir Max. Runden. Auch hier gilt: Typ ist Zahl, Typ ist Zahl, und die Standardeinstellung ist Drei. So lange wird das Spiel laufen , danach erreichen wir die Top Acht. Denken Sie also daran, nehmen wir an, wir spielen eine Partie Ditto Die erste Runde gewinne ich, dann kriege ich einen Punkt Dann wieder, wenn ich erneut mit demselben Spieler auf Spielen klicke . Auch in der nächsten Runde erhalte ich zwei Punkte, wenn ich gewinne. In einfachen Worten, wer auf der Strecke drei Punkte bekommt, wird es die letzte Runde sein Es wird also Best of Three sein. Das ist es. Kein Best of Three. Du musst drei Punkte bekommen. Eine Runde dann. aktuellen Runde müssen wir natürlich wissen, müssen wir natürlich wissen welche Runde die Benutzer spielen, was erforderlich ist über die Typnummer, die voreingestellt ist. In dieser Runde sind wir jetzt im Spiel. Dann als Nächstes. Als Nächstes werden wir auch Spielerinformationen haben. Offensichtlich, wer sind die beiden Spieler, die pingen? Es wird ein Array sein. Und jetzt Mmm. Wir müssen Spielerdaten als ausgefülltes Innenraummodell speichern Spielerdaten als ausgefülltes Innenraummodell Entweder können Sie hier direkt Spielereigenschaften im Raumschema definieren . Ich nehme an, Spieler, dann wird es eine Liste sein. Und dann wird es wieder ein Spielername wie dieser, dieser, dieser sein. Entweder du kannst das Schema hier erstellen, aber ich bevorzuge einen saubereren Ansatz , bei dem eine separate Datei für den Spieler erstellt wird. Denken Sie daran, dass dies kein Modell sein wird, sondern nur ein Schema. Im Player des Modells. Andererseits benötigen die Mongos ve Oh, tut mir leid Es sollte nicht Punkt Punkt sein. Es ist also eine Angewohnheit von mir als Plotentwickler. Mos. Dann lass uns die Spieler ähnlich wie Mos haben und da drin brauche ich zuallererst den Spielernamen. Es wird vom Typ string und trim auf true gesetzt, das ist kein zusätzliches Leerzeichen in den Buchstaben. Angenommen, er kann nicht Leerzeichen und Leerzeichen schreiben. Es wird auf nur ah gekürzt. Dann die Socket-ID des Spielers, das heißt, er wird offensichtlich eine Verbindung zum Socket herstellen, sodass wir seine Socket-ID abrufen können Klingeln, das war's, dann Punkte. In jeder Runde erhält er also einen Punkt mehr Die Standardeinstellung ist Null. Geben Sie dann p ein. Das ist etwas anderes. Das ist ein Symbol, du kannst sagen, ein Symbol, entweder X oder so. Also werden wir das hier speichern, damit es einfacher Überblick darüber zu behalten, wer der Gewinner ist und alles andere. Geben Sie Zeichenfolge ein. Exportieren Sie jetzt einfach dieses Spielerschema und exportieren Sie es, damit wir es in die Raumdatei importieren können . Der Raum ist da. Diese Spieler werden eine Reihe von Spielerschemas enthalten, und wir wissen, dass es 22 Spieler geben wird. Als Nächstes müssen wir überprüfen, ob ein Raum miteinander verbunden werden kann oder nicht, was einfach bedeutet, dass nach zwei Spielern gespielt wird was einfach bedeutet, dass nach zwei Es wird falsch sein. Also werden wir schreiben, dass wir uns so anschließen. Der Typ ist Boolean und die Standardeinstellung ist true. Das heißt, ganz am Anfang können die Leute diesem Spielraum beitreten Und wenn es zwei Personen gibt, ist es offensichtlich, dass die erste Person diesen Raum erstellt, und wenn die zweite Person beitritt, dann ist das falsch. Und wir müssen überprüfen, welcher Spieler an der Reihe ist, und das wird sich mit jeder Runde ändern. Also dreh dich einfach um und wir werden das Spielerschema hier sehen. Und wer auch immer Platz schafft , der Spielerindex wird Null oder Eins sein. Das hilft bei der Nachverfolgung von Zügen. Diese letzte Eigenschaft, dieser Turn-Index, erfüllt diese Aufgabe. Im Moment sind Sie vielleicht etwas verwirrend, aber am Ende werden Sie verstehen, dass dies die Verwendung dieses Feldes ist und jedes Feld seinen Nutzen haben wird. Jetzt haben wir das Schema hier. Vor dem Export müssen wir das Schema in ein Modell konvertieren. Schreiben Sie einfach, dass das Kosten-Ru-Modell dem Mongos-DO-Modell entspricht dem Mongos-DO-Modell Ich werde es R nennen und das Schema wird so sein und es einfach exportieren Das ist es. Das ist unser Zimmermodell. Ich hoffe ihr habt also alles verstanden, was jedes Feld macht, Belegung, Mx umgibt. Zumindest sollten Sie jetzt wissen, wofür dieses Feld verwendet wird . Also das ist es. Für dieses Video. Wir sehen uns im nächsten Video. Wir werden an Ereignissen arbeiten, bei denen Ereignisse an Sockets gesendet werden. Danke. 15. Arbeite an CreateRoom-Event: Hallo. Also haben wir das Raummodell fertig. Lassen Sie uns daran arbeiten, was passiert, wenn das Ereignis „Raum erstellen“ ausgelöst wird. Ich hoffe, Sie erinnern sich an die Socket-Ereignisse, wenn der Benutzer auf Create room klickt, dann wird dieses Ereignis vom Client ausgegeben und zum Server weitergeleitet Jetzt müssen wir also serverseitig arbeiten , um uns dieses Ereignis anzuhören Gehen Sie also einfach hier zum Indexieren des JS. Und wir werden es nicht protokollieren. Zuallererst müssen wir diese Funktion zu einem Syncins machen Da Datenbankfunktionen aufgerufen werden, packen Sie alles in einen Catch-Block C-Log-Fehler. Jetzt im Tri-Blog. Lass uns daran arbeiten. Das ist unser Zuhörer. Zunächst erstellen wir ein Raumobjekt. Erstellen Sie hier ein Raumobjekt. Wir haben das Modell, also schreiben Sie einfach dass R dem neuen Raumobjekt entspricht. Dann erstellen wir pro Schema ein, dieser Spieler entspricht. Wir wissen, welche Füllungen erforderlich sind Socket-ID ist die Socket-ID. Wir werden die Socket-ID aus dieser Variablen abrufen. Socket diese ID. Dann wird der Name der Spielername sein. Es kommt hier vom Client selbst, dann vom Spielertyp. Wird x sein. Da dies der Spieler ist, der das erstellt, erhält er das Symbol x. Dann fügen wir Eigenschaften hinzu, das sind Werte im Raumobjekt . Jetzt haben wir im Raumobjekt einfach ein Spielerfeld, das eine Liste ist. Deshalb werden wir den pH-Wert der Spieler und diesen Spielerwert aufschreiben . Das liegt daran, dass, wenn du hier nach Rom gehst, eine Liste mit Spielerschemas akzeptiert wird. Wir müssen dieses Schema erstellen und es hierher schicken. Okay. Dann ist als Nächstes Raum N entspricht dem dran. N entspricht dem Zug des Spielers , der den Raum erstellt. Und das ist einfach ph. Da es ein Array ist. Deshalb verwenden wir Push und nicht das Gleichheitszeichen. Speichern Sie dann Rom Theta in Mongo d V mit diesem Befehl. Es ist eine sehr einfache Variable, die einem Speichern entspricht . Das ist es. Oh, dann müssen wir die Raum-ID speichern, die nach dem Speichern zurückgegeben wird, das ist einfach der Speicher-ID-Wert. Und diese Unterstrich-ID wird immer von Mongo DB erstellt oder zurückgegeben , wenn ein neues Dokument erstellt wird Diese Unterstrich-ID ist standardmäßig Nach dem Speichern. Also hier ist einfach die Konstante Rom ID gleich R Punkt und die Punkte-ID Punkt zwei Zeichenfolge Jetzt, nachdem es einfach Socket geschrieben hat, die ID dieses Raums hinzugefügt, was bedeutet, dass dieser Socket zuhört Aktiviert, wenn nur derjenige Ereignisse in diesem Raum ausgibt, die ID Da es also offensichtlich sein wird , können viele Spieler gleichzeitig spielen Ich möchte also nicht annehmen, dass , wenn ein Spieler darauf tritt, der andere Spieler, der nicht einmal in dem Raum spielt , das Event bekommt. Deshalb müssen wir das sicherstellen. Und jetzt werde ich endlich IO verwenden, um die ID zu ROM-IDs zu verwenden , die ausgeben. Jetzt werde ich ein Ereignis vom Server ausgeben. Rom wurde erfolgreich erstellt und ich werde die Raum-ID senden. Entschuldigung, Raumdaten, die sich bereits im JavaScript-Objektformular befinden, da ich weiß, dass Daten von Bongo dV im Javascript-Objektformular enthalten Das ist das JS-Format. Und hier teilen wir dem Kunden mit, dass der Raum erstellt wurde und Io Daten an alle in diesem Raum sendet, während Socket Daten an Sie sendet. Ich meine also, nehmen wir an, es war überall Socket Dot Join, und wenn ich Socket Dot M schreibe, bekommt nur die Person , die diese Anfrage sendet, das Ereignis. Aber nehmen wir an, in der Raum-ID gibt es drei Spieler. Von hier aus erhalten alle drei Spieler dieses Event, sodass wir die Änderungen auf allen Bildschirmen vornehmen können. Denken Sie daran, wenn ich Socket Dot M verwende, dann erhält nur die Person, die das sendet , also nehmen wir an, wer diesen Raum erstellt, das Update. Das war ein Unterschied. Und so hören wir uns Ereignisse an und auf ähnliche Weise geben wir Ereignisse zu. Und im nächsten Video werden wir uns dieses Erfolgsereignis vom Kunden anhören dieses Erfolgsereignis , der die flachere Seite hat. 16. Raum-Erfolgs-Event-Listener: Hallo. Nachdem wir erfolgreich einen Raum erstellt haben, werden wir den Spieler zum Spielbildschirm weiterleiten. Gehen Sie also zum Lippenordner auf dem Bildschirm und erstellen Sie einen neuen Punkt auf dem Bildschirmspielbildschirm. Hier einfach Material importieren und dann ein vollständiges Grid anzeigen. Bildschirm. Ich werde den Namen der Route hier haben. Die Zeichenfolge Route-Name entspricht Slash-Spiel Dann gib ihm einfach ein Gerüst und gib ein Gerüst zur Körpermitte zurück Das Kind gibt ihm einen Text auf dem Spielbildschirm. Das ist vorerst nur vorübergehend. Spielbildschirm. Speichern Sie es und registrieren Sie diese Spielroute in der Hauptpunktdatei. Geben Sie hier einfach unter dem Bildschirm „ Spielraum beitreten “ den Namen der Route und der Benutzer wird zum Spielbildschirm weitergeleitet Als Nächstes hören wir einfach auf dem Server zu, um das Raumereignis zu erstellen Ähnlich müssen wir auf der Flatter-Seite zuhören, um ein Erfolgsereignis für den Raum zu erstellen Lassen Sie uns hier unter dem Listener create void create success eine neue Funktion innerhalb der Socket-Methoden void create erstellen Und wir werden den Benutzer nach dem Glockenkontext fragen dem Glockenkontext , damit wir einen Navigator verwenden können Jetzt schreiben wir mit dem Socket-Client einfach auf den Eventnamen is create room success. Und wir werden die Raumdaten so abrufen , wie wir sie uns auf der Serverseite merken. Drucken Sie dann einfach die Raumdaten aus und verwenden Sie nicht die Kontexte, sondern den Namen der Route auf dem Spielbildschirm. Dies ist ein Listener für den Erfolg beim Erstellen des Raums, wodurch der Benutzer zum Spielbildschirm weitergeleitet wird Offensichtlich müssen wir diesen Listener ausführen. Gehen Sie hier im In-Zustand zum Erstellen des Raumbildschirms. Im Init-Zustand rufen wir Socket-Methoden auf, die einen Raum-Listener erstellen, und übergeben den Kontext Das ist es. Wann immer es dieses Socket-Ereignis kontinuierlich ausführt oder abhört und wann immer es ausgelöst wird , werden wir es tun. Lass es uns testen Wenn ich hierher gehe, klicke ich auf Raum erstellen. Ich gebe Rah den Namen des Zimmers. Jetzt lösche ich einfach das Terminal und klicke auf Erstellen. L Mal sehen, was passiert. Okay, Rom ist nicht definiert. Wir haben einen Fehler im Server. Okay. Bei der Erstellung dieses o habe ich vergessen, F für „ habe ich vergessen, F für „ erforderlich“ und dann für „Modelle“ zu wählen und Speicherplatz wie diesen zu benötigen. erforderlich dann für „Modelle“ zu wählen und Speicherplatz wie diesen zu benötigen. Lass es uns speichern. Es ist auch die App. Sagen wir, was passiert. Funktioniert es oder noch einmal, ich hole mir etwas T. Wir wurden zum Spielbildschirm navigiert, und im Terminal kannst du alle Daten sehen Das sind Belegungsspieler, maximale Anzahl an Runden, welche Spieler die Sache mit den Bällen drehen Und wir haben auch diesen unterstrichenen ID-Wert. Das bedeutet, dass unser Create Room-Event funktioniert und wir jetzt einen neuen Raum in unserer Mongo DV-Datenbank erstellen können einen neuen Raum in unserer Mongo DV-Datenbank Sie können also sagen, dass es ein Erfolg für uns ist, weil es uns zumindest die Grundlage gibt, und jetzt können wir an der Anwendung weiter daran arbeiten Danke. 17. Raumanbieter-Kurs: Hi, willkommen zurück. Jetzt ist es an der Zeit dass wir auch das State Management installieren und uns darauf konzentrieren. Wir werden also das Provider-Paket in Flutter verwenden , um den Status in unserer Anwendung zu verwalten , anstatt Daten über Konstruktoren zu übergeben Dafür können Sie also ein P-Terminal in den Routenprojekten Ich werde es einfach toppen oder du kannst ich einfach den Anbieter hier angeben. Der Anbieter sollte zuerst kommen und dann installieren. Entweder können Sie Flutter Pub als Anbieter in Ihrem Terminal verwenden , oder ich kopiere das einfach und gehe zur Pubs-Dot-Yaml-Datei und füge es hier wie folgt in die Abhängigkeiten H, lassen Sie mich auch nebenbei sprechen. Da es sich um ein neues Paket handelt, werde ich die Flatter-Anwendung beenden und erneut ausführen Geh, um erneut zu beginnen. Auch im Terminal werde ich in den Serverordner wechseln und PM das Okay ausführen das . Wir werden die Raumdaten im Provider speichern , damit sie in der Anwendung einfach abgerufen werden können. Erstellen Sie im Ordner einen neuen Ordner mit dem Namen providers und schreiben Sie darin room eta provider do. Lassen Sie uns Material importieren und wir werden die Klasse Rota Provider Extends Change Notifier Provider schreiben Klasse Rota Provider Extends Change Notifier Provider Ich hoffe, Sie kennen dieses Konzept. Und tut mir leid, das sollte ein Change Notifier sein. Ja. Und das kommt aus der Materialbibliothek. Zuallererst die ersten Daten, die wir haben werden, sind dynamische Raumdaten. Wir wissen, dass Daten im JCN-Format vom Server kommen JCN-Format vom Server Dann ist das eine Clave-Variable , mach einen Getter dafür, string dynamic get Zimmerdaten wie diese. Und natürlich benötigen wir eine Setter-Funktion, oder sagen wir, eine Aktualisierungsfunktion , um die Raumdaten zu aktualisieren Wir erhalten dynamische MAP-Zeichenkettendaten dynamische , Raumdaten sind aktive Daten und benachrichtigen alle Zuhörer Ich sage noch einmal, dass ich hoffe, dass Sie das Konzept der Provider-Statusverwaltung kennen und wissen, wie wir Änderungen vornehmen und alle Zuhörer benachrichtigen Als Nächstes müssen wir uns registrieren , um sie innerhalb der Mined Dart-Datei bereitzustellen Wickeln Sie das Material hier mit einem starren Etikett und es wird der Provider geändert Und im Inneren gibt es uns Kreativität im Kontext. Und hier müssen wir den Anbieter angeben , der Raumdatenanbieter ist. Und in den meisten Fällen werden Sie mehrere Anbieter verwenden. In unserer Anwendung wird es jedoch nur einen Anbieter geben. Deshalb verwende ich hier direkt den Change Notifier Provider. Lassen Sie abschließend nach, wenn der Raum erfolgreich erstellt wurde und der Client das Erfolgsereignis „Raum erstellen“ abhört Führen Sie dann den Raum Raumdaten zu aktualisieren, um Daten im Anbieter zu speichern Gehen Sie also zu den Socket-Methoden. Sie den Raum hier erfolgreich erstellen möchten, schreiben Sie einfach den Punkt des Kontextes für den Anbieter. Wir haben hier den Kontext und den Anbieter, den wir abhören wollen Zimmerdatenanbieter und stellen sicher, dass ich nicht möchte, dass die Änderungen abgehört werden. Rufen Sie dann einfach Update Room Data und wir senden die Raumdaten, die vom Server kommen. Das ist es also. Das war's für dieses Video. Im nächsten Video werden wir auch an der Funktionalität des Zusammenfügens von Räumen arbeiten . Danke. 18. Join Room Listener: Hallo. Lassen Sie uns nun eine Funktion innerhalb von Socket-Methoden erstellen, mit der wir ein Ereignis vom Client an den Server ausgeben , wenn der Spieler versucht, einem Raum beizutreten. Also hier unten der Erfolgs-Listener zum Erstellen eines Raums. Ich nichtige Join Room. Zeichenfolge, Ebenenname, Zeichenfolge, Raum-ID. Dies sind die beiden Details. Offensichtlich erwähnen wir das auf dem Join Room-Bildschirm. Ich werde einfach überprüfen, ob ihr Name nicht leer ist und ob die Raum-ID nicht leer ist. S ist nicht leer. Dann werden wir ein Ereignis über den Socket ausgeben. Das ist Join Room, und wir werden die Daten weitergeben. Spielt den Namen ab. Spielname und Raum-ID RooD, etwa so Hier geben wir also A-Daten aus, wenn der Spieler versucht, dem Raum beizutreten, aber wir müssen uns dieses Ereignis natürlich auf unserem Node-Server anhören dieses Ereignis natürlich auf unserem Node-Server Gehen Sie jetzt zum Indexieren der JS-Datei. Okay, hier unten dieser Raum-Listener erstellen. Wir werden am Socket arbeiten , wenn der Eventname Join Rom lautet Es wird eine Singfunktion haben und wir werden das Theta-Flugzeug und die Raum-ID bekommen Wir machen das jetzt, versuchen Catch Block erneut, versuchen Catch Cleg. Dann werde ich hören, dass dieser Code sehr einfach ist Dieser Check I Rom ID ist eine gültige Mungo-ID oder nicht Dies ist der Ablehnungsscheck. Du kannst es einfach kopieren und einfügen, einfach ID Match schreiben ID Match dann hineinschreiben Ich werde so schreiben müssen. Dann 0-9 A F A F 24$ Denken Sie daran, diesen Code können Sie hinzufügen, wenn Sie möchten , Sie können ihn auch entfernen Überprüfe also nur, ob es sich um eine gültige Mongoose-ID handelt. Es ist also ein Sockenfehler aufgetreten. Bitte geben Sie ein gültiges Zimmer ein und kehren Sie von hier aus zurück. Und wir müssen überprüfen, müssen sicherstellen, dass es nicht passt. Es ist Ausruf Und wenn es okay ist, schreiben wir, dass R einem Modell entspricht, das anhand der ID gefunden Das ist Mos Anfrage. Wir werden das Dokument anhand seiner ID finden. Dann prüfen wir, ob es sich bei der Immobilie um eine gemeinsame Immobilie handelt. Das heißt, die Person kann ihr beitreten. Und wenn nicht, sonst schreibe ich wieder Socket Occain, und hier werde ich bestehen. Das Spiel ist im Gange. Versuche es in einem anderen Raum. Das heißt, zwei Spieler spielen bereits in diesem Raum, du kannst ihm nicht beitreten. Wenn ein Beitritt möglich ist, zunächst erneut ein Spielerschema, erstelle ich zunächst erneut ein Spielerschema, einen Laynamen , also eine ID, also eine ID Geben Sie dann ein. Diesmal wird es so sein. Dann schreibe ich Socket Join This Socket und Join mit derselben Raum-ID. Dann schiebe ich den Spieler aus dem Spielerraum dieses Raumobjekt, das sind diese neuen Datenspielerdaten in dieses Raumobjekt, das sind diese neuen Datenspielerdaten. Dann ändere ich den Punkt im Raum, der gleich False ist, und ich werde diese Änderungen speichern. Wenn ein Raumpunkt so gespeichert wird, werden diese Änderungen in der Datenbank gespeichert. Und schließlich werde ich an den gesamten Raum senden, dass ich die Raum-ID geöffnet habe , dem Raum beitreten war erfolgreich, und ich werde diese Raumdaten an die Platter-Anwendung senden an die Platter-Anwendung Das war der Zuhörer, der am Raum-Event teilnahm. Zuerst geht es zum Mongo und holt sich den Raum, dann erstellt es einen neuen Spieler und fügt diesen in das Raumdatenmodell ein, wir haben die Spieleranordnung und pushen diesen Spieler erneut Das heißt, wir haben jetzt zwei Spieler in diesem Array. Dann ändere ich die Eigenschaft auf false, dann speichere ich sie erneut, und dann werde ich diese neuesten Daten über dieses Socket-Event an das Frontend senden. Im nächsten Video werden wir uns dieses Erfolgsereignis „Join Room“ anhören . Danke. 19. Arbeite an der Erfolgsveranstaltung: Nachdem Spieler im letzten Code erfolgreich einem Raum beigetreten sind, haben wir die Meldung „Event Join Room Success“ gemeldet. Lassen Sie uns nun also auch dafür und auch für dieses Ereignis, bei dem ein Fehler aufgetreten ist, einen Listener erstellen und auch für dieses Ereignis, bei dem ein Fehler aufgetreten ist Gehe zu den Socket-Methoden der Dart-Datei. Und hier unter diesem Gemeinschaftsraum. Breiter Verbindungsraum, erfolgreicher Zuhörer. Kontext der Rechnung. Wir werden nach dem Rechnungskontext fragen und dann einfach schreiben, damit Kunde dem Raum beitreten kann. Wir werden die Zimmerdaten bekommen. Und diese Raumdaten werden wir im Anbieter aktualisieren. Anbieter des Kontextes. Zimmerdatenanbieter, hören Sie auf False und schreiben Sie die Zimmerdaten aktualisieren, und wir schicken Ihnen den Raum. Danach schreiben wir einfach Navigator do Navigator of Context, den Push-Namen, und wir schicken diesen Benutzer ebenfalls auf den Spielbildschirm. Das ist die Person , die versucht, sich dem anzuschließen. Seitdem hoffe ich, dass wir die Verwendung dieses Anbieters verstanden haben. Wir haben diese Daten bei diesem Anbieter, und dann können wir diese Daten auf dem Spielbildschirm verwenden. Ähnlich verhält es sich im Folgenden mit diesem verbundenen Raum-Listener-Kontext-Client großer Fehler aufgetreten ist Raum-Listener-Kontext-Client , dass kein Fehler Wir erhalten die Daten, die in diesem Fall im Zeichenkettenformat vorliegen Und wir werden einfach einen Snackbar-Nachrichtendienst mit Kontext zeigen, der die Snackbar und dann die Snag-Bar Es wird Text sein, der die Daten enthält. Das ist es. Wir haben die beiden Zuhörer. Fügen Sie nun diese Zuhörer auf dem Bildschirm des gemeinsamen Raums hinzu. Erzeugt einen angeborenen Zustand und schreibt den Socket. Hier habe ich nicht die Socket-Methoden, also gehe einfach zu create und kopiere die Socket-Methoden Die Join-Room-Socket-Methoden Join Room Success Listener und ähnlich die Socket-Methoden ers occurred listener auch nur zu Testzwecken Lassen Sie uns auch nur zu Testzwecken die Raumdaten auf dem Spielbildschirm anzeigen Gehe hier zum Spielbildschirm. In diesem Artikel werde ich Provider of Context schreiben. Es wird ein Anbieter von Raumdaten sein. Hören Sie sich die zwei Saiten der Raumdaten an. Ich gebe nur die kompletten Raumdaten dem Bildschirm aus , damit wir sie sehen können Als Erstes müssen wir ein Ich nenne es A erstellen und hier sehen, dass jeder Join gleich true ist , dann Spielername und nur eine Spielerinformation ist da Wenn ich es versuche, glaube ich nicht, dass ich es von hier kopieren kann, ich muss zuletzt zur MongoDB gehen Ich muss die Raum-ID kopieren. Lassen Sie uns zunächst anmelden. Wenn ich auf Sammlungen durchsuchen klicke, dann auf Räume. Und das, mal sehen, ich schätze, das hier. Ich werde den Ausweis kopieren. Und wenn ich die App erneut starte und versuche, ihr beizutreten. Das ist zuallererst. Ich kann es nicht einfügen, M. Lass es uns machen 647a3 362d eb09 cf3e ob6e und 362d eb09 cf3e ob6e und schreiben auf Join klicken. Mal sehen, ich hoffe, es kann ein Fehler Ich bin mir nicht sicher, warum das nicht funktioniert, aber sagen wir, wenn ich zum Raum beitreten gehe, dann glaube ich, hier auftreten. Ich bin mir nicht sicher, warum das nicht funktioniert, aber sagen wir, wenn ich zum Raum beitreten gehe, dann glaube ich, hier im Tab passiert nichts. Sie müssen diese Funktion für den verbundenen Raum in der Methode „ Raum verbinden“ aufrufen . Der Name des Plans wird der Name des Controllers sein. Es wird ein schwuler MD-Text sein. David, es gibt also auch einen Rechtschreibfehler. Was du dir wünschst. Was ist der Fehler hier? Okay. Ich glaube nicht, dass dieser Fehler vorliegt. Wenn dieser Code nicht funktioniert, werde ich ihn im nächsten Video entfernen. Ich glaube, ich muss den Code noch einmal überprüfen. Ich danke dir. 20. Spieler-Dart-Modell-Kurs: Hallo. Im letzten Video hatten wir ein paar Probleme. Ich habe diese Dinge gelöst. Also für den Android-Emulator habe ich ihn einfach gelöscht und einen neuen Emulator mit der neuesten Version erstellt, also Pixel , Excel und was auch immer, er hat das Problem mit dem Kopieren und Einfügen gelöst Und in unserer Indexpunkt-JS-Datei gab es hier einen Tippfehler Das sollte Rom Punkt E sein. Das Gelenk ist gleich falsch. Vorher war es minus. Es war also nur ein Bug oder entspricht einem Tippfehler. Außerdem habe ich diese Zeile hinzugefügt, die besagt, dass ein Fehler ausgegeben wird, wenn der Raum gleich Null ist In ID wurde kein Spielzimmer gefunden. Angenommen, der Benutzer hat eine gültige Bongo-ID eingegeben, aber der Raum ist nicht verfügbar Nehmen wir an, er hat versehentlich das letzte Wort entfernt oder den letzten Buchstaben angenommen, dann gibt es in diesem Fall kein solches Dokument in der Datenbank Also überprüfen wir das auch. Also versuchen wir es noch einmal. Ich werde auf Create Room klicken. Dann wurde ein Raum erstellt. Ich werde zur Datenbank gehen. Ich aktualisiere. Und sagen wir, jeder Join ist gleich zwei, und in der Spielerliste ist nur ein Spieler da. Ich kopiere die ID und versuche dann, demselben Raum beizutreten. Treten Sie bei und nehmen Sie dann einen anderen Namen an. Und jetzt habe ich das in der Zwischenablage und wenn ich auf Beitreten klicke S. Ich bin dem Raum erfolgreich beigetreten, und wenn ich die Seite aktualisiere, dann können Sie sehen, dass e join falsch ist, und in den Playern haben wir zwei Spieler und beide haben ihre Socket-IDs und alles Das bedeutet, dass der Beitritt zu einem Raum auch einwandfrei funktioniert. Lassen Sie uns nun an einer Modellklasse arbeiten. Beim Raumanbieter ist das diese Datei. Wir haben nur das Eigentum an Raumdaten. Wir werden aber auch Spielerdaten als Eigentum in dieser Anbieterklasse hinzufügen Spielerdaten als Eigentum in dieser Anbieterklasse , da wir den Namen der Spieler und ihre Punkte auf dem Spielbildschirm anzeigen werden . Anstatt also von dieser Raumeigenschaft aus auf Spielerdaten zuzugreifen , werden wir eine neue Spielereigenschaft erstellen, damit es für uns bequemer ist. Und zuallererst werde ich eine Modellklasse erstellen , die die Modellklasse für die Spielerdaten ist . also im Lip-Ordner Erstellen Sie also im Lip-Ordner einen neuen Ordner Models und darin Play Dot Dot. Schreiben wir den Spieler, dann den endgültigen Namen des Spielers und eine Eigenschaft. Und das sind genau die gleichen Namen, die serverseitig im PLA JS-Modell geschrieben sind. Und Socken-ID. Letzte doppelte Punkte letzter Saitenspieltyp Dann erstellen wir eine konstruierte Umbenennung. Benötige diese Scheiß-ID. Punkte. Erfordert diesen Spielertyp. Dann lassen Sie uns auch Methoden für die Serialisierung erstellen. Das ist die Konvertierung von einer Map zu diesem Objekt sowie von diesem Objekt zur Map Zuallererst werde ich die Funktion „Map String Dynamic to Map“ erstellen . Es wird eine Karte zurückgeben. Dann haben wir den Namen des Spiels. Ich spiele deinen Namen. Dann Socket I Socket ID. Zeigt auf den Typ Clear Type. Und dann, wenn die Werksfunktion auf der Karte angezeigt wird. Ich akzeptiere eine Karte. Diese Karte wird von Mongo DV kommen. Dann verlass dich darauf, leg dich hier ein. Wird einfach dieses Kopieren und Einfügen zugeordnet und dann weist die Socket-ID darauf hin Auch hier heißt es, dass diese Schlüssel mit der Index-JS-Datei identisch sein werden der Index-JS-Datei Ich suche nur nach der Null, um sicherzugehen, dass es kein Problem gibt. Okay. Also das ist es. Das war's für dieses Video. S in der nächsten Sitzung. 21. Spielerstatus im Anbieter: Hallo. Fügen wir nun diese Player-Eigenschaft hinzu, oder Sie können in unserer Anbieterklasse den Status Status angeben , der Raumdatenanbieter ist. Hier unter diesen Raumdaten, rechter Spieler, Ebene eins, zwei, Modell. Und hier lasse ich erstmal einfach alles leer stehen. D leer 0,0 oder du kannst sagen, ich kenne die Spieler, eins wird X sein. Und ähnlich schreiben Sie für den zweiten Spieler Cla zwei, und hier ist das Symbol Null, dann erstellen Sie eine Getter-Methode, damit Cla Eins gleich P eins ist Spieler 22, Spieler zwei. Sollte zwei spielen. Dann erstellen wir auf ähnliche Weise eine Funktion zum Aktualisieren von Spieler eins und Spieler zwei, zunächst einmal Daten. Wir werden Daten auf der Karte erhalten. In Kartenform, Zeichenfolge dynamischer Spieler, Daten. Das werden wir vom Server bekommen. Spiel eins, Physisch zwei spielen Map und Spieler eins so. Und dann wurde auf ähnliche Weise Spieler zwei erstellt. Es wird genauso sein wie oben beschrieben. Die Zeichenfolge ist dynamisch. Daten von Spieler zwei. Spieler zwei entspricht der Spielkarte. Player to Data, und stellen Sie sicher, dass Sie Notify Listeners schreiben, damit das Frontend aktualisiert wird. Okay. Gehen Sie jetzt zu Index to JS File und geben Sie hier Spielerdaten vom Server aus. Hier einfach unter diesem Raum ein Erfolg. Ich werde IO zwei Raum-ID-Punkte schreiben zwei Raum-ID-Punkte Spieler zu aktualisieren. Und ich werde Punktspieler schicken. Das sind die Daten. Und jetzt senden wir ein Ereignis vom Server aus. Natürlich müssen wir es dem Kunden anhören. Gehen Sie hier ganz unten zu den Socket-Methoden pro Zustands-Listener Ich werde nach dem Kontext der Rechnung fragen. Dann ist der Socket-Client nicht aktiviert aktualisiert die Spielerdaten. Und ich möchte auch sagen, denken Sie daran, dass es sich bei den Spielerdaten um eine Reihe von Spielerkarten handelt. Es ist also ein Array. Also, um die Daten pro eins zu bekommen, musst du natürlich zum Index Null gehen und für Spieler zwei zum Index eins. Anbieter des Kontextes Anbieter von Raumdaten. Das Update von Spieler eins, p Spielerdaten am Index Null. Und stellen Sie sicher, dass Sie auf Stürze hören. Und genauso aktualisierst du die Daten von Spieler zwei, und hier wird der Index eins sein. Ich hoffe, du hast das verstanden und das wird nur aktualisiert, wenn jemand den Raum betritt. Denn wenn man einen Raum erstellt , ist einer der Werte natürlich Null, aber wenn die Person beitritt, dann sind beide, also die Spielerdaten, da. Ba wird bei der Erstellung dieses Werts gleich Null sein. Das ist bei dem einen Index. Lassen Sie uns abschließend diese Funktionalität testen. Zunächst müssen wir diesem Update den Listener zum Löschen des Zustands im Startstatus des Join-Room-Bildschirms zuweisen Listener zum Löschen des Zustands im Startstatus des Join-Room-Bildschirms Also hier werde ich Socket-Methoden und so viele Bindungsfehler schreiben und so viele Bindungsfehler Das Update ist so klar. Und dann werde ich auf dem Spielbildschirm die Namen zu Testzwecken anzeigen. Also hier, ein Zentrum. Ich werde Spalte, Hauptachsenausrichtung, Hauptachsenausrichtung, Mittelpunkt der Hauptachse, Kinder schreiben Hauptachsenausrichtung, Hauptachsenausrichtung . Dann Text im Text, er wird für den Kontext sorgen. Anbieter von Raumdaten als Dateien, Punkt Spieler eins, Spielername. Und ähnlich wie unten schreibe ich Spieler zwei pro Namen. Lassen Sie uns das einfach entfernen, damit ich entfernen weiß, welches ich kopieren soll. Dann erstelle ich. Offensichtlich wird im Moment nichts da sein. Aber wenn ich diese ID kopiere. Ich kopiere diese ID und versuche, dem Raum beizutreten. Und hier gebe ich zuerst die ID ein und schreibe J und trete ein, dann sehe ich. Sowohl der Spielername als auch der Name des Spielers können im Spielzimmer angezeigt werden. Das bedeutet, dass diese Funktionalität auch einwandfrei funktioniert. Im nächsten Video werden wir auf dem Bildschirm der Wartelobby arbeiten. Das heißt, wenn jemand ein Spielzimmer erstellt, sollte er einen Bildschirm sehen darauf wartet , dass eine andere Person diesem Raum beitritt. Dann wird ihnen nur das Spielzimmer oder der Spielbildschirm angezeigt. Danke. 22. Arbeite an der Wartelobe: Hallo. Wenn der erste Spieler einen Raum erstellt, wollen wir, dass er warten muss , bis der andere Spieler ihm beitritt. Lassen Sie uns dafür einen neuen Bildschirm erstellen. Ich werde nicht Bildschirm sagen. Es wird irgendwie wackelig sein. Also im Widgets-Ordner, rechts wartender Lobby-Punkt Und hier zuallererst p-Material. Und sorgen Sie für einen stimmungsvollen Besuch. Ich warte in der Lobby. Da dies kein Bildschirm ist, müssen wir den Routennamen nicht schreiben. Warte. Hier brauchen wir eine Spalte aber wir benötigen auch einen Controller , weil wir bei diesem Besuch die Raum-ID anzeigen werden Controller für Textbearbeitung Rom-ID-Controller. In diesem Zustand schreiben Sie einfach, dass die Raum-ID dem Textbearbeitungs-Controller entspricht, und der Textwert wird vom Anbieter des Kontext-Raum-Datenanbieters stammen . Hören Sie auf False und schreiben Sie dann die Raumdaten, und wir wollen die ID. Das ist die Unterstrich-ID. Denken Sie daran, diese Unterstrich-ID. Und es sind Kartendaten. Deshalb schreiben wir den Schlüssel hier. Und entsorgen Sie auch diesen Raum-ID-Controller, den Sie entsorgen. Jetzt geben wir im Hauptteil einfach eine kreisförmige Fortschrittsanzeige mit einem Text aus, geben wir im Hauptteil einfach eine kreisförmige Fortschrittsanzeige mit einem der besagt, dass wir warten sollen, bis andere Person beitritt. Außerdem wird die Raum-ID angezeigt, die er mit seinem Freund teilen kann In der Haupt-***-Ausrichtung, die Mitte in der kreisförmigen Fortschrittsanzeige der Kinder, geben Sie ihr die Farbe Weiß. Geben Sie den Abstand, die Größe des Felds, die Höhe und den Text an, der darauf wartet dass ein anderer Spieler beitritt. Dann wieder C, geben Sie einen Abstand von 20 ein. Schließlich haben wir diesen benutzerdefinierten Text als Controller für die Raum-ID. H-Text wird leer sein. Aber hier gilt das nur für Lesezugriff , weil ich nicht möchte, dass der Benutzer die Raum-ID bearbeitet und diese Spalte auch mit einem Innenabstand umschließt und ihr die gesamte Größe von Das ist der Code. Lass uns nun diese Lobby testen, gehe zum Spielbildschirm Und hier. Lassen Sie uns oben einen Raumanbieter erstellen. Was ich möchte, ist, dass ich ihn kopiere und Zimmerdatenanbieter den Raumdaten entspricht , sodass wir diesen Anbieter verwenden können, wo immer wir wollen. Im Körper, auf einem Gerüst. Ich werde diesen Dummy-Code entfernen und überprüfen, ob die Raumdaten die Punkt-Rom-Daten zusammengefügt haben Stimmt. Das heißt, es ist immer noch niemand beigetreten. Also werde ich die Wartelobby zeigen. Sonst zeige ich Constant Center Child Game Starts. Vorerst werde ich nur Spielstarts schreiben. Später werden wir auch am Spielbrett arbeiten. Jetzt werde ich auch einen Chrome öffnen , damit ich leichter mit zwei Geräten testen kann. Ich werde einen Raum erstellen. Ich werde es kopieren und dann in den Join-Raum. Ich werde diesmal der N sein. Fragen Sie nach dem Raum und klicken Sie auf. Und hier seht ihr den Skin der wartenden Lobby. Es sieht also sehr gut aus. Wenn ich auf Beitreten klicke, startet das Spiel. Der zweite Spieler wird zum Spielstart geschickt, aber offensichtlich hat der erste Spieler das Update nicht erhalten. Also im nächsten Video werden wir auch an dieser Sache arbeiten. Danke. 23. Höre dir UpdateRoom-Event an: Hallo. Wie ihr gesehen habt, des ersten Spielers nicht aktualisiert, wenn wir versuchen, dem Raum beizutreten ersten Spielers nicht aktualisiert, wenn wir versuchen, dem wird die Wartelobby des ersten Spielers nicht aktualisiert, wenn wir versuchen, dem Raum beizutreten, da wir beitreten“ nur auf dem Bildschirm „Raum beitreten“ hören Ereignis „ Raum erfolgreich beitreten“ nur auf dem Bildschirm „Raum beitreten“ hören, nicht auf dem Bildschirm „Raum erstellen“. Außerdem können wir nicht den gleichen Listener für „Raum beitreten“ verwenden , da er vom Spielbildschirm aus navigiert, welchem Spieler man sich bereits befindet. Um es zu lösen Wir müssen ein weiteres Ereignis vom Server ausgeben, zum Index gehen und JS ausführen, und hier werde ich IO Punkt zwei Raum-ID ausgeben, ausgeben und ich werde Ro aktualisieren und ich werde die komplette Rolle senden. Und wir müssen uns das auch anhören , also gehen wir zu Socket-Methoden. Und jetzt denke ich, dass du dich mit diesem Ding wohl fühlst, weil wir überall aussenden und zuhören. Das ist es. Lass uns ID Update Room Listener schreiben. Dann setzt Bill einen solchen Client in Kontexten , auch wenn er eingeschaltet ist. Wir bekommen die Daten hier Und dann rufe ich wieder diesen Anbieter an und schreibe die aktualisierten Zimmerdaten Wir aktualisieren den Raum. Hören Sie sich das zum Schluss sowie auf dem Spielbildschirm an. Gehe zum Spielbildschirm. Hier im Staat. Wir schreiben. Zuallererst benötigen wir die Socket-Final-Socket-Methoden. Kate methodisch zu solchen Methoden. Und dann aktualisieren solche Methoden den Raum-Listener. Zuallererst dieser und dann der Player-State-Listener aktualisieren Diese beiden Zuhörer wollen wir. Spielerstatus, da die Punkte aktualisiert werden. Und dieser Raum-Zuhörer, denn wenn die ersten Spieler den Raum betreten, sollte das Spiel natürlich aktualisiert werden Also lass es uns testen. Ich werde auch zu Chrome gehen. Mama hat angefangen. Offensichtlich wird es einen Fehler zeigen. Ich muss wieder auf die Startseite gehen. Okay. Wenn ich jetzt auf dieses Mal klicke, schreibe ich den Namen Bill. Kopiere es Join is to und schreibe hier. Jeff. Dann schauen wir mal , ob ich auf Beitreten klicke. Dann wird dieses Spiel gestartet. Aber das dauert einige Zeit. Mal sehen, ob ein Fehler vorliegt. Es könnte einige Zeit dauern. Geben Sie an, was mit der Pflanze passiert ist an Ich schicke das Okay. Ich weiß nicht warum. Im nächsten Video werden wir sehen, was hier das Problem ist. Danke. 24. Arbeite an dem Scoreboard: Hallo, willkommen zurück. Im letzten Video hatten wir einen Fehler : Immer wenn Spieler eins einen Raum erstellt und eine Raum-ID an Spieler zwei sendet und Spieler, der ihm beitritt, erhält Spieler eins das Update nicht und er wird nicht zum Startbildschirm des Spiels weitergeleitet. Er wartet immer noch auf dem Lobbybildschirm. Also die Probleme in meinem Code waren: Zuallererst dem Spielbildschirm diesen falschen Code entfernen, musst du auf dem Spielbildschirm diesen falschen Code entfernen, weil ich natürlich möchte, dass dieser Spielbildschirm die Anbieteränderungen abhört. Das heißt, immer wenn wir die Zuhörer benachrichtigen, sollte dieser Bildschirm neu erstellt werden Und die zweite Änderung auf der Serverseite, das ist der Indexpunkt S. Ich habe einen Fehler auf dem Bildschirm „Raum erstellen Hier in der Zeile 32 ist die Konstante Raum-ID gleich dem Raum-ID-Punkt. Zeichenfolge. Hier sollten es auch Klammern sein. Aus diesem Grund war die Raum-ID nicht korrekt und die Steckdosen wurden nicht mit dieser Raum-ID verknüpft. Lassen Sie uns also den Server starten. S Server und PM Run D. Lass es uns ausprobieren. Wenn ich auf Create klicke, dann geht eine Kopie zum Join-Bildschirm. Ich schreibe und füge ein und klicke auf Beitreten. Siehst du. Jetzt haben beide Bildschirme das Update und beide werden an diesen gesendet. Das heißt, der Lobbyraum wurde entfernt. Lassen Sie uns von nun an an der Anzeigetafel I im Spielbildschirm ganz oben arbeiten . Wir werden die Anzeigetafel anzeigen, die den Spielernamen und die Punkte enthält Lassen Sie uns dafür eine neue Datei in Widgit erstellen. Hier und rechts Punktpunkt auf der Anzeigetafel. Fangen wir mit dem Binden von Material an, dann sage ich, dass es weniger steif ist Ich werde an Bord sein. Dann will ich zuallererst den Root-Provider Ein Aspekt des Kontextes. Und es sollte ein Anbieter von Raumdaten sein. Dann geben wir ein Zeilenraster zurück dann die Ausrichtung der Hauptachse Dann werde ich wieder eine Kolumne haben. Hauptachsenausrichtung, Hauptachsenausrichtung, Mitte C Dann möchte ich zwei Textfelder zusammen haben. Das sind der Name und die Punkte. Deshalb habe ich nacheinander die Spalte verwendet. Sie werden den Zimmeranbieter verstehen. Der Spieler eins, der Spielername Stil C Textil. Die lustige Größe wird 20 sein. Die Schriftstärke wird als Schriftstärke mit Punkt fett angegeben. Und ähnlich wie bei Billow acht, es wird Spieler eins sein, Punkte, die beiden in den zwei Saiten Und die Schriftgröße wird 20 sein, aber sie wird nicht fett sein Und auch für diese Spalte, wickle diese Spalte mit einer Polsterperücke ein und gib ihr 30. Erstellen Sie dann innerhalb dieser Zeile eine weitere Spalte für die Daten der beiden Spieler Kopieren Sie hier einfach diese Polsterung hinter sich unterhalb der Polsterung Hier wird es der Name des Spielers sein, und es wird Spieler zwei in zwei Reihen sein Speichern wir es und zeigen wir schließlich die Anzeigetafel auf dem Spielbildschirm Hier werde ich das Gerüst unter dem Gerüst entfernen Ich möchte das mittlere Widget entfernen und werde einen sicheren Bereich schreiben Dann wird das Kind zur Spalte. Start der Ausrichtung der M-Achse. Kinder und das erste Widget, das ich will, ist die Anzeigetafel. Das ist es. Speichern Sie es. Gehen wir zu einem Bildschirm und sehen wir nach. Es sieht sehr gut aus. Ich hoffe, Sie haben verstanden , dass dies eine Zeile war, und innerhalb der Zeile haben wir zwei Spalten. Und in dieser Spalte haben wir zwei Texte. Das ist. Deshalb war es eine Reihe und sie sind innerhalb von zwei Spalten. Unsere Anzeigetafel funktioniert also auch. Im nächsten Video werden wir anfangen, an der dicken Tacto-Tafel zu arbeiten , damit die Spieler miteinander spielen können. 25. Erstelle die Board-Benutzeroberfläche: Hallo, willkommen zurück. Auf dem Spielbildschirm unter der Anzeigetafel zeigen wir das T-dicke Tactoboard Lassen Sie uns also zuerst an der Benutzeroberfläche arbeiten eine neue Datei im Widgets-Ordner erstellen Und schreibe den Namen T T two bod. Okay. Material importieren. Stat full gia bod Dann werden wir hier das Board mit einem Grid-View-Builder erstellen da es viel einfacher sein wird, Boxen mit diesem Rigid zu erstellen Lass es uns machen. Generator für Grid-Ansichten. Zuallererst wird die Anzahl der Artikel neun betragen. Da es sich um ein Drei-Mal-Drei-Brett handelt. Das heißt drei auf der horizontalen Seite und drei auf der vertikalen Seite. Dann wird der Vertreter der Entgeltgruppe zu den Kosten des Graduiertendelegierten mit einem festen Kreuz, da Zählung und Kreuz existieren, also drei sein sollten Es sollte drei Elemente geben. Querachse bedeutet. Auf der vertikalen Seite. Und der Rechnungskontext, und wir bekommen den Index. Dann gib einen Container zurück. Jetzt, jetzt wird der Container eine Kiste sein. Das heißt, es wird Grenzen von allen Seiten haben. Und darin werden wir entweder den Spielwert X oder O anzeigen. Lassen Sie uns also ein paar Dekoboxen mit einem Dekoband versehen. Umrandung alle Farbfarben weiß 24. Und im Inneren des Kindes werden wir das Kind in den Mittelpunkt stellen. Dann schreiben Sie Perücke jetzt einfach fest und geben Sie den Wert X D style Textilfarbe, Farben, Punkt Weiß, Schriftstärke, Punkt, Fett Geben Sie dann die Schriftgröße 100 ein. Und ich werde nur für das Styling etwas Schatten spenden. Shadow Bl Radius für Farbfarben punktblau. Okay. Und da wir den Grid View Builder verwenden, um Fehler bei der Rendergröße zu vermeiden, die Grid-Ansicht mit einem Einschränkungsfeld umschließen. Beschränktes Feld und Beschränkungsfeld beschränken Für die Höhe geben wir nun an, dass die endgültige Größe der Größe des Medienabfragemediums des Kontextes entspricht Medienabfragemediums des , und die maximale Größe entspricht der Größe in Höhe, die der Höhe multipliziert mit 0,7 entspricht Und der Höchstwert wird 500 sein. Das sind die Max-Wit-Werte. Rufen Sie dieses Brett abschließend auf dem Spielbildschirm unter der Anzeigetafel Wir lesen einfach das konstante Häkchen zum Brett und speichern es ab. Gehen wir jetzt zum Spielbildschirm und sehen nach. Es sieht anständig aus. Offensichtlich habe ich den Chrome-Browser des Browsers nicht aktualisiert Chrome-Browser des Browsers Aber wie Sie sehen können, sieht es jetzt zumindest wie das Spiel aus. Im nächsten Video werden wir daran arbeiten, X O bedingt anzuzeigen . 26. Behalte den Überblick über die Spielwerte: Hallo. Jetzt müssen wir daran arbeiten X und Werte in Echtzeit anzuzeigen. Wenn wir also auf ein bestimmtes Grid klicken, oder Sie können Container sagen, gibt der Grid View Builder einen Index darüber, auf welchen Container geklickt wurde Und dann werden wir diesen Index an den Server senden. Das heißt, nehmen wir an, das ist Null, Eins, Zwei, Drei, so. Wir werden das an den Server senden und der Server sendet es und aktualisiert es an alle Clients in diesem Raum. In der Socket-Methode erstellen wir eine neue Funktion, die immer dann ausgeführt wird, wenn der Spieler seinen Zug im Spiel macht , und ein Ereignis vom Client an den Notizserver ausgibt. Lassen Sie uns ein breites Tabulatorraster erstellen. Wir werden die Zeichenfolge Raum-ID in den Index aufnehmen, und das wird etwas anderes sein, nämlich eine Liste von Zeichenketten-Anzeigeelementen. Hier behalten die Anzeigeelemente also den Überblick über alle neun Rasterwerte. Das ist ungefähr so. Nehmen wir z an, dann ist etwas so leer für alle neun Punkte. Das macht es uns natürlich einfacher, den Rasterwert auf allen Bildschirmen zu aktualisieren oder zu aktualisieren. Jetzt werde ich zunächst überprüfen, ob Anzeigeelemente in diesem Index leer sind. Das ist kein Wert da, dann werde ich ein Ereignis namens Tap ausgeben. Mit dem Wertindexindex und der Rom-ID, der Rom-ID. Offensichtlich sollte es ein Punkt sein. Sagen wir einfach, wir werden ein Ereignis von der Anwendung an den Server senden. Um nun den Überblick über Elemente oder Noten zu behalten, benötigen wir neue Eigenschaften und Methoden innerhalb unseres Anbieters. Gehen Sie zum Raumdatenanbieter und lassen Sie uns hier zunächst eine Liste mit Zeichenketten schreiben. Elemente anzeigen. Und hier geben Sie neunmal eine leere Zeichenfolge ein. Also ist es eins, zwei, drei, vier, fünf, sechs, sieben, acht, neun. Okay, außerdem benötigen wir eine Ganzzahl für gefüllte Felder. Warum diese Felder gefüllt sind , weil wir die Länge der Anzeigeelemente nicht variabel verwenden können . Da es mit einer leeren Zeichenfolge gefüllt ist . Das bedeutet, dass die Länge neun sein wird. Standardmäßig. Wir werden also anhand des Status blasser Kästchen verfolgen wie viele Noten es gibt anhand des Status blasser Kästchen Das ist das Konzept. Lassen Sie uns jetzt Getter erstellen. Es ist eine Liste von Sorten. Das sind Spielelemente. Und es sollte besser sein. Und auch für die Feldboxen. Jetzt haben wir den Staat. Lassen Sie uns Funktionen zum Einfügen oder Aktualisieren von Werten erstellen. Breite Aktualisierungsanzeigeelemente. Ich indiziere die Wahl der Zeichenfolge. Das ist x z. Ich schreibe Anzeigeelemente an die Position Index 02 und stelle sicher, dass es x oder ist. Dann mache ich Boxen plus gleich eins und informiere alle Zuhörer, es zu aktualisieren Und darunter erstelle ich eine weitere Funktion, bei der die Boxen auf Null gesetzt Es ist also sehr klar, dass das Spiel einfach neu gestartet wird. Das ist nach dem Ende der Runde. Wir können wieder spielen. L das. Lassen Sie uns nun die Grid-Container tabellarisch machen und dann die Tab-Grid-Funktion binden Hier haben wir die Tab-Grid-Funktion. Gehe zum Tie Board. Im Item Builder, der sich hier befindet , wickeln Sie diesen Behälter mit einem Gestendetektor ein und schon können Sie ihn auf den Wasserhahn legen. Beim Wasserhahn. Zuallererst benötigen wir jetzt die variable Socket-Methodeninstanz der Socket-Methode. Socket-Methoden. Suchen Sie dann unter dieser Größe nach dem Zimmeranbieter. Warum der von Kontexten. ROM-Datenanbieter. Führen Sie dann in den On-Tab-Socket-Methoden die Tab-Grade-Methode aus. Index wird Index sein. Raum-ID handelt es sich um den Raumdatenanbieter, Rom-Daten und die interne Unterstrich-ID Anzeigeelemente werden wieder angezeigt. Der Raum hat die Anzeigeelemente bereitgestellt Das ist es also. Das war's für dieses Video. Im nächsten Video werden wir daran arbeiten, Ereignisse auf dem Notizserver abzuhören . Danke. 27. Anzeigen von X und O: Hallo. Willkommen zurück. Stellen Sie jetzt sicher, dass Sie sich das Tap-Event vom Client anhören. Das ist hier. Wir senden dieses Tap-Event aus, richtig? Wir müssen es uns also auf dem Server anhören. Gehen Sie hier zum Index der JS-Datei unter dem Join-Raum. Sie werden Socket auf Tap schreiben. Dann werden wir eine asynchrone Funktion haben. Und wir werden den Wertindex und eine Raum-ID bekommen. Machen wir das, versuchen wir zu fangen. Log A. Darin nochmal, Creo. Ich mache einen guten Ausweis. Raum-ID, dann lass die Wahl, wer dran ist und Spielertyp. Das bedeutet entweder x oder. So bekommen wir das Symbol. Jetzt schreibe ich, ob der Turn-Index 20 ist. Das bedeutet, dass Spieler eins mit der Tabulatortaste angezeigt wurde. Wir werden den Zug einfach auf Spieler zwei umstellen , denn da Spieler eins bereits die Tabulatortaste für Spieler eins hat, ist der Zug-Index im Raum gleich eins Wenn Spieler zwei getippt hat, machen wir das Gegenteil Das heißt, ändere den Zug-Wert auf Null und den Zug-Index auf Null Ich hoffe, du hast die Logik verstanden. Wenn der Spieler ein Tag hat, dann speichere die Rolle. Und jetzt senden wir ein Ereignis an die Raum-ID , die t hat, und wir werden den Wert und diese drei Dinge senden den Wert . Wir werden es an den Kunden senden. Auch hier überprüfe ich nur Raum sic auf diese Wahl, entweder x. Wenn ich einen Tab cla, dann ändere den Clear, dann speichere und gebe dann zu Jetzt müssen wir eine Methode schreiben, um dieses Tab-Ereignis abzuhören Gehe zu den Socket-Methoden. Und hier Wide Tab Listener. Bill Cont kontaktiert den Scit-Client. Gehen Sie auf Registerkarte, wir erhalten diese Daten dann vom Anbieter Was werden wir tun? Wir werden die Anzeigeelemente aktualisieren. Anbieter von Raumdaten, der die Anzeigeelemente aktualisiert. Wir erhalten den Index Theta sowie diese Auswahl. Das ist das Symbol oder der Wert, den du sagen kannst. Dann lieferten die Zimmerdaten die aktualisierten Raumdaten, und wir senden auch den kompletten Raum. Dies ist die Tab-Listener-Funktion. Binden Sie nun diese Tab-Listener-Funktion in den systemeigenen Zustand des Detecto-Boards hier in die Socket-Methoden im Status ein, den Socket-Methoden im Status ein, Und hier, entferne das kodierte Fett und schreibe es in der Anzeigeelemente Beim Textil werde ich hier die Farbe entsprechend dem Wert ändern , der hier steht, ich werde schreiben. Room hat der Anbieter die Anzeigeelemente indexiert, falls dies der Fall ist. O. Dann gib die Farben blau an. Tut mir leid. Ja, wenn ja, kannst du rot färben. Farbe. Das kann konstant sein. Okay. Speichern Sie es, speichern Sie alles. Öffnen wir es, öffnen wir die Krähe. Ich werde das Rom auch ausruhen lassen. Mal sehen, ob es funktioniert oder nicht Ich werde einen neuen Raum einrichten. Nehmen wir an, Jeff hat Bill Paste, Join reingeschrieben. Wenn ich jetzt hier klicke, ist S, X da. Wenn ich hier klicke, ist der Wert Oh da. X ist da. Der Wert O ist da. Es funktioniert zumindest in Echtzeit. Jetzt können wir unsere Fortschritte sehen und es ist ziemlich gut. Im nächsten Video werden wir mehr an den Funktionen des Boards arbeiten . Danke. 28. Spielen nach den Drehungen: Hallo. Unser Echtzeitspiel funktioniert, aber wir können das gesamte Spiel nur von einem Gerät aus spielen. Aber offensichtlich ist es ein rundenbasiertes Spiel. Ein Spieler sollte nicht in der Lage sein, zweimal auf das Spiel zu tippen und darauf zu warten, dass er an der Reihe ist. Um das zu lösen, werden wir das Absorb-Pointer-Widget verwenden. Wickeln Sie den Grid View Builder, der sich hier im T Teco-Board Wickeln Sie diesen Grid View Builder mit einem Absorb-Zeiger ein. Es ist ein Gen, das verhindert, dass sein Kind angeklickt gescrollt wird oder wie es reagiert Es ist also sehr einfach. Das ist dieser absorbierende Wert. Wenn es wahr ist, können Sie nicht klicken. Und angenommen, es ist falsch, dann können Sie klicken. Hier wird die Logik also Raumdatenanbieter sein, die Raumdaten. Dreh die Steckdose. Vergleichen wir die Socket-Socket-ID, nicht der Socket-Client-ID der Socket-Methoden entspricht. Wenn sie also nicht gleich ist, dann ist das einfach wahr, wenn die Turn-Socket-ID und die Socket-ID identisch sind. Dann sollte es falsch sein. Das heißt absorbierend sollte falsch sein , damit er darauf klicken kann. Das heißt einfach, wenn es wahr ist, dann kann es nicht klicken. Wenn falsch, dann ist es anklickbar. Das ist die Logik Du musst es entsprechend machen. Das ist es. Außerdem ist es besser. Ich werde hier einen Namen schreiben. Es ist ein zufälliger Name Copyright Join on Join. Er wird nicht zuerst an der Reihe sein. S X ist da. Wenn ich nochmal versuche hier zu klicken, dann passiert nichts. Aber wenn ich hier klicke, dann sehe ich, dass O da ist. Wenn ich erneut versuche, hier zu klicken, dann passiert nichts, aber wenn ich hier klicke , dann ist X da. Das heißt, wir können rundenweise spielen. Aber plötzlich tauchen die Werte X und X auf, was nicht sehr attraktiv aussieht. Lassen Sie uns also eine grundlegende Animation geben. Holen Sie Ihren Code-Editor heraus und Sie auf Teco Board Ja. Umhüllen Sie das Textraster mit einer animierten Größendauer gebündelte Dauer gibt Millisekunden, Millisekunden Das ist nur ein Verblassungseffekt, kann man sagen. V-Grundeffekt. Aber offensichtlich haben wir den Wert geändert, haben wir den Wert geändert bevor wir ihn getestet haben. Lassen Sie uns auch die Kurven anzeigen. Das ist, welcher Spieler an der Reihe ist, um Verwechslungen zu vermeiden. Auf dem Tito-Brett, auf dem Spielbildschirm im Spielbildschirm unter dem Ticat-Brett Einfach Raumdatenanbieter, die Raumdaten dann den Layer-Namen Ich muss das nur schreiben . Das ist es. Lassen Sie uns nun die komplette Spielfunktionalität testen. Wenn ich einen Namen erstelle dann beitrete . Das ist falsch. Hier Name Mark Ich schließe mich Rahter an. Schau, ob ich hier klicke, dann ist es Mark Stern Dann nochmal, Raster. Außerdem hier eine sehr einfache Fade-In-Animation. Und wenn Sie möchten, können Sie auch beliebige Animationen oder Effekte hinzufügen. Unser Hauptaugenmerk liegt auf der Funktionalität. Also jetzt funktioniert alles bis hier einwandfrei. In der nächsten Sitzung werden wir an der Funktionalität arbeiten, um den Gewinner der Runde zu ermitteln, denn wenn wir auch dieses Spiel beenden, dann wird natürlich wenn wir auch dieses Spiel beenden, auch nichts passieren. Wir sehen uns also im nächsten Video. Danke. 29. Überprüfe den Gewinner des Spiels: H i. Als Nächstes müssen wir den Gewinner der Runde im Spiel überprüfen , sodass die Spieler entweder erneut spielen oder das Spiel beenden können, unabhängig davon, ob es ein Unentschieden oder ein Sieg ist . Und da sich diese Funktionalität auf das Spiel bezieht und nicht auf Sockets, erstellen wir eine neue Datei innerhalb von Resources. Interne Ressourcen erzeugen eine Datei, Spielmethoden funktionieren nicht. Außerdem wird die Logik, das Spiel zu gewinnen , ziemlich lang sein, da wir alle drei aufeinanderfolgenden Noten mit demselben Wert überprüfen müssen alle drei aufeinanderfolgenden Noten mit demselben Wert überprüfen , entweder in vertikaler, horizontaler oder diagonaler Richtung. Sagen wir Klassenmethoden für Schwule. In dieser Klasse wird es nur einen einzigen funktionellen Gewinner geben. Wir werden nach dem Klingelkontext mit dem Anbieter fragen mit dem Anbieter einige Dialogfelder und den Socket anzeigen. Socket-Client. Denken Sie daran, dass dieser Socket vom Socket-IO-Client kommt, nur der Eingang vom Dart. Erstellen Sie schneller einen Raumdatenanbieter. Das wird falsch sein. Zimmerdaten pro ide. Und auch der Saitengewinner, der hier ist, hier haben wir entweder X oder, welcher mit dem Symbol Eins. Und später, mit diesem Symbol, können wir die Benutzerdetails abrufen. Lassen Sie uns nun überprüfen, ob es drei aufeinanderfolgende Raster mit demselben Wert Horizontal überprüft Seine. Ich hoffe, Sie haben es horizontal verstanden. Ich nehme an, als ob es sich um eine Zimmerpuppe handelt. Horizontal bedeutet hier also Null, Eins, Zwei, so Dies sind die drei horizontalen Richtungen. Lassen Sie uns nun an der Logik arbeiten. Wir werden alles mit der IL-Erklärung machen. I: Der ROM-Datenprovider zeigt Elemente bei Null an, entspricht dem Rom-Datenprovider, Anzeige von Elementen an einer Position und dem Rom-Datenprovider. Die Anzeigeelemente bei Null entsprechen dem Raumdatenanbieter, die Anzeigeelemente an der At-Position. Zweitens, bis hierher, ich hoffe, Sie haben verstanden , dass diese Null gleich eins ist und auch Null gleich zwei ist. Das bedeutet, dass eins natürlich auch gleich zwei ist. Aber wir müssen sicherstellen, dass der Rom-Datenprovider, bei dem die Anzeigeelemente auf Null stehen, nicht gleich einer leeren Zeichenfolge ist. Da muss ein gewisser Wert drin sein. In diesem Fall entspricht der Gewinner dem Raumdatenanbieter, dem Anzeigeelement bei Null , also x oder y, x oder Null, was auch immer es ist. Lassen Sie uns es in ähnlicher Weise hinter sich lassen. Und jetzt werden wir prüfen, ob das Element bei drei gleich dem Element bei vier ist und das Element bei drei auch gleich dem Element bei fünf ist, und schließlich das Element bei drei, nicht gleich der T-Zeichenfolge. Der Gewinner ist also gleich dem. Das ist die zweite Linie in horizontaler Richtung. Kopieren Sie es auf ähnliche Weise und fügen Sie es ein. Jetzt ist die letzte Zeile sechs gleich 76 ist gleich acht und sechs ist nicht gleich t, also Display Eleate ist sechs, also ist Display Eleate sechs, so wie hier Das war der horizontale Wert. In ähnlicher Weise werde ich alles kopieren, all diese Dinge. Staat bezahlen. Jetzt werde ich nach den drei aufeinanderfolgenden Rastern suchen den drei aufeinanderfolgenden Rastern die denselben Wert in vertikaler Richtung Hier wird es so sein, dass die Anzeigeelemente bei Null dem Anzeigeelement entsprechen Null, eins, zwei, drei. Es wird drei sein, und wieder ist Null gleich 60 ist nicht gleich 20 t. Dann mach Null daraus, der Gewinner. Dann mache ich eins eins ist null, eins, zwei, 34. Eins ist gleich vier, dann ist eins gleich sieben. Eins ist ungleich leer und der Gewinner zeigt eins an. Denken Sie daran, dass dies horizontal ist und wir drei horizontale Linien haben. Schließlich ist zwei gleich 52 ist gleich acht, dann sind die zwei gleich. Und betone es nicht. Sie erhalten den Quellcode, sodass Sie zumindest überprüfen können ob Ihr Code fehlerhaft ist. Kopieren Sie nun endlich alles, fügen Sie es erneut ein, und das gilt für die drei aufeinanderfolgenden Raster demselben Wert diagonal Ich werde hier einfach diagonal schreiben. Und ich hoffe, du kennst die Diagonale, die das ist. Zuerst horizontal, dann vertikal und schließlich diagonal Und da kann die Diagonale so und so sein. Ja. Ja, Null ist gleich 40, ist gleich acht. Das ist in Ordnung. Dann ist die nächste Zahl zwei gleich Null, zwei, 34. Zwei ist gleich sechs, dann sollte es 22 sein. Jetzt brauchen wir diesen nicht. Jetzt will nur ich meinen Zustand hier haben. Das ist SAF. Das Punktfeld des Raumdatenanbieters ist gleich neun. Das heißt, wir prüfen alle Gewinnmöglichkeiten, und dann werden wir es für unentschieden erklären. Gewinner ist gleich leer. Offensichtlich ist das Feld leer und wir werden das Wählfeld mit der Aufschrift Unentschieden anzeigen lassen. Wir werden im nächsten Video an diesem Dialogfeld arbeiten, aber ich hoffe, Sie haben diese Logik verstanden Ich weiß, dass es ziemlich groß ist, aber es ist trotzdem sehr einfach Es sind nur die FL-Aussagen, sonst nichts. Also rette dich in der nächsten Sitzung. Danke. 30. Gewinner in DialogBox anzeigen: Hallo. Lassen Sie uns nun an einem Dialogfeld arbeiten, damit wir es unabhängig vom Ergebnis in der Dialogbox anzeigen können. Erstellen Sie im Ordner Utils eine neue Datei Utils dot dot. Ich werde die Dialogfeld-Funktion hier trennen. Es wird kein Kurs sein. Es wird direkt eine Funktion sein. So weit zum Spieldialog. Kontextskizze, Text aus der Zeichenkette werden direkt in den Dialog geschrieben. Jetzt ist der Kontext da. Dann ist eine weitere Eigenschaft, die ich hinzufügen möchte, barrier dismissable to false Dann im Builder, Kontext und ich kehre zurück und melde Der Titel enthält den Text mit dem Titel mit dem Textwert. Und wir werden Aktionen haben, die Aktionen. Lass uns die Textschaltfläche haben. Lassen Sie es vorerst einfach leer und es wird wieder im Kontext abgespielt. So wie das. Gehe zur Datei mit den Spielmethoden. Hier, hier, zeigen Sie eine Spieldialogbox, eine Spieldialogbox für das Unentschieden. Okay. Und jetzt, was wenn das Spiel nicht unentschieden ist und jemand gewinnt? unten in die CheckWinner-Funktion die Logik, Schreiben Sie unten in die CheckWinner-Funktion die Logik, um zu überprüfen, ob der Gewinner gewonnen hat, dass diese Variable nicht leer ist. Lassen Sie uns hier schreiben, ob Winner nicht gleich leer ist. Und dann werden wir prüfen, ob der Anbieter Zimmer hat, Spielertyp Spieler mit einem Punkt der Gewinner ist. Mit dem Symbol können wir nun wissen, welcher der Gewinner ist. Wir werden auch das S haben. Aber lasst uns arbeiten. Wenn Spieler eins gewinnt, wird das Spieldialogfeld angezeigt. Text ist Raum, der Anbieter für den Spielernamen, der Dis-Spieler eins, Spielername, eins für die Runde. Und wir werden ein Ereignis ausstrahlen. Natürlich müssen wir es auch dem Server sagen. Socket-Client, der den Gewinner der Veranstaltung ausgibt, wird ein Gewinner sein, und die Daten werden als Gewinner-Socket-ID gespeichert. Der Spieler des Roma-Anbieters hat eine Socket-ID und auch die Raum-ID. Wir müssen diese beiden Dinge schicken. Zimmervermittler, Rota ID. Okay. Und was ist, wenn Spieler zwei gewinnt, dann alles kopieren. Vergangenheit. Hier wird es der Name von Spieler zwei sein. Gewinner und hier wird es zu zweit gespielt. Andere Dinge werden gleich bleiben. Das ist die Logik. Wenn jemand gewinnt, dann zeigen wir zuerst eine Wählbox an und senden sogar en an den Notizserver. Führen Sie nun die Checkwinner-Funktion im Tab-Listener Gehen Sie zu den Socket-Methoden, damit wir nach jedem Zug nach dem Gewinner oder der Ziehung suchen Hier. Scheck für den Gewinner ausstellen. Schreiben Sie schwule Methoden und überprüfen Sie den Gewinner. Wir schicken den Socket-Client. Okay. Ich hoffe, du hast es verstanden, denn bei jedem Tippen wird dies aufgerufen und wir werden überprüfen, ob das Spiel vorbei ist oder nicht. Lass es uns jetzt testen. Viele Dinge sind es. Nehmen wir an, alles ist in Ordnung, oder? Toll, fertig Jo, wenn ich das hier mache. Lass uns versuchen, es zu gewinnen. Ich werde versuchen, den X-Wert zu gewinnen. Und siehe, Rahul hat die Runde gewonnen. Das heißt also, dass unsere Spiellogik funktioniert. Und ich denke, es gibt ein Problem mit dem Wert. Ich werde es überprüfen. Ich werde das Ding im nächsten Video überprüfen, was hier passiert ist, okay? Ich danke dir. 31. Wiedergabe-Funktionalität: Hallo. Im letzten Video habe ich einen Fehler in der Anwendung gefunden. Lassen Sie uns Ihnen zunächst den Fehler zeigen. Wenn ich eine neue Rolle erstelle. Rahul, erstelle es, kopiere es. Ass und schreibe den zweiten Cla und mach mit. Dann nehmen wir an, in Rahuls Begriff drehe X und wenn ich zweimal darauf klicke, wird es Null Siehe hier, wenn ich hier klicke, ist es X. Wenn ich den Wert lösche, C. Das war also irgendein Problem, wenn ich mehrmals klicke Der Benutzer kann also zweimal tippen und die Symbole oder Werte sind falsch platziert Dafür habe ich also viele Änderungen vorgenommen oder auch keine kleinen Änderungen Gehen Sie zunächst zur Room-Datenanbieterklasse und fügen Sie hier in Zeile 14 einen neuen Status hinzu, der den Wert absorbiert, und lassen Sie ihn auf „Wahr“ stehen. Und ich hoffe, Sie erinnern sich an den absorbierten Zeiger. Das heißt, wenn es wahr ist, können Sie nicht darauf tippen. Wenn es falsch ist, können Sie es aufnehmen. Standardmäßig mache ich es wahr und erstelle dann eine Getter-Funktion dafür S Erstellen Sie danach eine Aktualisierungsfunktion. Das ist absorbierend und bedeutet, dass ich, nachdem der Benutzer darauf getippt hat, seinen Wert direkt auf true ändere , sodass er nicht zweimal tippen kann Und wenn der Client die Funktion „ Raumdaten aktualisieren“ erhält, das heißt, wenn Sie zur Client-Methode wechseln, ist Se update room listener“ da, der die Funktion „ Raumdaten aktualisieren“ aufruft Nach jeder Runde wird der Raum aktualisiert. Und auch am Anfang wird der Raum aktualisiert. Dann betritt der zweite Benutzer den Raum. Hier werden wir den Absorptionswert ändern. Das heißt, wer auch immer es dreht , der Absorptionswert dieser Person wird falsch sein. Und standardmäßig wird es wahr sein. Denken Sie also daran, diese Zeile in dieser Zeile zu ändern. Dann das und das. Außerdem bekommst du den Code, damit du ihn verstehst, aber ich habe auch den neuen Code-Kommentar erwähnt. Danach glaube ich nicht. Hier habe ich keine Änderungen an der Socket-Methode vorgenommen. Nein. Geh direkt zum Tacto Bode und hier Kommentieren Sie den vorherigen Code, der absorbiert, und die Schreibabsorption entspricht dem Punktabsorptionswert der Raumdaten Das ist standardmäßig so, es wird wahr sein. Und auch wenn der Benutzer darauf tippt, werden wir es zuerst überprüfen. Wenn es wahr ist Das heißt, er sollte die Funktion nicht ausführen dürfen , dann werde ich sie nur von hier aus zurückgeben. Sie wird nicht ausgeführt. Und wenn der Benutzer darauf tippt, dann direkt, setze ich update the absorption auf true, sodass er nicht zweimal klicken kann Und danach wird die Socket-Methode aufgerufen. Das ist es. Das waren die Änderungen. Ich habe einfach die Art und Weise geändert wie der absorbierende Wert funktioniert. Das ist es. Lass es uns jetzt ausprobieren. Wenn ich jetzt einen Raum erstelle, ein schlecht eingefügtes Bild und wenn ich jetzt hier klicke, sehe ich, ich habe einen Doppelklick, aber es gibt kein Problem Jetzt hier, Null ist da, O ist da. Wenn ich hier auch mehrmals klicke, dann passiert auch nichts, weil das Absorbieren erst dann erfolgt, wenn der Benutzer darauf klickt. Und hier, hier ist es. Das heißt also, dass der Fehler jetzt behoben ist. Das war ein sehr kritischer Fehler. Offensichtlich würde das Spiel mit diesem Bug keinen Sinn ergeben. Aber da wir Programmierer sind, können wir Fehler finden und lösen Die einzige nächste Änderung, die Sie vornehmen müssen ist , zu den Spielmethoden zu wechseln, und zwar hier in der Zeile 74. Achten Sie darauf, dass Sie, wenn Sie überprüfen , ob die ausgefüllten Felder gleich neun sind, Sie addieren und der Gewinner gleich leer ist. Denn früher gab es einen anderen Bug, bei dem es nur seine Form gab, nehmen wir an, so und so. Okay, ich wandere herum, aber die Sache war, wenn nur noch ein Feld übrig war und der Gewinner gewinnt, dann wurde auch Unentschieden angezeigt, weil im Code, versuche einfach, diese Logik zu verstehen Das heißt, der Gewinner gewinnt vermutlich diagonal. Aber alle Boxen waren zu neun gefüllt. Deshalb hat er den Gewinner wieder auf Leere und Zeige Reihe geändert . Aber hier überprüfen wir, ob der Gewinner gleich leer ist. Dann auf der Dialogbox von Draw. Andernfalls ändern Sie den Gewinnerwert nicht. Stellen Sie also sicher, dass Sie dies ebenfalls aktualisieren. Also das ist es. Das war alles Geld, das wir reparieren mussten. Lassen Sie uns nun daran arbeiten, was passiert, wenn wir auf die Schaltfläche „Erneut abspielen“ klicken. Das heißt, lassen Sie uns eine Funktion erstellen, die ein neues Spiel neu startet. Wenn wir erneut auf das Spiel klicken. Gehen Sie hier zur Datei mit den Spielmethoden. Danach checken Sie den Gewinner. Nach diesem Checkwinner erstellen Sie ein neues Loch-Clayboard dann den Anbieter dann entfernen wir alle Werte aus den Anzeigeelementen. Write n ist gleich Null, I kleiner als Raumdatenanbieter, do display elements len I p simp room data update display elements Der Index wird sein, und die Auswahlmöglichkeiten werden gesetzt. Und dann einfach aufrufen, den Füllfeld-Spannungswert auf Null setzen, so wie hier, und dann dieses klare Wort in der UTs-Funktion zuweisen. Gehe hier zur TS-Funktion. Schreiben Sie also die Wortkontexte der K-Methoden Gator Pop Das ist richtig. Und hier mache ich mit. Und wenn ich es gewinne und erneut auf Spielen klicke, sieh mal. Auch hier können wir Vicki Sterns so spielen. Die Play Again-Funktionalität funktioniert also einwandfrei. Im nächsten Video werden wir daran arbeiten, uns den Event-Server des Gewinners anzuhören . Danke. 32. Höre dir das Gewinner-Event an: I. In der Funktion „Gewinner prüfen senden wir ein Ereignis namens Winner aus. Wie Sie sehen können, müssen wir uns jetzt dieses Socket-Ereignis auf dem Server anhören. Gehe zum Indexieren der JS-Datei. Hier. Lassen Sie uns einen neuen Socket-Listener auf Winner A Sync erstellen einen neuen Socket-Listener auf Winner A Sync Wir erhalten die Winner-Socket-ID. Raum-ID. Versuchen wir es mit Fangen. Es wird einfach Konsole E sein. Lassen Sie uns nun die Wurzel Raum-ID. Idee für ein Zimmer. Dann schauen wir mal, wer gewonnen hat, das heißt, die Spieler finden. Wir müssen was herausfinden. Zwei. Die Punkt-Socket-ID des Spielers sollte der Socket-ID des Gewinners entsprechen. Schnapp dir den Spieler. Erhöhen Sie den Punkt. Die Punktpunkte p sind gleich Eins. R ist gleich zwei S. Wenn das Spiel nun die Anzahl der Runden erreicht , die gespielt werden können, werden wir die Punkte direkt überprüfen, d. h. Spielerpunkte, die höher sind als die Anzahl der Runden. Schreiben Sie einfach IO, zwei Raum-IDs beenden Sie das Spiel mit den Spielerdaten. Das ist richtig. Ich habe auch festgestellt, dass das einfach die Punkteerhöhung erhöht. Das ist es. Das ist der Listener im Socket, und wir werden ihn einfach noch einmal überprüfen Das finden die Spieler. Es wird nur der Wert im Player zurückgegeben. Dann warten die Startpunkte der Spieler. Ich hoffe, ihr habt verstanden, dass ich die Punkte mit dem Maxon vergleiche, da es Null, Eins, Zwei sein wird, so werden nur drei Runden da sein Das ist es. Das war's für den Gewinner-Zuhörer. Im nächsten Video werden wir uns die Ereignisse zur Punkterhöhung am Ende des Spiels im Client anhören Punkterhöhung am Ende des Spiels . Danke. 33. Höre dir EndGame-Event an: Hi, willkommen zurück. Unsere Bewerbung steht also kurz vor dem Abschluss. Hören wir uns das Ereignis zur Erhöhung der Punktezahl auf der flacheren Seite an Gehen Sie hier zu den Socket-Methoden dieser Datei. Und hier. Lassen Sie uns einen Listener mit Funktion D Point Increase schreiben einen Listener mit Funktion D Point Increase Nun, kontaktiert den Sock-Client mit Punkterhöhung Dann erhalten wir die Spielerdaten wenn Sie den Raumanbieter anrufen Nein, richtig. Wenn die Play-Data-Socket-ID den Raumdaten entspricht, tun Sie dies mit der ID. Erhöhe den Spieler um einen Punkt. Also werde ich nur den Anbieter pro Person und Spieler rotieren. Es ist ganz einfach. Ich biete Raumdaten an, um Spieler zwei mit Spielerdaten zu aktualisieren. Also ich bin einfach, wir haben bereits den Erhöhungspunkt in der Spielerdatenvariablen. Also werde ich einfach die beiden Spielerdaten damit aktualisieren. Nehmen wir an, wir ändern das und benachrichtigen die Zuhörer, sodass auch die Bildschirme aktualisiert werden So wie das. Und hören wir uns auch das Endspiel-Event an. Hier unten, rechts im Spiel, Bell Count-Client Count-Client auf Endspiel-Re-Daten. Einfach dort, wo ich das Spieldialogfeld zeige. Der Text wird auf der Datenebene abgelegt und das Spiel benannt. Und danach kannst du einfach durch den Pop-Tail navigieren. Und ich entferne alle Bildschirme. Das ist, lass es uns testen. Mal sehen, was passiert , ob es funktioniert oder nicht. Okay. S Rahul hat die Runde gewonnen Ich glaube schon, wir haben vergessen, die Zuhörer an den Spielbildschirm zu binden Das ist das Problem. Gehe zum Spielbildschirm. Im Init-Zustand. Und was ist auch Was ist das für ein Fehler? Oh, ich habe auch diesen Tippfehler gemacht. Es sollte IO sein. Das war auch da. Gehe zum Spielbildschirm. Und hier binde es, das sind Socket-Methoden, Point Increase Listener und Socket-Methode und n Game Es sollte Endgame-Listener sein. Es sieht gut genug aus. Okay. Das ist es. Wie Sie sehen können, ist unser Projekt abgeschlossen. Im nächsten Video werde ich einfach die komplette Anwendung testen. Danke. 34. Teste die vollständige Anwendung: Hallo, willkommen zum letzten Video unseres Kurses. Hier werden wir die vollständige Funktionsweise der Anwendung testen . Also lass uns einen Raum erstellen. Lassen Sie uns das erstellen, kopieren wir es. Hier drüber hinweg. Schließ dich dem Raum an. Lass es uns jetzt versuchen. Lass es uns versuchen. Wenn ich erneut auf Play klicke. Dann funktioniert der Punkt nicht. Mal sehen, was passiert ist. Ich gehe zum Index, zur Jas-Datei. Und wenn ich es auch hier aktualisiere. Der Punkt ist im Server gestiegen. Also hier bis hier funktioniert es gut. Es war ein Fehler. Ich kann sehen, dass ich viel mit go mache und ob ich zu Spielmethoden oder Socket-Methoden gehe und hier erhöhe. Okay. Das war ein Bug, den ich behoben habe. Jetzt, wenn ich wieder einen Join erstelle einen Join und sehe. Level kriegt den Punkt. Und wenn ich dafür sorge, dass das Gebet siegt, dann versteht sie es. Und wenn Lah wieder gewinnt, dann hat er gewonnen. Er gewinnt das Spiel und wir zeigen es direkt. Ich weiß, dass es keine sehr gute Erfahrung ist. Also Dialer-Box. Also hier kannst du einfach die Logik schreiben , wenn du willst. Es liegt an dir. Das ist okay. Nach dem Klicken auf die Schaltfläche sollte er wieder zum Hauptbildschirm wechseln. Auch hier sollte sich ein neues Spiel öffnen, was auch immer du willst. Aber wie Sie sehen können, hat die App perfekt funktioniert. Alle Fehler wurden behoben. Das war's also für dieses Video, oder du kannst sagen, für diesen Kurs. Ich hoffe, Sie haben viel Spaß gehabt und viel gelernt. Schauen Sie sich auch meine anderen Kurse an. Empfehlen Sie mir einige Themen auch zu welchen Konzepten ich Videos machen sollte. Das ist es. Danke. Hab einen schönen Tag und übe weiter.