1 00:00:02,440 --> 00:00:07,590 Um sicherzustellen, dass der Computer das Spiel tatsächlich beenden und die richtige Nummer erraten kann, müssen 2 00:00:07,720 --> 00:00:12,000 wir überprüfen, was der Computer erraten hat, und dann das Spiel beenden, wenn 3 00:00:12,010 --> 00:00:17,590 es die von uns eingegebene Nummer ist. Dafür können wir einen anderen React-Hook verwenden, und das ist der useEffect-Hook. 4 00:00:17,590 --> 00:00:25,670 Mit useEffect können Sie Nebenwirkungen ausführen oder generell nach jedem Renderzyklus Logik ausführen. Wenn diese ganze Sache mit React Hooks 5 00:00:25,810 --> 00:00:31,300 für Sie relativ neu ist, sollten Sie sich auf jeden Fall einige dedizierte 6 00:00:31,300 --> 00:00:36,790 React Hooks-Ressourcen ansehen oder in meine eintauchen Reagieren Sie mit dem vollständigen Leitfaden, 7 00:00:36,850 --> 00:00:42,660 in dem ich Haken ausführlich behandele. Was ich jetzt mit useEffect mache, ist, dass ich es hier 8 00:00:42,770 --> 00:00:49,370 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 9 00:00:49,370 --> 00:00:54,950 wird standardmäßig nach jedem Renderzyklus ausgeführt für diese Komponente. Jedes Mal, wenn es gerendert 10 00:00:54,950 --> 00:00:59,750 wurde, wird diese Funktion ausgeführt, nachdem sie gerendert wurde. Dies ist 11 00:00:59,750 --> 00:01:03,150 auch wichtig, nicht vorher, nicht gleichzeitig, danach. 12 00:01:03,200 --> 00:01:10,290 Jetzt möchte ich überprüfen, ob der aktuell erstellte Computer der Benutzerauswahl entspricht, da dies bedeutet, dass das 13 00:01:10,290 --> 00:01:11,980 Spiel beendet ist. 14 00:01:12,120 --> 00:01:16,830 Dies kann natürlich beim ersten Renderzyklus nicht der Fall sein, da wir die Benutzerauswahl 15 00:01:16,830 --> 00:01:19,940 von den erratenen Zahlen ausschließen, aber ab der 16 00:01:19,940 --> 00:01:25,790 zweiten Zeile. Wenn wir also zum ersten Mal auf niedriger oder höher geklickt haben, kann dies passieren. 17 00:01:25,860 --> 00:01:29,220 Also möchte ich dort eine Art Feuer auslösen 18 00:01:29,220 --> 00:01:35,970 und die Nachricht über das Spiel an die App senden. js, damit wir den Spielbildschirm gegen ein Spiel über dem Bildschirm 19 00:01:35,970 --> 00:01:36,890 austauschen können. 20 00:01:36,970 --> 00:01:39,000 Jetzt haben wir diesen Bildschirm noch nicht, also 21 00:01:39,000 --> 00:01:45,300 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 22 00:01:45,300 --> 00:01:47,250 ihn später optimieren. Dort 23 00:01:47,250 --> 00:01:50,660 habe ich einfach eine Ansicht und einen 24 00:01:50,700 --> 00:02:00,760 Text und ein Stylesheet, also was wir normalerweise aus React Native importieren und dann die Game-over-Screen-Komponente darin haben, die einige Requisiten 25 00:02:00,760 --> 00:02:04,000 nimmt und am Ende etwas jsx zurückgibt. 26 00:02:04,000 --> 00:02:12,270 Hier haben wir diese Stile mit Stylesheet. erstellen und dann exportieren wir das Spiel standardmäßig über den Bildschirm. 27 00:02:12,370 --> 00:02:17,170 Wie ich bereits sagte, möchte ich dies vorerst einfach halten. Ich werde dort nur einen Blick darauf werfen, wenn ein Text des 28 00:02:17,170 --> 00:02:22,220 Spiels beendet ist, und wir werden dort später weitere Details ausgeben. Im Moment werde ich hier nur 29 00:02:22,230 --> 00:02:28,090 einen Stil zuweisen, meinen Bildschirmstil, den ich diesem Objekt hinzufügen werde, das wir hier unten an 30 00:02:28,090 --> 00:02:28,560 das 31 00:02:28,690 --> 00:02:37,720 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 32 00:02:37,750 --> 00:02:40,410 dieser Text für den Moment zentriert ist. 33 00:02:40,420 --> 00:02:44,440 Jetzt haben wir das Spiel über dem Bildschirm und möchten dies anstelle 34 00:02:44,440 --> 00:02:53,050 des Spielbildschirms rendern, wenn das Spiel beendet ist. Kehren wir also zur App zurück. js Datei und importieren Sie das Spiel über Bildschirm 35 00:02:53,050 --> 00:02:56,100 aus dem Bildschirmordner und dort aus Spiel über Bildschirm und 36 00:02:56,240 --> 00:03:04,240 die Frage ist jetzt natürlich, was ist unsere Bedingung für das Rendern dieses? Am Ende brauchen wir sowieso eine zusätzliche Information 37 00:03:04,390 --> 00:03:07,000 und das ist die Anzahl 38 00:03:07,000 --> 00:03:12,570 der Runden, die der Computer benötigt hat, um das Spiel zu beenden. 39 00:03:12,700 --> 00:03:18,720 Eine Sache, die ich hier in der App-Komponente speichern möchte, ist ein anderer Status, den ich verwalte. 40 00:03:18,730 --> 00:03:24,580 Dies ist die Anzahl der Runden, die bis zum Ende benötigt wurden. Sie ist anfangs Null, 41 00:03:24,580 --> 00:03:26,120 da wir das 42 00:03:26,260 --> 00:03:31,540 Spiel noch nicht gestartet haben Wenn Sie Vermutungsrunden festlegen, können Sie diese beliebig benennen. 43 00:03:31,540 --> 00:03:34,130 Jetzt ist das Ziel, dies festzulegen, wenn das Spiel vorbei ist. 44 00:03:34,140 --> 00:03:38,230 Deshalb füge ich hier der App-Komponente, dem Game-over-Handler, eine weitere 45 00:03:38,230 --> 00:03:45,790 Funktion hinzu, und dort möchte ich meine Anzahl von Runden als Argument erhalten. Daher erwarte ich, dass ich 46 00:03:45,790 --> 00:03:50,010 diese hier bekomme, damit ich Set-Guess-Runden aufrufen kann zu meiner 47 00:03:50,020 --> 00:03:56,440 Anzahl von Runden bin ich hierher gekommen. Jetzt sollte der Game-Over-Handler offensichtlich über den Spielbildschirm ausgelöst werden. 48 00:03:56,560 --> 00:04:01,390 Hier auf dem Spielbildschirm möchte ich eine Requisite übergeben, die ich onGameOver nennen werde. Sie klingt wie 49 00:04:01,420 --> 00:04:06,430 ein passender Name, der dann vom Spielbildschirm aus aufgerufen werden kann oder der eine Funktionsreferenz enthält, die 50 00:04:06,430 --> 00:04:10,960 dann von innerhalb des Spielbildschirms aufgerufen werden kann Der Spielbildschirm und die Funktionsreferenz sind natürlich 51 00:04:10,960 --> 00:04:13,600 eine Referenz bei diesem Spiel über die Handlerfunktion. 52 00:04:13,600 --> 00:04:19,450 Innerhalb des Spielbildschirms können wir jetzt die onGameOver-Requisite verwenden, um diese Funktion auszuführen und die Anzahl der 53 00:04:19,450 --> 00:04:22,720 Runden zu übergeben, die der Computer benötigt hat, um unsere 54 00:04:22,720 --> 00:04:29,460 Anzahl zu erraten. Dann legen wir diese Anzahl von Runden hier fest, speichern sie in unserem Status für erratene Runden und 55 00:04:29,470 --> 00:04:37,480 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 56 00:04:37,480 --> 00:04:40,560 als Null ist, wird der Game-Over-Handler ausgeführt und das 57 00:04:40,720 --> 00:04:41,970 Spiel ist beendet. 58 00:04:41,980 --> 00:04:43,840 Wir möchten das Spiel also über 59 00:04:43,870 --> 00:04:46,490 dem Bildschirm anzeigen, wenn die Schätzrunden größer als Null sind. 60 00:04:46,540 --> 00:04:52,180 Übrigens, wenn wir ein neues Spiel starten, möchte ich auch meine Schätzrunden auf Null zurücksetzen, denn wenn ein neues Spiel startet, 61 00:04:52,180 --> 00:04:52,570 möchten 62 00:04:52,570 --> 00:04:56,350 wir die Anzahl der Runden, die der Computer benötigt hat, auf 0 zurücksetzen. 63 00:04:56,470 --> 00:04:58,600 Wenn es also größer als Null ist, ist 64 00:04:58,630 --> 00:05:02,110 das Spiel beendet. In diesem Fall möchte ich das Spiel über dem Bildschirm anzeigen. 65 00:05:02,110 --> 00:05:07,540 Wenn ich hier überprüfe, ob wir eine Benutzernummer haben. In diesem Fall zeige ich den Spielbildschirm. 66 00:05:07,960 --> 00:05:13,110 Das ist nur dann richtig, wenn die Schätzrunden kleiner oder gleich Null sind. Eine kleinere 67 00:05:13,120 --> 00:05:16,780 ist nicht möglich, aber wir können dies trotzdem überprüfen. 68 00:05:16,900 --> 00:05:20,770 Wenn dies der Fall ist, wissen wir, dass das Spiel 69 00:05:20,770 --> 00:05:28,650 mit Sicherheit läuft. Wenn die Schätzrunden größer als Null sind, wissen wir, dass das Spiel beendet ist und der Inhalt daher 70 00:05:28,650 --> 00:05:31,960 dem Spiel über dem Bildschirm entspricht. Im Moment 71 00:05:31,980 --> 00:05:37,160 ist dies nur eine Komponente wie diese ohne irgendwelche Requisiten, die wir weitergeben. 72 00:05:37,180 --> 00:05:43,270 Jetzt haben wir eine Bedingung, in der wir das Spiel über dem Bildschirm rendern. Alles, was wir jetzt tun müssen, ist, 73 00:05:43,270 --> 00:05:49,330 dass wir die onGameOver-Requisite hier in unserem Spielbildschirm verwenden müssen, um diese Funktion am Ende aufzurufen und die Anzahl der Runden 74 00:05:49,330 --> 00:05:51,010 an die App-Komponente weiterzuleiten . 75 00:05:51,820 --> 00:05:59,510 Wenn also im Spielbildschirm useEffect hier feststellt, dass die richtige Wahl getroffen wurde, die richtige Vermutung getroffen wurde und 76 00:05:59,530 --> 00:06:07,120 das Spiel daher beendet ist, möchte ich hier Requisiten onGameOver als Funktion aufrufen und die Anzahl der Runden weiterleiten 77 00:06:07,240 --> 00:06:14,380 nahm den Computer, um unser Ergebnis oder unsere Wahl zu erraten, und das ist daher ein weiterer 78 00:06:14,410 --> 00:06:22,750 Zustand, den wir hier auf dem Spielbildschirm verwalten müssen. Wir haben unsere Runden und setzen Runden und anfangs, das ist 79 00:06:22,810 --> 00:06:32,280 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 80 00:06:32,290 --> 00:06:37,390 eine Zahl ist, die wir mit jeder Vermutung erhöhen werden, weil Wenn wir im 81 00:06:37,390 --> 00:06:43,510 nächsten Guess-Handler neben dem Setzen dieser Vermutung hier in unserem Bundesstaat eine nächste Vermutung generieren, möchte 82 00:06:43,540 --> 00:06:51,630 ich natürlich auch meine Runden festlegen und dort das Funktionsformular verwenden, in dem ich meine aktuellen Runden erhalte und aktuelle Runden 83 00:06:51,760 --> 00:06:53,330 zurückgebe Plus eins. 84 00:06:53,380 --> 00:06:59,560 Also addiere ich eine zu meiner aktuellen Anzahl von Runden, die ich in meinem Bundesstaat speichere, so dass der neue Status alte 85 00:06:59,560 --> 00:07:05,930 Runden plus eine ist, weil eine neue Runde gestartet wurde. Damit verwalten wir die Anzahl der Runden und verwenden dies 86 00:07:05,930 --> 00:07:12,530 als Bedingung in der App-Komponente, um das Spiel über dem Bildschirm zu rendern. Auf dem Spielbildschirm prüfen wir, ob das Spiel 87 00:07:12,740 --> 00:07:17,480 hier in useEffect und gerade jetzt beendet ist Wir tun dies immer dann, wenn diese Komponente 88 00:07:17,490 --> 00:07:18,690 erneut gerendert wird. 89 00:07:19,010 --> 00:07:26,240 Jetzt könnten wir das tun, aber wir können auch einfach ehrlicher oder direkter in Bezug auf die Abhängigkeiten dieses Effekts 90 00:07:26,270 --> 00:07:31,640 sein, und das können Sie tun oder indem Sie ein zweites Argument zu useEffect hinzufügen. 91 00:07:31,880 --> 00:07:37,550 Das erste Argument ist die Funktion, die nach dem Rendern ausgeführt werden soll Die Komponente, das 92 00:07:37,560 --> 00:07:41,630 zweite Argument, das Sie an useEffect übergeben haben, ist ein 93 00:07:41,630 --> 00:07:47,690 Array von Abhängigkeiten dieser Funktion. Hier müssen Sie einen Wert angeben, der von außerhalb dieser Effektfunktion stammt. 94 00:07:47,690 --> 00:07:53,660 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 95 00:07:54,000 --> 00:07:57,260 ändert, wird dieser Effekt erneut ausgeführt. Wenn sich eine Aufgabe nach einem 96 00:07:57,290 --> 00:08:03,380 Renderzyklus ändert, wird der Effekt erneut ausgeführt, sollte ich sagen . Wenn ein Renderzyklus aufgetreten ist und die hier angegebenen 97 00:08:03,380 --> 00:08:06,840 Werte immer noch dieselben wie im vorherigen Renderzyklus sind, wird 98 00:08:06,860 --> 00:08:11,300 der Effekt nicht erneut ausgeführt, sodass der Effekt nur dann erneut ausgeführt wird, 99 00:08:11,390 --> 00:08:17,120 wenn sich eine unserer Abhängigkeiten geändert hat. Nun, wie gesagt, Requisiten Benutzerauswahl und Requisiten 100 00:08:17,120 --> 00:08:24,230 onGameOver sind alle Abhängigkeiten. Um diese zu beseitigen, verwende ich eine moderne Javascript-Syntax, bei der ich Objekt-Destrukturierung 101 00:08:24,320 --> 00:08:32,720 verwende, um meine Requisiten zu destruieren und Benutzerauswahl und onGameOver daraus zu machen Die Syntax mag seltsam aussehen, aber es 102 00:08:32,720 --> 00:08:33,400 ist 103 00:08:33,440 --> 00:08:39,500 wie eine Array-Derestrukturierung. Nur für Objekte ziehen wir diese Eigenschaften, also diese Eigenschaftsnamen aus diesem 104 00:08:39,500 --> 00:08:45,860 Requisitenobjekt und speichern sie in Konstanten mit gleichen Namen, sodass wir hier nur die Benutzerauswahl 105 00:08:45,860 --> 00:08:53,930 und nur verwenden können Verwenden Sie onGameOver, da diese Werte jetzt in Konstanten dieses Namens gespeichert sind, die aus Requisiten 106 00:08:53,930 --> 00:09:00,350 gezogen wurden, und ich mache das, weil wir jetzt Benutzerauswahl und onGameOver als Abhängigkeiten in dieser 107 00:09:00,350 --> 00:09:04,340 Liste hinzufügen können, andernfalls müssten wir hier und das 108 00:09:04,340 --> 00:09:10,370 tatsächlich Requisiten hinzufügen ändert sich, wenn sich die übergeordnete Komponente ändert, und ist daher 109 00:09:10,420 --> 00:09:11,990 keine gute Prüfung. 110 00:09:12,050 --> 00:09:16,430 Dies ist eine bessere Überprüfung, da wir jetzt sicherstellen, dass es uns egal ist, ob sich etwas anderes in den Requisiten 111 00:09:16,430 --> 00:09:23,300 ä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 112 00:09:23,300 --> 00:09:28,280 führen sollte, dass das Spiel über dem Bildschirm angezeigt wird, wenn der Computer 113 00:09:28,280 --> 00:09:31,530 unsere Zahlen erraten hat. Speichern wir dies 114 00:09:31,670 --> 00:09:42,580 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 115 00:09:42,580 --> 00:09:43,990 sein. Lassen Sie mich 116 00:09:43,990 --> 00:09:46,710 Ihnen auch zeigen, wie die Warnung aussieht, wenn ich auf 117 00:09:46,750 --> 00:09:50,280 Android bin. Es ist diese Standard-Android-Warnung. So 32 war es, also sollte 118 00:09:50,290 --> 00:09:53,170 es natürlich größer sein, sollte immer noch größer sein, jetzt sollte 119 00:09:53,200 --> 00:09:58,780 es niedriger sein, sollte niedriger sein, sollte größer sein, sollte niedriger sein, sollte niedriger sein, sollte größer sein, sollte größer 120 00:09:58,780 --> 00:09:59,780 sein das Spiel ist 121 00:09:59,830 --> 00:10:00,490 vorbei. 122 00:10:00,580 --> 00:10:05,590 Das sieht gut aus, die Vermutung war wahrscheinlich 32, würde in Bezug auf die Zahlenfolge, die wir hier 123 00:10:05,590 --> 00:10:08,800 hatten, Sinn machen, und daher macht diese Ausgabe hier Sinn.