Witamy spowrotem.
Tak więc do tej pory wszystko robiliśmy wokół wydarzeń i detektorów zdarzeń w akademiku i dominujący relacji i zrzuca litery mamy właśnie robi jednorazowe szybkich ćwiczeń, które naprawdę nie wynosić zbyt wiele.
I to właśnie rodzaj pokazują poszczególne kawałki jak oni pracowali.
Teraz mamy zamiar zobaczyć, jak to wszystko do siebie pasuje i zrobić dość znaczną aplikację.
Więc jak widać nie jest to najpiękniejsza aplikacja, która nadchodzi.
Jesteśmy po prostu koncentrując się na jak koncepcyjnie elementy pasują do siebie jak tu bierzemy wydarzenia jak wybrać elementy, jak piszemy go w jaki sposób i jak te wszystkie pasują do siebie wieku.
Stylizacja jest po prostu ekstra.
W tym momencie, ale w następnym projekcie wykonujemy.
Mamy zamiar umieścić wiele nacisk na stylizacji i dzięki czemu wyglądają ładnie.
Obiecuję.
Więc co mamy zamiar zrobić to prosta aplikacja scorekeeping.
Więc chcę, aby myśleć z powrotem do wszystkich tych czasach, że grałeś nożyczki papier rock z przyjacielem lub ping-ponga lub Tic Tac Toe i to tak męczące, aby śledzić na wynik i tak trudno się dowiedzieć, kto wygrywa, kiedy ta aplikacja jest dla Ciebie sposób, że działa.
Dwóch graczy Gracz 1 wynik gracza bramkę.
Możesz załadować stronę i mówi nam, że gramy do pięciu.
A więc wszystko co robimy jest dodanie punktu, klikając na przycisk.
Tak, aby dodać punkt do odtwarzacza 1 klikamy na odtwarzaczu 1, jeżeli chcemy, aby dodać odtwarzacz punktu kliknąć na odtwarzaczu 2 a potem kto dostaje się do pięciu.
Można zauważyć, że zmienia kolor na zielony.
A jeśli staram się zdobyć kolejny nie mogę.
To dlatego, że gra jest skończona.
Więc mogę zresetować poprzez kliknięcie przycisku reset.
A teraz top player dwa zupełnie wymiata i to nie możemy już grać.
A to szybkie zresetowane.
Więc jeszcze jedna cecha jest to, że możemy również określić, co gramy na.
Więc jeśli chcesz mieć grę, która trwa do 7:00 można użyć tego wejścia numer tutaj, a następnie wszystko, co mam zrobić, to zróbmy to bliżej gry i odtwarzacz jeden tylko przemyka przez co koniec 4:53 i gry kończy się o godzinie 7 i odtwarzacz 1 zaświeci się na zielono i nie możemy dodać więcej punktów, a następnie można ponownie przywrócić.
Więc to, co mamy zamiar skupić się na budowaniu tutaj.
Więc pierwszą rzeczą, którą chcemy zrobić, to nasz plik konfiguracji, a następnie stworzyć team H L strukturę i wtedy będziemy iść z javascript i zrobić to wszystko działa.
Więc idź naprzód i zacząć.
Więc mam pustą będę dokumentu.
Wołam go scorekeeper dot godz Timo zamiar dodać w naszej boilerplate i nadać mu tytuł tak po prostu.
Następnie należy zacząć od rozmowy o tym, co patrzymy tutaj.
Więc to nie jest H-1 H1 i będziemy się zmieniać to ostatecznie.
Nie chcemy po prostu być jeden pełny h bo nie ma dwóch rzeczy wewnątrz tego H-1 to musi być jak Gracz 1 Score 2 graczy na zdobycie gola, ale musimy być w stanie wybrać to niezależnie od tego.
Więc chcemy sposób, aby podzielić ten H1 na mniejsze kawałki.
Więc zobaczymy, w jaki sposób możemy to zrobić w tylko trochę.
Więc następnym to jest akapit grasz na.
I niech tylko prawo grać do siedmiu, aby rozpocząć.
Albo zróbmy pięć.
Myślę, że jak miał.
A potem mamy wejście tutaj.
Jest to typ wejścia równa numer.
Więc input type równa liczba i to wszystko, czego potrzebujemy.
A potem mamy pierwszy przycisk.
Gracz 1 lub 2 sekundy przycisk graczem.
I zresetować nasz ostatni guzik.
Jeśli więc odśwież stronę, a teraz otworzyć własną stronę, którą stworzyliśmy.
Spójrzmy.
Wyglądają niemal tak samo.
Przybliżyć trochę na ten jeden, który wygląda tak dobrze.
Oczywiście nic się nie dzieje, gdy klikniemy na niczym.
Więc teraz chodźmy się u nas w przeglądarce obsługę JavaScript.
Więc mam zamiar utworzyć nowy plik mam zamiar nazwać scorekeeper J.S. i tak jak zawsze zrobić lub dodać swój wpis tutaj, że jest podłączony.
Potem mam zamiar przejść na scorekeepers lub H Tm l, a to mój skrypt i mam zamiar zrobić to na dole, żeby zacząć.
Więc script type zwraca javascript źródłem równa scorekeeper.
Tak właśnie tak.
Jeśli teraz odświeżyć.
To jest moja wersja strony mówi mi javascript alert podłączony.
W porządku.
Mamy więc nasz e-mail skonfigurowane.
Wygląda świetnie.
Co musimy zrobić, to trochę kodu javascript, który faktycznie dodać jakąś funkcjonalność.
I jak zawsze musimy zacząć wybierając różne elementy.
Więc zacznijmy wybierając przyciski i niech po prostu zrobić odtwarzacz jeden i odtwarzacza lub dwa przyciski i pierwszą cechą skupimy się na to, kiedy kliknij jeden z tych przycisków wynik powinien przyroście tutaj.
Więc wszystko co musimy zrobić, to uruchomić wybierając ten gracz jeden przycisk, a jeśli spojrzymy to tylko przycisk może chcemy dodać ID więc my nazywamy to jeden i zrobić tutaj dodamy jedną P2 i wtedy możemy również dodać jeden do resetu, że będziemy po prostu zadzwoń zresetować.
Więc mamy trzy idee teraz.
Więc to o wiele łatwiej wybrać.
Będziemy po prostu nazwać VIP jeden przycisk odpowiada selektor kwerendy dokumentów.
Albo możemy dostać elementu przez ID.
Będę mieszać je tutaj tak pierwszy zrobi P1 wyboru rekordów, a następnie P2.
Przycisk będzie dokument dot a my zajmiemy się elementu przez ID i nie musimy, że Octa Thorpe już.
Tak, że daje nam dwa przyciski.
I niech po prostu założyć nasz pierwszy słuchacza, gdy klikniemy na ten pierwszy przycisk będzie ostrzegać lub anulować tę dziennika coś.
Dlatego chcemy pisać przycisk P1 i dodać detektor zdarzeń na kliknięcia, a następnie dodajemy naszą funkcję tutaj.
A w środku tej funkcji jesteśmy po prostu będzie Alert kliknięty i to wszystko.
Więc jeśli odświeżyć naszą stronę i ponownie kliknąć wielka, że ​​mówi nam, że wybrana prawidłowo i dodaliśmy nasz detektor zdarzenia Click poprawnie.
Gracz 2 choć nic nie robi, ponieważ mamy tylko dodać, że do przycisku Gracz 1.
Więc teraz pomówmy o tym, jak będzie to rzeczywiście działa.
Kiedy kliknij tutaj musimy mieć jakąś zmienną, która się nazywa wynik gracza 1 lub coś, śledzi, ile punktów.
Gracz ma jeden i klikam należy dodać jeden wynik gracza 1 i ostatnia część jest uaktualnienie tego tutaj, aby odzwierciedlać graczowi Wynik: 1.
Więc mam zamiar zrobić zmienną niech po prostu nazwać to wynik 1 i ustawić go na zero, aby rozpocząć.
I wtedy wszystko co chcę zrobić to, gdy klikniemy zaczniemy ale po prostu zawsze dodając jeden do odtwarzacza 1 wynik.
Tak, że będzie tylko wynik jeden plus plusem.
Właśnie tak.
A my odświeżyć i nie widzimy nic, bo powinniśmy prawdopodobnie anulować ten dziennik.
Zdobył pierwszą ocenę zamiast wpisu.
To staje się bardzo denerwujące bardzo szybko jeśli odświeżyć się i otworzyć konsolę i McCook Gracz 1 wynik i zobaczyć jak to działa.
Jeden dwa trzy cztery pięć i to jedzie dalej.
Więc jest kilka problemów.
Jednym z nich jest, że nie są wyświetlane na wynik tutaj, a dwa to mówi gramy do pięciu.
I nie jest to oczywiście przypadek, bo jesteśmy po prostu zwiększając go tyle, ile chcemy.
Dlatego musimy mieć jakąś logikę, która mówi, jeżeli przekracza pięciu gra nad czy coś takiego.
Ale zacznijmy od zastanawianie się, w jaki sposób możemy aktualizować ten H1.
Więc co możemy zrobić, to wybrać H-1, aby rozpocząć.
Więc po prostu nazwać to daleko.
H1 równa dokument kwerendy przycisk H-1 tak po prostu.
A potem wewnątrz tutaj będziemy tylko powiedzieć treść tekstu H-1 punkt równa się wynik tak po prostu.
Więc mamy zamiar wykorzystać tę jedną i zmienić zawartość tekstową być cokolwiek wynik jest to, że byliśmy bez logowania.
I jeśli strzeli tu również tego rodzaju prac, ale widać, że mamy zupełnie zagłuszył wszystko, co było w środku każdego z nich.
Chcemy utrzymać te dwa, a drugi wynik.
Chcemy tylko, aby zmienić ten jeden numer.
Więc nie jest to sposób na osiągnięcie tego stosując dodatkowe godziny do mężczyzny, który sprawia, że ​​jej życie o wiele łatwiejsze, jeśli wrócimy do naszego scorekeeper ale za każdym razem l zamierzamy wprowadzić element zakresu.
I sposób, że rozpiętość będzie działać to, że będzie to tylko owinąć wokół liczby wynik.
Więc co to oznacza to, że mogą teraz gdybym sprawdzenia tego.
Nic nie wygląda tak, jak zmienia się i że to chodzi o rozpiętości.
To tylko dzień Nieintruzyjny jeśli będzie to tylko sposób, by zakończyć coś z jakimś znacznika, który można następnie wykorzystać terminie lub stylizowany inaczej lub wybierz z javascript, który jest dokładnie to, co zrobimy, jeśli spojrzymy na H-1, ale tu teraz mają specjalny przedział zawijania tej liczby.
Jeśli więc zaznaczyć, że zakres i zmiany, które obejmują jedynie Będziemy nadal mają Tao i nasz odstęp prawidłowo i drugi wynik.
Dlatego chcemy, aby zaznaczyć, że zakres i zamierza ponownie zrób identyfikator tutaj.
Więc rozpiętość, a my po prostu nazwać to wyświetlacz P1 tak po prostu.
A teraz musimy udać się do naszego scorekeeper J S i zmienić kilka rzeczy.
Więc nie trzeba wybierać H-1 dłużej, aby pozbyć się tego.
Mamy zamiar wybrać zdecydowanie jeden wyświetlacz równa dokument odebrać i zróbmy selektor zapytania po prostu dla odmiany znowu selektora zapytania.
I nazywamy to wyświetlacz P1 tak, że będzie po prostu dają nam rozpiętości i jeśli chcemy, by sprawdzić, że działa.
Dlaczego nie możemy po prostu zrobić dziennik przechowalni koncert właśnie tutaj.
Wygrał wyświetlacz po prostu zobaczyć, kiedy załadować stronę odświeżyć powinien wydrukować OK.
Wybrane naszą spand poprawnie.
OK.
Więc teraz to, co chcemy zrobić i pozbyć się, że jest dodasz do wyniku.
Możemy pozbyć naszych innych wad. Ale zalogować zamiast zmieniać zawartość tekstową na całym H-1.
Chcemy tylko, aby zmienić go na naszym wyświetlaczu P1, która jest ta mała rozpiętość tutaj.
A jeśli odświeżyć Teraz idziemy.
Więc mamy ten gracz 1 ekranie aktualizacji Gracz 2 nadal nic nie robi, ale mamy tę funkcję roboczą.
Więc zróbmy to samo dla gracza 2.
Więc wrócę dodać w innym przedziale wokół naszego zera span id równa się wyświetlać, a następnie przejść do zera pomiędzy.
Mamy odświeżyć nic nie powinno wyglądać inaczej, ale teraz mamy dwóch przęseł.
Więc widać potem wróćmy do naszego scorekeeper J nas i dodajmy w dwóch nowych zmiennych.
Więc trzeba wyświetlić rozpiętości dla graczowi trzeba go wybrać za pomocą tego identyfikatora.
Będę ponownie użyć selektora zapytania.
A potem musimy zmienną do odtwarzacza wynik jego nie chcemy je po prostu taki sam wynik.
Oczywiście musimy dwa odrębne sposoby śledzenia ich wartości.
Tak więc pierwszą rzeczą, którą chcesz zrobić, to test, który nasz zawodnik przycisku wybiera się poprawnie.
Więc ja po prostu zrobić odtwarzacz dziennika przechowalni koncert przycisku i po prostu zobaczyć, co wypisuje.
A jeśli odświeżyć i patrzymy na minusy. Można zobaczyć, że coś jest nie tak.
Wybraliśmy player nie przycisk dwuprzciskową gracza.
Więc coś jest nie tak z naszym selektora.
Można zobaczyć tutaj mamy wyboru elementu przez ID P1, która jest taka sama jak to co mieliśmy tutaj.
Więc musimy wybrać zamiast P2.
Ok, więc teraz, że jest pod opieką, jeżeli mamy przycisk odśwież ID P2, który jest świetny.
Teraz dodajmy w naszym słuchaczem.
Więc Pete przycisk do detektor zdarzeń reklam kliknij i zawsze lubię rozpocząć drukowanie po prostu coś lub alarmując coś Click dziennik P2 tak jak tego odświeżaniu.
I mamy P2 kliknięciu Nasz zawodnik jeden wciąż działa i P2 jest uruchomiony jakiś kod.
Teraz wystarczy umieścić odpowiedni kod tam.
Jeśli spojrzeć na to, co zrobiliśmy dla przycisku Gracz 1 potrzebujemy odtwarzacza zdobyć zmiennej przyrost zacząć.
Do tej pory wynik P2.
I to powinno rozpocząć się od zera, jak również.
A potem po prostu tu i po prostu zmienić to za wynik P2 plus dla nas, to musimy zaktualizować go w wyświetlacz, który nie został jeszcze wybrany.
Więc trzeba też zaznaczyć, że rozpiętość.
Pamiętaj rozpiętość tu identyfikator wyświetlaczu P2.
Więc mamy zamiar zrobić.
Ma zamiar skopiować tę linię i zmienić go, aby wyświetlić Duckery Dokument wyświetlacz selektora P2, a następnie musimy po prostu zmienić sposób wyświetlania na zawartości tekstowej jest równa odtwarzacza bramkę.
Więc rzućmy okiem.
Kliknij na odtwarzaczu 1, które nadal działa.
Jak o odtwarzaczu 2, który działa tak samo.
OK.
Więc nie ma końca naszej gry teraz.
Byłoby to po prostu wracamy na zawsze.
Więc musimy pracować nad dodaniem tej funkcjonalności.
A sposób, w jaki mamy zamiar zrobić to ze zmiennej, która będzie śledzić stan naszej grze.
Więc nasza gra ma dwa stany.
Pierwszym z nich jest normalnym stanem teraz, gdzie mogę kliknąć gdzie mogę zagrać.
A drugi stan byłby co moglibyśmy nazwać gra nad którym ktoś ma.
Musimy więc dwa stany i możemy używać logiczną modelować, że właśnie to prawda czy fałsz.
I zamierzam to nazwać grę na tak daleko.
Koniec gry i zaczyna to fałszywe, ponieważ gra skończona.
Nie prawda na początku gry.
I co wtedy zrobimy to będziemy aktualizować grę ponad być prawdziwe lub fałszywe zależności od tego czy ktoś wygrywa.
Więc jeśli ktoś dostaje pięć gry powinien być teraz nad prawdą i że powinno to oznaczać, że nie możemy już zaktualizować wynik i że musimy uderzyć reset i reset następnie dokonać grę na fałszywe ponownie i zacząć wszystko na drugą.
Więc pozwól mi pokazać, co mam na myśli.
Pierwszą rzeczą, którą chcesz zrobić, to dodać kolejną zmienną.
Mam zamiar nazwać wygraną wynik.
I to właśnie będzie równe 5.
Tak, że zmienna jest, co mamy zamiar porównać Gracz 1 i zawodnik strzeli 2.
Więc mamy zamiar sprawdzić jako wynik gracza 1 osiągnął zwycięski wynik, jeśli on lub ona ma.
Następnie musimy powiedzieć grę ponad to prawda.
Więc logika będzie wyglądać następująco.
Będziemy mieć if i to właśnie będzie wyglądać, jeśli gra się nie został jeszcze osiągnięty.
Więc jeśli nie gra nad czym będziemy pozwalają dodać do wyniku, tak jak ta.
Gdy uruchomię to teraz nie będzie nic innego zauważy.
Będzie ona działać w ten sam sposób dla gracza 1, a to dlatego, że gra jest skończona jest zawsze fałszywe.
To nigdy się nie zmienia.
Więc kiedy chcemy go zmienić, żeby było prawdziwe.
Cóż, kiedy nie jest to game over.
A kiedy to się dzieje, gdy użytkownicy zdobyć więc gdy wynik gracza 1 jest równa zwycięskiego wyniku.
Więc po dodamy jeden wynik gracza 1 będziemy po prostu sprawdzić, czy zróbmy jedno potrójne wynik równa się wygranej wynik.
Więc jeśli są sobie równe wtedy zacznijmy po prostu mówiąc dziennik Contador.
Koniec gry.
Właśnie tak.
A jeśli odświeżyć i zapoznać się z naszymi konsulem i starałem zmianę tego do tej pory nie jest to prawdą, więc nigdy tak się dzieje.
Tym razem jednak dodaję jednego gracza jeden wynik idzie do pięciu.
Sprawdzamy, czy wynik gracza 1 jest równa wygranej wynik i mamy grę na dole.
Więc zamiast po prostu zrezygnować z gry blokujący ponad właściwie chcemy zmienić ten stan i teraz.
Game over, jest prawdą.
Więc co to zrobi za nas Pokażę ci, gdybym odświeżyć to uniemożliwić nam dodając do wyniku, ponieważ gra jest skończona, jest prawdą.
pojawiają Ten mały czek.
To sprawdza.
Czy to jest gra nad jeszcze.
A jeśli jest to gra nad żaden z tym kodem działa.
Warto więc spróbować.
I dostać się do pięciu i utknąłem.
Nie mogę zwiększyć go już.
Jednak mogę przejść do odtwarzacza 2 i zwiększyć ten wynik, ponieważ nasza logika jest tylko dla gracza 1.
Będziemy chce przejść do tego odtwarzacza do przycisku na słuchacza zdarzeń i dodać w tej samej logiki.
Więc jeśli to nie jest gra nad czym będziemy pozwalają podwyższyć wynik i zaktualizować wyświetlacz, a następnie musimy też sprawdzić, czy nowy gracz strzeli jest równa wygranej wynik to jest game over.
Game over jest prawdą, co oznacza, że ​​użytkownik nie użytkownika lub odtwarzacz jeden lub odtwarzacz dwa można kontynuować, aby podwyższyć wynik więcej.
Warto więc sprawdzić, czy to działa odświeżania.
OK, możemy dostać się do pięciu tu skończymy.
Gracz 2 nie działa lub możemy dostać się do pięciu tutaj i skończymy.
I odtwarzacz 1 nie działa albo.