Dus we hebben nu twee verschillende dingen die we kunnen richten op.
De eerste is het veranderen van het display hier groen op de winnende speler te zijn en dat men is vrij eenvoudig.
En de tweede is het verkrijgen van de reset-knop om te werken, zodat we kunnen resetten en opnieuw te spelen.
Dus laten we beginnen met de kleurverandering en ik ga om dat te doen door het definiëren van een klasse in een CSSA bestand.
Dus ik moet een C S S-bestand te maken en ik ga gewoon dat scorekeeper noemen.
C Ss dan ga ik om te linken naar het in plaats van mijn HDMI-bestand scorer Dotsie SS en op te slaan.
Dan ga ik naar mijn CSSA bestand en definieer een klasse en ik noem het de winter en ik ga zeggen is de kleur groen en dat is alles wat we nodig hebben en zal redden.
En alleen maar om te controleren dat het lijkt de manier waarop ik het wil.
Laten we het gewoon toe te voegen aan de overspanning zo zal zeggen klasse is gelijk aan en we zullen gewoon geef het een klasse van de winnaar voor speler 1 weergave vanaf het begin te gaan.
En als ik refresh je kunt zien we een groene 0.
Dat is precies wat we willen als een increment.
Natuurlijk willen we dat het zo zwart te starten en voeg alleen de klas.
Wanneer spel is voorbij, dus we nodig hebben om terug te gaan naar onze javascript en zich te ontdoen van deze.
Dus gaat het terug naar zwart.
Ga naar onze javascript nu.
Dus we gewoon beginnen voor speler 1 en we moeten controleren of de speler 1 score gelijk is aan het winnen score is.
Dat betekent dat een speler heeft gewonnen.
Dus hier gaan we naar toe te voegen aan de display-klasse spelerslijst 1.
We gaan naar de klas winnaar toe te voegen en dat is alles wat we moeten doen.
Dus als we frissen je zult zien zoals ik verhogen speler 1 score en krijg tot en met 5.
Die klasse is toegevoegd.
Dus als we hier een kijkje te nemen Ik zal het te inspecteren.
Er is geen klasse en ik blijf het verhogen tot we tot en met 5.
Besteed aandacht recht hier en we krijgen klasse evenaart winnaar toegevoegd Als we in 5.
Dus we zullen hetzelfde doen voor speler 2.
Dus als speler twee scoort de winnende score zal de speler om te laten zien veranderen.
Laten we eens kijken verhogen deze tot en met 5.
Grote.
Alles lijkt te werken prima.
Dus de volgende stuk is het verkrijgen van de reset-knop om nu te werken.
Als we game over het is altijd ingesteld om waar te zijn.
Er is geen manier om het spel over te stappen.
Dus klik op de reset-knop dient om een ​​paar verschillende regels code te activeren.
De eerste die je wilt wijzigen.
Speler 1 score en de speler terug te scoren op nul.
We willen de waarden hier die worden weergegeven in de speler 1 scherm en de speler om te laten zien tot nul te veranderen en we willen deze groene klas vanuit welk element is het op te verwijderen.
En dan is het laatste wat is dat we nodig hebben om er zeker van dat spel te maken dan gaat terug naar zijn valse, zodat onze code en hier weer kan lopen.
Dus het eerste wat moeten we de knop gaven we het id gelijk reset te selecteren.
Dus moeten we hier over te gaan en selecteer het gewoon.
Dus doe ik het met de andere toetsen tot nu toe.
Reset-knop is gelijk aan document stip en we zullen een ander get element doen door id en deze keer de ID is gereset en zal redden en dan gewoon om te controleren of het werkt.
Doe een constante log.
Reset reset-knop en te vernieuwen.
Als we kijken in onze console krijgen we onze juiste knop.
Het is al geannuleerd werd aangemeld.
OK dus we moeten beginnen door het toevoegen van onze event listener voor een klik op dat reset-knop, zodat reset knop die gebeurtenislistener klik op onze callback functie en alles wat we willen doen om opnieuw te beginnen gewoon te annuleren dat log reset gewoon geklikt om ervoor te zorgen dat het werkt en daar gaan we onze reset-knop is geklikt.
Dus de logica hoewel als we bespraken we nodig hebben om in te stellen.
Speler 1 score en de speler terug te scoren op nul.
Dus dat is eenvoudig genoeg.
Speler 1 scoren nul speler score is nul.
Maar als ik dit recht nu lopen waar ik veranderen enige speler 1 score in speler te scoren op nul gezet en increment zodat speler één wint en klik vervolgens opnieuw in te stellen.
Niets lijkt te gebeuren en dat is omdat we alleen de score in javascript veranderen.
We hebben nooit de scores op de pagina bijgewerkt, zodat dat zijn de P1 en P2 weergave variabelen die we nodig hebben om te werken.
Dus we willen één beeldscherm tekstinhoud doen en we kunnen gewoon instellen op nul.
We kunnen het ook instellen op 1 score zijn.
Zij moeten beide nul.
Dus hetzelfde Pete om te laten zien tekstinhoud is nul.
Als we nu vernieuwen en komen we bij 5.
Beiden gaan terug tot nul.
Dus laten we dichterbij spel.
En klik op reset beiden terug naar nul.
Next up laten we de winnaar clausule te verwijderen.
Zal dit doen op de gemakkelijke manier door het verwijderen van de winnaar klasse van beide.
Dus we zullen niet eens controleren welke men het heeft.
We zullen gewoon verwijderen uit beide.
Het is gewoon een kwestie van één beeldscherm.
Klaslijsten verwijderen winnaar.
Dus dat zal zich te ontdoen van de clausule te krijgen en zal het ook doen op te geven.
Dus welke men het heeft maakt het niet uit, omdat we dat het verwijderen van beide.
Dus nu als we een spel spelen krijgen we een winnaar.
Ik klik resetten.
Beiden gaan terug tot slechts een lege platte tekst.
Maar zoals je kunt zien krijg ik tot vijf.
Ik klik reset-knop nog steeds niet werken.
En dat komt omdat game over is nog steeds waar.
En dus geen van onze code in plaats van deze gebeurtenissen is gaan lopen.
Dus het laatste wat we moeten doen is ingesteld.
Game over terug naar vals en die ons in staat moet stellen om te blijven spelen.
Dus ik zal incrementals vernieuwen.
Laten we een game over.
Daar gaan we.
Ik kan niet meer spelen.
Ik klik op reset en nu game over is het terug naar vals en ik kan weer spelen en daarna door te gaan.
Dus dat is de kernfunctionaliteit hier.
We hebben bijna alles gedaan het laatste wat krijgt het speelveld om het nummer of de winnende score aan een variabele zijn.
Dus het is niet altijd slechts vijf.
Dus we hebben deze input en we willen om dit te gebruiken zodat wanneer ik dit veranderen om zeven dit zegt spelen tot en met 7 en onze maximum of onze winnende score is zeven in plaats van vijf.
Dus hebben we een paar stappen om er te komen.
Het eerste wat we moeten doen is het selecteren van deze ingang zoals je kunt zien hebben we input type dat gelijk is aan het aantal.
Het is de enige ingang op de pagina.
Dus we hoeven niet per se te geven een ID of iets dergelijks.
Dus ik ga hier over te gaan en selecteer deze alleen met mijn andere selectors var.
Laten we noemen het geen input is gelijk aan document en er is een heleboel manieren om het te krijgen kan documenten die zoekopdracht selector ingang te doen.
We kunnen ook alleen wanneer opgeven.
Type is gelijk aan getal omdat er kunnen andere ingangen.
In ons geval zal ik het simpel houden.
Er is maar één ingang.
Dus dit werkt prima.
OK.
Dus hebben we die ingang gekozen.
Dus laten we nu toe een evenement.
Dus wat we willen dat er gebeurt, is dat elke keer dat dit verandert de waarde of dat aantal veranderingen die we willen dat dit bij te werken en we willen dat de winnende score variabele zo goed te werken.
Dus wat we moeten doen is het toevoegen van een evenement.
Dus we gewoon gaan gevoelloos en zet Dot had event Lessner klik gewoon doen het op deze manier hier.
Functie en allemaal een waarschuwing.
Klikte op de input en wat je ziet, is dat eigenlijk een klik luisteraar is niet de beste tool voor deze job.
Want ja we kunnen de waarde te veranderen met een klik alsof ik net daar deed.
Maar ik kan ook getroffen wissen en typ een aantal mijzelf en geen enkel geval werd ontslagen omdat ik niet moet klikken.
Dus als ik de kleine knoppen hier een snelle evenement branden.
Anders als ik gewoon mijn toetsenbord gebruiken we niet snel een evenement te krijgen.
Dus er is een ander type van het evenement, dat is veel beter in deze zaak die verandering wordt genoemd.
Dus een verandering event zal elk moment draaien verandert de waarde en het maakt niet uit hoe die waarde veranderd.
Als het was omdat ik klikte of druk op de Delete-toets.
Dus laten we eigenlijk de waarschuwing veranderen hier om te zeggen veranderde de input en vervolgens te vernieuwen.
En als ik klik hier om het te veranderen vertelt me ​​dat je de input veranderd.
Maar als ik schrappen en ik typ een getal dat niet gepaard gaat klikken vertelt me ​​ook dat ik de input veranderen dus dat is geweldig.
Dit is het evenement willen we de verandering evenement gebruiken elk gewenst moment de waarde veranderingen die we willen dit getal hier te werken en we willen ook onze winnende score bij te werken, zodat onze spel verder te gaan totdat we dat nieuwe winnende score te raken.
Hopelijk is dit niet onze werkelijke winnende score.
Zeker lange spel van Rock Paper Scissors.
Dus het eerste wat is hier het bijwerken van deze waarde.
Dus net zoals voordat we nodig hebben om het te selecteren waarop het is een paragraaf.
Dus moeten we onze paragraaf te selecteren en ik zal gewoon een VAR paragraaf gelijk document die vraag selector tag.
En vervolgens in deze snelle geval we zullen gewoon veranderen tekstinhoud en we gewoon beginnen door gewoon te veranderen om te zeggen geklikt of laten we zeggen waarde veranderd.
Net als dat en refresh.
Nu als ik de waarde die paragraaf veranderingen wil zeggen waarde veranderd veranderen, maar dit is ons hetzelfde probleem kwamen we eerder met de H-1, we willen niet de hele paragraaf te wijzigen.
We willen alleen maar om dit kleine deel te veranderen.
Dus wat we willen gebruiken is eigenlijk een andere overspanning.
Dus we zullen terug te gaan en we zullen een overspanning toe te voegen rondom het nummer.
En dit is een perfect gebruik voor een overspanning, waar weer we het kunnen gebruiken te richten op slechts een klein deel van een element niet het hele ding.
En ik ben eigenlijk niet van plan om het deze keer alleen maar om u een andere manier van het selecteren van het te tonen een idee te geven.
Dus vergeet niet het is een overspanning in plaats van een paragraaf.
En het is de enige als dat op onze pagina.
Dus zullen we teruggaan.
Dus in plaats van het selecteren van de paragraaf laten we een nieuwe variabele en we noemen het winnende score scherm en het gaat om documenten te vragen selector zijn.
Maar in plaats van alleen overspannen omdat er andere overspanningen op de pagina willen we overspanningen te selecteren binnenkant van de leden.
Dus dat is alles wat we hebben om te schrijven.
P ruimte.
Span.
En we zullen redden.
En laten we nu ga je gang en het actualiseren van de winnende score weergegeven op hier in plaats van paragraaf.
Dus winnende score scherm als deze.
En het is nog steeds niet van plan om perfect te zijn.
Het wordt alleen maar waarde Gewijzigde elke keer, maar in ieder geval is het niet updaten van de hele paragraaf.
Dus de volgende stap is het krijgen van het te updaten naar het nummer dat er in de ingang zodat de waarden met elkaar te synchroniseren weer te geven.
Dus we hebben eigenlijk niet gezien hoe wij de gegevens krijgen van een input.
Hoe krijgen we de huidige waarde.
Ik ga je hier laten zien door de input te selecteren.
Dus documenteren die vraag selector en we gaan om het te doen in de console-ingang en ik ga het op te slaan in een variabele dus noem het var ingang document taqueria selecteer uw input en dan gaan we een input doen daat waarde.
Zodat de waarde zal een reeks van wat er in deze ingang ongeacht de waarde is.
Dus als ik dit tot 7 veranderen en ik voer de code opnieuw krijg ik 7.
Als ik maak er een enorm aantal en dit keer doe ik het het weerspiegelt weer wat de waarde is de binnenkant van deze input.
Dus gaan we gebruik van maken door het veranderen van deze in plaats van om de string waarde veranderd.
We gaan om het te veranderen naar Nahm ingang dot waarde zodat de waarde zal nemen van hier en de winnende score displays inhoud van de tekst te wijzigen.
Dus we vernieuwen en ik updaten en je kan ofwel nu in sync met elkaar.
Dus zoals ik deze update om 02:59 mijn spel aan of de winnende score display werkt ook op 1-3.
Dus natuurlijk zijn we niet spelen tot 123.
We zijn nog steeds spelen tot vijf.
En dat komt omdat onze logica niet is als gevolg van deze nieuwe invoerwaarde al dat het als gevolg van onze oorspronkelijke winnende score van 5.
Zo willen we ook veranderen hier beneden zijn winnende score gelijk te zijn aan invoerwaarde verdoven en op te slaan.
En nu laten we proberen te veranderen zodat we spelen tot drie en we klikken en je zult merken we wat rare gedrag.
Dus het zelfs niet stoppen bij vijf.
Het houdt gewoon altijd.
Dus dit is een leuke bug die te maken heeft met verschillende soorten data strings en getallen en vergelijken ze dubbel gelijken versus triple gelijken.
Dus tot op de bodem te krijgen van te laten doen wat nadelen. houtkap.
Dus we weten dat de kern van dit alles is deze lijn hier of deze lijn hier waar we controleren of de speler een als score van de speler is gelijk aan de winnende score.
Dat is wanneer we stellen game over om waar te zijn.
En dat is nu niet meer dan gebeurt omdat spel.
Als we veranderen de score.
Game over is nooit veranderen.
Het is altijd vals.
Dus er iets mis gaat met deze lijn.
Dus laten we een opgeheven logboek en we gaan twee dingen doen.
Laten we gewoon een afdruk van de speler 1 score en we zullen de winnende score af te drukken en kunnen we ze te scheiden door komma's en ze zullen gewoon print ze op dezelfde lijn.
Even een kort briefje met behulp van Comstock logs is hoe we gaan om te debuggen voor nu, maar zullen we later praten over meer geavanceerde manieren van debuggen.
Dus ik zal vernieuwen en als we beginnen nemen we een kijkje nemen op verhoogde speler 1 score en je kunt zien dat we drie en we zijn te vergelijken met de nummer vijf.
Dus speler 1 score wordt drie winnende score is vijf.
Maar zodra ik dit veranderen om te laten we zeggen 7 en nu ik klik.
Speler 1 we nu vergelijken speler 1 score is het nummer vier te winnen score die de string zeven.
Dus vernieuwen weer als ik gewoon beginnen met vijf.
Het werkt prima.
Maar als ik dit te veranderen en nu vergelijken we het aantal en de string en dat gaat niet werken voor ons, want we doen triple gelijken hier.
Dus we konden dubbele gelijken doen, maar je weet dat ik ben geen fan van dat.
Dus wat we gaan doen in plaats daarvan is gaan hier en alleen deze te nemen en we deze waarde en zet hem in een string.
Dus nummer net als dat kapitaal en het aantal en dan pas in en zet de waarde die vervolgens om te zetten in een string en zet die op zijn winnende score.
Dus we waren vers.
Nu dit werkt prima.
We krijgen tot vijf, maar als we ook dit veranderen zijn om ons spel is afgelopen op 2.
Er is een klein probleem dat we moeten concentreren op wat als we een spel aan het spelen bent tot vijf en dat is wat we begonnen te doen.
En als ik halverwege besluit door dat ik wil de winnende score te veranderen op de maximale score.
Onze code werkt op dit moment niet aan die zeer goed, want als ik dit nu veranderen we alleen spelen tot drie.
We hebben twee verschillende manieren van omgaan met dit.
De eerste is het resetten van de score en alles terug naar nul.
En de andere blijft spelen vijf.
Maar wat is er eigenlijk gebeurt is dat we spelen tot drie, maar we hebben al voorbij drie.
Dus omdat we al gepasseerd onze code niet echt meer werken omdat we liggen het is gewoon te controleren is speler gelijk is aan de winnende score te scoren.
Het is niet te controleren als het groter is dan de winnende score.
Dus als konden we dat veranderen.
Dus het zegt als het groter is dan de winnende score dan spel voorbij en dat is prima.
Maar ik denk dat de beste oplossing is om op nul wanneer we de maximale score te veranderen want we hadden nooit echt de maximale score halverwege veranderd door middel van een spel anyways zouden we willen het spel opnieuw te beginnen en de andere reden dat ik wil dat we dit doen is het een goed use case voor een korte refactor.
Dus toen we veranderen de score hier zijn de winnende score.
We willen het spel dat is dezelfde logica dat we lopen hier resetten.
Dus we doen dat heel eenvoudig gewoon om deze code uit te kopiëren en maak een nieuwe functie genaamd reset.
Dus functie reset zet alles van deze code in daar en dan zodra het aantal ingang veranderingen die we gaan gewoon om te draaien opnieuw in te stellen.
Dus je zult zien dat ik opnieuw in te stellen hier te spelen tot vijf.
Dit werkt prima.
We krijgen tot vijf.
Ik klik op reset en we hebben niet de reset-functie genaamd binnenkant van dit evenement luisteraar dus we moeten onze reset-functie gesprek toe te voegen.
En nu als we frissen we naar 5.
Ik klik resetten.
Dat is allemaal goed.
En nu als ik in het midden van een spel en ik verander de score het ons ook reset en nu spelen we in op 1.
En het werkt.
Of als ik veranderen.
Dus we speelt nu tot en met 7.
Het zet ons terug naar nul.
Dus als ik besluit je weet dat dit eigenlijk een spel van plan om 2 in plaats daarvan het verandert de spec op nul.
En we hebben geen zorgen te maken over hoe om te gaan.
Als we veranderen halverwege.
Dus wat we doen is gewoon opnieuw instellen maakte een aparte functie te drogen de code in plaats van het dupliceren van dit hier en hier beneden.
Dus dat is het voor nu.
Dat is alles wat we moeten doen.
Sommigen van u kunnen afvragen of deze code is echt de beste manier waarop we misschien dit zou kunnen doen.
Het antwoord is nee.
En als je goed kijkt zie je dat het zeer vergelijkbaar.
Het is eigenlijk hetzelfde, behalve dat we degene die het doet hier en P2 hier beneden.
Maar elk ander woord is hetzelfde.
Er zijn dus meer geavanceerde manieren van refactoring deze van het maken van dit een beetje beter.
Maar ik ben niet van plan om dat te doen hier omdat alles wat ik wil concentreren op conceptueel hoe we javascript event listeners selectors dominante relatie en interactieve HD IMO kan nemen en dat is wat ik wil concentreren op.
Maar weet alleen dat we zullen zien manieren om de code te maken als deze zien er een beetje beter een beetje korter.
Er is één ding dat we hier beneden konden doen en doe dat bij evenement luisteraar.
We konden gewoon vervangen verdoofd ingang hier met het woord is dit een kleine verandering, maar we kunnen dat doen en gewoon inkorten van de code een beetje.
Dus dit als ik veranderen we nu spelen tot drie.
Alles werkt nog steeds precies hetzelfde.
Ik gebruikte het sleutelwoord deze die verwijst naar wat het evenement is te luisteren waar was nummer invoeren.
Oké dus dat is het voor deze les.
Zoals ik in het volgende project genoemd we gaan om iets op te bouwen meer substantiële en ik beloof het zal een stuk beter dan dit deed hier kijken.