Witamy spowrotem.
W tym filmie mamy zamiar skupić się na dodanie łatwe i twarde przyciski tutaj który wpłynie na poziom trudności gry.
Więc kiedy załadować stronę aż trudno jest już wybrana i widzimy sześć różnych przycisków tutaj lub sześć różnych kwadratów.
A potem mogę kliknąć na łatwe i pozostaje zaznaczony.
I mamy tylko trzy pola do wyboru.
A potem mogę wrócić do serca.
Mamy zamiar rozpocząć dodając w dwa przyciski, które musimy.
Więc mam zamiar iść do mojego HMO i dodać dwa przyciski.
Pierwszy z nich powiemy łatwe.
Drugi powie twarde i odświeży.
OK.
A to wygląda dobrze teraz.
Zauważysz nasz rozpiętość nie bierze się żadne miejsce.
I widzę tam jakiś tekst pokazuje się.
To popycha te przyciski dala skupi się na stylizacji później, ale jest jeden element stylizacji, że chcę się skupić na którym dzięki czemu wyglądają wybrane podczas wczytywania strony lub gdy zdecydujemy łatwe lub trudne odpowiedni przycisk powinien pozostać na niebiesko.
A sposób, w jaki robimy to za pomocą klasy i włączanie tej klasy i wyłączać.
Więc idę do zdefiniowania klasy tutaj i to będzie prostsze niż ten styl stylizacji tutaj to tylko będzie to kolor.
Więc nasz kolor tła, a klasa będzie się nazywać wybrane ponieważ to, co robimy.
Dodajemy wybraną klasę do przycisku, który jest zaznaczony.
I to właśnie będzie miał tle zestaw do ciebie, aby rozpocząć.
A potem, co mamy zamiar zrobić, to po prostu dać tryb hard Przycisk klasy równa wybrana.
A jeśli odświeżyć w naszym kodzie widać, że trudno jest włączony.
To ohydne Tak, ale przynajmniej pokazuje nam, że jesteśmy w trybie dysku.
Tak więc to, co chcemy zrobić, to dodać kod, który znajduje się przełącznik, który po kliknięciu na łatwe i wtedy najtrudniejsza część pokazuje trzy kolory po kliknięciu na łatwe i sześciu kolorach po kliknięciu na sercu.
OK.
Zaczynajmy tutaj.
Tak więc, aby te przyciski faktycznie pracują musimy je wybrać w naszych javascript, a następnie mają kilka szybkich słuchaczy i zrobić i uruchomić kod, gdy każdy z nich zostanie kliknięty.
Warto więc łatwiej wybrać i mam zamiar zacząć dając im każdy identyfikator łatwe.
DTN, a następnie ciężko ETN i będziemy zmienia tego, czy widzisz jakieś czerwone flagi tutaj lub jeśli myślisz używamy zbyt wielu pomysłów.
Będziemy refactoring tego w zaledwie kilka chwil.
Ale mamy zamiar rozpocząć z dwóch różnych identyfikatorów.
Łatwy Przycisk trudno przycisk.
Idź do naszych javascript i je zaznaczyć.
Więc var łatwe ETN równa dokumentu selektor zapytania doc z Octa.
Łatwy ETN.
Upewnij się, że możemy wykorzystać te same rzeczy.
No to jedziemy.
I to samo za twarde i nie wiem, jeśli złapany że wzniosłe.
Jeśli wybierzesz słowo łatwe i trafisz Kamandi będzie następnie automatycznie wybiera kolejną instancję i mogę robić to, aby zaznaczyć wszystkie z nich, ale po prostu chcę te dwa i będę ciężko wpisać zamiast.
Tak więc mamy dwa przyciski, a następnie możemy zrobić coś takiego.
Łatwy PTEN dodać detektor zdarzeń.
Kliknij i wszyscy mamy zamiar zrobić, to po prostu alert, że proste przycisk został tak po prostu zamknąć.
Alert proste kliknięcie przycisku i upewnić się, że działa.
Więc odświeżania kliknij OK Łatwy mówi kliknięciu przycisku Łatwy i wtedy będziemy powielać to dla ciężkiej przycisku i powiemy, że trudno było zamknąć i przycisk odśwież łatwe nadal działa i ciężko, ale mówi nam, że przycisk został kliknięty trudne.
Tak więc, zamiast po prostu wykonywali prace, które pozwalają na uzyskanie w klasie wybraną klasę odzwierciedlać których jedna jest zaznaczona.
Jeśli więc kliknij na przycisk łatwego wszystko chcemy zrobić, to proste przycisk.
Lista klas Doc Dodaj wybrane i jeśli odświeżyć teraz klikam na łatwe.
Ma wybraną klasę.
Prosta, ale problemem jest to, że wciąż pozostaje na przycisk twardym, dzięki czemu łatwo naprawić.
My po prostu chcemy mieć twardy listy Przycisk doc Krzyża dot wyjmij ją i teraz, jeśli klikniemy na łatwy tryb ciężko odchodzi.
Ale jeśli klikniemy na twardych wciąż nie mają tej logiki więc możemy to naprawić po prostu kopiując ten kod powyżej, a my teraz mamy twarde przyciski bezklasowego, które dodają wybrany łatwy listę klasy, że przycisk Usuń wybrane.
OK, niech przetestować go.
W porządku.
Więc mamy teraz łatwiejsza część odbywa który jest pokazano dwa przyciski, które jest aktualnie wybrane i odświeżyć i ciężko jest wybierany automatycznie, ponieważ mamy sześć elementów.
Następna w kolejce musimy dodać logikę, aby rzeczywiście zmienić poziom trudności nie tylko styl tych przycisków tutaj, ale tylko pokazują trzy elementy lub sześć kwadratów.
Dlatego musimy zrobić następny, zanim zaczniemy.
Sprawdźmy ponownie w roztworze, aby zobaczyć jak to działa.
Więc jeśli odświeżyć i klikam na wyciągnięcie zauważyć, że mamy nowe kolory i musimy zrobić, ponieważ istnieje ryzyko, że mam sześć kolorów Tu i kolor, który jest zaznaczony tutaj, może być jednym z tych trzech, które po kliknięciu na łatwe te trzy są usuwane.
Tak, że może być dość gry łamanie bug.
Więc zamiast sobie z tym jesteśmy po prostu będzie odebrać trzy nowe kolory.
Tak więc proces, który jest nam odświeżyć.
Tak więc proces jest po kliknięciu na przycisku łatwego będziemy generować trzy nowe kolory tablicy kolorów zamiar wybrać jeden kolor z tych trzech.
Jedziemy do aktualizacji, które pojawiają się pobrane koloru.
Mamy zamiar zaktualizować trzy kwadraty tutaj.
I ważne jest to, że my także ukryć trzy inne kwadraty więc nie usuwać je po prostu je ukryć, ustawiając wyświetlacz będzie żadnego.
A potem to samo tyczy się mocno.
Generujemy sześć nowych kolorów w tablicy kolorów.
Odbieramy jeden być nasze typy kolorowych.
Wyświetlamy które się tutaj.
Następnie pokażemy trzy kwadraty na dole, a następnie ustawić każdą z nich, aby mieć kolor.
OK.
Warto więc uporać się z tym już teraz.
Przede wszystkim, kiedy klikamy na przycisk łatwego niech nie zaczynają.
Idziemy aby wygenerować nowe kolory dzięki czemu kolory równa generowania losowych kolorów, tym razem 3.
A potem raz mamy tego zrobić będziemy chcieli, aby wybrać nowy kolor zbierane tak wybrał kolor równa wybrać kolor tak po prostu.
Więc kiedy mamy swoje kolory i nasz odebrał kolor możemy zacząć po prostu zmieniając wyświetlacz tutaj, aby pokazać nowy kolor obrazu.
Więc to jest tak proste, jak mówi treść tekstu kolorowy wyświetlacz równa wybrał kolor.
A jeśli odświeżyć Zamierzam dostać jakieś nowe kolory tutaj, żeby pokazać wam kilka rzeczy.
Gdy klikam na łatwe, jak wspomniano wcześniej kolor się zmienia, a za kulisami jest tablica, która zmienia kolory, jak również.
Więc przyjrzyjmy się, jakie kolory są w tej chwili, a potem kliknij na tryb łatwego i patrzę na jakie kolory się ponownie i jest inaczej.
A także wziął kolor jest inny.
Więc teraz pomówmy o tym, jak ukryć trzy dolnej div, gdy klikamy na łatwym trybie lub możemy ukryć się w pierwszej trójce.
To nie ma znaczenia.
Ale ja zamierzam zrobić Trzy dolne sposób, że będziemy robić to przez przelotowego i ustawienie dolne trójki wyświetlenia właściwość być żadnego.
Więc pozwól mi pokazać, jak to działa.
Idę tylko wybrać jeden z nich.
Więc zróbmy selektora zapytaniu dokumentu Wszystkie plac lub kwadratu, a następnie pracować z piątego.
No faktycznie szósty z indeksem pięciu, a następnie ustawić ten styl wyświetlania być żadnego.
A zobaczysz, że znika.
A jeśli chcę wrócić które będę gdybyśmy kliknij trybie dysku po prostu trzeba powiedzieć styl.
Wyświetlacz równa blokadę.
W porządku.
Więc śmiało i zaimplementować to w naszym kodzie drogę, która pozwoli osiągnąć to poprzez zapętlenie za pośrednictwem wszystkich sześciu na początku.
A dla pierwszych trzech zamierzamy dać im nowy kolor.
A na dole trzy zamierzamy je ukryć.
Więc zamiast dwóch pętli zrobić to zrobimy to na raz.
Tak na var i jest równa zeru.
Ja po prostu mniej niż kwadraty zewnątrz długości.
Plus plus my zamierzamy wykorzystać fakt, że kolory ma trzy elementy w nim.
Więc mamy zamiar zrobić coś takiego, jeżeli barwy I.
Więc jeśli nie ma obok koloru tak nastąpi to w pierwszej trójce.
Mamy zamiar napisać kwadraty I STYL tło równy kolor.
Więc dla trzech pierwszych w naszym przypadku, ponieważ ma tylko trzy kolory przedmiotów Jedziemy do pętli przez wszystkie kwadraty i sprawdzić, czy nie jest to kolor w tym indeksie.
A jeśli nie zamierzamy zmienić kolor tych pierwszych trzech.
Więc zróbmy upewnić się, że działa.
Klikam na łatwe i zobaczysz tylko trzy najlepsze zmieniają.
Więc jesteśmy blisko.
Wszyscy chcemy zrobić to ukryć spadkowej.
Więc zrobimy to z innego.
Kwadraty I styl, który wyświetlacz jest równa żadnej.
A jeśli odświeżyć i sprawiają, że cały ekran, jeśli kliknę łatwym trybie można zobaczyć, że tracimy dolną trzy i kolory trójce się zmieniają.
I spróbujmy dowiedzieć się, który z nich jest.
Więc sześćdziesiąt trzy czerwone 125 zielony i trochę niebieskiego.
No to jedziemy.
Można spróbować odświeżyć kilka.
Mamy jeden mały problem jak odświeżyć niektóre z nich i kliknij na łatwym trybie.
Jesteśmy generując tylko trzy kolory tutaj.
Ale jeśli kliknę na przycisk Nowe kolory, więc pokażę wam co kolory wygląda teraz.
To trzy elementy.
Jeśli kliknę nowych kolorach, choć i wtedy patrzę na kolory.
To rzeczywiście sześć pozycji a to dlatego, że nie jesteśmy śledzenia, który tryb, że jesteśmy na.
Tak, że kod jest tu na przycisk resetu.
Jesteśmy po prostu mówiąc kolorów jest równa do generowania losowych kolorów.
Musimy więc ustalić, że w końcu.
Ale zanim to zrobimy przejdźmy nasze ciężko przycisku tak, że ustawia nas z powrotem do sześciu kwadratów, a każdy z nich ma swój własny kolor, aby to zrobić.
Zamierzam po prostu trochę z tym kodem i powielić go tutaj, które jest zawsze zły znak.
I dlatego mamy zamiar byłaby to się tylko trochę.
Więc pierwszą rzeczą, którą chcesz zrobić.
Mam zamiar po prostu skopiować to wszystko w naszych ciężko przycisków kolorów detektora zdarzeń.
To będzie sześć kolorów wybiera kolor będzie ta sama treść tekstu kolorowy wyświetlacz jest taka sama.
A potem jedziemy do pętli przez wszystkie z nich w tej pętli.
Musimy zrobić dwie różne rzeczy.
Pierwszym z nich jest, aby przypisać nowy kolor do każdego kwadratu.
Ale także potencjalnie trzeba upewnić się, że są trzy zostały odkryte na dnie.
Więc mamy zamiar pozbyć się if teraz, a my po prostu się ustawić wszystkie kwadraty mają kolor tła, kolory.
I wszystkie kwadraty będą miały wyświetlanie bloku.
Więc to jest trochę marnotrawstwo, bo potrzebujemy tylko trzech ostatnich technicznie i jesteśmy zresetowanie wszystkich z nich będzie blok wyświetlacza.
Ale to naprawdę drobne rzeczy możemy skupić się na później.
Więc po prostu sprawdzić, czy to działa odświeżanie mówi nam, że mamy błąd składni w wierszu 36 Zobaczmy, co tracisz.
I właśnie tu dodatkowy nawias klamrowy.
Więc jeśli teraz zapisać i odświeżyć mamy sześć kolorów jak zawsze mamy.
Jeśli klikam na łatwe mamy trzy.
Jeśli kliknę trudno mi teraz wrócić do sześciu.
Mam nowy kolor tu i niech po prostu upewnić się, że wciąż działa.
Tak łatwo trudne łatwe trudne, kiedy idę do trybu dysku.
Załóżmy, kliknij na nowych kolorach ponownie.
Wróć do łatwo wrócić do ciężkiej łatwe i trudne.
W porządku.
I zagrajmy to i zobacz czy działa.
Więc wybrać kolor jest 196 170 57.
Tak dużo czytać dużo zieleni i trochę niebieskiego.
Więc to jest dużo czerwony i zielony to kolor żółty.
Więc to nie będzie to, że jeden lub że jeden.
Że jedna będzie to jeden bardzo szybko, a wygląda na to, że wszystko działa dobrze.
Jeśli klikam na łatwe znów wracamy do trzech kolorach.
Najbardziej palącym problemem przed nami jest jednak, gdy jestem w trybie łatwego i klikam zagrać jeszcze raz to będzie generować sześć kolorów nie trzy, a to będzie wybrać losowy kolor z sześciu, które nie mogą być wyświetlającego do nas co się dzieje być problematyczne to naprawić.
Wszystko, co musimy zrobić, to mieć zmienną, która śledzi jakim trybie, że jesteśmy na.
Łatwe lub trudne lub liczbę kwadratów trzech lub sześciu.
Więc zrobimy to tutaj.
Będziemy mieć zmienną liczbę pól, a rozpocznie się o godzinie 6, a my po prostu oświadczyć, że tu i powiedzieć kolorów równa generuje losowe liczby kolorów i zróbmy to liczba prostokąty lub kwadraty.
To trochę tak łatwiej i zapisać.
A potem trzeba wymienić, że w kilku miejscach.
Więc kiedy klikamy na łatwym trybie chcesz zdrętwiałe kwadraty być trzy, a potem generuje losowe kolory nie kwadratów.
A potem dalej w dół, kiedy nacisnąć przycisk dysku chcemy niektóre kwadraty być tak zdrętwiałe 6 kwadratów równa się sześć a następnie wygenerować losowe kolory kostek i potem jest kilka innych miejsc tu, kiedy kliknij na ten przycisk reset.
Chcemy, aby wygenerować odpowiednią liczbę kolorów, które byłyby nahm kwadraty również tam.
Tak, że należy dbać o to dla nas, jeśli wrócimy i odświeżyć.
Idziemy do trybu łatwego i niech wygra ten jeden.
Więc przede wszystkim czerwone małe niebieskie.
Nie ten.
Nie to.
No to jedziemy.
A jeśli klikam na grę ponownie zróbmy pewny kiedy wpisuję kolory widzimy tylko trzy kolory.
A gdybym spojrzał na zrywane nadziei kolorów wybrał kolor można zobaczyć go w środku tablicy kolorów.
Tak więc nie musimy się martwić, że już.