1
00:00:00,170 --> 00:00:06,330
W tym filmie jest kilka małych zmian, które chcę zrobić, a potem mam zamiar mówić o tym, jak możemy byłaby to trochę.

2
00:00:06,330 --> 00:00:09,570
Więc pierwsza zmiana jest taka, że ​​jeśli wygramy ten mecz.

3
00:00:09,840 --> 00:00:11,860
Więc wygrać tutaj.

4
00:00:11,880 --> 00:00:16,320
Tam pójść i dostaję to prawidłowe wiadomość i kliknij grę ponownie.

5
00:00:16,710 --> 00:00:18,080
Wciąż mówi poprawne.

6
00:00:18,300 --> 00:00:22,030
I chcemy, że aby przywrócić który jest naprawdę szybkie zmiany.

7
00:00:22,320 --> 00:00:30,730
Wszystko, co musimy zrobić, to znaleźć kod, który działa, gdy klikają grać znowu to musimy zmienić rozpiętość, że mamy tu i zrobić to po prostu pusty.

8
00:00:30,750 --> 00:00:33,760
Więc chodźmy znaleźć które sprawiają, że ten cały ekran.

9
00:00:34,410 --> 00:00:38,570
Kiedy więc kliknij na ten przycisk reset, który jest tutaj.

10
00:00:39,360 --> 00:00:44,190
Wszystko, co musimy zrobić, to zmienić nasz wyświetlacz, który nazwaliśmy wyświetlania wiadomości.

11
00:00:44,190 --> 00:00:48,090
Tak zrobimy, że tu po prostu wszędzie.

12
00:00:48,090 --> 00:00:57,960
Treść wiadomości tekstowe ups Wyświetlacz tekstowy równy ciąg pusty.

13
00:00:58,360 --> 00:01:00,330
I zobaczmy, jak to idzie.

14
00:01:00,540 --> 00:01:01,730
Odświeżać.

15
00:01:01,810 --> 00:01:03,740
OK, niech po prostu kliknij, aż wygramy.

16
00:01:04,050 --> 00:01:05,680
OK, więc to mówi o poprawne.

17
00:01:05,790 --> 00:01:09,440
A jeśli kliknę zagrać jeszcze raz, że odchodzi.

18
00:01:09,660 --> 00:01:16,290
Drugi niewielka zmiana, że ​​chcę, aby to, że ten przycisk powinien grać tylko powiedzieć raz kolejny wygrywa użytkownik.

19
00:01:16,320 --> 00:01:20,760
Więc będę odświeżyć stronę i mówi, nowe kolory, które jest jak chcemy go do pracy.

20
00:01:20,760 --> 00:01:23,910
Następnie, jeśli wygram pyta mnie, czy chcę zagrać jeszcze raz.

21
00:01:24,120 --> 00:01:30,080
A potem, jeśli kliknij zagrać jeszcze raz chcemy zmienić tekst przycisku, aby przejść z powrotem do nowych kolorach.

22
00:01:30,090 --> 00:01:35,280
Tak naprawdę niewielka różnica, ale chcę tylko pokazać grę ponownie, jeśli użytkownik po prostu wygrać.

23
00:01:35,850 --> 00:01:44,240
Więc idź do naszego kodu i musimy znaleźć miejsce, w którym użytkownik wygrywa grę, która jest tutaj, gdy użytkownik kliknie na odebrał koloru.

24
00:01:44,370 --> 00:01:56,650
Tak więc, gdy użytkownik kliknie na prawej koloru możemy zmienić tekst przycisku resetu do powiedzenia treści tekstu, ale to co chcemy zrobić jest, gdy użytkownik kliknie przycisk reset mamy zamiar to zmienić.

25
00:01:56,790 --> 00:02:05,040
Ta kropka treść tekstu, aby wrócić do nowych kolorów i mogliśmy również napisać przycisk reset.

26
00:02:05,040 --> 00:02:09,540
Ale łatwiej jest to zrobić, ponieważ jesteśmy wewnątrz detektora zdarzenia dla przycisku reset.

27
00:02:10,050 --> 00:02:15,270
I to powinno być dobrze, jeśli mamy odświeżyć szybkie aż dojdziemy właściwy.

28
00:02:15,360 --> 00:02:16,440
Chcemy zagrać jeszcze raz.

29
00:02:16,680 --> 00:02:17,480
Pewnie.

30
00:02:17,490 --> 00:02:26,900
Teraz wraca do nowych kolorach i za każdym razem to po prostu mówi nowe kolory kółko i jeśli wygram to jedyny czas, który mówi zagrać jeszcze raz.

31
00:02:26,910 --> 00:02:34,350
Tak naprawdę drobne rzeczy, ale uważam, że to bardzo rozpraszać, że po kliknięciu na jeden z tych przycisków ma ten przykry kontur wokół niego.

32
00:02:34,680 --> 00:02:36,990
I to jest rzeczywiście nasza przeglądarka robić.

33
00:02:36,990 --> 00:02:38,560
I możemy to wyłączyć.

34
00:02:38,610 --> 00:02:41,940
Nie wiem, czy można zobaczyć, że w obsadzie ekranu ale jest niebieski konspektu.

35
00:02:42,070 --> 00:02:43,190
To dość szkodliwych.

36
00:02:43,200 --> 00:02:54,290
Tak więc, aby pozbyć się, że idziemy do naszego arkusza stylów, a jeśli wybierzemy nasze przyciski właśnie tutaj możemy tylko napisać zarys równych i wrócić i odświeżyć.

37
00:02:54,310 --> 00:02:57,810
Teraz, jeśli klikniemy nie mamy ten niebieski obrys wokół niego.

38
00:02:57,960 --> 00:03:00,260
Więc to wszystko, co chciałem zrobić dla logiki gry.

39
00:03:00,450 --> 00:03:03,500
Teraz chcemy, aby spędzić trochę czasu refaktoryzacji kodu.

40
00:03:03,630 --> 00:03:04,880
Więc wróćmy.

41
00:03:04,980 --> 00:03:12,120
Pierwszą rzeczą, która wyskakuje mi ten kod jest tutaj, gdzie możemy mieć twardy przycisk łatwego przycisk i słuchacza do każdego z nich.

42
00:03:12,240 --> 00:03:14,370
A są one bardzo podobne w tym, jak one działają.

43
00:03:14,370 --> 00:03:17,100
Z wyjątkiem jednego z nich będzie pracować z trzech kwadratów.

44
00:03:17,100 --> 00:03:20,860
Drugi współpracuje z sześciu, ale poza tym robią w zasadzie to samo.

45
00:03:21,090 --> 00:03:23,720
Tak naprawdę możemy obniżyć ten powielania.

46
00:03:23,880 --> 00:03:33,180
I zamiast nadając każdej z nich takie idee, co mamy zamiar zrobić, to pozbyć się tych identyfikatorów i dać im klasę i że będziemy dzielić tę samą klasę.

47
00:03:33,390 --> 00:03:37,660
Więc klasa będzie nazywany trybem.

48
00:03:37,770 --> 00:03:39,570
Więc dajemy im tryb klasy.

49
00:03:39,600 --> 00:03:42,850
Pamiętaj przycisku lub każdy element może mieć dwie klasy.

50
00:03:42,870 --> 00:03:45,010
po prostu muszą być oddzielone spacjami.

51
00:03:45,030 --> 00:03:48,030
Więc to ma klasę i klasę tryb wybrany.

52
00:03:48,420 --> 00:03:49,020
OK.

53
00:03:49,160 --> 00:03:59,220
Więc teraz będziemy iść i usunąć te dwa przyciski tu i zrób listę przycisków zwanych przyciski trybów i że będzie to dokument, który odpytuje selektora.

54
00:03:59,350 --> 00:04:03,090
Tryb Paul Datt.

55
00:04:03,160 --> 00:04:05,410
Tak, że daje nam dwa przyciski.

56
00:04:05,700 --> 00:04:08,360
Następnie jedziemy do pętli przycisków trybu.

57
00:04:08,370 --> 00:04:13,020
Więc potrzeba var jest równa zeru.

58
00:04:13,290 --> 00:04:16,740
Mniej niż przycisk trybu zaskakujące.

59
00:04:16,910 --> 00:04:25,380
A co w tym także pozwoli nam zrobić to w przyszłości, jeśli chcemy dodać tryb trudności średni lub tryb normalny lub bardzo trudnym.

60
00:04:25,470 --> 00:04:34,800
Nie trzeba dodawać dodatkowe detektory ponieważ jesteśmy wybierając wszystkie z nich, a następnie za pomocą pętli kontra Tutaj musimy ręcznie napisać po jednym dla każdego przycisku, który dodamy.

61
00:04:35,100 --> 00:04:35,330
OK.

62
00:04:35,340 --> 00:04:36,480
Więc zakończyć pętlę tutaj.

63
00:04:36,570 --> 00:04:37,740
Plus Plus.

64
00:04:38,100 --> 00:04:50,590
A co mamy zamiar zrobić to dodać przyciski trybu I kropka dodać detektor zdarzenia kliknięcia, a oni po prostu zostawić go na to teraz.

65
00:04:50,590 --> 00:05:01,100
Zanim pójdziemy dalej jestem naprawdę zamiar wypowiedzieć się kod tak, że możemy powiedzieć, co ucieka z naszego nowego kodu i co chcemy się stać, kiedy klikniesz na jeden z tych przycisków.

66
00:05:01,210 --> 00:05:05,580
Pierwszą rzeczą, którą chcemy się zdarzyć, że dla wybranej klasy mają być zastosowane.

67
00:05:05,680 --> 00:05:07,260
Więc teraz to tylko wtedy, gdy unoszą.

68
00:05:07,300 --> 00:05:10,220
Otrzymujemy ten kolor chcę go mieć, kiedy kliknij.

69
00:05:10,780 --> 00:05:23,510
Dlatego musimy zrobić listę klasy kropka kropka dodać wybrane tak samo jak to, co jest, co mamy tu wyjątkiem robimy go do łatwego przycisku i ciężkiej przycisku.

70
00:05:23,710 --> 00:05:27,070
Możemy po prostu to zrób to, które odnosi się do tego, co kliknął.

71
00:05:27,220 --> 00:05:31,180
Jedynym problemem jest to, że trzeba go wyłączyć oryginalny, jak również.

72
00:05:31,540 --> 00:05:47,320
A do tego jesteśmy po prostu będzie ciężko kodem ta lista bitowe i przyciski trybów zapisu zerowej klasy kropka kropka usunąć wybrany, a następnie usuniemy go z drugim, jak również.

73
00:05:47,800 --> 00:05:49,360
Tak, bo tam tylko dwa przyciski.

74
00:05:49,390 --> 00:05:50,550
To nie jest problem.

75
00:05:50,560 --> 00:05:57,690
Co robimy jest usunięcie go z obu przycisków na wszelki wypadek, a następnie dodanie go do tego, który właśnie kliknąłeś.

76
00:05:57,700 --> 00:06:00,690
Więc teraz, jeśli badamy tę out i odświeżyć.

77
00:06:01,030 --> 00:06:06,630
Widać, że jest on dodawany tylko do jednego, że właśnie kliknął i jest usuwany z drugiej.

78
00:06:06,640 --> 00:06:10,900
Więc co trzeba zrobić, to dodać większość logiki tutaj tych przycisków.

79
00:06:11,080 --> 00:06:30,420
Dlatego musimy dowiedzieć się, ilu kwadraty pokazać wybrać nowe kolory, a następnie trzeba wybrać nowy pick do koloru, który jest kolorem staramy się próbując kliknąć.

80
00:06:30,670 --> 00:06:37,850
A potem wreszcie chcemy aktualizować stronę w celu odzwierciedlenia zmian.

81
00:06:38,110 --> 00:06:59,650
Tak więc, aby to wszystko zrobić Jestem rzeczywiście zamiar zrobić nową funkcję i taką funkcję Idę zadzwonić go zresetować, a to jest coś, co mamy zamiar wykorzystywać w kilku miejscach, bo jesteśmy powtarzając kroki do wiele zbierając nowe kolory zbieranie nowego zbierane kolor z tablicy kolorów, a następnie aktualizowanie strony, aby pokazać nowe kolory i aktualizowania tej wystawie tutaj.

82
00:06:59,650 --> 00:07:03,400
Robimy to cały czas, więc będę po prostu umieścić to wszystko na funkcji.

83
00:07:03,400 --> 00:07:08,500
Więc co trzeba zrobić w środku funkcja ta jest właściwie tylko mam zamiar skopiować go z tutaj.

84
00:07:08,530 --> 00:07:09,860
Mamy już zrobić to tutaj.

85
00:07:09,990 --> 00:07:15,200
Miałem zamiar skopiować to wszystko do naszego reset tak po prostu.

86
00:07:15,430 --> 00:07:17,150
I rzućmy okiem na to, co się dzieje.

87
00:07:17,350 --> 00:07:29,310
Więc zamiast resetu lub generowanie losowych kolorach w zależności od zdrętwiałymi kwadratów zmiennej, a następnie jesteśmy zbierając nowy kolor Zmieniamy zawartość kolorowych wyświetlaczy.

88
00:07:29,530 --> 00:07:32,020
Mamy tę zawartość tekstu równa nowe kolory.

89
00:07:32,050 --> 00:07:37,060
I faktycznie nie będzie działać, ponieważ to zwykło się odnosząc się do przycisku reset.

90
00:07:37,390 --> 00:07:40,420
I to było w środku imprezy w ośrodku dla przycisku reset.

91
00:07:40,540 --> 00:07:43,240
Jesteśmy teraz zamiast osobnej funkcji zwanej zresetowane.

92
00:07:43,270 --> 00:07:45,720
Musimy więc ciężko kodem, który jak przycisk resetu.

93
00:07:45,880 --> 00:07:49,140
A potem mamy zmianę wyświetlania wiadomości mają być puste.

94
00:07:49,570 --> 00:07:54,660
A potem mamy pętlę po wszystkich placach i jesteśmy aktualizacji ich kolor.

95
00:07:54,970 --> 00:07:57,920
A potem mamy zmianę tła na 8: 1 z powrotem do nieba.

96
00:07:58,180 --> 00:08:02,170
A jeśli po prostu zadzwonić, że zamiast tu wystarczy uruchomić zresetować.

97
00:08:02,170 --> 00:08:06,760
Jest jeden mały problem, który jest, że nigdy nie aktualizujesz zdrętwiałe kwadraty.

98
00:08:06,880 --> 00:08:11,870
Więc po kliknięciu na przycisk łatwego chcesz zmienić kwadratów zmiennych być trzy.

99
00:08:11,920 --> 00:08:15,180
Po kliknięciu na przycisk twardym chcesz zmienić to być 6.

100
00:08:15,220 --> 00:08:22,960
Więc to zrobić minut iść tu i dodaj if a wszystko, co możemy zrobić, to napisać, jeśli tej zawartości tekstowej.

101
00:08:22,960 --> 00:08:27,880
Więc przycisk, który został kliknięty, jeśli zawartość tekstu jest równa łatwe.

102
00:08:28,250 --> 00:08:36,510
Co zamierzamy zrobić, to powiedzieć, zdrętwiałe kwadratów jest równa trzem L's liczba kwadratów jest równa sześciu.

103
00:08:36,640 --> 00:08:43,030
A potem będziemy nazywać funkcję resetowania, który będzie korzystał z zdrętwiałe kwadraty jak widać w naszym funkcję resetowania.

104
00:08:43,150 --> 00:08:47,410
Używamy kilka kwadratów, aby zadzwonić do naszego wygenerować losową funkcję kolorach.

105
00:08:47,600 --> 00:08:51,970
Dlatego musimy mieć jakieś kwadraty aktualizowane które robimy tutaj.

106
00:08:52,000 --> 00:08:57,010
Jest rzeczywiście krótszy sposób pisania to, że niektórzy ludzie są wielkimi fanami.

107
00:08:57,010 --> 00:08:58,580
To się nazywa operator trójskładnikowych.

108
00:08:58,570 --> 00:09:01,720
Więc mam zamiar napisać, a potem będę mówić o tym, jak to działa.

109
00:09:01,720 --> 00:09:06,350
Więc ten tekst treść równa równa równych.

110
00:09:06,670 --> 00:09:10,870
Łatwy znak zapytania.

111
00:09:11,000 --> 00:09:19,110
Numb kwadraty równa się trzy okrężnicy zdrętwiałe kwadratów równa się sześć.

112
00:09:19,120 --> 00:09:23,710
Więc ta jedna linia tutaj robi dokładnie to samo, co tych czterech linii tutaj.

113
00:09:23,710 --> 00:09:25,430
Te pięć linii.

114
00:09:25,510 --> 00:09:27,360
Tak to się nazywa operator trójskładnikowych.

115
00:09:27,400 --> 00:09:28,950
Istnieją trzy części do niego.

116
00:09:28,960 --> 00:09:30,860
Pierwszą rzeczą jest to warunek.

117
00:09:31,070 --> 00:09:42,080
Więc można przeczytać, jak gdyby ta treść tekstu jest równe kwadraty łatwe to nie jest równe 3 przeciwnym wypadku kwadratów jest równa 6.

118
00:09:42,250 --> 00:09:44,060
Więc jest to tylko sposób pisania tego.

119
00:09:44,380 --> 00:09:46,280
I będę to tak.

120
00:09:46,270 --> 00:09:55,970
Zazwyczaj, jeśli mamy tylko jedną linię szybkiego instrukcje if dokąd ustawienie jednej wartości do dwóch różnych możliwych opcji to dobry przypadek użycia dla operatora potrójnego.

121
00:09:56,600 --> 00:09:59,420
Wciąż mamy jednak problem, który mamy w rzeczywistości nigdy nie ukrywał.

122
00:09:59,420 --> 00:10:01,380
Albo pokazując odpowiednią liczbę kwadratów.

123
00:10:01,390 --> 00:10:03,940
Więc co się stanie, jeśli odświeżyć.

124
00:10:04,030 --> 00:10:04,950
Zaczynamy od trybu dysku.

125
00:10:04,950 --> 00:10:05,860
To działa dobrze.

126
00:10:05,870 --> 00:10:07,290
Wszystko działa tak samo.

127
00:10:07,450 --> 00:10:16,160
Jeśli klikam na łatwe choć nadal mamy tu sześć kwadratów, a zobaczysz dno trzy prostu nie zmieniają kolory, ponieważ mamy tylko trzy kolory generowane.

128
00:10:16,370 --> 00:10:21,890
Więc to, co musimy zrobić, zamiast naszej funkcji resetu musimy wyjaśnić, że.

129
00:10:21,880 --> 00:10:28,000
Więc tutaj zamiast tej pętli dokąd zmieniającym kolor kwadratów, aby dopasować kolor z tablicy kolorów.

130
00:10:28,210 --> 00:10:34,060
Jeśli istnieje tylko trzy elementy w tablicy kolorów, co tak naprawdę trzeba zrobić, to ukryć pozostałe trzy kwadraty.

131
00:10:34,270 --> 00:10:40,670
Więc mam zamiar napisać, że z if a ja po prostu się, by sprawdzić, czy jest kolor pomalować.

132
00:10:40,670 --> 00:10:42,070
Ja też zrobić coś innego.

133
00:10:42,110 --> 00:10:47,410
Więc jeśli nie jest to kolor będziemy malować albo zmienić kolor tła kwadratów.

134
00:10:47,410 --> 00:10:57,200
I było tak, że kolor inaczej musimy zmienić kwadraty wyświetlać się żadne.

135
00:10:57,320 --> 00:11:02,920
I to musi być zaprojektowany tak, aby wyświetlać tak po prostu.

136
00:11:03,100 --> 00:11:05,130
I tak, że będzie następnie ukryć je dla nas.

137
00:11:05,360 --> 00:11:14,870
Więc co się dzieje, gdy klikam na wyciągnięcie przycisku Mam tablicę kolorów z trzy pozycje zapętlenie przez sześć placów i ponownego sprawdzenia.

138
00:11:14,920 --> 00:11:19,790
Jeśli nie jest to kolor, który pasuje do tego placu i przez pierwsze trzy nie będzie.

139
00:11:19,820 --> 00:11:22,890
Więc ustawić kolor tła, kolor z tablicy.

140
00:11:23,020 --> 00:11:26,700
Ale ostatnie trzy kolory mi będzie brak.

141
00:11:26,740 --> 00:11:27,910
Albo faktycznie będzie nieokreślona.

142
00:11:27,910 --> 00:11:29,240
Nie będzie tam kolorów.

143
00:11:29,470 --> 00:11:31,010
Tak, że jest fałszywy.

144
00:11:31,270 --> 00:11:34,560
A co się dzieje, potem ustawić wyświetlanie być żadnego.

145
00:11:34,820 --> 00:11:37,770
Więc pokażę ci jak to działa odświeżania.

146
00:11:38,230 --> 00:11:41,180
Jeśli klikam na łatwe dolna trzy znikają.

147
00:11:41,170 --> 00:11:43,720
Przechowywać klikając na łatwe otrzymujemy trzy nowe kolory.

148
00:11:43,780 --> 00:11:44,840
Zagrajmy w grę.

149
00:11:44,840 --> 00:11:46,410
No to jedziemy.

150
00:11:46,450 --> 00:12:01,720
Mamy jednak problem, który jest, gdy klikam na twardym mamy zmianę wszystkich sześciu kwadratów mieć nowy kolor Bactrim ale nie ukrywamy dolna trzy zrobi obejść to prawo przed dajemy nowe tło kolor do kwadratów.

151
00:12:01,720 --> 00:12:03,960
Mam zamiar iść do przodu i ponownie pokazać im.

152
00:12:03,970 --> 00:12:09,470
Więc to będzie kwadraty Myślałem styl wyświetlania równy blok.

153
00:12:09,590 --> 00:12:11,320
Tak to jest, jak je przywrócić.

154
00:12:11,410 --> 00:12:13,140
A my po prostu będzie to zrobić dla wszystkich sześciu.

155
00:12:13,150 --> 00:12:14,170
To nie jest wielka sprawa.

156
00:12:14,200 --> 00:12:19,320
Więc jeśli damy im kolor tła jesteśmy po prostu będzie zawsze upewnić się, że są one widoczne jako pierwszy.

157
00:12:19,340 --> 00:12:24,590
Więc teraz, jeśli mamy odświeżyć i idą do mamy trzy proste zagrać.

158
00:12:24,760 --> 00:12:26,160
Klikam trudne.

159
00:12:26,380 --> 00:12:28,070
Teraz mamy sześć rozmówców.

160
00:12:28,070 --> 00:12:30,520
Zagrajmy w grę.

161
00:12:30,520 --> 00:12:33,700
Nie pójdziemy po kliknięciu na łatwe i wracamy do trzech.

162
00:12:33,700 --> 00:12:34,280
W porządku.

163
00:12:34,450 --> 00:12:37,390
Więc widać, możemy oczyścić dużo kodu tutaj.

164
00:12:37,510 --> 00:12:39,480
To było o wiele dłużej.

165
00:12:39,480 --> 00:12:41,360
To jak długo trzy razy co najmniej.

166
00:12:41,380 --> 00:12:46,120
A dwa różne słuchacze kliknął i teraz nasz kod jest stosunkowo uniwersalnym.

167
00:12:46,120 --> 00:12:54,040
Jeśli chcemy dodać przycisk średniej trudności wszystko, co musisz zrobić, to zmienić tę linię tutaj gdzie mamy szereg nother kwadraty.

168
00:12:54,040 --> 00:13:09,160
Może chcemy 5 kwadratów lub chcemy bardzo trudny poziom, gdzie mamy 10 kwadratów musimy tylko zmienić numer kwadraty i nazwać naszą funkcję resetowania, aby dostać kolejne miejsce, które możemy wykorzystać naszą funkcję resetowania jest rzeczywiście, gdy klikniemy na przycisk resetowania ,

169
00:13:09,430 --> 00:13:17,630
Więc wszystko, co musimy zrobić, nie ma zastąpić wszystko zamiast przycisku reset kliknij Lisner z zaledwie zresetować tak po prostu.

170
00:13:17,650 --> 00:13:19,500
Tak, że podjeżdża nasz kod dużo.

171
00:13:19,570 --> 00:13:22,650
Po prostu pozbył się 10 lub więcej linii.

172
00:13:23,170 --> 00:13:26,280
Więc wróćmy Zapisz bez nawiasów.

173
00:13:26,600 --> 00:13:29,020
Chodźmy do przeglądarki i upewnij się, że nadal działa.

174
00:13:29,020 --> 00:13:31,580
Warto więc zagrać.

175
00:13:31,850 --> 00:13:35,000
Kliknij na grę ponownie i resetuje dobrze.

176
00:13:35,320 --> 00:13:40,750
Załóżmy, kliknij na łatwą grę inną grę, a także przywraca dobrze.

177
00:13:40,750 --> 00:13:41,430
W porządku.

178
00:13:41,530 --> 00:13:43,340
Więc jedziemy do naszego kodu całkiem sporo.