Um sicherzustellen, dass der Computer das Spiel tatsächlich beenden und die richtige Nummer erraten kann, müssen
wir überprüfen, was der Computer erraten hat, und dann das Spiel beenden, wenn
es die von uns eingegebene Nummer ist. Dafür können wir einen anderen React-Hook verwenden, und das ist der useEffect-Hook.
Mit useEffect können Sie Nebenwirkungen ausführen oder generell nach jedem Renderzyklus Logik ausführen. Wenn diese ganze Sache mit React Hooks
für Sie relativ neu ist, sollten Sie sich auf jeden Fall einige dedizierte
React Hooks-Ressourcen ansehen oder in meine eintauchen Reagieren Sie mit dem vollständigen Leitfaden,
in dem ich Haken ausführlich behandele. Was ich jetzt mit useEffect mache, ist, dass ich es hier
aufrufe, nachdem ich meinen Status und meine Refs hier und da initialisiert habe. Wir haben eine Funktion, also verwendet useEffect eine Funktion und diese Funktion
wird standardmäßig nach jedem Renderzyklus ausgeführt für diese Komponente. Jedes Mal, wenn es gerendert
wurde, wird diese Funktion ausgeführt, nachdem sie gerendert wurde. Dies ist
auch wichtig, nicht vorher, nicht gleichzeitig, danach.
Jetzt möchte ich überprüfen, ob der aktuell erstellte Computer der Benutzerauswahl entspricht, da dies bedeutet, dass das
Spiel beendet ist.
Dies kann natürlich beim ersten Renderzyklus nicht der Fall sein, da wir die Benutzerauswahl
von den erratenen Zahlen ausschließen, aber ab der
zweiten Zeile. Wenn wir also zum ersten Mal auf niedriger oder höher geklickt haben, kann dies passieren.
Also möchte ich dort eine Art Feuer auslösen
und die Nachricht über das Spiel an die App senden. js, damit wir den Spielbildschirm gegen ein Spiel über dem Bildschirm
austauschen können.
Jetzt haben wir diesen Bildschirm noch nicht, also
fügen wir ihn hinzu, fügen wir hier im Bildschirmordner ein Spiel über dem Bildschirm hinzu und erstellen zunächst einen sehr einfachen Bildschirm. Wir werden
ihn später optimieren. Dort
habe ich einfach eine Ansicht und einen
Text und ein Stylesheet, also was wir normalerweise aus React Native importieren und dann die Game-over-Screen-Komponente darin haben, die einige Requisiten
nimmt und am Ende etwas jsx zurückgibt.
Hier haben wir diese Stile mit Stylesheet. erstellen und dann exportieren wir das Spiel standardmäßig über den Bildschirm.
Wie ich bereits sagte, möchte ich dies vorerst einfach halten. Ich werde dort nur einen Blick darauf werfen, wenn ein Text des
Spiels beendet ist, und wir werden dort später weitere Details ausgeben. Im Moment werde ich hier nur
einen Stil zuweisen, meinen Bildschirmstil, den ich diesem Objekt hinzufügen werde, das wir hier unten an
das
Stylesheet übergeben haben, den Flex auf 1 setzen und möglicherweise den Inhalt zum Zentrieren rechtfertigen und dann die Elemente zum Zentrieren ausrichten. so dass
dieser Text für den Moment zentriert ist.
Jetzt haben wir das Spiel über dem Bildschirm und möchten dies anstelle
des Spielbildschirms rendern, wenn das Spiel beendet ist. Kehren wir also zur App zurück. js Datei und importieren Sie das Spiel über Bildschirm
aus dem Bildschirmordner und dort aus Spiel über Bildschirm und
die Frage ist jetzt natürlich, was ist unsere Bedingung für das Rendern dieses? Am Ende brauchen wir sowieso eine zusätzliche Information
und das ist die Anzahl
der Runden, die der Computer benötigt hat, um das Spiel zu beenden.
Eine Sache, die ich hier in der App-Komponente speichern möchte, ist ein anderer Status, den ich verwalte.
Dies ist die Anzahl der Runden, die bis zum Ende benötigt wurden. Sie ist anfangs Null,
da wir das
Spiel noch nicht gestartet haben Wenn Sie Vermutungsrunden festlegen, können Sie diese beliebig benennen.
Jetzt ist das Ziel, dies festzulegen, wenn das Spiel vorbei ist.
Deshalb füge ich hier der App-Komponente, dem Game-over-Handler, eine weitere
Funktion hinzu, und dort möchte ich meine Anzahl von Runden als Argument erhalten. Daher erwarte ich, dass ich
diese hier bekomme, damit ich Set-Guess-Runden aufrufen kann zu meiner
Anzahl von Runden bin ich hierher gekommen. Jetzt sollte der Game-Over-Handler offensichtlich über den Spielbildschirm ausgelöst werden.
Hier auf dem Spielbildschirm möchte ich eine Requisite übergeben, die ich onGameOver nennen werde. Sie klingt wie
ein passender Name, der dann vom Spielbildschirm aus aufgerufen werden kann oder der eine Funktionsreferenz enthält, die
dann von innerhalb des Spielbildschirms aufgerufen werden kann Der Spielbildschirm und die Funktionsreferenz sind natürlich
eine Referenz bei diesem Spiel über die Handlerfunktion.
Innerhalb des Spielbildschirms können wir jetzt die onGameOver-Requisite verwenden, um diese Funktion auszuführen und die Anzahl der
Runden zu übergeben, die der Computer benötigt hat, um unsere
Anzahl zu erraten. Dann legen wir diese Anzahl von Runden hier fest, speichern sie in unserem Status für erratene Runden und
jetzt In der App-Komponente wissen wir, dass wenn das Rätselraten Null ist, das Spiel noch nicht gestartet wurde oder es läuft. Wenn es größer
als Null ist, wird der Game-Over-Handler ausgeführt und das
Spiel ist beendet.
Wir möchten das Spiel also über
dem Bildschirm anzeigen, wenn die Schätzrunden größer als Null sind.
Übrigens, wenn wir ein neues Spiel starten, möchte ich auch meine Schätzrunden auf Null zurücksetzen, denn wenn ein neues Spiel startet,
möchten
wir die Anzahl der Runden, die der Computer benötigt hat, auf 0 zurücksetzen.
Wenn es also größer als Null ist, ist
das Spiel beendet. In diesem Fall möchte ich das Spiel über dem Bildschirm anzeigen.
Wenn ich hier überprüfe, ob wir eine Benutzernummer haben. In diesem Fall zeige ich den Spielbildschirm.
Das ist nur dann richtig, wenn die Schätzrunden kleiner oder gleich Null sind. Eine kleinere
ist nicht möglich, aber wir können dies trotzdem überprüfen.
Wenn dies der Fall ist, wissen wir, dass das Spiel
mit Sicherheit läuft. Wenn die Schätzrunden größer als Null sind, wissen wir, dass das Spiel beendet ist und der Inhalt daher
dem Spiel über dem Bildschirm entspricht. Im Moment
ist dies nur eine Komponente wie diese ohne irgendwelche Requisiten, die wir weitergeben.
Jetzt haben wir eine Bedingung, in der wir das Spiel über dem Bildschirm rendern. Alles, was wir jetzt tun müssen, ist,
dass wir die onGameOver-Requisite hier in unserem Spielbildschirm verwenden müssen, um diese Funktion am Ende aufzurufen und die Anzahl der Runden
an die App-Komponente weiterzuleiten .
Wenn also im Spielbildschirm useEffect hier feststellt, dass die richtige Wahl getroffen wurde, die richtige Vermutung getroffen wurde und
das Spiel daher beendet ist, möchte ich hier Requisiten onGameOver als Funktion aufrufen und die Anzahl der Runden weiterleiten
nahm den Computer, um unser Ergebnis oder unsere Wahl zu erraten, und das ist daher ein weiterer
Zustand, den wir hier auf dem Spielbildschirm verwalten müssen. Wir haben unsere Runden und setzen Runden und anfangs, das ist
Null, wenn diese Komponente zum ersten Mal erstellt wird, ist dies natürlich Null und Runden ist daher jetzt das, was ich hier weitergebe, weil das
eine Zahl ist, die wir mit jeder Vermutung erhöhen werden, weil Wenn wir im
nächsten Guess-Handler neben dem Setzen dieser Vermutung hier in unserem Bundesstaat eine nächste Vermutung generieren, möchte
ich natürlich auch meine Runden festlegen und dort das Funktionsformular verwenden, in dem ich meine aktuellen Runden erhalte und aktuelle Runden
zurückgebe Plus eins.
Also addiere ich eine zu meiner aktuellen Anzahl von Runden, die ich in meinem Bundesstaat speichere, so dass der neue Status alte
Runden plus eine ist, weil eine neue Runde gestartet wurde. Damit verwalten wir die Anzahl der Runden und verwenden dies
als Bedingung in der App-Komponente, um das Spiel über dem Bildschirm zu rendern. Auf dem Spielbildschirm prüfen wir, ob das Spiel
hier in useEffect und gerade jetzt beendet ist Wir tun dies immer dann, wenn diese Komponente
erneut gerendert wird.
Jetzt könnten wir das tun, aber wir können auch einfach ehrlicher oder direkter in Bezug auf die Abhängigkeiten dieses Effekts
sein, und das können Sie tun oder indem Sie ein zweites Argument zu useEffect hinzufügen.
Das erste Argument ist die Funktion, die nach dem Rendern ausgeführt werden soll Die Komponente, das
zweite Argument, das Sie an useEffect übergeben haben, ist ein
Array von Abhängigkeiten dieser Funktion. Hier müssen Sie einen Wert angeben, der von außerhalb dieser Effektfunktion stammt.
In unserem Fall wäre dies die aktuelle Vermutung und dies wäre die Auswahl der Requisitenbenutzer und Requisiten onGameOver. Wenn sich ein solcher Wert
ändert, wird dieser Effekt erneut ausgeführt. Wenn sich eine Aufgabe nach einem
Renderzyklus ändert, wird der Effekt erneut ausgeführt, sollte ich sagen . Wenn ein Renderzyklus aufgetreten ist und die hier angegebenen
Werte immer noch dieselben wie im vorherigen Renderzyklus sind, wird
der Effekt nicht erneut ausgeführt, sodass der Effekt nur dann erneut ausgeführt wird,
wenn sich eine unserer Abhängigkeiten geändert hat. Nun, wie gesagt, Requisiten Benutzerauswahl und Requisiten
onGameOver sind alle Abhängigkeiten. Um diese zu beseitigen, verwende ich eine moderne Javascript-Syntax, bei der ich Objekt-Destrukturierung
verwende, um meine Requisiten zu destruieren und Benutzerauswahl und onGameOver daraus zu machen Die Syntax mag seltsam aussehen, aber es
ist
wie eine Array-Derestrukturierung. Nur für Objekte ziehen wir diese Eigenschaften, also diese Eigenschaftsnamen aus diesem
Requisitenobjekt und speichern sie in Konstanten mit gleichen Namen, sodass wir hier nur die Benutzerauswahl
und nur verwenden können Verwenden Sie onGameOver, da diese Werte jetzt in Konstanten dieses Namens gespeichert sind, die aus Requisiten
gezogen wurden, und ich mache das, weil wir jetzt Benutzerauswahl und onGameOver als Abhängigkeiten in dieser
Liste hinzufügen können, andernfalls müssten wir hier und das
tatsächlich Requisiten hinzufügen ändert sich, wenn sich die übergeordnete Komponente ändert, und ist daher
keine gute Prüfung.
Dies ist eine bessere Überprüfung, da wir jetzt sicherstellen, dass es uns egal ist, ob sich etwas anderes in den Requisiten
ändert. Nur wenn sich einer dieser beiden Werte ändert, sollte dieser Effekt erneut ausgeführt werden. Jetzt haben wir unseren Check-in eingerichtet, der hoffentlich dazu
führen sollte, dass das Spiel über dem Bildschirm angezeigt wird, wenn der Computer
unsere Zahlen erraten hat. Speichern wir dies
jetzt und probieren wir es aus, vielleicht hier auf Android, um die Dinge zu verwechseln. Also gebe ich hier eine Zahl ein, 32, bestätige, starte ein Spiel und es ist 2, also sollte es größer
sein. Lassen Sie mich
Ihnen auch zeigen, wie die Warnung aussieht, wenn ich auf
Android bin. Es ist diese Standard-Android-Warnung. So 32 war es, also sollte
es natürlich größer sein, sollte immer noch größer sein, jetzt sollte
es niedriger sein, sollte niedriger sein, sollte größer sein, sollte niedriger sein, sollte niedriger sein, sollte größer sein, sollte größer
sein das Spiel ist
vorbei.
Das sieht gut aus, die Vermutung war wahrscheinlich 32, würde in Bezug auf die Zahlenfolge, die wir hier
hatten, Sinn machen, und daher macht diese Ausgabe hier Sinn.