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ę.
Więc pierwsza zmiana jest taka, że ​​jeśli wygramy ten mecz.
Więc wygrać tutaj.
Tam pójść i dostaję to prawidłowe wiadomość i kliknij grę ponownie.
Wciąż mówi poprawne.
I chcemy, że aby przywrócić który jest naprawdę szybkie zmiany.
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.
Więc chodźmy znaleźć które sprawiają, że ten cały ekran.
Kiedy więc kliknij na ten przycisk reset, który jest tutaj.
Wszystko, co musimy zrobić, to zmienić nasz wyświetlacz, który nazwaliśmy wyświetlania wiadomości.
Tak zrobimy, że tu po prostu wszędzie.
Treść wiadomości tekstowe ups Wyświetlacz tekstowy równy ciąg pusty.
I zobaczmy, jak to idzie.
Odświeżać.
OK, niech po prostu kliknij, aż wygramy.
OK, więc to mówi o poprawne.
A jeśli kliknę zagrać jeszcze raz, że odchodzi.
Drugi niewielka zmiana, że ​​chcę, aby to, że ten przycisk powinien grać tylko powiedzieć raz kolejny wygrywa użytkownik.
Więc będę odświeżyć stronę i mówi, nowe kolory, które jest jak chcemy go do pracy.
Następnie, jeśli wygram pyta mnie, czy chcę zagrać jeszcze raz.
A potem, jeśli kliknij zagrać jeszcze raz chcemy zmienić tekst przycisku, aby przejść z powrotem do nowych kolorach.
Tak naprawdę niewielka różnica, ale chcę tylko pokazać grę ponownie, jeśli użytkownik po prostu wygrać.
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.
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ć.
Ta kropka treść tekstu, aby wrócić do nowych kolorów i mogliśmy również napisać przycisk reset.
Ale łatwiej jest to zrobić, ponieważ jesteśmy wewnątrz detektora zdarzenia dla przycisku reset.
I to powinno być dobrze, jeśli mamy odświeżyć szybkie aż dojdziemy właściwy.
Chcemy zagrać jeszcze raz.
Pewnie.
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.
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.
I to jest rzeczywiście nasza przeglądarka robić.
I możemy to wyłączyć.
Nie wiem, czy można zobaczyć, że w obsadzie ekranu ale jest niebieski konspektu.
To dość szkodliwych.
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ć.
Teraz, jeśli klikniemy nie mamy ten niebieski obrys wokół niego.
Więc to wszystko, co chciałem zrobić dla logiki gry.
Teraz chcemy, aby spędzić trochę czasu refaktoryzacji kodu.
Więc wróćmy.
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.
A są one bardzo podobne w tym, jak one działają.
Z wyjątkiem jednego z nich będzie pracować z trzech kwadratów.
Drugi współpracuje z sześciu, ale poza tym robią w zasadzie to samo.
Tak naprawdę możemy obniżyć ten powielania.
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ę.
Więc klasa będzie nazywany trybem.
Więc dajemy im tryb klasy.
Pamiętaj przycisku lub każdy element może mieć dwie klasy.
po prostu muszą być oddzielone spacjami.
Więc to ma klasę i klasę tryb wybrany.
OK.
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.
Tryb Paul Datt.
Tak, że daje nam dwa przyciski.
Następnie jedziemy do pętli przycisków trybu.
Więc potrzeba var jest równa zeru.
Mniej niż przycisk trybu zaskakujące.
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.
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.
OK.
Więc zakończyć pętlę tutaj.
Plus Plus.
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.
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.
Pierwszą rzeczą, którą chcemy się zdarzyć, że dla wybranej klasy mają być zastosowane.
Więc teraz to tylko wtedy, gdy unoszą.
Otrzymujemy ten kolor chcę go mieć, kiedy kliknij.
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.
Możemy po prostu to zrób to, które odnosi się do tego, co kliknął.
Jedynym problemem jest to, że trzeba go wyłączyć oryginalny, jak również.
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ż.
Tak, bo tam tylko dwa przyciski.
To nie jest problem.
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ś.
Więc teraz, jeśli badamy tę out i odświeżyć.
Widać, że jest on dodawany tylko do jednego, że właśnie kliknął i jest usuwany z drugiej.
Więc co trzeba zrobić, to dodać większość logiki tutaj tych przycisków.
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ąć.
A potem wreszcie chcemy aktualizować stronę w celu odzwierciedlenia zmian.
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.
Robimy to cały czas, więc będę po prostu umieścić to wszystko na funkcji.
Więc co trzeba zrobić w środku funkcja ta jest właściwie tylko mam zamiar skopiować go z tutaj.
Mamy już zrobić to tutaj.
Miałem zamiar skopiować to wszystko do naszego reset tak po prostu.
I rzućmy okiem na to, co się dzieje.
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.
Mamy tę zawartość tekstu równa nowe kolory.
I faktycznie nie będzie działać, ponieważ to zwykło się odnosząc się do przycisku reset.
I to było w środku imprezy w ośrodku dla przycisku reset.
Jesteśmy teraz zamiast osobnej funkcji zwanej zresetowane.
Musimy więc ciężko kodem, który jak przycisk resetu.
A potem mamy zmianę wyświetlania wiadomości mają być puste.
A potem mamy pętlę po wszystkich placach i jesteśmy aktualizacji ich kolor.
A potem mamy zmianę tła na 8: 1 z powrotem do nieba.
A jeśli po prostu zadzwonić, że zamiast tu wystarczy uruchomić zresetować.
Jest jeden mały problem, który jest, że nigdy nie aktualizujesz zdrętwiałe kwadraty.
Więc po kliknięciu na przycisk łatwego chcesz zmienić kwadratów zmiennych być trzy.
Po kliknięciu na przycisk twardym chcesz zmienić to być 6.
Więc to zrobić minut iść tu i dodaj if a wszystko, co możemy zrobić, to napisać, jeśli tej zawartości tekstowej.
Więc przycisk, który został kliknięty, jeśli zawartość tekstu jest równa łatwe.
Co zamierzamy zrobić, to powiedzieć, zdrętwiałe kwadratów jest równa trzem L's liczba kwadratów jest równa sześciu.
A potem będziemy nazywać funkcję resetowania, który będzie korzystał z zdrętwiałe kwadraty jak widać w naszym funkcję resetowania.
Używamy kilka kwadratów, aby zadzwonić do naszego wygenerować losową funkcję kolorach.
Dlatego musimy mieć jakieś kwadraty aktualizowane które robimy tutaj.
Jest rzeczywiście krótszy sposób pisania to, że niektórzy ludzie są wielkimi fanami.
To się nazywa operator trójskładnikowych.
Więc mam zamiar napisać, a potem będę mówić o tym, jak to działa.
Więc ten tekst treść równa równa równych.
Łatwy znak zapytania.
Numb kwadraty równa się trzy okrężnicy zdrętwiałe kwadratów równa się sześć.
Więc ta jedna linia tutaj robi dokładnie to samo, co tych czterech linii tutaj.
Te pięć linii.
Tak to się nazywa operator trójskładnikowych.
Istnieją trzy części do niego.
Pierwszą rzeczą jest to warunek.
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.
Więc jest to tylko sposób pisania tego.
I będę to tak.
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.
Wciąż mamy jednak problem, który mamy w rzeczywistości nigdy nie ukrywał.
Albo pokazując odpowiednią liczbę kwadratów.
Więc co się stanie, jeśli odświeżyć.
Zaczynamy od trybu dysku.
To działa dobrze.
Wszystko działa tak samo.
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.
Więc to, co musimy zrobić, zamiast naszej funkcji resetu musimy wyjaśnić, że.
Więc tutaj zamiast tej pętli dokąd zmieniającym kolor kwadratów, aby dopasować kolor z tablicy kolorów.
Jeśli istnieje tylko trzy elementy w tablicy kolorów, co tak naprawdę trzeba zrobić, to ukryć pozostałe trzy kwadraty.
Więc mam zamiar napisać, że z if a ja po prostu się, by sprawdzić, czy jest kolor pomalować.
Ja też zrobić coś innego.
Więc jeśli nie jest to kolor będziemy malować albo zmienić kolor tła kwadratów.
I było tak, że kolor inaczej musimy zmienić kwadraty wyświetlać się żadne.
I to musi być zaprojektowany tak, aby wyświetlać tak po prostu.
I tak, że będzie następnie ukryć je dla nas.
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.
Jeśli nie jest to kolor, który pasuje do tego placu i przez pierwsze trzy nie będzie.
Więc ustawić kolor tła, kolor z tablicy.
Ale ostatnie trzy kolory mi będzie brak.
Albo faktycznie będzie nieokreślona.
Nie będzie tam kolorów.
Tak, że jest fałszywy.
A co się dzieje, potem ustawić wyświetlanie być żadnego.
Więc pokażę ci jak to działa odświeżania.
Jeśli klikam na łatwe dolna trzy znikają.
Przechowywać klikając na łatwe otrzymujemy trzy nowe kolory.
Zagrajmy w grę.
No to jedziemy.
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.
Mam zamiar iść do przodu i ponownie pokazać im.
Więc to będzie kwadraty Myślałem styl wyświetlania równy blok.
Tak to jest, jak je przywrócić.
A my po prostu będzie to zrobić dla wszystkich sześciu.
To nie jest wielka sprawa.
Więc jeśli damy im kolor tła jesteśmy po prostu będzie zawsze upewnić się, że są one widoczne jako pierwszy.
Więc teraz, jeśli mamy odświeżyć i idą do mamy trzy proste zagrać.
Klikam trudne.
Teraz mamy sześć rozmówców.
Zagrajmy w grę.
Nie pójdziemy po kliknięciu na łatwe i wracamy do trzech.
W porządku.
Więc widać, możemy oczyścić dużo kodu tutaj.
To było o wiele dłużej.
To jak długo trzy razy co najmniej.
A dwa różne słuchacze kliknął i teraz nasz kod jest stosunkowo uniwersalnym.
Jeśli chcemy dodać przycisk średniej trudności wszystko, co musisz zrobić, to zmienić tę linię tutaj gdzie mamy szereg nother kwadraty.
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 ,
Więc wszystko, co musimy zrobić, nie ma zastąpić wszystko zamiast przycisku reset kliknij Lisner z zaledwie zresetować tak po prostu.
Tak, że podjeżdża nasz kod dużo.
Po prostu pozbył się 10 lub więcej linii.
Więc wróćmy Zapisz bez nawiasów.
Chodźmy do przeglądarki i upewnij się, że nadal działa.
Warto więc zagrać.
Kliknij na grę ponownie i resetuje dobrze.
Załóżmy, kliknij na łatwą grę inną grę, a także przywraca dobrze.
W porządku.
Więc jedziemy do naszego kodu całkiem sporo.