Więc teraz mamy dwie różne rzeczy możemy skupić.
Pierwszym z nich jest zmiana wyświetlania się, żeby być na wygranej gracza zielony i że jest dość prosta.
A druga jest coraz przycisk reset do pracy, dzięki czemu możemy zresetować i zagrać jeszcze raz.
Więc zacznijmy od zmiany koloru i zamierzam to zrobić poprzez zdefiniowanie klasy w pliku CSSA.
Więc muszę dokonać plik C S, a ja po prostu będzie wywoływać ten scorekeeper.
C Ss potem idę do niej link, a nie mój plik scorekeeper HDMI Dotsie SS i oszczędzać.
Potem mam zamiar iść do mojego pliku CSSA i zdefiniować klasę, a ja po prostu nazwać to zima i mam zamiar powiedzieć, kolor jest zielony i to wszystko, czego potrzebujemy i oszczędzać.
I tylko w celu sprawdzenia, że ​​wygląda tak, jak chcemy.
Załóżmy, wystarczy dodać go do rozpiętości tak powie klasa równa, a my po prostu dać mu klasę zwycięzcy dla gracza 1 wyświetlacza od uzyskania go.
A gdybym odświeżyć widać możemy uzyskać zieloną 0.
To jest dokładnie to, co chcemy w postaci przyrostu.
Oczywiście chcemy, aby rozpocząć jako czarne i tylko dodać klasę.
Gdy gra się kończy, więc musimy wrócić do naszych javascript i pozbyć się tego.
Więc wraca do czarnego.
Przejdź do naszego języka JavaScript.
Więc po prostu start dla gracza 1 i musimy sprawdzić, czy wynik gracza 1 jest równa wygranej wynik.
Oznacza to, że jeden z graczy wygrał.
Więc tutaj mamy zamiar dodać do listy Gracz 1 klasy wyświetlacz.
Jedziemy, aby dodać zwycięzcą klasy i to wszystko, co mamy do zrobienia.
Jeśli więc odświeżyć zobaczysz jak przyrost graczy strzeli i dostać 1 do 5.
To klasa została dodana.
Więc jeśli przyjrzymy się tutaj będę go skontrolować.
Nie ma klasy i Ciągle zwiększający aż dojedziemy do 5.
Należy zwrócić uwagę prawo tutaj i mamy zwycięzcę klasy wynosi dodaje Kiedy dotrzemy do 5.
Więc zrobimy to samo dla Gracz 2.
Więc jeśli gracz dwóch punktów zwycięski wynik zmieni odtwarzacz do wyświetlenia.
Sprawdźmy przyrost to 5.
Wspaniały.
Wszystko wydaje się działać dobrze.
Więc następnym kawałek jest coraz przycisk reset do pracy już teraz.
Jeśli dostaniemy grę ponad to zawsze ustawić, aby było prawdziwe.
Nie ma mowy, aby zmienić grę na drugą.
Więc klikając przycisk reset musi wywołać kilka różnych linii kodu.
Pierwszy z nich, które chcesz zmienić.
Gracz 1 wynik i odtwarzacz zdobyć z powrotem do zera.
Chcemy zmienić wartości tutaj, które są wyświetlane na wyświetlaczu odtwarzacza 1 i odtwarzacz do wyświetlania wynosi zero i chcemy, aby usunąć ten zielony klasy z zależności od tego elementu jest to dalej.
A potem ostatnia rzecz to musimy się upewnić, że gra się wraca do bycia fałszywym tak, że nasz kod i tutaj można uruchomić ponownie.
Więc pierwszą rzeczą, musimy wybrać przycisk daliśmy id równa zresetowane.
Więc musimy iść tu i po prostu go wybrać.
Więc zrobię to z innymi przyciskami do tej pory.
Przycisk Reset równa dokument kropkę i zrobimy kolejny element Otrzymuj id i tym razem ID jest resetowany i zapisać, a następnie po prostu sprawdzić, czy to działa.
Czy stały dziennik.
Reset reset i odświeżyć.
Jeśli spojrzymy na naszej konsoli otrzymujemy nasz właściwy przycisk.
To został odwołany został zalogowany.
OK, tak więc powinniśmy zacząć dodając nasz detektor zdarzeń za kliknięcie tego przycisku reset więc przycisk, który detektor zdarzeń kliknij przycisk Reset na naszą funkcję zwrotną i wszystko, co chcemy zrobić, aby zacząć od nowa po prostu zrezygnować, że resetowanie dziennika kliknięciu by upewnić się, że działa i tam idziemy nasz przycisk reset został wciśnięty.
Więc logika choć jak omówiliśmy musimy ustawić.
Gracz 1 wynik i odtwarzacz zdobyć z powrotem do zera.
Więc to na tyle proste.
Gracz 1 zero punktów gracza, który strzeli wynosi zero.
Ale jeśli uruchomię to teraz, gdzie tylko mogę zmienić wynik gracza 1 na gracza, który strzeli do zera i przyrostu więc ten gracz wygrywa, a następnie kliknij przycisk Reset.
Nic nie wydaje się zdarzyć, a to dlatego, że tylko zmienić wynik w javascript.
Nigdy nie zaktualizował wyników na stronie, tak są to P1 i P2 wyświetlanie zmiennych, które musimy zaktualizować.
Więc chcemy zrobić zawartości tekstowej jednego wyświetlacza i można po prostu ustawić go na zero.
Możemy także ustawić to być wynik 1.
Powinny one być zarówno zero.
Tak samo Pete, aby wyświetlić zawartość tekstowa jest zerem.
Jeśli odświeżyć i teraz mamy do 5.
Obaj wrócić do zera.
Warto więc bliżej gry.
I kliknij zresetować zarówno wrócić do zera.
Następna w kolejce niech usunięcia klauzuli zwycięzcę.
Będzie to zrobić w prosty sposób poprzez usunięcie klasę zwycięzca z obu.
Nie będziemy więc nawet sprawdzić, który z nich ma.
Będziemy po prostu usunąć go z obu stron.
To tylko kwestia jednego ekranu.
Wykazy Klasa usunięcia zwycięzcę.
Tak, że będzie pozbyć klauzuli i zrobi go wyświetlić.
Tak więc w zależności od tego jeden to ma to nie ma znaczenia, ponieważ mamy do usuwania go z obu stron.
Więc teraz, jeśli zagramy mamy zwycięzcę.
I kliknij przycisk Reset.
Obaj sięgają tylko pustym zwykłego tekstu.
Ale jak widać mam do pięciu.
I kliknij przycisk reset nadal nie działa.
A to dlatego, że gra jest skończona jest nadal prawdziwe.
I tak nikt z naszego kodu zamiast tych wydarzeń będzie działać.
Więc ostatnią rzeczą, którą musisz zrobić jest ustawiony.
Game over tyłem do fałszywe i że należy umożliwić nam kontynuowanie gry.
Więc będę odświeżyć archiwizowane.
Chodźmy gra skończona.
No to jedziemy.
Nie mogę już grać.
Klikam resetu a teraz gra nad nim z powrotem na fałsz i mogę zagrać jeszcze raz, a potem dalej.
Więc to funkcjonalność rdzeń tutaj.
Mamy prawie wszystko odbywa się bardzo Ostatnią rzeczą jest uzyskanie grając numer lub zwycięski wynik będzie zmienna.
Więc to nie zawsze tylko pięć.
Mamy więc to wejście i chcemy to wykorzystać tak, że kiedy zmieniam to za siedem Mówi grać do 7 i nasza maksymalna lub naszej wygranej wynik jest siedem, a nie pięć.
Więc mamy kilka kroków, aby się tam dostać.
Pierwszą rzeczą, jaką musimy zrobić, to wybrać to wejście jak widać mamy typ wejścia równą liczbę.
To jedyne wejście na stronie.
Więc nie muszą dać mu identyfikator lub cokolwiek.
Więc mam zamiar iść tu i po prostu wybierz go z moją innych selektorów var.
Niech po prostu nazwać to żaden sygnał równy dokument i istnieje wiele sposobów dotarcia może zrobić udokumentować, że wejście selektora zapytania.
Możemy również określić tylko gdzie.
Typ jest równa liczbie, ponieważ mogą istnieć inne wejścia.
W naszym przypadku będę keep it simple.
Jest tylko jedno wejście.
Więc to będzie działać dobrze.
OK.
Mamy więc, że wybrane wejście.
Więc teraz dodajmy zdarzenie.
Więc to, co chcemy się zdarzyć, że za każdym razem zmienia wartość lub że zmiany numerycznych chcemy, aby uaktualnić i chcemy zmiennej wynik do wygrania również zaktualizować.
Więc co trzeba zrobić, to dodać wydarzenie.
Więc po prostu drętwieją i umieścić Dot miał zdarzeń Lessner kliknij po prostu zrobić to w ten sposób tutaj.
Funkcja i wszystko zrobić alert.
Kliknięciu wejście i co zobaczysz, jest to, że w rzeczywistości kliknięcie słuchacz nie jest najlepszym narzędziem do tego zadania.
Bo tak możemy zmienić wartość za pomocą kliknięcia jak ja po prostu nie istnieje.
Ale może również trafić usunąć i wpisać liczbę ja i żadne zdarzenie nie został zwolniony, bo nie mam do kliknięcia.
Więc jeśli mogę użyć małe przyciski tutaj szybkie Zdarzenie.
W przeciwnym razie po prostu użyć mojej klawiatury nie mamy szybki wydarzenie.
Więc istnieje inny rodzaj zdarzenia, które jest o wiele lepiej w tym przypadku, który nazywa zmiana.
Więc wydarzenie zmiana będzie działać dowolnym momencie zmiany wartości i to nie ma znaczenia, jak ta wartość zmieniła.
Gdyby tak było, bo kliknięciu lub naciśnij klawisz Delete.
Więc faktycznie zmienić wpis tutaj, aby powiedzieć zmieniło wejście, a następnie odśwież.
A gdybym kliknij tutaj, aby go zmienić to mówi mi, że zmienił wejście.
Ale jeśli mogę usunąć i wpisać numer, który nie wiąże się klikając też mówi mi, że mogę zmienić wejście, dzięki czemu świetnie.
Jest to wydarzenie chcemy użyć zdarzenia zmienić w dowolnym momencie zmiany wartości chcemy aktualizować ten numer tutaj i chcemy również aktualizować naszą zwycięską wynik, tak aby nasza gra w dalszym ciągu iść, dopóki nie uderzył nowej partytury wygraną.
Mam nadzieję, że to nie jest nasz rzeczywisty wynik wygranej.
Na pewno długo gra nożyczki papier rock.
Więc pierwszą rzeczą aktualizuje tę wartość tutaj.
Więc tak jak wcześniej musimy ją wybrać, który to paragraf.
Więc musimy wybrać naszą pkt, a ja po prostu zrobić akapit VAR równa udokumentować, że znacznik wyboru zapytania.
A potem w tej szybkiej razie będziemy po prostu zmienić tę zawartość tekstową, a my po prostu zacząć po prostu zmienia to znaczy kliknięciu lub powiedzmy wartość zmienić.
Tak po prostu i odświeżyć.
Teraz, jeśli mogę zmienić wartość, która zmienia paragraf do powiedzenia wartość zmieniło, ale to jest nasza sam problem wpadliśmy wcześniej z H-1 nie chcemy, aby zmienić cały akapit.
Chcemy tylko, aby zmienić tę małą część.
Więc to, co chcemy użyć, jest rzeczywiście inny okres.
Więc wracamy i dodamy przedział wokół numeru.
I to jest to idealne zastosowanie dla rozpiętości którym ponownie możemy wykorzystać go do kierowania tylko niewielką część elementu nie cała sprawa.
A ja naprawdę nie zamierza dać mu pewien pomysł ten czas, żeby pokazać wam inny sposób, wybierając go.
Więc po prostu pamiętać, że jest to okres zamiast ust.
I jest to jedyny tak na naszej stronie.
Więc wracamy.
Więc zamiast wybierając akapit stwórzmy nową zmienną, a my nazywamy to wygraną wyświetlacz wynik i to będzie selektor wyszukiwania dokumentów.
Ale zamiast tylko rozciągać, ponieważ istnieją inne zakresy na stronie chcemy wybrać przęseł wewnątrz ust.
Więc to wszystko, co mamy pisać.
Przestrzeń P.
Przęsło.
I będziemy oszczędzać.
A teraz chodźmy naprzód i aktualizować zwycięski wynik wyświetlany na tutaj zamiast ust.
Więc wygranej wyświetlacz wynik takiego.
I to nadal nie będzie doskonały.
To będzie tylko zaktualizować wartość zmieniła się za każdym razem, ale przynajmniej nie jest aktualizowanie cały akapit.
Więc następnym krokiem jest uzyskanie go zaktualizować, aby wyświetlić numer, który znajduje się wewnątrz wejście tak, że wartości są zsynchronizowane ze sobą.
Więc nie mamy rzeczywiście widział, jak uzyskać dane z wejścia.
W jaki sposób możemy uzyskać bieżącą wartość.
Mam zamiar pokazać wam tutaj, wybierając wejście.
Więc udokumentować, że selektor zapytania i będziemy to robić na wejściu konsoli i mam zamiar zapisać go do zmiennej tak nazywają to wejście var Dokument Taqueria wybrać wejście, a potem zrobimy wejście daat wartości.
Więc ta wartość będzie ciągiem, co jest zawarte w tym wejściu Niezależnie od wartości.
Więc jeśli mogę to zmienić do 7 i uruchomić kod ponownie uzyskać 7.
Jeśli zrobię to ogromną liczbę i tym razem zrobić to jeszcze raz, co odzwierciedla wartość znajduje się wewnątrz tego wejścia.
Więc mamy zamiar skorzystać z tego, że poprzez zmianę zamiast na wartość ciągu zmieniło.
Mamy zamiar zmienić go za nahm wartość wejściowa kropki tak, że będzie miała wartość stąd i zmienić zwycięski wynik wyświetla zawartość tekstową.
Więc odświeżyć i zaktualizować to i można albo teraz zsynchronizowane ze sobą.
Więc jak mogę zaktualizować to za 2:59 mojej gry lub wygranej wyświetlacz wynik również aktualizuje do 1 do 3.
Tak oczywiście nie gramy do 123.
Ciągle grając do pięciu.
A to dlatego, że nasza logika nie odzwierciedla tę nową wartość wejściową wszystko to odbijającą jest nasz pierwotny wynik wygranej 5.
Dlatego też chcemy zmienić tu wygrywają wynik równy znieczulenia wartość wejściową i oszczędzać.
A teraz spróbujmy zmienia to tak gramy do trzech i klikamy a zauważysz, że trochę dziwne zachowanie.
Więc nawet nie zatrzymują się na pięciu.
To po prostu utrzymuje będzie zawsze.
Więc to jest zabawa błąd, który ma do czynienia z różnego rodzaju łańcuchów i liczb danych i porównanie ich podwójne równych kontra potrójnych równymi.
Tak więc, aby dostać się do dołu to zróbmy pewne minusy. wycięcie lasu.
Więc wiemy, że sedno tego wszystkiego jest ta linia tu czy ta linia tu, gdzie jesteśmy sprawdzenie czy gracz ma jeden, jeśli wynik gracza jest równa zwycięski wynik.
To wtedy możemy ustawić grę na prawdziwe.
I to nie dzieje się teraz, ponieważ gra skończona.
Jeśli mamy zmienić wynik.
Koniec gry nie ulega zmianie.
To zawsze fałszywe.
Więc coś się dzieje złego z tej linii.
Więc zróbmy odwołany z dziennika i mamy zamiar zrobić dwie rzeczy.
Niech po prostu wydrukować wynik gracza 1 i będziemy drukować zwycięskim wynikiem i możemy rozdzielając je przecinkami, a oni po prostu wydrukować je na tej samej linii.
Wystarczy krótka notatka z wykorzystaniem dzienników Comstock właśnie jedziemy do debugowania, ale teraz będziemy mówić o bardziej zaawansowanych sposobów debugowania później.
Więc będę odświeżyć i jeśli zaczniemy przyjrzymy zwiększone wynik gracza 1 i widać, że mamy trzy i mamy porównanie go z numerem pięć.
Więc wynik gracza 1 jest trzy wygraną wynik wynosi pięć.
Ale tak szybko, jak to zmienić za powiedzmy 7 a teraz klikam.
Gracz 1 mamy teraz porównując Gracz 1 Score czyli numer cztery do wygrania wynik, który jest ciągiem siedem.
Więc odświeżyć ponownie, jeśli po prostu zacząć od pięciu.
To działa dobrze.
Ale jeśli mogę to zmienić, a teraz możemy porównać go do liczby i ciąg i że nie będzie pracować dla nas, bo robimy potrójne równych tutaj.
Tak więc możemy zrobić podwójne równych, ale wiesz, że nie jestem fanem tego.
Więc co mamy zamiar zrobić to zamiast iść na dół i po prostu wziąć to i umieścić tę wartość i przekształcić go w ciąg.
Tak samo jak ilość tego kapitału oraz numer, a następnie przejść i umieścić wartość, która zostanie następnie przekształcić go w ciąg i ustaw, które będzie wygraną wynik.
Więc były świeże.
Teraz to działa dobrze.
Docieramy do pięciu, ale jeśli możemy również zmienić się, aby nasza gra jest skończona na 2.
Jest jeden mały problem musimy się skupić na którym jest, jeśli gramy w grę do pięciu, które właśnie zaczęło się robić.
A jeśli zdecyduję połowie, że chcę zmienić zwycięski wynik na maksymalną liczbę punktów.
Nasz kod teraz nie zajmuje się, że bardzo dobrze, bo jeśli teraz zmienić to gramy tylko trzy.
Mamy dwa różne sposoby obchodzenia się z materiałem.
Pierwszym z nich jest zresetowanie wynik i wszystko z powrotem do zera.
A druga w dalszym ciągu odgrywają do pięciu.
Ale co tak naprawdę się dzieje jest to, że gramy do trzech, ale mamy już za sobą trzy.
Więc dlatego, że już minęła go nasz kod nie działa już tak naprawdę dlatego, że leżą to tylko sprawdzanie jest zawodnikiem, który strzelił zwycięskiego równy wynik.
To nie jest sprawdzenie, czy będzie ona większa niż zwycięski wynik.
Więc czy możemy to zmienić.
Więc to mówi, że jeśli będzie ona większa niż zwycięski wynik wtedy gra jest skończona i to jest w porządku.
Ale myślę, że lepszym rozwiązaniem jest wyzerowany, gdy zmieniamy maksymalny wynik, ponieważ nigdy tak naprawdę nie zmieniło maksymalny wynik w połowie meczu jakikolwiek chcielibyśmy, aby rozpocząć grę nad i drugi powód, dla którego chcę nam to zrobić jest to dobry przypadek użycia przez krótki Refactor.
Kiedy więc tutaj zmienić wynik to zwycięski wynik.
Chcemy, aby zresetować grę, która jest taka sama logika, że ​​kończy nam się tutaj.
Więc zrobimy to bardzo prosto prostu skopiować ten kod na zewnątrz i zrobić nową funkcję o nazwie zresetowane.
Więc funkcja kasowania wystarczy umieścić cały ten kod tam, a następnie po zmianach wprowadzania numeru jesteśmy po prostu będzie działać zresetować.
Więc widzisz, że zresetować tu grać do pięciu.
To działa prawidłowo.
Docieramy do pięciu.
I kliknij przycisk reset i nie nazwali funkcję resetowania wewnątrz tego detektora zdarzeń więc musimy dodać nasz wywołanie funkcji resetu.
A teraz, jeśli odświeżyć mamy do 5.
I kliknij przycisk Reset.
To wszystko jest dobre.
A teraz, gdy jestem w środku gry i zmienić wynik też przywraca nas i teraz gramy na 1.
I to działa.
Albo jeśli zmienię.
Więc jesteśmy teraz w grę do 7.
Resetuje nas z powrotem do zera.
Więc jeśli zdecyduję wiesz, że to jest rzeczywiście gra będzie 2 zamiast zmienia specyfikację do zera.
I nie musimy się martwić, jak go obsłużyć.
Jeśli mamy zmienić w połowie.
Więc co robimy jest po prostu przywróceniu ustawień fabrycznych wykonane oddzielną funkcję wysychać kod zamiast powielać to tutaj i tutaj.
Więc to wszystko na teraz.
To wszystko, co musimy zrobić.
Niektórzy z Was mogą się zastanawiać, czy ten kod jest naprawdę najlepszym sposobem, że moglibyśmy to zrobić.
Odpowiedź brzmi nie.
A jeśli wziąć bliska zobaczysz, że jest to bardzo podobne.
Jest to w zasadzie to samo, z wyjątkiem jednego robimy tu i P2 tutaj.
A wszystkie inne słowo takie same.
Tak więc istnieją bardziej zaawansowane sposoby refaktoryzacji tym dokonywania tego trochę lepiej.
Ale ja nie zamierzam tego robić tutaj, ponieważ wszystko, co chcę skupić się na to pod względem koncepcyjnym, jak możemy podjąć obsługa JavaScript detektory zdarzeń selektorów dominującą relację i interaktywne HD IMO i to właśnie chcę się skupić.
Ale po prostu wiem, że będziemy widzieć sposoby, aby kod jak to wygląda trochę lepiej być nieco krótszy.
Jest jeszcze jedna rzecz, którą możemy zrobić tu i umieścić, że w detektora zdarzeń.
Moglibyśmy po prostu wymienić wkład zdrętwiałe tutaj słowem jest to niewielka zmiana, ale możemy to zrobić i po prostu skrócić aż kod trochę.
Więc jeśli mogę to zmienić jesteśmy teraz w grę do trzech.
Wszystko nadal działa dokładnie tak samo.
Używałem tego słowa kluczowego, które odnosi się do tego, co zostało zdarzenie słuchania na którym było wprowadzenie kodu.
Dobrze więc, że jest to dla tej lekcji.
Jak już wspomniano w kolejnym projekcie zamierzamy zbudować coś bardziej znaczące i obiecuję będzie wyglądać dużo lepiej niż to robił tutaj.