1
00:00:02,440 --> 00:00:07,590
Aby upewnić się, że komputer rzeczywiście ukończy tę grę i odgadnie prawidłową

2
00:00:07,720 --> 00:00:12,000
liczbę, musimy sprawdzić, co komputer zgadł, a następnie zakończyć grę,

3
00:00:12,010 --> 00:00:17,590
jeśli jest to wpisana liczba. W tym celu możemy użyć innego haka React i to jest haczyk useEffect.

4
00:00:17,590 --> 00:00:25,670
useEffect pozwala na uruchamianie efektów ubocznych lub ogólnie, pozwala uruchamiać logikę po każdym cyklu renderowania i tak, jak wspomniano wcześniej,

5
00:00:25,810 --> 00:00:31,300
jeśli cała ta funkcja haków React jest dla Ciebie stosunkowo nowa, zdecydowanie sprawdź

6
00:00:31,300 --> 00:00:36,790
niektóre dedykowane zasoby haków React lub zanurz się w moim React Complete Guide

7
00:00:36,850 --> 00:00:42,660
Course, w którym szczegółowo omawiam haczyki. Więc teraz zrobię z useEffect to wywołam to tutaj

8
00:00:42,770 --> 00:00:49,370
po zainicjowaniu mojego stanu i moich referencji tu i tam, mamy funkcję, więc useEffect przyjmuje funkcję i ta funkcja domyślnie

9
00:00:49,370 --> 00:00:54,950
działa po każdym cyklu renderowania dla tego komponentu. Tak więc za każdym razem,

10
00:00:54,950 --> 00:00:59,750
gdy jest renderowana, funkcja jest wykonywana po jej renderowaniu, jest

11
00:00:59,750 --> 00:01:03,150
to również ważne, nie wcześniej, nie jednocześnie.

12
00:01:03,200 --> 00:01:10,290
Teraz tam chcę sprawdzić, czy bieżący domniemany komputer jest równy wyborowi użytkownika, ponieważ oznacza to, że

13
00:01:10,290 --> 00:01:11,980
gra się skończyła.

14
00:01:12,120 --> 00:01:16,830
Nie może to oczywiście dotyczyć pierwszego cyklu renderowania, ponieważ wykluczamy wybór użytkownika z

15
00:01:16,830 --> 00:01:19,940
możliwych do zgadnięcia liczb, ale z drugiego

16
00:01:19,940 --> 00:01:25,790
rzędu, więc po kliknięciu niższej lub większej wartości po raz pierwszy może się to zdarzyć.

17
00:01:25,860 --> 00:01:29,220
Tak więc tam chcę następnie odpalić grę

18
00:01:29,220 --> 00:01:35,970
po przesłaniu wiadomości i wysłać ją do aplikacji. js, abyśmy mogli zamienić ekran gry na grę

19
00:01:35,970 --> 00:01:36,890
na ekranie.

20
00:01:36,970 --> 00:01:39,000
Teraz nie mamy tego ekranu,

21
00:01:39,000 --> 00:01:45,300
więc dodajmy go, dodajmy grę na ekranie tutaj w folderze ekranów i stwórzmy teraz bardzo prosty, dopracujemy

22
00:01:45,300 --> 00:01:47,250
go później. Tam

23
00:01:47,250 --> 00:01:50,660
po prostu będę mieć widok, tekst i

24
00:01:50,700 --> 00:02:00,760
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

25
00:02:00,760 --> 00:02:04,000
rekwizytów, a następnie zwraca jsx na końcu.

26
00:02:04,000 --> 00:02:12,270
Tutaj mamy te style z arkuszem stylów. utwórz, a następnie domyślnie wyeksportujemy grę na ekran.

27
00:02:12,370 --> 00:02:17,170
Teraz, tak jak powiedziałem, chcę na razie zachować prostotę, po prostu zobaczę tam tekst z

28
00:02:17,170 --> 00:02:22,220
zakończoną grą, a później podamy więcej szczegółów. Na razie tutaj po prostu

29
00:02:22,230 --> 00:02:28,560
przypisuję jakiś styl, mój styl ekranu, który dodam do tego obiektu, przekazaliśmy do arkusza stylów

30
00:02:28,690 --> 00:02:37,720
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

31
00:02:37,750 --> 00:02:40,410
ten tekst jest na chwilę wyśrodkowany.

32
00:02:40,420 --> 00:02:44,440
Teraz mamy grę na ekranie i chcemy ją renderować zamiast

33
00:02:44,440 --> 00:02:53,050
ekranu gry, jeśli gra się skończy. Wróćmy do aplikacji. Plik js i zaimportuj grę na ekran

34
00:02:53,050 --> 00:02:56,100
z folderu ekrany, a tam z gry na

35
00:02:56,240 --> 00:03:04,240
ekran, a teraz jest oczywiście pytanie, jaki jest nasz warunek renderowania? Cóż, w końcu będziemy potrzebować jeszcze

36
00:03:04,390 --> 00:03:07,000
jednej informacji, a

37
00:03:07,000 --> 00:03:12,570
to liczba rund, jakie zajęło komputerowi ukończenie gry.

38
00:03:12,700 --> 00:03:18,720
Jedną rzeczą, którą chcę zapisać tutaj w komponencie aplikacji, jest inny stan, którym zarządzam, a

39
00:03:18,730 --> 00:03:24,580
mianowicie liczba rund potrzebnych do ukończenia, która początkowo wynosi zero, ponieważ jeszcze nie rozpoczęliśmy

40
00:03:24,580 --> 00:03:26,120
gry, i wymyślę

41
00:03:26,260 --> 00:03:31,540
te rundy zgadywania i ustaw rundy zgadywania i możesz nazwać to, co chcesz.

42
00:03:31,540 --> 00:03:34,130
Teraz celem jest ustawienie tego po zakończeniu gry.

43
00:03:34,140 --> 00:03:38,230
W tym celu dodam także inną funkcję tutaj do

44
00:03:38,230 --> 00:03:45,790
komponentu aplikacji, grę nad modułem obsługi i tam, chcę uzyskać moją liczbę rund jako argument, więc spodziewam

45
00:03:45,790 --> 00:03:50,010
się tego tutaj, aby móc wywoływać set rundy zgadywania do

46
00:03:50,020 --> 00:03:56,440
mojej liczby rund, które tu dostałem. Teraz gra powinna zostać uruchomiona z poziomu ekranu gry.

47
00:03:56,560 --> 00:04:01,390
Tak więc tutaj na ekranie gry chcę przekazać rekwizyt, który nadam na GameGver, brzmi jak

48
00:04:01,420 --> 00:04:06,430
odpowiednia nazwa, którą można wywołać z poziomu ekranu gry lub która zawiera odniesienie do funkcji, które

49
00:04:06,430 --> 00:04:10,960
można następnie wywołać z wnętrza ekran gry i odniesienie do funkcji są oczywiście

50
00:04:10,960 --> 00:04:13,600
odniesieniem w tej funkcji do funkcji obsługi.

51
00:04:13,600 --> 00:04:19,450
Więc wewnątrz ekranu gry możemy teraz użyć rekwizytu onGameOver, aby wykonać tę funkcję i przekazać

52
00:04:19,450 --> 00:04:22,720
liczbę rund potrzebnych komputerowi do odgadnięcia naszej liczby, a

53
00:04:22,720 --> 00:04:29,460
następnie ustawiamy tę liczbę rund tutaj, przechowujemy ją w naszym stanie rund zgadywania i teraz w komponencie aplikacji

54
00:04:29,470 --> 00:04:37,480
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

55
00:04:37,480 --> 00:04:40,560
gra wykonywana jest przez program obsługi i gra

56
00:04:40,720 --> 00:04:41,970
się kończy.

57
00:04:41,980 --> 00:04:43,840
Chcemy więc pokazać grę na

58
00:04:43,870 --> 00:04:46,490
ekranie, jeśli liczba trafień jest większa od zera.

59
00:04:46,540 --> 00:04:52,180
Nawiasem mówiąc, jeśli rozpoczynamy nową grę, chcę również zresetować moje rundy zgadywania do zera, ponieważ jeśli rozpocznie

60
00:04:52,180 --> 00:04:52,570
się

61
00:04:52,570 --> 00:04:56,350
nowa gra, chcemy zresetować liczbę rund, które komputer wziął na 0.

62
00:04:56,470 --> 00:04:58,600
Jeśli więc jest większa od zera,

63
00:04:58,630 --> 00:05:02,110
gra się kończy, więc w takim przypadku chcę pokazać grę na ekranie.

64
00:05:02,110 --> 00:05:07,540
Więc tutaj, jeśli sprawdzę, czy mamy numer użytkownika, w którym to przypadku wyświetlę ekran gry,

65
00:05:07,960 --> 00:05:13,110
jest to poprawne tylko wtedy, gdy liczba trafień jest mniejsza lub równa zero,

66
00:05:13,120 --> 00:05:16,780
mniejsze nie jest możliwe, ale nadal możemy to sprawdzić.

67
00:05:16,900 --> 00:05:20,770
Więc jeśli tak jest, to wiemy, że gra na

68
00:05:20,770 --> 00:05:28,650
pewno działa, w przeciwnym razie, jeśli liczba trafień jest większa od zera, wiemy, że gra się skończyła, a

69
00:05:28,650 --> 00:05:31,960
zatem zawartość będzie równa grze na

70
00:05:31,980 --> 00:05:37,160
ekranie, teraz jest to tylko taki element bez żadnych rekwizytów, które mijamy.

71
00:05:37,180 --> 00:05:43,270
Więc teraz mamy warunek, w którym renderujemy grę na ekranie, wszystko, co musimy teraz zrobić, musimy użyć

72
00:05:43,270 --> 00:05:49,330
onGameOver Prop tutaj na naszym ekranie gry, aby w końcu wywołać tę funkcję i przekazać liczbę rund

73
00:05:49,330 --> 00:05:51,010
do komponentu aplikacji .

74
00:05:51,820 --> 00:05:59,510
Więc z powrotem na ekranie gry, jeśli useEffect tutaj określi, że dokonano właściwego wyboru, dokonano właściwej

75
00:05:59,530 --> 00:06:07,120
domysły, a zatem gra się skończyła, to tutaj chcę wywołać rekwizyty w GameOver jako funkcję i

76
00:06:07,240 --> 00:06:14,380
podać liczbę rund komputer zgadł nasz wynik lub nasz wybór, dlatego jest to kolejny

77
00:06:14,410 --> 00:06:22,750
stan, którym musimy zarządzać tutaj na ekranie gry. Mamy nasze rundy i ustawiamy rundy i początkowo, czyli

78
00:06:22,810 --> 00:06:32,280
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ż

79
00:06:32,290 --> 00:06:37,390
jest to liczba, którą będziemy zwiększać przy każdym zgadywaniu, ponieważ w następnym

80
00:06:37,390 --> 00:06:43,510
module obsługi zgadywania, jeśli generujemy kolejne zgadywanie, oprócz ustawienia tego zgadywania tutaj w naszym stanie,

81
00:06:43,540 --> 00:06:51,630
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

82
00:06:51,760 --> 00:06:53,330
rundy plus jeden.

83
00:06:53,380 --> 00:06:59,560
Dodam więc jedną do mojej obecnej liczby rund, które przechowuję w swoim stanie, tak aby nowy stan to

84
00:06:59,560 --> 00:07:05,930
stare rundy plus jedna, ponieważ rozpoczęła się nowa runda. Dzięki temu zarządzamy ilością rund i używamy tego

85
00:07:05,930 --> 00:07:12,530
jako warunku w komponencie aplikacji do renderowania gry na ekranie, a na ekranie gry sprawdzamy, czy gra

86
00:07:12,740 --> 00:07:17,480
jest w użyciu. , robimy to za każdym razem, gdy ten komponent

87
00:07:17,490 --> 00:07:18,690
zostanie zrenderowany.

88
00:07:19,010 --> 00:07:26,240
Teraz możemy to zrobić, ale możemy też być po prostu bardziej szczerzy lub bardziej bezpośredni, jeśli chodzi o

89
00:07:26,270 --> 00:07:31,640
zależności tego efektu, i to może być coś, co możesz zrobić, lub możesz to

90
00:07:31,880 --> 00:07:37,550
zrobić, dodając drugi argument do użyciaEffect, pierwszy argument to funkcja, którą powinien wykonać po

91
00:07:37,560 --> 00:07:41,630
renderowaniu składnik, drugi argument przekazany do useEffect, jest tablicą

92
00:07:41,630 --> 00:07:47,690
zależności tej funkcji i tutaj musisz podać dowolną wartość, która pochodzi spoza tej funkcji efektu.

93
00:07:47,690 --> 00:07:53,660
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

94
00:07:54,000 --> 00:07:57,260
się taka wartość, ten efekt będzie się powtarzał, wo za każdym razem, gdy zadanie

95
00:07:57,290 --> 00:08:03,380
zmieni się po cyklu renderowania, efekt powinien się powtórzyć, powinienem powiedzieć . Jeśli wystąpił cykl renderowania, a podane tutaj wartości

96
00:08:03,380 --> 00:08:06,840
są nadal takie same, jak w poprzednim cyklu renderowania,

97
00:08:06,860 --> 00:08:11,300
efekt nie zostanie ponownie uruchomiony, więc efekt zostanie teraz uruchomiony ponownie tylko,

98
00:08:11,390 --> 00:08:17,120
jeśli zmieni się jedna z naszych zależności. Teraz, jak powiedziałem, wybór użytkownika i rekwizyty

99
00:08:17,120 --> 00:08:24,230
na GameGame to wszystkie zależności i aby się tym zająć, użyję nowoczesnej składni JavaScript, w której używam restrukturyzacji

100
00:08:24,320 --> 00:08:32,720
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

101
00:08:32,720 --> 00:08:33,400
jak

102
00:08:33,440 --> 00:08:39,500
derestrukturyzacja tablicy, tylko dla obiektów, wyciągamy te właściwości, więc nazwy tych właściwości z tego obiektu

103
00:08:39,500 --> 00:08:45,860
rekwizytów i przechowujemy je w stałych o takich samych nazwach, abyśmy mogli tutaj użyć opcji wyboru

104
00:08:45,860 --> 00:08:53,930
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

105
00:08:53,930 --> 00:09:00,350
i robię to, ponieważ teraz możemy dodać wybór użytkownika i onGameOver jako zależności na tej liście,

106
00:09:00,350 --> 00:09:04,340
w przeciwnym razie musielibyśmy dodać rekwizyty tutaj i to faktycznie

107
00:09:04,340 --> 00:09:10,370
zmienia się za każdym razem, gdy zmienia się komponent macierzysty i dlatego nie jest

108
00:09:10,420 --> 00:09:11,990
to dobra kontrola.

109
00:09:12,050 --> 00:09:16,430
Jest to lepsza kontrola, ponieważ teraz upewniamy się, że jeśli coś innego w rekwizytach ulegnie zmianie, nie obchodzi nas to,

110
00:09:16,430 --> 00:09:23,300
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

111
00:09:23,300 --> 00:09:28,280
powinien doprowadzić do wyświetlenia gry na ekranie, jeśli komputer

112
00:09:28,280 --> 00:09:31,530
odgadnie nasze liczby, więc zapiszmy

113
00:09:31,670 --> 00:09:42,580
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,

114
00:09:42,580 --> 00:09:43,990
że pokażę Ci

115
00:09:43,990 --> 00:09:46,710
też, jak wygląda ostrzeżenie, gdy jestem na Androidzie,

116
00:09:46,750 --> 00:09:50,280
to domyślny alert na Androida. Tak było 32, więc oczywiście powinno

117
00:09:50,290 --> 00:09:53,170
być większe, powinno być jeszcze większe, teraz powinno być

118
00:09:53,200 --> 00:09:58,780
niższe, powinno być niższe, powinno być większe, powinno być niższe, powinno być niższe, powinno być większe, powinno

119
00:09:58,780 --> 00:09:59,780
być większe, gra

120
00:09:59,830 --> 00:10:00,490
skończona.

121
00:10:00,580 --> 00:10:05,590
Wygląda dobrze, przypuszczalnie było to 32, miałoby sens w odniesieniu do sekwencji liczb, które mieliśmy

122
00:10:05,590 --> 00:10:08,800
tutaj, a zatem ten wynik ma sens tutaj.