Możemy teraz przejść do ekranu gry, a komputer zgaduje
tutaj liczbę, liczbę losową, która wyklucza naszą rzeczywistą liczbę przy pierwszym zgadywaniu.
Teraz musimy upewnić się, że możliwe będzie dokonanie kolejnych domysłów po naciśnięciu dolnego lub większego przycisku
tutaj na ekranie gry. W tym
celu dodajmy funkcję wewnątrz naszego komponentu funkcjonalnego, ponieważ ta funkcja będzie potrzebowała dostępu do
otaczającego stanu i otaczającego komponentu i nadać mu dowolną nazwę, na przykład następną metodę odgadywania, dowolną nazwę, którą preferujesz,
a jest to funkcja,
która powinieneś dostać argument, w którym kierunku powinny być kolejne przypuszczenia,
tak niższe lub większe. Teraz pierwszą
rzeczą, którą chcę tutaj zrobić, jest upewnienie się, że potwierdzamy kierunek.
Teraz ta funkcja powinna zostać wykonana po naciśnięciu przycisków tam, ale oczywiście wartość
kierunku, więc wartość, którą przekazujemy jako argument, powinna się różnić w zależności
od przycisku.
Tak więc mamy kolejny moduł obsługi zgadywania podłączony do onPress, bez nawiasów, które po prostu dostarczą
ten wskaźnik w naszej funkcji do funkcji onPress, aby to wykonało się ostatecznie, gdy
użytkownik go naciśnie, ale poszedłem wstępnie skonfigurować argument, który zostanie przekazany następnemu modułowi obsługi zgadywania kiedy to
zostanie wykonane.
Możemy to zrobić za pomocą bind, bind to, ponieważ pierwszy argument do bindowania zawsze powinien odnosić się do
wywoływanej funkcji, nie ma tutaj znaczenia, więc możemy po prostu to z tym powiązać.
Druga wartość, którą przekazujemy tutaj do wiązania, będzie pierwszym argumentem otrzymanym przez naszą funkcję i
dlatego będzie to kierunek tutaj otrzymany i oczywiście od Ciebie zależy, którą logikę tu zastosujesz, dla mnie
sensowne jest
po prostu użycie łańcuch, gdzie tutaj przekazujemy niżej jako łańcuch, a dla drugiego przycisku przekazujemy większy, dzięki czemu mamy te
dwa identyfikatory, które są
zasadniczo przekazywane do następnego modułu obsługi zgadywania. Tak więc kierunek będzie niższy lub
większy i teraz
chcemy sprawdzić, czy jest to poprawne.
Na przykład, jeśli wybrałeś liczbę, powiedzmy 55, a komputer zgadł 60, to jeśli podasz komputerowi,
wskazówka liczb powinna być większa, to oczywiście błędna, ponieważ liczba
powinna być mniejsza, twoja liczba to 55, zgadnij było 60, to
jest niepoprawne,
jeśli powiesz komputerowi, że liczba, którą powinien odgadnąć, powinna być większa niż 60, prawda?
Chcemy to
sprawdzić i dlatego możemy sprawdzić, czy kierunek
jest równy niższemu, więc jeśli nacisnąłeś dolny przycisk, a bieżące domysły są jednak mniejsze, to podpiera wybór użytkownika, więc komputer faktycznie odgadł liczbę
mniejszą niż nasz wybór, a następnie niższy jest niewłaściwą wskazówką właściwą, ponieważ liczba
musi być mniejsza, musi być
większa, ponieważ domysły były już zbyt niskie. Więc to jest jeden możliwy scenariusz, w którym otrzymujemy
niewłaściwą wskazówkę, alternatywę i zawinę to w nawiasy, aby było naprawdę jasne, że jest
to jeden z warunków tutaj.
Tak więc alternatywą jest
to, że drugim warunkiem, który chcę sprawdzić, jest to, że kierunek tutaj jest w
rzeczywistości większy, a jednocześnie obecne przypuszczenie jest już większe niż nasz wybór,
a następnie jest to również nieprawidłowa
wskazówka, tylko w przeciwnym kierunku.
W obu przypadkach, gdy podajemy niepoprawną wskazówkę, chcę rzucić alert, a dowiedziałeś się, że możesz to zrobić za
pomocą interfejsu API alertów, klasy alertów, którą możesz zaimportować z React Native. Następnie tutaj, w naszym czeku, użyję alertu,
aby wysłać alert z tytułem powiedzmy, nie kłam, oczywiście możesz wybrać dowolne imię, unikam pojedynczego
cytatu, który poszedłem wydrukować
jako znak z wiodącym odwrotnym ukośnikiem, ponieważ w przeciwnym razie zamknąłby
ciąg, ponieważ używam pojedynczych cudzysłowów do otaczania moich ciągów.
Więc to mój tytuł
i wtedy tekst może być taki, że wiesz, że to źle, ale oczywiście możesz mieć
tutaj dowolny tekst, możesz też być mniej moralistyczny, jeśli chcesz. Teraz chcę przedstawić tutaj jeden przycisk, a
przycisk mówi, że już wyjaśniono, że przekazujesz obiekty do trzeciej tablicy argumentów, które
przyjmuje alert i tam może być przykro, a styl może być anulowany i nie musisz udostępniać procedury obsługi
onPress, jeśli go nie podasz, jedyne, co się stanie, to kliknięcie przycisku spowoduje zamknięcie
alertu, co jest w porządku.
Więc tutaj dajemy użytkownikowi dotknięcie palcami, aby to powiedzieć, i upewniamy się, że nie podano
żadnych niepoprawnych
wskazówek i chcę
tu wrócić, więc chcę zatrzymać wykonywanie funkcji, jeśli mamy taką niepoprawną wartość.
Jeśli przejdziemy przez ten
blok if, więc jeśli damy prawidłową wskazówkę, to chcemy wygenerować nową liczbę losową.
Więc tutaj chcę sprawdzić, czy kierunek jest niższy, a teraz
wiemy, że był
poprawny, więc komputer powinien odgadnąć liczbę, która jest mniejsza niż poprzednia liczba, wtedy wiemy, że
nowa liczba losowa powinna zostać wygenerowana w kierunku bieżącej domysły maksymalna górna granica.
Dlatego możemy wywołać generowanie losowe między ponownie a liczbą minimalną, no cóż, to prawdopodobnie jeden, ale co,
jeśli użytkownik już odgadł inny
numer, w którym powiedzieliśmy komputerowi, że jest zbyt mały, a wtedy mielibyśmy problem, ponieważ
najniższa granica nie zawsze jest jedna, co jeśli użytkownik zgadł
10, a my powiedzieliśmy „nie”, to musi być większa?
Cóż, wtedy użytkownik zgaduje 50 i mówimy, że powinien być niższy, komputer powinien oczywiście
zgadywać,
ale nie powinien zgadywać poniżej 10, ponieważ już wspominaliśmy, że jest to zbyt małe wcześniej.
Dlatego nasze obecne maksimum i minimum powinno się zmieniać w miarę upływu czasu, ponieważ dajemy wskazówki dotyczące tego, czy liczba, którą komputer odgadł,
jest za mała, czy za duża.
Dlatego możemy użyć innego haka dostarczonego przez React, a mianowicie haka useRef.
Teraz możesz znać ten hak jako hak, który pozwala ci utworzyć obiekt, który możesz powiązać z danymi wejściowymi, a więc z
elementami wejściowymi w jsx, aby uzyskać do nich dostęp w kodzie i jest to jeden ze sposobów
korzystania z niego, ale useRef pozwala również zrobić coś innego, co jest całkiem fajne.
Pozwala zdefiniować wartość, która przetrwa ponowne renderowanie komponentu, która przetrwa, że ten komponent
zostanie odbudowany i właśnie tego potrzebujemy,
ponieważ chcemy zalogować się do minimum i maksimum, które możemy zmienić, ale które
nie jest regenerowane tylko ponieważ komponent jest renderowany ponownie.
Więc tutaj na górze tego komponentu, po zainicjowaniu stanu, możemy utworzyć nową stałą,
currentLow, być może gdzie useRef to jedna, a następnie inna stała, currentHigh, gdzie useRef wynosi 100, to są nasze
początkowe granice, których używamy losowo numer, a teraz możemy zaktualizować te odniesienia
tutaj.
Więc wiemy, że kierunek powinien być niższy, co
możemy zrobić w takim przypadku, zamiast natychmiastowego generowania nowej liczby, możemy ustawić currentHigh. prąd, ponieważ referencje generowane przez
React są obiektami, które mają bieżącą właściwość, w której przechowywana jest
rzeczywista wartość, więc
ustawiamy prąd na wartość domyślną.
Więc mówimy, jeśli mówię ci, że komputer, który zgadywałeś, jest zbyt duży i powinieneś zgadnąć
niższy, to wiem, że ten numer, który, jak sądzę, jest moim bieżącym. Wysoki, prawidłowy numer może t będzie wyższy niż
ten, więc zapisuję
liczbę, którą właśnie odgadnąłem jako moją najwyższą wartość.
I znowu, te stałe odniesienia tutaj nie są regenerowane, gdy ten komponent jest tworzony ponownie,
zamiast tego, jeśli zostały one zainicjowane raz, trochę tak jak w rzeczywistości, to są przechowywane
odłączone od tego komponentu i React rozpoznaje, że zostały już zainicjowane i nie
zregeneruje ich, ale zamiast tego zainicjuje currentHigh z poprzednio zapisaną wartością.
To trochę tak, jakbyś zarządzał tym w stanie, różnica w stanie zamiast tego, jeśli zmienisz przechowywaną tam
wartość, składnik nie renderuje się ponownie, ponieważ nie chcemy tego tutaj.
Nie chcę ponownie renderować tego komponentu tylko dlatego, że zapisuję nowy rekord, który nie ma wpływu na
mój widok, na mój kod
jsx, ma tylko wpływ na moją logikę, ale w tym celu nie
muszę ponownie renderować komponent, dlatego używam tutaj odwołania zamiast stanu.
Dzieje się tak, jeśli jest niższy,
więc jeśli powiedzielibyśmy komputerowi, że domysły były zbyt małe, a rzeczywista
liczba powinna być
wyższa, powinna być większa, w takim przypadku ustawiliśmy niski prąd na bieżący, ponieważ wtedy wiemy mamy niższą
granicę.
A teraz celem lub sztuczką jest wygenerowanie nowej liczby losowej, która bierze pod uwagę te granice,
więc gdzie
używamy obecnego minimum z naszym ref i wtedy. prąd jako minimum i currentHigh. prąd jako maksimum i
chcę wykluczyć bieżące zgadywanie, abyśmy nie mogli zgadnąć ponownie tego samego numeru, więc na następną
rolę na pewno otrzymamy inną liczbę. Więc to jest coś, co przechowuję w stałej, następnej liczbie,
jest generowane tutaj, gdy
wykonywany jest
następny moduł obsługi zgadywania, co dzieje się, gdy klikniemy jeden z tych przycisków.
A teraz następny numer to następny numer, którego
chcemy użyć, więc teraz to, co możemy po prostu zrobić, jak możemy nazwać, ustaw bieżące zgadywanie i
dodaj następny numer, teraz komponent zostanie ponownie zrenderowany i wyświetli następne zgadnięcie. Spróbujmy, bo na razie nie ma gry, która
jest zbyt
wysoka, ale przynajmniej możemy spróbować zgadnąć liczby tutaj.
Więc wpisuję 53 jako swój
numer, teraz zaczynamy i komputer zgadł 85.
Jeśli teraz powiem większe, otrzymamy to ostrzeżenie, ponieważ skłamaliśmy, mieliśmy 53 jako liczbę, więc przypuszczenie jest zbyt
wysokie, powinno być niższe.
Teraz jest 28, cóż, to zbyt nisko, powinno być większe.
Więc jeśli stuknę niżej, dostanę ostrzeżenie, jeśli stuknę większy, przejdziemy teraz w górę 78,
a teraz w tym momencie, 23, poprzednie przypuszczenie będzie naszą dolną granicą, a
teraz, gdy dotknę niższego, 78 obecne przypuszczenie będzie naszą górną granicę,
więc następne przypuszczenie na pewno nie będzie powyżej 78 i nie będzie poniżej 23, ale
wciąż jest zbyt niskie, to jest
zbyt duże, to znaczy,
jest zbyt
niskie, więc użyjmy większej, dolnej
i to byłby właściwy .
Na razie nie mamy nic, co by sprawdzało, czy
komputer zgadł poprawnie.
To kolejna rzecz, którą będziemy musieli wdrożyć tutaj.