OK, tak więc jest jedna ostatnie miejsce możemy skorzystać z funkcji resetowania, który jest na samym początku naszego kodu.
Kiedy strona ładuje się po raz pierwszy, co musimy się zdarzyć, to musimy wybrać losowe kolory, które zrobiłeś to musimy wybrać jeden kolor z tych nowych losowych kolorów, które już mamy tutaj.
A potem musimy przypisać kolor do każdego kwadratu na stronie, dzięki czemu możemy korzystać z naszej funkcji resetowania bo to w zasadzie to, co robi.
I mam zamiar oczyścić rzeczy właściwie tylko poprzez uruchomienie funkcji na samym początku o nazwie init, że nie istnieje.
A w środku naszego funkcji init zamierzamy umieścić wszystko, co potrzebne do uruchomienia Po załadowaniu strony.
Więc musimy funkcji init.
A potem wewnątrz naszej funkcji netto pierwszą rzeczą, którą możemy zrobić, to iść do przodu i dodać w naszych słuchaczy przycisk MODE.
I to jest tak naprawdę tylko do czyszczenia rzeczy.
Więc to nie tylko krąży w środku pustkowia.
Tak będzie wcięcie to prawidłowo.
Więc to jest nasze detektory zdarzeń przyciski mode i mam zamiar chwycić ten kod tutaj.
A co to robi to zmienia kolor każdego pola, które mogą po prostu pozbyć.
Nie musimy tego robić ponieważ już użyjemy tego resetu a następnie dodaje także słuchaczy Klick do każdego kwadratu tak, że po kliknięciu wciąż musimy tym wszystkim logiki może to posprzątać trochę.
Mamy zmianę wyświetlania wiadomości mamy zmianę przycisku reset zmienia kolory.
Więc jestem po prostu skopiować to aż do naszego funkcji init, ponieważ chcemy też, że do uruchomienia na początku, gdy strona ładuje się tak dobrze i to zrobione prawidłowo, jak również.
A potem bardzo Ostatnią rzeczą, gdy stworzyliśmy obsługi zdarzeń tutaj przycisków trybu przycisków i placów czym chcemy po prostu zresetować ekran, który oznacza uruchomienie funkcji resetowania i co zresetowane zrobi to będzie to faktycznie generuje nasze kolory więc możemy po prostu kolory są nieokreślone lub pusta tablica na początku.
Ja po prostu zacząć z nim.
No damy mu pustą tablicę w pierwszej kolejności.
A potem co możemy zrobić, to ustawić kolor zbierane tylko być zmienną bez wartości i zapisać to i zrobić rzeczy trochę czystsze.
Mam zamiar przenieść moje selektorów tu tak, że nawet najwyższej mamy trzy zmienne, które nie są wybieranie rzeczy.
A potem mamy zmienne, które są wybierając różne elementy na stronie.
OK.
Więc jeszcze raz to, co dzieje się na samym początku.
Prowadzimy funkcję init będzie działać cały ten kod tutaj.
I że kod ma zamiar założyć nasze słuchaczy przycisk MODE i to się dzieje, aby skonfigurować naszych słuchaczy kwadratowych, a następnie uruchamiamy resetu, który odbierze kolory to wybiera losowy kolor Spośród tych kolorach Znalazło to zmienia treść tekstu i to wszystko.
I możemy pozbyć się tej linii, bo robimy to teraz wewnątrz funkcji init, który dzwoni reset.
Warto więc upewnić się, że to działa, zanim ruszymy dalej.
Mamy odświeżyć otworzyć con ..
Brak błędów.
I widać odświeżyć stronę i cały ten kod jest uruchamiany na tej funkcji init.
A w środku tam to zresetowanie wszystko, co widzisz.
Więc nasi słuchacze są prawidłowo skonfigurowane.
Dostajemy poprawną wiadomość.
Zagrajmy jeszcze raz.
Wszystko działa dobrze.
Zagrajmy w tryb łatwe.
No to jedziemy.
Zagrajmy jeszcze jeden więcej czasu.
Wspaniały.
Tak to działa dobrze.
Jest jeszcze jedna zmiana moglibyśmy co jest, że ta funkcja tu i teraz jest to trochę długo, a niektórzy ludzie, że ja pracowałem mają bardzo surowe przepisy, jak długo funkcja powinna być.
Niektórzy powiedzą, jeśli kod jest dłuższy niż 10 wierszy, które trzeba podzielić go na własnej funkcji.
Więc możemy to zrobić tutaj.
To może być funkcją własnego wszystko, co robi, to założyć słuchaczy przycisk MODE, więc mogliśmy zrobić tutaj.
Albo po prostu pisanie przycisk trybu nazwijmy go skonfigurować przyciski tryb, a następnie będziemy zadeklarować tę funkcję tu działać w konfiguracji przycisków trybu.
I wewnątrz tutaj musimy po prostu wklej ten kod, który następnie uruchomić wcięcie właściwie tylko jeden raz na początku.
Założyliśmy słuchaczy przycisk MODE i możemy zrobić to samo tutaj.
Skopiuj ten kod i damy to można sobie nazwy utworzonych słuchaczy kwadratowych albo niech po prostu nazwać to skonfigurować kwadraty tak i wtedy będziemy napisać funkcję skonfigurować.
A ja widząc, że nie używać kapitał jesteś tam.
Więc trzeba zwrócić uwagę na to, że ustanowiony kwadratów tutaj i będziemy mieć pewność, że nasz kod działa w ten sam sposób.
Więc teraz nasza init jest naprawdę ładne i czyste.
Ustala się przyciski trybu ustawia się kwadraty i resetuje wszystko, co widzimy.
Starajmy się odświeżyć.
Wygląda na to, że pracował nasz plac wciąż działać dobrze.
Jeśli je odświeżyć bardziej nasze przyciski trybów nadal działać tak samo dobrze, jak również.
Więc to wszystko świetnie i wygląda na to, że wszystko działa dobrze.
To ile weźmiemy byłaby teraz.
Ale pokażę wam kilka rzeczy, które chcemy poprawić w kolejnych filmach.
Gdy dowiadujemy się nieco więcej o JavaScript i uzyskać bardziej komfortowo z nim porozmawiamy o pewnych wzorców projektowych i Wzorce projektowe są zasadniczo sposoby strukturyzacji kodu, dzięki czemu możemy mieć ten kod.
To działa tak samo, na tych samych zasadach, aby tę samą grę i 10 różnych osób może napisać go w 10 różnych sposobów i nie chodzi tylko o to, jakie funkcje Jedziemy lub nazw zmiennych.
Jest to również o tym, jak zorganizować rzeczy w ogóle, a najprostszy jeden lub jedną z najczęstszych jest nazywany wzór Moduł projektowania.
A co to znaczy, możemy dodać kilka właściwości do obiektów tak, że nie mamy żadnych zmiennych jak ten krąży, które nie znajdują się wewnątrz obiektu.
Nie mamy żadnych funkcji, które są po prostu na własną rękę, jak to na obiekcie okiennej.
Raczej dodamy je do naszego obiektu.
Tak to będzie wyglądać mniej więcej tak można mieć obiekt gry.
A potem możemy napisać kropkę grę i musimy po prostu zrobić jedną część.
Dot gier startowych jest funkcją, a my po prostu skopiuj ten kod tam i chcemy to zrobić dla każdej pojedynczej funkcji każdą pojedynczą zmienną nieruchomości, a następnie na samym końcu będziemy wystarczy uruchomić grę.
I Rozumowanie to jest trochę bardziej skomplikowana.
Krótka wersja jest to, że pomaga nam utrzymać wszystko uporządkowane i zorganizowane.
A także pomaga uniknąć kolizji przestrzeni nazw o którym wspominałem wcześniej w jednym z filmów obiektowych.
Więc nie będzie przechodzić przez cały ten Refactor.
Co mamy jest wystarczająco dobre.
To działa dobrze.
Ale jak nadal rozwijać jako deweloper i dowiedzieć się więcej i więcej jedna z tych rzeczy będzie zwrócić uwagę, gdy pojawi się bardziej komfortowo jest javascript wzorce projektowe i tam są książki napisane na ten temat.
Jest eseje i blogi i tak wiele filmów i tam faktycznie całe kursy on-line tylko o kształtowanie JavaScript.
Więc to nie jest tematem.
I nadal tak naprawdę chcemy się skupić na treści do kodu HTML javascript C ocenić logikę i strukturę może przyjść później.