In deze video zijn er een paar kleine veranderingen die ik wil maken en dan ga ik om te praten over hoe we dit een beetje kon refactoren.
Dus de eerste verandering is dat wanneer we winnen dit spel.
Dus laten we winnen hier.
Daar gaan wij en ik krijg dit juist bericht en ik klik opnieuw op het spel.
Er staat nog steeds correct.
En we willen dat dit opnieuw in te stellen die echt een snelle verandering.
Alles wat we moeten doen is de code die gebruikt wordt wanneer we klikken op spelen weer dan we nodig hebben om de overspanning die we hier hebben te veranderen en maken het alleen maar leeg.
Dus laten we gaan vinden dat dit het volledige scherm te maken.
Dus toen we op dat reset knop die is hier.
Alles wat we moeten doen is ons display dat we noemden boodschap display.
Dus we dat gewoon overal doen hier beneden.
Berichtvertoning tekst ups tekstinhoud gelijk lege string.
En laten we eens kijken hoe dat gaat.
Vernieuwen.
OK laten we klikt u gewoon totdat we winnen.
OK dus het juist hier zegt.
En als ik klik nogmaals op spelen die weggaat.
De andere kleine verandering die ik wil maken is dat deze toets pas weer zou moeten zeggen te spelen zodra de gebruiker wint.
Dus ik zal de pagina te vernieuwen en het zegt nieuwe kleuren die is hoe we willen het aan het werk.
En als ik win vraagt ​​het me als ik wil om opnieuw te spelen.
En als ik dan opnieuw op te spelen willen we de knop tekst om terug te gaan naar nieuwe kleuren te veranderen.
Dus echt klein verschil, maar ik wil alleen maar om het spel opnieuw te laten zien als de gebruiker alleen maar gewonnen.
Dus ga naar onze code en we moeten naar de plaats waar de gebruiker het spel dat is hier wanneer de gebruiker op de geplukte kleur klikt wint vinden.
Dus wanneer de gebruiker klikt op de juiste kleur te veranderen we de reset-knop tekst om tekstinhoud zeggen, maar dan wat we willen doen is wanneer de gebruiker klikt op de reset-knop gaan we dat veranderen.
Deze dot tekstinhoud om terug te gaan naar nieuwe kleuren en we konden ook schrijven een resetknop.
Maar het is makkelijker om dit te doen omdat we binnenkant van de event listener voor resetknop.
En dat zou goed zijn als we vernieuwen snel tot we de juiste is.
We willen om opnieuw te spelen.
Zeker.
Nu gaat het terug naar Nieuwe kleuren en elke keer zegt het enkel nieuwe kleuren over en over en als ik win het is de enige keer dat er staat opnieuw te spelen.
Dus een echt klein ding, maar ik vind het echt storend is dat wanneer ik op een van deze knoppen klikt heeft dit vervelende omtrek omheen.
En dit is eigenlijk onze browser om dat te doen.
En we kunnen zetten dat af.
Ik weet niet of je dat kunt zien op het scherm cast, maar er is een blauwe omtrek.
Het is vrij van schadelijke.
Dus om zich te ontdoen van dat we naar onze style sheet en als we onze knoppen selecteren hier iets verderop kunnen we gewoon schrijven schetsen none en terug te gaan en te vernieuwen.
Als we nu klikken we niet dat blauw overzicht rond te krijgen.
Dus dat is alles wat ik wilde doen voor het spel logica.
Nu willen we een beetje tijd te besteden refactoring uw code.
Dus laten we teruggaan.
Het eerste dat uit springt is voor mij deze code hier, waar we hebben een harde knop een eenvoudige knop en de luisteraar voor een ieder.
En ze zijn zeer vergelijkbaar in hoe ze werken.
Behalve een van hen met drie vierkanten.
De ander werkt met zes maar voor de rest doen ze in principe hetzelfde.
Dus we kunnen eigenlijk verminderen dat duplicatie.
En in plaats van het geven van een ieder een idee wat we gaan doen is zich te ontdoen van die ID's en geef ze een klasse en ze gaan tot dezelfde klasse te delen.
Dus de klasse zal stand worden genoemd.
Dus we zullen ze klasse mode geven.
Vergeet niet een knop of een item kunnen twee klassen.
Ze hoeven alleen maar te worden gescheiden door spaties.
heeft zo deze klasse mode en klasse geselecteerd.
OK.
Dus nu gaan we en deze twee knoppen te verwijderen hier en maak een lijst van de knoppen genaamd modusknoppen en dat gaat om een ​​document dat selector queries zijn.
Paul Datt mode.
Dus dat geeft ons twee knoppen.
Dan gaan we lus door mode knoppen.
Dus moeten wij voor var gelijk is aan nul.
Minder dan modusknop opzienbarend.
En wat dit ook zal laten doen is als in de toekomst willen we een medium of normal moeilijkheid modus of een super hard moeilijkheidsgraad mode toe te voegen.
We hoeven niet extra luisteraars toe te voegen, omdat we allemaal van ze te selecteren en vervolgens met behulp van een lus versus Hier hebben we met de hand te schrijven een voor elke knop die we toevoegen.
OK.
Zo eindigen de loop hier.
Plus plus.
En wat we gaan doen is het toevoegen van een modusknoppen ik dot toe te voegen event listener klik en ze zullen gewoon laten het op dit voor nu.
Voordat we verder gaan Ik ben eigenlijk van plan om commentaar uit de code gewoon zo dat we kunnen vertellen wat loopt van onze nieuwe code en wat we willen dat er gebeurt wanneer we op één van deze knoppen.
Het eerste wat we willen dat er gebeurt is dat de geselecteerde klasse te worden toegepast.
Dus nu is het alleen wanneer we zweven.
We krijgen dat de kleur die ik wil dat het zijn als we klikken.
Dus moeten we deze dot klasse lijst dot doen zijn geselecteerd, net als dat dat is wat we hier hebben naar beneden behalve wij doen het gemakkelijk knop en hard te drukken.
We kunnen gewoon doen om dit die verwijst naar wat er geklikt.
Het enige probleem is dat we nodig hebben om het uit te zetten het origineel ook.
En dat doen we gaan gewoon naar de harde code dit een beetje en schrijf modusknoppen zero dot dot klasse lijst verwijderen geselecteerd en dan zullen we het van de andere ook verwijderen.
Dus omdat er slechts twee knoppen.
Dit is geen probleem.
Wat we doen is het verwijderen van beide knoppen alleen maar om veilig te zijn en dan toe te voegen aan degene die we gewoon geklikt.
Dus nu als we testen dit uit en te vernieuwen.
Je kunt zien dat het alleen aan degene die we zojuist geklikt wordt toegevoegd en het is verwijderd uit de andere.
Dus wat we moeten doen is het toevoegen van het grootste deel van de logica hier voor deze knoppen.
Dus moeten we uitzoeken hoe vele pleinen om te laten zien halen nieuwe kleuren en dan moeten we een nieuwe pick kiezen om de kleur die de kleur die we proberen te proberen om te klikken op.
En dan tot slot willen we de pagina bij te werken aan wijzigingen.
Dus om dit alles Ik ben eigenlijk van plan om een ​​nieuwe functie en die functie ik ga gewoon noemen het resetten te doen en dat is iets wat we gaan gebruiken in een paar plaatsen, omdat we deze stappen een herhalende veel plukken nieuwe kleuren kiezen van een nieuwe geplukt kleur van de kleuren array en vervolgens de actualisering van de pagina om de nieuwe kleuren te tonen en het updaten van dit scherm hier.
We doen dat de hele tijd, dus ik ga gewoon dat allemaal op een functie.
Dus wat we moeten doen in deze functie is dat ik eigenlijk alleen maar gaat om het kopiëren van hier beneden.
We hebben dit al gedaan hier.
Ik was van plan om dit alles in te kopiëren naar onze Reset zomaar.
En laten we eens kijken naar wat er gebeurt.
Dus in plaats van reset of het genereren van de willekeurige kleuren, afhankelijk van de gevoelloos pleinen variabele en dan zijn we het kiezen van een nieuwe kleur we veranderen van de kleur weergegeven content.
We hebben deze tekst inhoud is gelijk aan nieuwe kleuren.
En dat daadwerkelijk zal niet werken omdat dit vroeger verwijzend naar de reset-knop.
En dat was in het evenement in het centrum voor resetknop.
We zijn nu in plaats van een aparte functie genaamd reset.
Dus we moeten hard code die als reset-knop.
En dan zijn we het veranderen van de boodschap display leeg zijn.
En dan zijn we een lus door alle pleinen en we updaten van hun kleur.
En dan zijn we het veranderen van de achtergrond van de 8: 1 terug naar de blauwe.
En als we gewoon bellen dat in plaats van hier zijn we alleen nog maar te resetten.
Er is een klein probleem en dat is dat we nooit bijwerkt gevoelloos pleinen.
Dus toen ik op de eenvoudige knop klikt u de pleinen variabel drie veranderen.
Toen ik op de harde knop klikt u wilt veranderen te zijn 6.
Dus om dat te doen minuut gaan hier en voeg een if-statement en alles wat we kunnen doen is te schrijven als deze tekst content.
Zodat de knop is geklikt op als de tekst inhoud is gelijk aan gemakkelijk.
Wat we gaan doen is zeggen gevoelloos vierkanten is gelijk aan drie L's aantal vierkanten is gelijk aan zes.
En dan zullen we de reset-functie die de gevoelloos pleinen zullen gebruiken zoals je hier kunt zien in onze reset-functie aan te roepen.
We gebruiken een aantal pleinen op te roepen onze genereren van willekeurige kleuren functie.
Dus moeten we een aantal pleinen bijgewerkt die we hier doen hebben.
Er is eigenlijk een kortere manier van schrijven van dit dat sommige mensen zijn grote fans van.
Het heet de ternaire operator.
Dus ik ga het eerst te schrijven en dan zal ik het hebben over hoe het werkt.
Dus deze tekst inhoud is gelijk aan gelijk gelijken.
Gemakkelijk vraagteken.
Numb pleinen is drie colon gevoelloos pleinen gelijk aan zes.
Dus dit een regel hier doet precies hetzelfde als deze vier lijnen hier.
Deze vijf lijnen.
Dus het is wel de ternaire operator.
Er zijn drie delen aan.
Het eerste wat is de toestand.
Zo kunt u dit leest alsof deze tekst inhoud is gelijk aan makkelijk dan is er geen vierkanten is gelijk aan 3 Anders is er geen vierkanten is gelijk aan 6.
Dus het is gewoon een manier van schrijven van dit.
En ik zal houden als dit.
Meestal als we gewoon snel een regel als statements waar we één waarde instelt om twee verschillende mogelijke opties is het een goed use case voor de ternaire operator.
We hebben nog steeds een probleem is echter dat we eigenlijk nooit verstopt.
Of het tonen van het juiste aantal pleinen.
Dus wat gebeurt er als ik te vernieuwen.
We beginnen op de hard mode.
Dat werkt prima.
Alles werkt hetzelfde.
Als ik op easy klik al hebben we nog zes vierkanten hier en je ziet de onderste drie gewoon niet kleuren te veranderen, omdat we alleen gegenereerd drie kleuren.
Dus wat we moeten doen in plaats van onze reset-functie moeten we rekening te houden met dat.
Zodat hier in plaats van deze lus waarin we de kleur van de kwadraten u wijzigt de kleur van de kleuren matrix exact overeenkomen.
Als er slechts drie items in de array colors wat we eigenlijk moeten doen is verbergen van de andere drie pleinen.
Dus ik ga om te schrijven dat met de instructie if en ik ga gewoon om te controleren of er een kleur te schilderen.
Ik doe ook iets anders.
Dus als er een kleur die we gaan schilderen of verander de achtergrondkleur van de kwadraten.
I van die kleur anders moeten we pleinen ik weer aan niets te veranderen.
En dat moet worden vormgegeven om te laten zien, net als dat.
En dus dat zal dan te verbergen voor ons.
Dus wat gebeurt er als ik op de eenvoudige knop klikt u op Ik heb een serie van kleuren met drie items werden doorlussen zes pleinen en een hercontrole.
Als er een kleur die overeenkomt met dat veld en de eerste drie zal zijn.
Dus zetten we de achtergrondkleur om de kleur van de array.
Maar de laatste drie kleuren die ik zal niet zijn.
Of daadwerkelijk zal worden undefined.
Er zal geen kleur daar.
Dus dat is vals.
En wat er gebeurt is dan zetten we het display niet zijn.
Dus laat ik je zien hoe dat werkt refresh.
Als ik klik op eenvoudig de onderste drie verdwijnen.
Blijf klikken makkelijk krijgen we drie nieuwe kleuren.
Laten we het spel spelen.
Daar gaan we.
Wij doen een probleem is echter dat als ik op een harde we wisselende alle zes pleinen om een ​​nieuwe Bactrim kleur hebben, maar we zijn niet het verbergen van de onderste drie zal doen rond dat te krijgen klik hebben, is vlak voordat we geven een nieuwe achtergrond kleur om de pleinen.
Ik ga om te gaan en opnieuw te laten zien.
Dus het gaat om pleinen Ik dacht stijl scherm is gelijk aan block.
Dus dat is hoe we hen terug te brengen.
En we gaan gewoon om dat te doen voor alle zes.
Het is geen big deal.
Dus als we hen een achtergrondkleur we gaan gewoon om altijd ervoor te zorgen dat ze eerst zichtbaar.
Dus nu als we vernieuwen en ze gaan te gemakkelijk hebben we drie spelen een spel.
Ik klik op hard.
Nu krijgen we zes bellers.
Laten we een spelletje spelen.
Daar gaan we op gemakkelijk en gaan we terug naar drie.
Okee.
Zodat u kunt zien we opgeruimd een veel code hier.
Dit was vroeger een stuk langer.
Het is als drie keer lang op zijn minst.
En twee verschillende aangeklikte luisteraars en nu onze code is relatief veelzijdig.
Als we wilden een middelzwaar knop toe te voegen alles wat we moeten doen is hier deze lijn waar we een nother aantal pleinen zou hebben.
Misschien willen we 5 vierkanten of we willen een super moeilijk niveau waar we hebben 10 pleinen we hoeven alleen maar om het aantal pleinen te veranderen en bellen met onze reset-functie naar de volgende plek waar we onze reset-functie kan gebruiken krijgen is eigenlijk als we op de reset-knop .
Dus alles wat we moeten doen is er vervangen alles in plaats van de reset-knop klikt Lisner met slechts reset net als dat.
Zodat drijft onze code veel.
We zijn net ontdoen van 10 of zo lijnen.
Dus laten we terug gaan sparen zonder haakjes.
Laten we naar de browser en zorg ervoor dat het werkt nog steeds.
Dus laten we een spelletje spelen.
Klik op play weer en het herstelt prima.
Laten we op eenvoudige spelen een ander spel en ook herstelt prima.
Okee.
Dus rijden we onze code nogal een beetje.