Welkom terug.
In deze video gaan we om zich te concentreren op het toevoegen van de gemakkelijke en de harde toetsen hier, dat zal invloed hebben op de moeilijkheidsgraad van het spel.
Dus toen we de pagina laadt moeilijk is reeds geselecteerd en zien we zes verschillende knoppen hier of zes verschillende pleinen.
En dan kan ik op eenvoudig is en dat blijft geselecteerd.
En we hebben slechts drie pleinen om uit te kiezen.
En dan kan ik terug naar het hart.
We gaan beginnen met het toevoegen van de twee knoppen die we nodig hebben.
Dus ik ga in mijn HMO te gaan en toe te voegen in twee knoppen.
De eerste die we zullen zeggen gemakkelijk.
De tweede zal zeggen hard en zal vernieuwen.
OK.
En dat ziet er prima voor nu.
U zult merken onze overspanning is nog geen toegang tot iedere ruimte.
En ik zie dat er wat tekst verschijnt.
Het duwt deze knoppen weg zal later richten op de styling, maar er is één element van de styling die ik wil concentreren op die wordt waardoor het lijkt geselecteerd wanneer de pagina wordt geladen of wanneer we kiezen makkelijk of moeilijk de bijbehorende knop moet blauw blijven.
En de manier waarop we dat gebruikt een klasse en draaien die klasse en uitgeschakeld.
Dus ik ga een klas hier te definiëren en het gaat om eenvoudiger dan deze stijl styling hier slechts gaat om een ​​kleur te zijn.
Dus onze achtergrondkleur en de klasse zal worden genoemd gekozen, want dat is wat we doen.
We voegen de geselecteerde klasse aan de knop die geselecteerd is.
En het is gewoon gaat om een ​​achtergrond set aan jou om te starten.
En dan wat we gaan doen is gewoon geven de hard mode knop klasse gelijk gekozen.
En als we frissen op onze code kun je zien dat hard bezig.
Het is afschuwelijk Ja, maar het op zijn minst laat ons zien dat we op hard mode.
Dus dan wat we willen doen is de code dat is een schakelaar die wanneer ze op gemakkelijk en dan is het lastigste deel toont de drie kleuren wanneer u klikt op de gemakkelijke en de zes kleuren wanneer u klikt op het hart.
OK.
Laten we hier beginnen.
Dus om deze knoppen eigenlijk werken we nodig hebben om ze in onze javascript te selecteren en dan moet een aantal snelle luisteraars en doe wat en lopen wat code bij elk van hen wordt geklikt.
Dus laten we het gemakkelijker maken om te kiezen en ik ga om te beginnen door ze elk een ID gemakkelijk te geven.
DTN en dan harde ETN en we zullen het veranderen van deze als u een rode vlaggen hier ziet of als u denkt dat we het gebruik van te veel ideeën.
We zullen refactoring dit in slechts een paar momenten.
Maar we gaan beginnen met twee verschillende ID's.
Easy Button harde toets.
Ga naar onze javascript en selecteer ze.
Dus var gemakkelijk ETN gelijk document doc vraag selector met Octa.
Gemakkelijk ETN.
Zorg ervoor dat we kapitaliseren dingen hetzelfde.
Daar gaan we.
En hetzelfde voor hard en ik weet niet of je gevangen die in subliem.
Als je het woord eenvoudig te selecteren en je raakt Kamandi het zal dan automatisch de volgende aanleg en ik kan blijven doen om ze allemaal te selecteren, maar ik wil gewoon die twee en ik ga hard typen plaats.
Dus hebben we twee knoppen en dan kunnen we zoiets doen.
Gemakkelijk PTEN voegen evenement luisteraar.
Klik en alles wat we gaan doen is gewoon alert dat de gemakkelijke knop werd gestopt net als dit.
Alert eenvoudig knop geklikt en ervoor te zorgen dat dat werkt.
Dus we refresh klik op OK Makkelijk zegt Gemakkelijk knop geklikt en dan zullen we dit voor harde knop dupliceren en we zullen zeggen dat de harde knop is te stoppen en te vernieuwen eenvoudig werkt nog steeds en hard, maar het vertelt ons dat de harde knop is geklikt.
Dus in plaats van gewoon te doen het werk dat te laten aan het verkrijgen van de klasse van de geselecteerde klasse om na te denken welke is geselecteerd.
Dus als we klik op de knop gemakkelijk alles wat we willen doen is eenvoudig te drukken.
Doc klasse lijst toe te voegen geselecteerd en als we nu vernieuwen ik klik op easy.
Het heeft een geselecteerde klasse.
Eenvoudig, maar het probleem is dat het nog steeds op de harde toets dus dat is eenvoudig op te lossen.
We willen gewoon een harde knop doc Cross lijst dot verwijderen en nu als we op gemakkelijk de hard mode verdwijnt.
Maar als we op de harde we nog steeds niet dat de logica, zodat we kunnen dat oplossen door gewoon het kopiëren van deze code over en we zullen nu moeten harde toetsen klassenloze dat add geselecteerde makkelijk knop klasse lijst die verwijderen geselecteerd.
OK laten we testen het uit.
Okee.
Dus hebben we nu het gemakkelijker deel gedaan wat de twee knoppen tonen welke momenteel is geselecteerd en ik verfrissen en hard wordt automatisch geselecteerd, want we hebben zes elementen.
Next up moeten we de logica toe te voegen aan de moeilijkheid daadwerkelijk te veranderen niet alleen de stijl van deze knoppen hier, maar slechts drie elementen of zes vierkanten tonen.
Dus we moeten doen dat de volgende voordat we aan de slag.
Laten we eens kijken terug op de oplossing om te zien hoe het werkt.
Dus als ik te vernieuwen en ik op eenvoudige mededeling dat we nieuwe kleuren te krijgen en we hebben om dat te doen, want er is een risico dat ik zes kleuren hier en de kleur die hier gekozen is wellicht een van deze drie dat wanneer ik op gemakkelijke deze drie zijn verwijderd.
Dus dat zou een mooi spel breken bug.
Dus in plaats van deal met dat we gewoon gaan om drie nieuwe kleuren te kiezen.
Zodat het proces we frissen.
Dus het proces is wanneer ik op de eenvoudige knop klikt gaan we het genereren van drie nieuwe kleuren voor de array colors gaan één kleur uit deze drie plukken.
We gaan update die met een geplukt kleur verschijnen.
We gaan naar de drie pleinen hier te werken.
En het belangrijkste is dat we ook verbergen van de drie andere pleinen, zodat we niet te verwijderen we gewoon verbergen ze door het instellen van display om niet zijn.
En dan Hetzelfde geldt voor hard.
Genereren we zes nieuwe kleuren in de array colors.
We halen één van onze oogsten te worden gekleurd.
Wij tonen dat hier.
Dan laten we drie vakjes onderaan en stel elk een kleur.
OK.
Dus laten we nu aan te pakken dit.
Allereerst toen we klik op de knop gemakkelijk laten we daar beginnen.
We gaan willen nieuwe kleuren te genereren, zodat kleuren gelijk aan het genereren van willekeurige kleuren ditmaal 3.
En dan een keer hebben we dat gedaan gaan we willen een nieuw geplukt kleur te kiezen dus kozen kleur gelijk kiezen kleur, net als dat.
Dus zodra we onze kleuren en onze geplukt kleur kunnen we beginnen met alleen het veranderen van het display hier om de nieuwe foto's te laten zien kleur.
Dus dat is net zo eenvoudig als zeggen kleurenscherm tekstinhoud evenaart geplukt kleur.
En als we frissen ik ga wat nieuwe kleuren hier gewoon om te laten zien een paar dingen.
Wanneer ik op makkelijk als je eerder vermeld de kleur verandert en achter de schermen is er een kleuren array die ook verandert.
Dus laten we eens kijken welke kleuren is op dit moment en klik ik op easy mode en ik kijk naar welke kleuren weer is en het is anders.
En het pakte ook de kleur is anders.
Dus nu laten we praten over hoe we het verbergen van de drie onderste divs toen we op easy mode of kunnen we de top drie te verbergen.
Het maakt niet uit.
Maar ik ga naar de onderste drie de manier waarop we dat zullen doen is door het doorlussen en het instellen van de onderste drieën weer te geven onroerend goed voor niemand te zijn.
Dus laat me zien hoe dat werkt.
Ik ga gewoon naar een van ze op te halen.
Dus laten we een document vraag selector allemaal vierkant of een vierkant en dan werken met de vijfde.
Nou eigenlijk de zesde met een index van vijf en stel die stijl beeldscherm niet zijn.
En je zult zien dat het verdwijnt.
En dan, als ik wil dat het terug te komen die ik zal als we op hard mode Ik moet gewoon stijl te zeggen.
Weergave gelijk slot.
Okee.
Dus laten we gaan door en de uitvoering van deze in onze code in de manier waarop zal dit te bereiken is door het doorlopen van alle zes op het eerste.
En voor de eerste drie gaan we ze een nieuwe kleur te geven.
En voor de onderste drie gaan we om ze te verbergen.
Dus in plaats van twee lussen te doen dat we het in een keer zal doen.
Dus voor var ik gelijk is aan nul.
Ik heb net minder dan pleinen uit lengte.
Plus plus we gaan om te profiteren van het feit dat de kleuren heeft drie items in het.
Dus we gaan iets doen als dit als de kleuren I.
Dus als er een volgende kleur dus dit zal gebeuren op de eerste drie.
We gaan pleinen I stijl de achtergrond is gelijk aan kleur te schrijven.
Dus voor de eerste drie in ons geval, want kleuren heeft slechts drie punten gaan we lus door alle pleinen en controleren of er een kleur op die index.
En als er gaan we de kleur van de eerste drie te veranderen.
Dus laten we Laten we ervoor zorgen dat werkt.
Ik klik op gemakkelijk en je ziet alleen de top drie zijn aan het veranderen.
Dus we zijn in de buurt.
Alles wat we willen doen is nu verbergen van de onderste drie.
Dus we zullen dat doen anders.
Squares I stijl die vertoning gelijk none.
En als we vernieuwen en maken het volledige scherm als ik op easy mode kun je zien dat we verliezen de onderste drie en de kleuren van de top drie zijn aan het veranderen.
En laten we proberen om erachter te komen welke dit is.
Dus honderd drieënzestig rood 125 groen en een beetje van blauw.
Daar gaan we.
U kunt vernieuwen proberen een paar meer.
We hebben wel een klein probleem als ik een aantal van deze te vernieuwen en ik klik op easy mode.
We alleen het genereren van drie kleuren hier.
Maar als ik op de knop nieuwe kleuren op, dus ik zal je laten zien welke kleuren eruit ziet nu.
Het is drie items.
Als ik klik op nieuwe kleuren al en dan kijk ik naar kleuren.
Het is eigenlijk zes items en dat is omdat we niet het bijhouden van die modus die we op.
Zodat de code is hier op de reset-knop.
We zijn net zeggen kleuren is gelijk aan willekeurige kleuren te genereren.
Dus moeten we uiteindelijk vast te stellen dat.
Maar voordat we dat doen laten we ons harde knop, zodat het zet ons terug naar zes pleinen en elk heeft zijn eigen kleur om dat te doen.
Ik ga slechts enkele van deze code te nemen en te dupliceren het naar beneden hier wat altijd een slecht teken.
En dat is waarom we dit gaan refactoren in slechts een klein beetje.
Dus het eerste wat ik wil doen.
Ik ga gewoon om al het in onze harde knop event listener kleuren kopiëren.
Het gaat om zes kleuren zijn pikt kleur zal hetzelfde zijn kleurendisplay tekstinhoud is hetzelfde.
En dan gaan we lus door ze allemaal in deze lus.
We moeten twee verschillende dingen te doen.
De eerste is om een ​​nieuwe kleur voor elke vierkante wijzen.
Maar we hebben ook potentieel moeten ervoor zorgen dat de drie zijn unhidden aan de onderkant.
Dus we gaan om zich te ontdoen van de if voor nu en we gaan gewoon om alle pleinen ingesteld op een achtergrondkleur om kleuren te zijn.
En alle pleinen zal een weergave van blok hebben.
Dus dit is een beetje verspilling, omdat we alleen technisch moeten de laatste drie en we zijn het resetten van alle van hen om het display blok.
Maar dat is een heel klein ding dat we kunnen richten op later.
Dus laten we eens zien of dit werkt refresh vertelt ons dat we hebben een syntax error on line 36 Laten we eens kijken wat we missen.
En we hebben net een extra accolade hier.
Dus als we nu op te slaan en te vernieuwen we hebben zes kleuren, zoals we altijd hebben.
Als ik klik op easy krijgen we drie.
Als ik hard op ik terug ga nu naar zes.
Ik krijg een nieuwe kleur hier en laten we maar zorg ervoor dat die blijft werken.
Zo makkelijk harde gemakkelijk moeilijk als ik naar hard mode.
Laten we klikt u nogmaals op de nieuwe kleuren.
Ga terug naar eenvoudig terug naar de harde eenvoudig en hard te gaan.
Okee.
En laten we dit te spelen en te zien of het werkt.
Dus kies kleur is 196 170 57.
Dus veel lees veel groen en een beetje blauw.
Dus dat is veel rood en groen is een gele kleur.
Dus het gaat niet om die ene of die ene zijn.
Dat men gaat dit echt snel zijn en dat het lijkt alsof het werkt prima.
Als ik op easy klik gaan we weer terug naar drie kleuren.
Het meest urgente probleem waarmee ons is echter wanneer ik in easy mode en ik klik op het spel nogmaals dit gaat om het genereren van zes kleuren niet drie en het gaat om een ​​willekeurige kleur te kiezen van de zes die niet mogen worden weergeven van ons die gaat problematisch vast mee zijn.
Alles wat we moeten doen is een variabele die houden van wat mode dat we op houdt.
Makkelijk of moeilijk of het aantal pleinen drie of zes.
Dus we zullen dat doen hier op.
We zullen een variabele met de naam aantal pleinen en dat begint om 6 en we zullen gewoon verklaren dat hier en zeggen kleuren is gelijk aan het genereren van willekeurige kleuren van aantal en laten we het aantal velden of pleinen.
Het is een beetje makkelijker als dat en op te slaan.
En dan moeten we vervangen dat in een paar plaatsen.
Dus toen we op easy mode u wilt gevoelloos vierkanten zijn drie en dan het genereren we willekeurige kleuren zonder pleinen.
En dan verder naar beneden toen we op de harde toets willen we een aantal pleinen tot 6 zo gevoelloos pleinen gelijk aan zes en dan het genereren van willekeurige kleuren pleinen en dan is er nog een paar andere plaatsen hier toen we op dat resetknop.
We willen het juiste aantal kleuren die zou zijn Nahm pleinen daar ook te genereren.
Dus dat moet zorgen voor het voor ons als we terug te gaan en te vernieuwen.
We gaan naar easy mode en laten we winnen deze.
Dus meestal rood een weinig blauw.
Niet deze.
Niet die.
Daar gaan we.
En als ik op play klik nogmaals laten we zeker wanneer ik kleuren typen we slechts drie kleuren te zien.
En als ik keek naar pakte kleur hoopt pakte een kleur die je kunt zien dat het inwendige van de array colors.
Zodat we niet zorgen te maken over dat niet meer.