W porządku, witaj z powrotem.
Zacznijmy od tego.
RG będzie zgadywania aplikacji gry.
Najpierw zrobię plik h tim, a C S S i utworzę prostą siatkę.
Więc nie zamierzamy stylizować go za pomocą kolorów tła i czcionek,
a teraz to już tylko zaczynamy proste od sześciu kwadratów i nadamy im trochę
kolorów tła, może trochę między nimi, ale nie będziemy dodawać zaokrąglone rogi, ale nie
będziemy dodawać żadnych animacji.
Zanikanie i zanikanie wszystkiego, co zrobimy, to zdobycie sześciu kwadratów, a następnie dodamy podstawową logikę szybkich
zdarzeń i sprawdzenie, czy otrzymamy właściwy kolor i tak dalej.
Więc najpierw musimy zrobić mu kopię pliku, który mam tutaj.
Ja nazywam tę kolorową grę za każdym razem, więc dodamy tutaj nasz zespół.
Płyta kotła.
Daj mu tytuł.
Zagram kolorową grę.
Dodajmy sześć kwadratów.
Więc zamierzam zrobić z nich divy.
Każdy z nich jest div z klasą kwadratu, a my użyjemy tej kwadratowej klasy do ich późniejszego stylu.
W porządku, więc zrobimy div class równy Square i nie będziemy musieli wkładać niczego do środka, a
będziemy mieli ich sześć.
A potem, po prostu, żeby zrobić to czystsze, zamierzam umieścić je wszystkie zamiast innego elementu div, który będziemy
mogli później stylizować.
Mam zamiar nazwać to pojemnikiem.
Więc nie zrobi nic z góry.
Ostatecznie użyjemy go, aby strona była responsywna i aby sieć się zmniejszyła.
Na razie po prostu je pogrupujemy, więc nie będziemy mieli tylko 6 pól.
OK, więc mamy tutaj sześć kwadratów.
Jeśli otworzymy to w grze przeglądarkowej, która mu się spodoba.
Nie widzimy niczego oczywiście z kilku powodów.
Jeden, mimo że mamy sześć div, których nie ma. Nie ma marginesu, nie ma koloru, więc
nic nie widzimy.
Więc zaczniemy od stylizacji ich w zasadzie.
Musisz więc dodać arkusz stylów, więc najpierw utworzę link do arkusza stylów, którego nie utworzyłem i sprawię, że
będzie trochę większy.
Nazwę to kolorową grą, zobacz SS i zapisz, a potem utwórz tę grę kolorystyczną plików C Ss, a pierwszą rzeczą,
którą zrobię, jest dodanie koloru tła do całego naszego ciała.
Jak dotąd kolor tła i kolor, który zamierzam użyć, to kod szesnastkowy.
To jest 2 3 2 3 2 3 i zapisz, upewnij się, że jest podłączony.
Tak.
Otrzymujemy poprawny kolor tła.
Dalej idź do przodu i zacznij układać nasze kwadraty.
Zamierzamy użyć tej samej strategii, której używamy do stworzenia witryny VSS dla fotografii, w
której mieliśmy responsywną siatkę kwadratowych obrazów.
Wszystkie były czarno-białe.
Czy możesz użyć tego samego pomysłu tutaj.
Więc sposób, w jaki to zrobimy, polega na tym, że każdy z nich znajduje się wewnątrz kontenera i każdy z
nich zajmuje 30 procent tego kontenera.
Więc pojemnik idzie tylko wokół tych kwadratów.
Tu nie chodzi o całe ciało wokół kwadratów.
Zajmują 30 procent, a następnie mamy margines między nimi ze wszystkich stron.
1. 6 6 procent.
Wszystko to składa się na 100 procent kontenera.
Więc zrobimy pierwszy kwadrat z 30 procentami.
A jeśli możemy to po prostu zostawić i dać mu tło, zróbmy je fioletowe i uratujmy i
nie widzimy jeszcze nic.
A powód, dla którego to się dzieje, pokażę ci, jeśli sprawdzimy, czy nasze życie jest na stronie.
Po prostu wciąż są puste.
Co musimy zrobić.
Ostatnim razem mieliśmy obrazy i obrazy, które mają w sobie pewną zawartość, ale te elementy są puste.
Więc dodamy trochę przestrzeni i użyjemy podkładki dolnej.
Moglibyśmy również użyć wierzchu do wyściełania, ale tak, aby wyściełało dno, a także 30 procent.
Więc jeśli odświeżam.
OK.
Teraz mamy sześć kwadratów, chociaż wszystkie są w linii, której nie chcemy.
Chcemy, aby były na tej samej linii.
Musimy więc przesunąć je na lewo, co też zrobiliśmy z siatką obrazów.
Więc pływaj w lewo i ocal odświeżamy.
A teraz kończymy z tą ogromną siatką tutaj.
Och, idź dalej i na marginesie, żebyś mógł zobaczyć, co się dzieje.
Więc będziemy mieli margines 1. 6 6 procent i oszczędzaj.
Teraz możesz zobaczyć, że mamy tutaj naszą siatkę, a ta siatka zajmuje cały ekran.
Więc trochę to zmienię.
Nie chcemy, żeby była tak ogromna.
A my możemy użyć tego kontenera, który dostarczyliśmy ten pojemnik ID div.
Jeśli więc zaprojektujemy div z ideą kontenera, który wybieralibyśmy właśnie tak i możemy zacząć
od stwierdzenia, że ​​powinna to być maksymalna szerokość.
I myślę, że wybrałem 600 pikseli.
Możemy grać z tym numerem.
Teraz jeśli odświeżam Teraz możesz zobaczyć, że jest znacznie mniejszy.
To część tego.
A następnie to, co jest również Centrum tego.
Więc mamy 2 marginesy.
0 auto.
Zapamiętaj tę sztuczkę zerowym marginesem na górze i na dole kontenera, a auto z lewej i prawej
strony sprawi, że będzie taki sam rozmiar po każdej stronie.
A teraz mamy tę miłe centrum siatki.
W porządku.
I zróbmy jeszcze jedną rzecz, która jest w naszym H-1, więc zamierzam mieć tutaj H1 i
po prostu powie wielki R. SOL. bądź kolorową grą i po prostu zaczniemy tak.
A jeśli odświeżymy, to naprawdę trudno zobaczyć.
Zróbmy więc biały kolor H-1 biały i oszczędzajmy.
I zaczniemy od tego.
A więc teraz użyjmy javascript.
Ustawimy javascript, aby każdy z nich miał inny kolor.
Więc chodźmy zrobić nowy plik, a my nazwiemy to kolorową grą.
JOT. S. i zapisz.
I jak zawsze chcę to zrobić dodajmy nasz alert, który mówi, że jest podłączony.
Dodajmy teraz skrypt w źródłowej równej kolorowej grze.
Tak, zapisz stronę i otrzymamy powiązany alert.
OK, więc zmienię rozmiar okna.
Teraz dodajmy kod, aby nadać im różne kolory.
Tak więc w końcu wynik w końcowej grze.
Za każdym razem, gdy strona się ładuje, wybiera sześć losowych kolorów, a następnie przypisuje każdy kolor do jednego z elementów div.
Zaczniemy od losowego aspektu, a my po prostu przypiszemy sześć kolorów, które zawsze
są takie same.
A potem przejdziemy do ich losowania.
Przejdźmy więc do mojej kolorystycznej gry Tak i zacznę od zrobienia listy kolorów i nazwałbym
ją kolorami.
To jest tablica.
I pamiętaj, że w naszym produkcie końcowym będzie to losowa lista kolorów.
Na razie dodam tylko własne.
Więc G-B i zacznę od wszystkiego czerwonego.
Tak więc 2 5 5 0 0 i tylko po to, aby było to dla ciebie czytelne, Zróbmy to wszystko na osobnych liniach.
Więc będziemy mieli sześć takich.
A pierwszy będzie czerwony, a potem drugi, czerwony i zielony, który
będzie żółty.
A następnie następny będzie 0 czerwony i cały zielony.
A potem następny następny będzie zero czerwony lub zielony i cały niebieski, a następnie zrobi.
Czyli 0 zielony 255 niebieski, a my zrobimy 255 czerwony 0 zielony 255 niebieski, co da nam tablicę
sześciu kolorów jako ciągi.
A następnie chcemy zaznaczyć, że wszystkie sześć kwadratów przechodzi przez nie, a następnie przypisać jeden z tych
kolorów do tła każdego z nich.
Tak więc najpierw musimy wybrać, a my nazwiemy ją kwadratami, co jest dokumentem i mamy tu wiele
opcji do wyboru.
Zamierzam użyć selektora zapytań.
Tak więc upewniam się, że otrzymam wszystkie sześć, a nie tylko pierwsze.
A my wybierzemy na podstawie kwadratu klasy.
Jeśli właśnie zrobiliśmy div pamiętaj, że mamy pojemnik div i nie chcemy go wybierać.
Chcemy tylko, aby te sześć kwadratowych elementów div było kwadratowych, a następnie przejdziemy przez cztery zmienne równe zero.
Mam mniej niż kwadraty i plus plus zamiast tutaj, wtedy mówimy, że kwadraty i kropka oznaczają tło w stylu kropki i jest
to interesująca część, którą zamierzamy wziąć za oko i użyć jej do uzyskania dostępu
do kolorów.
Albo to Colt, jestem tutaj z małą poprawką, którą dodaję po fakcie.
Po prostu szybka notatka.
Jest o wiele bardziej preferowany niż kolor tła twojego stylu, więc kolor tła jest jednym słowem z dużą
literą C, a nie tłem w stylu kropki, którego używam w tym filmie.
Więc za każdym razem, gdy widzisz stylizowane tło, zmień je na kolor tła.
Powodem tego jest to, że będzie działać we wszystkich przeglądarkach w stylu, ale
tło nie działa w Firefoksie, więc technicznie działa w dobrym stylu.
To tło będzie działać w Chrome na przykład dobrze, a gra działa, ale mam wiele
pytań o to, co się dzieje w Firefoksie i jest to główny kolor tła w
stylu winowajcy.
Chciałbym także pomyśleć, że Del Anderson jest jednym z uczniów na forach dyskusyjnych
za wskazanie tego, że ostatnio wrócę do kodowania.
Tak więc, co robimy, mamy sześć kwadratów i nasze oko przejdzie od 0 1 2 3 4 5, które przejdzie
przez każdy kwadrat.
A kiedy dojdę do pierwszego kwadratu, zamierzam zabrać zero i nadać mu kolor tła
zero, który jest tutaj.
Tak by było dobrze.
A potem idziemy dalej i bierzemy jedną dla drugiego diva i nadajemy mu drugi kolor z indeksem
1 i robimy to aż do końca.
Zasadniczo idziemy po to, aby divy były na stronie w kolejności, w jakiej będą one kolorowe
za pomocą tych kolorów z tablicy.
A jeśli zaoszczędzimy na odświeżeniu, zobaczymy, że otrzymujemy sześć podstawowych kolorów.
Mamy więc czerwoną, zieloną, niebiesko-niebiesko-niebieską magenta.
Więc na razie wszystko w porządku.
Skupimy się na losowaniu kolorów później.
Ale jako podgląd, chociaż musimy zrobić, to wygenerować trzy liczby trzy różne liczby od
0 do 255, a następnie je połączyć.
To tylko trzy różne kanały losowe.
A potem robimy je w jeden wielki ciąg za pomocą r. g B i nawiasy wokół nich.
Ale na razie będziemy mieli te kolory.
Następną rzeczą, którą musimy zrobić, to za każdym razem, gdy strona się ładuje.
Pokażę ci tutaj nie tylko sześć wybranych kolorów.
Jeden z tych kolorów jest wybrany jako cel lub kolor, którego szukamy.
W tym przypadku jest to wybrany kolor.
Więc zrobimy to również i zamierzamy uruchomić Portusa, żeby to zakodować, a potem będziemy je
losowo wybierać.
Więc zaczniemy od stwierdzenia, że ​​złoty kolor to cyjan.
To jest czwarty indeks koloru trzech.
Tak więc zmienna tutaj zmienny wybrany kolor jest równy indeksowi tablicy kolorów 3.
A to wybierze Suyin lub ten kolor tutaj R. SOL. B.
0 2 5 5 2 5 5 i pamiętaj o tym, co chcemy zrobić, to zaktualizować naszą stronę tak, aby była
zgodna z opisem tutaj, tak jak tutaj.
Oczywiście nie jest stylizowany w ten sam sposób, ale chcemy, żeby mówił R. SOL. B.
A następnie w nawiasach 0 2 5 5 5 5, aby to zrobić, będziemy musieli się trochę zmienić lub
trochę do niego odejść, jeśli potraficie przypomnieć sobie grę sekretarza, w której mieliśmy H1 i zmieniamy to.
Gracz jeden gracz dwa początkowo wyniki.
Mieliśmy samolot H-1, a kiedy go zaktualizowaliśmy, automatycznie nadpisał wszystko, co tam
było.
Ale nie chcemy tego robić.
Chcemy, aby tekst był świetną grą kolorystyczną, a nasz kolor właśnie tu trafia, ale nie chcemy mieć
oddzielnego H-1 lub czegoś, ponieważ te będą się układać osobno.
Więc użyjemy przęsła tak, jak to zrobiliśmy w grze sędziowskich i po prostu dodamy R. SOL. bądź tam jako
symbol zastępczy.
Nic nie wygląda inaczej, ale jeśli sprawdzimy.
Widać, że mamy teraz rozpiętość, co oznacza, że ​​możesz łatwo wybrać i manipulować tekstem.
I zamierzamy dać temu pomysł, aby było jeszcze łatwiej.
Więc damy mu identyfikator.
I nazwijmy to kolorowym wyświetlaczem.
Następnie przejdziemy do naszego javascript i wybierzemy to.
Do tej pory wyświetlacz kolorów jest równy dokumentowi, a my otrzymamy element po id tylko dla elementu kid
sake od ID.
I to był kolorowy wyświetlacz.
I uratujemy i sprawimy, że będzie to trochę większe.
Zapisz plik, a następnie zaktualizuj kolorowy wyświetlacz tak, aby wskazywał ten kolor, który wybraliśmy.
Tak więc będzie to tekst w kolorze, który będzie wyglądał tak samo, jak kolor i odśwież.
A teraz kończymy z naszym kolorem tutaj.
Wspaniały.
Dodajmy teraz logikę zdarzeń kliknięcia.
Więc kiedy klikam na jeden z tych kwadratów, chcemy uruchomić kod, który pozwoli zorientować się, który
kolor jest kwadratem, który kliknęliśmy.
A kiedy już mamy ten kolor, porównamy go do koloru piksela.
Ten tutaj właśnie.
A jeśli są inne Zamierzamy zmienić kolor tła tego kwadratu, tak aby zmienił
kolor na taki sam, jak tło ciała.
A jeśli są takie same, oznacza to, że gracz ma taki sam.
I musimy zrobić kilka wyjątkowych rzeczy.
A jeśli są inne, oznacza to, że gracz wybrał niewłaściwy kolor i będzie musiał również zająć się
tym, aby rozpocząć.
Dodajmy tylko procedurę obsługi zdarzeń po zwykłym kliknięciu, która ostrzega, gdy klikniemy.
Więc dodamy procedurę obsługi zdarzeń do każdego z kwadratów, więc możemy po prostu użyć tej
samej pętli, którą mamy.
Więc dodam komentarz tutaj, dodaj początkowe kolory do kwadratów, a następnie następna część
będzie słuchać dwóch kwadratów.
Więc kolejny z tych kwadratów I kropka dodaje detektor zdarzeń.
Czas na Click i naszą funkcję zwrotną.
Wszystko, co zrobimy, to ostrzeżenie o kwadracie i upewnij się, że wszyscy z sześciu nas powiadomią.
Kliknij prawym przyciskiem myszy na kwadrat.
W porządku, wygląda na to, że wszystkie działają dobrze, tak jak powinny.
Teraz musimy pobrać kolor klikniętego kwadratu, a następnie porównać kolor, aby wybrać kolor.
Zmieniliśmy zdefiniowany przez nas zmienny kolor obrazu, dzięki czemu zaczniemy uzyskiwać ten kolor.
Pamiętaj, że możemy użyć tego, co odnosi się do przedmiotu, który został kliknięty na kwadracie.
Więc możemy powiedzieć, że ten styl tła.
A teraz zróbmy kolejny alert i zobaczmy, co otrzymamy.
Więc jeśli kliknę na czerwony, to ostrzega mnie.
RG B 2 5 5 0 0 i jeśli kliknę na przypisanie jednej R G B 0 2 5 5 2 5 5.
Więc to działa.
To, co teraz zrobimy, zapisze to zmiennej, którą właśnie nazwiemy klikniętym kolorem.
A potem zamierzamy napisać instrukcję JEŻELI, aby porównać kolory Quicka, więc jeśli jest to kolor
potrójny, to wybierz kolor ładny rym tam, jeśli to jest przypadek, że ostrzeżenie zostanie poprawione.
A jeśli nie będą pasować, inaczej będziemy alarmować źle.
Dajmy mu odświeżenie strzału.
Klikam na ten.
Źle.
I prawdziwy test.
Klikam na właściwą, która jest poprawna.
Tak więc nasza logika działa, mimo że nie mamy żadnych losowych kolorów w tym, co
mamy, to zestaw sześciu kolorów, które są zakodowane i przypisujemy kolor do każdego kwadratu,
a następnie wybieramy.
W tym przypadku cyan i to będzie oczywiście losowe, ale wybieramy jeden kolor, który jest naszą odpowiedzią.
Następnie dodajemy detektor zdarzeń do każdego kwadratu, gdy użytkownik kliknie na ten kwadrat lub dowolny kwadrat.
Porównujemy kolor danego kwadratu z kolorem obrazu, jeśli pasują do siebie.
Robimy jedną rzecz.
Jeśli nie pasują, robimy coś innego w kolejnym filmie, o którym będziemy mówić, o tym, co faktycznie
robimy, jeśli pasują.
I co robimy, jeśli nie pasują.