Welkom terug.
Dus tot nu toe alles wat we hebben gedaan rond evenementen en event luisteraars in de slaapzaal en dominante relatie en dumpt de brieven die we hebben net gedaan eenmalige snelle oefeningen die niet echt veel voor.
En dat was alleen maar om te laten zien soort individuele stukken hoe ze werkten.
Nu gaan we te zien hoe ze allemaal bij elkaar passen en maak een enigszins substantiële app.
Dus zoals je kunt zien is dit niet de mooiste app die komt.
We zijn gewoon te focussen op hoe conceptueel de stukjes in elkaar passen hier hoe we gebeurtenissen hoe we elementen hoe we hem hoe en hoe die allemaal in elkaar passen schrijven leeftijd te selecteren.
Styling is gewoon extra.
Op dit punt, maar in het volgende project dat we te maken.
We gaan veel aandacht leggen op styling en waardoor het lijkt leuk.
Ik beloof.
Dus wat we gaan maken is een eenvoudige scorekeeping app.
Dus ik wil dat je om terug te denken aan al die keren dat u al speelt Rock Paper Scissors met een vriend of ping pong of Tic Tac Toe en het is gewoon zo vermoeiend voor het bijhouden van de score bij te houden en zo moeilijk om te weten wie er wint, wanneer dit app is voor u de manier waarop het werkt.
Twee spelers speler 1 score speler om te scoren.
U laadt de pagina en het vertelt ons dat we aan het spelen bent tot vijf.
En dus alles wat we doen is het toevoegen van een punt door te klikken op een knop.
Dus om een ​​punt om speler 1 klikken we op de speler toevoegen 1 als we willen een punt player om te klikken op de speler 2 toe te voegen en vervolgens wie krijgt tot vijf.
Je merkt het groen.
En als ik probeer en opnieuw scoren kan ik niet.
Dat komt omdat het spel voorbij.
Dus ik kan resetten door te klikken op de reset-knop.
En nu een topspeler twee totaal vegen en dat is het dan kunnen we niet meer spelen.
En die snelle reset.
Dus nog een kenmerk is dat wij ook kunnen aangeven wat we spelen bent.
Dus als je wilt om een ​​spel dat gaat tot 07:00 heb ik kan dit nummer invoeren hier te gebruiken en dan alles wat ik moet doen is laten we dit nader spel en de speler een net sluipt door aan het einde 04:53 en het spel eindigt op 7 en speler 1 wordt groen en we kunnen niet meer punten toe te voegen en dan kunnen we weer opnieuw in te stellen.
Dus dat is wat we gaan om zich te concentreren op het bouwen van hier.
Dus het eerste wat we willen doen is ons bestand te zetten en vervolgens de H team L structuur en dan gaan we in te gaan met javascript en dingen te laten werken.
Dus laten we ga je gang en aan de slag.
Dus ik heb een blanco ik documenteren.
Ik noemde het scorer dot h Timo gaan aan onze standaardtekst en geef het een titel, net als dat.
dan moet ik beginnen door te praten over wat we op zoek bent naar hier.
Dus dit is niet H-1 H1 en we zullen het veranderen van deze uiteindelijk.
We willen het niet alleen om een ​​solide h één zijn, want er zijn twee dingen binnenkant van deze H-1 die het nodig heeft om als speler 1 score 2 speler om te scoren, maar we moeten in staat zijn om dit apart te selecteren uit deze.
Dus willen we een manier om dit H1 splitsen in kleinere stukken.
Dus we zullen zien hoe we dat kunnen doen in slechts een klein beetje.
Dus de volgende is dit een paragraaf die u het spelen bent.
En laten we precies goed te spelen tot zeven te beginnen.
Of laten we het doen vijf.
Ik denk dat de manier waarop het had.
En dan hebben we een ingang hier.
Dit is input type is gelijk aan het aantal.
Dus input type is gelijk aan het aantal en dat is alles wat we nodig hebben.
En dan hebben we onze eerste knop.
Speler 1 of tweede knop speler 2.
En onze laatste reset-knop.
Dus als we deze pagina te vernieuwen en nu openen we onze eigen pagina die we gemaakt hebben.
Laten we kijken.
Ze zien er vrijwel hetzelfde.
Zoom in een beetje op dit ene, dat ziet er gewoon goed.
Natuurlijk gebeurt er niets als we op om het even wat.
Dus nu laten we gaan in onze javascript.
Dus ik ga een nieuw bestand Ik ga noemen het scorer J.S. creëren en zoals ik altijd doe of voeg mijn waarschuwing hier, dat is aangesloten.
Dan ga ik om over te gaan naar scorers of h t m l en onder mijn script en ik ga het doen op de bodem hier om te beginnen.
Dus script type noemt javascript bron gelijk scorer.
Ja, net als dat.
Nu als we vernieuwen.
Dit is mijn versie van de pagina vertelt het me javascript alert aangesloten.
Okee.
Dus hebben we onze e-mail opzetten.
Het ziet er goed uit.
Wat we nu moeten doen is nog wat javascript code die eigenlijk sommige functies toe te voegen.
En zoals altijd moeten we beginnen met het selecteren van de verschillende elementen.
Dus laten we beginnen met het selecteren van de knoppen en laten we gewoon de speler een en speler of twee knoppen en de eerste functie die we zullen richten op is wanneer we op een van deze knoppen de score zou hier verhogen omhoog.
Dus alles wat we moeten doen is beginnen met het selecteren van die speler een knop en als we kijken het is gewoon een knop kunnen we wilt toevoegen in ID dus we zullen deze en hier gedaan zullen we voegen een voor P2 bellen en dan kunnen we ook een toe te voegen voor de reset dat we gewoon zullen noemen resetten.
Dus hebben we drie ideeën nu.
Dus het is veel gemakkelijker om te selecteren.
We noemen het VIP een knop gelijk document vraag selector.
Of we kunnen krijg element door ID.
Ik zal meng ze hier, dus de eerste zal doen met vraag selector P1 en P2.
Button gaat voor de dot zijn en we doen krijgen element door id en we hebben dat niet nodig Octa Thorpe niet meer.
Dus dat geeft ons de twee knoppen.
En laten we gewoon het opzetten van onze eerste luisteraar toen we op deze eerste knop zal waarschuwen of te annuleren die log iets.
Dus we willen P1 knop te schrijven en voeg evenement luisteraar mee op klikken en dan is onze functie hier toevoegen we.
En in die functie die we gaan gewoon alert geklikt te waarschuwen en dat is het.
Dus als u op onze pagina te verversen en probeer het opnieuw klikken geweldig dat ons vertelt wij juist gekozen en we onze listener voor de gebeurtenis Click toegevoegd correct.
Speler 2 maar doet niets, omdat we alleen maar voegde eraan toe dat de knop speler 1.
Dus nu laten we praten over hoe dit daadwerkelijk zullen werken.
Wanneer ik klik hier moeten we een aantal variabele die heet Player 1 score of iets dat bij hoeveel punten blijft hebben.
Speler een heeft en ik klik erop moet men toevoegen aan speler 1 score en vervolgens het laatste deel wordt het updaten van dit hier voor de speler weer te geven 1 score.
Dus ik ga een variabele te maken laten we noemen het 1 score en zet deze op nul te beginnen.
En dan alles wat ik wil doen is wanneer we klikken we beginnen, maar gewoon altijd het toevoegen van de ene naar de speler 1 score.
Dus dat zal alleen de een score plus plus.
Gewoon zo.
En we vernieuwen en we hebben niets zien, omdat we waarschijnlijk dat logboek moeten annuleren.
Hij won de eerste score in plaats van alert.
Het wordt erg vervelend heel snel als we nu te vernieuwen en het openstellen van de console en McCook speler 1 score en zien hoe het gaat.
Een twee drie vier vijf en het gaat om door te gaan.
Dus er is een paar problemen.
Een daarvan is dat we niet de score hier weergeven en twee het zegt we spelen tot vijf.
En dat is natuurlijk niet het geval, omdat we net zo veel als we willen zijn het verhogen van het.
Dus moeten we een aantal logica die zegt dat indien meer dan vijf game over of iets dergelijks.
Maar laten we beginnen met het uitzoeken hoe we dit H1 kunnen bijwerken.
Dus wat we kunnen doen is selecteert u de H-1 te beginnen.
Dus laten we net ver noemen.
H1 gelijk document dat vraagt ​​selector H-1, net als dat.
En dan de binnenkant van hier zullen we maar zeggen H-1 punt tekstuele content is gelijk aan de score, net als dat.
Dus we gaan om deze te nemen en verander de inhoud van de tekst te zijn, ongeacht de score is dat we zonder in te loggen.
En als ik scoor hier goed, dat soort werk, maar je kunt zien dat we helemaal overrode alles wat was binnenkant van elke één.
We willen de twee en de andere score bij te houden.
We willen alleen maar om dit ene nummer te wijzigen.
Dus er is een manier om dat te doen met behulp van enkele extra uur aan een mannelijke dat haar leven een stuk makkelijker maakt als we terug naar onze scorer te gaan, maar elke keer dat ik gaan we een overspanning element te introduceren.
En de manier waarop de overspanning zal werken is dat het alleen zal wikkel rond het nummer van de score.
Dus wat dat betekent is dat we kunnen nu als ik dit te inspecteren.
Niets lijkt erop dat het verandert en dat is het punt van een overspanning.
Het is gewoon dag nonintrusive als u het is gewoon een manier om iets te verpakken met een aantal tag die u dan later kunt gebruiken of anders worden vormgegeven of selecteer javascript dat is precies wat we zullen doen als we op zoek naar H-1, maar hier hebben we nu een speciale overspanning wikkelen dat nummer.
Dus als we die spanwijdte en verandering die alleen overspannen selecteren We hebben nog steeds de Tao en onze afstand correct en de andere score.
Dus we willen dat de overspanning te selecteren en gaan weer gewoon een ID hier.
Dus overspannen en we zullen gewoon noemen P1 scherm net als dat.
En nu moeten we naar onze scorer J S en een paar dingen veranderen.
Dus we hoeven niet naar de H-1 niet meer om zich te ontdoen van die te selecteren.
We gaan selecteren veruit een scherm gelijk document krijgen en laten we het doen vraag selector voor verscheidenheid opnieuw Query selector.
En dat noemen we P1 scherm, zodat alleen zal geven ons de overspanning en als we wilden om te controleren of dat werkte.
Waarom doen we niet alleen een concert kluis log hier.
Won scherm gewoon om te zien wanneer we laden de pagina te vernieuwen moet uitprinten OK.
Geselecteerde onze spand correct.
OK.
Dus nu wat we willen doen en zich te ontdoen van dat is het toevoegen van de ene naar de score.
We kunnen ontdoen van onze andere nadelen. Maar aanmelden plaats veranderen van de tekstinhoud in het algemeen H-1.
We willen alleen maar om het op onze P1 display, dat dit kleine overspanning hier veranderen.
En als we frissen er nu gaan we.
Zo krijgen we dat de speler 1-display updating speler 2 nog steeds niets doen, maar we hebben deze functie werkt.
Dus laten we hetzelfde doen voor speler 2.
Dus ga ik terug toe te voegen in een andere spanwijdte rond onze zero span id gelijk aan te tonen en vervolgens te verplaatsen naar nul in tussen.
We vernieuwen niets moet anders uitzien, maar we hebben nu twee overspanningen.
Zodat u kunt zien dan laten we terug naar onze scorekeeper J ons gaan, en laat ons toe te voegen in twee nieuwe variabelen.
Dus moeten we overspanning te tonen voor speler nodig hebben om het met dat ID te selecteren.
Ik vraag selector opnieuw gebruiken.
En dan moeten we een variabele voor de score speler aan zijn we niet willen dat ze alleen maar om dezelfde score zijn.
Uiteraard moeten we twee verschillende manieren van het bijhouden van hun waarden.
Dus het eerste wat ik wil doen is test die onze speler knop correct is geselecteerd.
Dus ik ga gewoon naar een concert kluis log speler doen om knop en gewoon zien wat het wordt afgedrukt.
En als we vernieuwen en we kijken naar de nadelen. U kunt zien dat er iets mis.
Wij selecteerden de speler een knop niet de speler twee knoppen.
Dus iets mis is met onze selector.
U kunt hier zien we selecteren element door id P1 dat is hetzelfde als wat we hadden hier.
Dus moeten we P2 in plaats daarvan te kiezen.
Ok dus nu dat die zorg dragen voor als we frissen heeft genomen krijgen we knop ID P2 dat is geweldig.
Laten we nu aan onze luisteraar.
Dus Pete knop die ad event listener klik en ik heb altijd willen beginnen met de net uit het afdrukken van iets of iets een log P2 klik zomaar refresh waarschuwen.
En we krijgen P2 geklikt onze speler men nog steeds werkt en P2 loopt een stukje code.
Nu moeten we alleen maar om de juiste code in daar te zetten.
Als we kijken naar wat we deden voor de knop speler 1 nemen we behoefte aan een speler die een variabele increment scoren om te beginnen.
Tot nu toe P2 score.
En dat moet beginnen op nul ook.
En dan gaan we gewoon hier te komen en verander gewoon dit te P2 score plus voor ons en dan moeten we bij te werken in het display waarin we nog niet hebben gekozen.
Dus moeten we ook die spanwijdte selecteren.
Denk aan de overspanning hier ID van P2 display.
Dus we gaan om dat te doen.
Ze gaat die lijn kopiëren en verander het in document Duckery selector P2 weer te geven en dan zullen we verander gewoon de weergave op om de tekst inhoud die gelijk is aan de speler om te scoren zijn.
Dus laten we eens een kijkje nemen.
Klik op de speler 1 die nog steeds werkt.
Wat dacht je van speler 2 dat ook werkt.
OK.
Er is dus geen einde aan ons spel op dit moment.
Dit zou gewoon blijven gaan altijd.
Dus we moeten werken aan het toevoegen van die functionaliteit.
En de manier waarop we gaan om dat te doen is met een variabele die gaat om het bijhouden van de toestand van onze voorsprong behouden.
Dus onze spel heeft twee staten.
De eerste is de normale toestand op dit moment waar ik kan op de plaats waar ik het spel kan spelen.
En de tweede staat zou zijn wat we game over waar iemand heeft men zou kunnen noemen.
Dus we moeten twee staten en kunnen we een boolean gebruiken om het model dat precies dat waar of onwaar.
En ik ga het spel te noemen meer dan tot nu toe.
Game over en het begint deze valse omdat game over.
Niet waar aan het begin van het spel.
En wat we doen is dat we game over te werken om waar of onwaar zijn, afhankelijk van als iemand wint.
Dus als iemand krijgt tot vijf game over moet nu waar te zijn en dat zou betekenen dat we niet langer de score kunnen werken en dat we moeten raken reset en reset moet vervolgens game over valse opnieuw en begint alles voorbij.
Dus laat me je laten zien wat ik bedoel.
Het eerste wat we willen doen is het toevoegen van een andere variabele.
Ik ga noemen winnende score.
En dat is gewoon gelijk aan 5 te zijn.
Dus dat variabele is wat we gaan vergelijken speler 1 en speler te scoren 2.
Dus we gaan om te controleren als een speler 1 score de winnende score bereikt als hij of zij heeft.
Dan moeten we om het spel te zeggen meer dan waar is.
Dus de logica zal er zo uitzien.
Het gaan naar een if-statement te hebben en het zal alleen maar zien als game over is nog niet bereikt.
Dus als niet game over toen we gaan om u te laten toevoegen aan de score, net als dit.
Toen ik dit nu loop je zult niets anders opmerken.
Het zal precies werken op dezelfde manier voor speler 1 en dat is omdat het game over is altijd vals.
Het verandert nooit.
Dus toen we zouden veranderen dat het waar is.
Nou als er een game over.
En wanneer dat gebeurt is wanneer de Score dus als speler 1 score gelijk is aan de winnende score is.
Dus nadat we een toe te voegen aan speler 1 score zullen we controleren of laten we een score triples evenaart winnende score.
Dus als ze gelijk aan elkaar zijn dan laten we beginnen door gewoon te zeggen Contador log.
Spel is over.
Gewoon zo.
En als we vernieuwen en bekijk onze consul en ik probeerde het wijzigen van deze tot nu toe is dit niet waar dus dit nooit gebeurt.
Ditmaal hoewel ik één speler voeg een score gaat naar vijf.
We controleren of speler 1 score gelijk is aan het winnen score is en we krijgen game over hier beneden.
Dus in plaats van alleen te annuleren van de vergrendeling spel dan we eigenlijk willen deze status te wijzigen of nu.
Game over is waar.
Dus wat dat voor ons zal doen ik zal je laten zien als ik refresh zal het ons voorkomen dat het toevoegen van meer aan de score, omdat game over is waar.
Deze kleine check verschijnen.
Het controleert.
Is het spel nog niet voorbij.
En als het game over geen van deze code wordt uitgevoerd.
Dus laten we proberen dat.
Ik krijg vijf en ik ben vast.
Ik kan het niet meer te verhogen.
Maar ik kan gaan naar speler 2 en verhoging van dat punt, omdat onze logica is alleen voor de speler 1.
We willen over te gaan naar deze speler om knop uit event listener en voeg in dezelfde logica.
Dus als het niet meer dan het spel dan laten we u de score te verhogen en het actualiseren van de display en dan moeten we ook om te controleren of de nieuwe speler te scoren gelijk is aan de winnende score is dan is het game over.
Game over waar is, wat betekent dat de gebruiker geen van beide gebruiker of de speler kan een of twee spelers blijven om de score te verhogen meer.
Dus laten we eens nagaan of dit werkt refresh.
OK we tot vijf kunnen krijgen hier en we zijn klaar.
Speler 2 werkt niet of we kunnen tot vijf krijgen hier en we zijn klaar.
En de speler 1 werkt ook niet.