Aby upewnić się, że komputer rzeczywiście ukończy tę grę i odgadnie prawidłową
liczbę, musimy sprawdzić, co komputer zgadł, a następnie zakończyć grę,
jeśli jest to wpisana liczba. W tym celu możemy użyć innego haka React i to jest haczyk useEffect.
useEffect pozwala na uruchamianie efektów ubocznych lub ogólnie, pozwala uruchamiać logikę po każdym cyklu renderowania i tak, jak wspomniano wcześniej,
jeśli cała ta funkcja haków React jest dla Ciebie stosunkowo nowa, zdecydowanie sprawdź
niektóre dedykowane zasoby haków React lub zanurz się w moim React Complete Guide
Course, w którym szczegółowo omawiam haczyki. Więc teraz zrobię z useEffect to wywołam to tutaj
po zainicjowaniu mojego stanu i moich referencji tu i tam, mamy funkcję, więc useEffect przyjmuje funkcję i ta funkcja domyślnie
działa po każdym cyklu renderowania dla tego komponentu. Tak więc za każdym razem,
gdy jest renderowana, funkcja jest wykonywana po jej renderowaniu, jest
to również ważne, nie wcześniej, nie jednocześnie.
Teraz tam chcę sprawdzić, czy bieżący domniemany komputer jest równy wyborowi użytkownika, ponieważ oznacza to, że
gra się skończyła.
Nie może to oczywiście dotyczyć pierwszego cyklu renderowania, ponieważ wykluczamy wybór użytkownika z
możliwych do zgadnięcia liczb, ale z drugiego
rzędu, więc po kliknięciu niższej lub większej wartości po raz pierwszy może się to zdarzyć.
Tak więc tam chcę następnie odpalić grę
po przesłaniu wiadomości i wysłać ją do aplikacji. js, abyśmy mogli zamienić ekran gry na grę
na ekranie.
Teraz nie mamy tego ekranu,
więc dodajmy go, dodajmy grę na ekranie tutaj w folderze ekranów i stwórzmy teraz bardzo prosty, dopracujemy
go później. Tam
po prostu będę mieć widok, tekst i
arkusz stylów, więc to, co zwykle importujemy z React Native, a następnie mamy tam element gry na ekranie, który bierze kilka
rekwizytów, a następnie zwraca jsx na końcu.
Tutaj mamy te style z arkuszem stylów. utwórz, a następnie domyślnie wyeksportujemy grę na ekran.
Teraz, tak jak powiedziałem, chcę na razie zachować prostotę, po prostu zobaczę tam tekst z
zakończoną grą, a później podamy więcej szczegółów. Na razie tutaj po prostu
przypisuję jakiś styl, mój styl ekranu, który dodam do tego obiektu, przekazaliśmy do arkusza stylów
tutaj na dole, ustaw flex na 1 i może uzasadnić zawartość do środka, a następnie wyrównać elementy do środka, dzięki czemu
ten tekst jest na chwilę wyśrodkowany.
Teraz mamy grę na ekranie i chcemy ją renderować zamiast
ekranu gry, jeśli gra się skończy. Wróćmy do aplikacji. Plik js i zaimportuj grę na ekran
z folderu ekrany, a tam z gry na
ekran, a teraz jest oczywiście pytanie, jaki jest nasz warunek renderowania? Cóż, w końcu będziemy potrzebować jeszcze
jednej informacji, a
to liczba rund, jakie zajęło komputerowi ukończenie gry.
Jedną rzeczą, którą chcę zapisać tutaj w komponencie aplikacji, jest inny stan, którym zarządzam, a
mianowicie liczba rund potrzebnych do ukończenia, która początkowo wynosi zero, ponieważ jeszcze nie rozpoczęliśmy
gry, i wymyślę
te rundy zgadywania i ustaw rundy zgadywania i możesz nazwać to, co chcesz.
Teraz celem jest ustawienie tego po zakończeniu gry.
W tym celu dodam także inną funkcję tutaj do
komponentu aplikacji, grę nad modułem obsługi i tam, chcę uzyskać moją liczbę rund jako argument, więc spodziewam
się tego tutaj, aby móc wywoływać set rundy zgadywania do
mojej liczby rund, które tu dostałem. Teraz gra powinna zostać uruchomiona z poziomu ekranu gry.
Tak więc tutaj na ekranie gry chcę przekazać rekwizyt, który nadam na GameGver, brzmi jak
odpowiednia nazwa, którą można wywołać z poziomu ekranu gry lub która zawiera odniesienie do funkcji, które
można następnie wywołać z wnętrza ekran gry i odniesienie do funkcji są oczywiście
odniesieniem w tej funkcji do funkcji obsługi.
Więc wewnątrz ekranu gry możemy teraz użyć rekwizytu onGameOver, aby wykonać tę funkcję i przekazać
liczbę rund potrzebnych komputerowi do odgadnięcia naszej liczby, a
następnie ustawiamy tę liczbę rund tutaj, przechowujemy ją w naszym stanie rund zgadywania i teraz w komponencie aplikacji
wiemy, że jeśli liczba rund wynosi zero, gra jeszcze się nie rozpoczęła lub jest uruchomiona, jeśli jest większa od zera, wówczas
gra wykonywana jest przez program obsługi i gra
się kończy.
Chcemy więc pokazać grę na
ekranie, jeśli liczba trafień jest większa od zera.
Nawiasem mówiąc, jeśli rozpoczynamy nową grę, chcę również zresetować moje rundy zgadywania do zera, ponieważ jeśli rozpocznie
się
nowa gra, chcemy zresetować liczbę rund, które komputer wziął na 0.
Jeśli więc jest większa od zera,
gra się kończy, więc w takim przypadku chcę pokazać grę na ekranie.
Więc tutaj, jeśli sprawdzę, czy mamy numer użytkownika, w którym to przypadku wyświetlę ekran gry,
jest to poprawne tylko wtedy, gdy liczba trafień jest mniejsza lub równa zero,
mniejsze nie jest możliwe, ale nadal możemy to sprawdzić.
Więc jeśli tak jest, to wiemy, że gra na
pewno działa, w przeciwnym razie, jeśli liczba trafień jest większa od zera, wiemy, że gra się skończyła, a
zatem zawartość będzie równa grze na
ekranie, teraz jest to tylko taki element bez żadnych rekwizytów, które mijamy.
Więc teraz mamy warunek, w którym renderujemy grę na ekranie, wszystko, co musimy teraz zrobić, musimy użyć
onGameOver Prop tutaj na naszym ekranie gry, aby w końcu wywołać tę funkcję i przekazać liczbę rund
do komponentu aplikacji .
Więc z powrotem na ekranie gry, jeśli useEffect tutaj określi, że dokonano właściwego wyboru, dokonano właściwej
domysły, a zatem gra się skończyła, to tutaj chcę wywołać rekwizyty w GameOver jako funkcję i
podać liczbę rund komputer zgadł nasz wynik lub nasz wybór, dlatego jest to kolejny
stan, którym musimy zarządzać tutaj na ekranie gry. Mamy nasze rundy i ustawiamy rundy i początkowo, czyli
zero, kiedy ten komponent jest tworzony po raz pierwszy, jest to oczywiście zero i dlatego rundy są teraz tym, co przesyłam dalej, ponieważ
jest to liczba, którą będziemy zwiększać przy każdym zgadywaniu, ponieważ w następnym
module obsługi zgadywania, jeśli generujemy kolejne zgadywanie, oprócz ustawienia tego zgadywania tutaj w naszym stanie,
oczywiście również chcę ustawić moje rundy i użyć formularza funkcji, w którym otrzymuję moje bieżące rundy i zwracam bieżące
rundy plus jeden.
Dodam więc jedną do mojej obecnej liczby rund, które przechowuję w swoim stanie, tak aby nowy stan to
stare rundy plus jedna, ponieważ rozpoczęła się nowa runda. Dzięki temu zarządzamy ilością rund i używamy tego
jako warunku w komponencie aplikacji do renderowania gry na ekranie, a na ekranie gry sprawdzamy, czy gra
jest w użyciu. , robimy to za każdym razem, gdy ten komponent
zostanie zrenderowany.
Teraz możemy to zrobić, ale możemy też być po prostu bardziej szczerzy lub bardziej bezpośredni, jeśli chodzi o
zależności tego efektu, i to może być coś, co możesz zrobić, lub możesz to
zrobić, dodając drugi argument do użyciaEffect, pierwszy argument to funkcja, którą powinien wykonać po
renderowaniu składnik, drugi argument przekazany do useEffect, jest tablicą
zależności tej funkcji i tutaj musisz podać dowolną wartość, która pochodzi spoza tej funkcji efektu.
Tak więc w naszym przypadku, to byłaby obecna domysł i byłyby to rekwizyty wybór użytkownika i rekwizyty w Gameamerze i za każdym razem, gdy zmieni
się taka wartość, ten efekt będzie się powtarzał, wo za każdym razem, gdy zadanie
zmieni się po cyklu renderowania, efekt powinien się powtórzyć, powinienem powiedzieć . Jeśli wystąpił cykl renderowania, a podane tutaj wartości
są nadal takie same, jak w poprzednim cyklu renderowania,
efekt nie zostanie ponownie uruchomiony, więc efekt zostanie teraz uruchomiony ponownie tylko,
jeśli zmieni się jedna z naszych zależności. Teraz, jak powiedziałem, wybór użytkownika i rekwizyty
na GameGame to wszystkie zależności i aby się tym zająć, użyję nowoczesnej składni JavaScript, w której używam restrukturyzacji
obiektów do destrukcji moich rekwizytów i wybieram z nich wybór użytkownika i onGameOver, to składnia może wyglądać dziwnie, ale jest to
jak
derestrukturyzacja tablicy, tylko dla obiektów, wyciągamy te właściwości, więc nazwy tych właściwości z tego obiektu
rekwizytów i przechowujemy je w stałych o takich samych nazwach, abyśmy mogli tutaj użyć opcji wyboru
użytkownika i po prostu użyj onGameOver, ponieważ te wartości są teraz przechowywane w stałych o tej nazwie wyciągniętych z rekwizytów
i robię to, ponieważ teraz możemy dodać wybór użytkownika i onGameOver jako zależności na tej liście,
w przeciwnym razie musielibyśmy dodać rekwizyty tutaj i to faktycznie
zmienia się za każdym razem, gdy zmienia się komponent macierzysty i dlatego nie jest
to dobra kontrola.
Jest to lepsza kontrola, ponieważ teraz upewniamy się, że jeśli coś innego w rekwizytach ulegnie zmianie, nie obchodzi nas to,
tylko jeśli jedna z tych dwóch wartości się zmieni, wtedy ten efekt powinien się powtórzyć. Teraz, dzięki temu, mamy sprawdzian, który
powinien doprowadzić do wyświetlenia gry na ekranie, jeśli komputer
odgadnie nasze liczby, więc zapiszmy
to i spróbujmy, może tutaj na Androida, aby coś pomieszać. Więc wpiszę tutaj liczbę 32, potwierdź, rozpocznij grę, a będzie 2, więc powinna być większa. Pozwól,
że pokażę Ci
też, jak wygląda ostrzeżenie, gdy jestem na Androidzie,
to domyślny alert na Androida. Tak było 32, więc oczywiście powinno
być większe, powinno być jeszcze większe, teraz powinno być
niższe, powinno być niższe, powinno być większe, powinno być niższe, powinno być niższe, powinno być większe, powinno
być większe, gra
skończona.
Wygląda dobrze, przypuszczalnie było to 32, miałoby sens w odniesieniu do sekwencji liczb, które mieliśmy
tutaj, a zatem ten wynik ma sens tutaj.