Ben tornato.
In questo video ci concentreremo sull'aggiunta dei pulsanti facili e difficili qui che avranno un impatto sulla
difficoltà del gioco.
Quindi, quando cariciamo la pagina in alto, è già selezionato e vediamo qui sei diversi pulsanti o sei
diversi quadrati.
E poi posso fare clic su easy e questo rimane selezionato.
E abbiamo solo tre quadrati tra cui scegliere.
E poi posso tornare al cuore.
Inizieremo aggiungendo i due pulsanti di cui abbiamo bisogno.
Quindi ho intenzione di entrare nel mio HMO e aggiungere due pulsanti.
Il primo diremo facile.
Il secondo dirà forte e si aggiornerà.
OK.
E per ora va bene.
Noterai che il nostro intervallo non occupa ancora spazio.
E vedo che c'è un po 'di testo.
Spinge quei bottoni via a concentrarsi sullo styling più tardi, ma c'è un elemento dello
stile che voglio mettere a fuoco e che lo fa apparire selezionato quando la pagina viene caricata
o quando scegliamo facile o difficile il pulsante corrispondente dovrebbe rimanere blu.
E il modo in cui lo facciamo è usare una classe e attivare e disattivare quella classe.
Quindi definirò una lezione qui e sarà più semplice di questo stile qui sarà solo
un colore.
Quindi il nostro colore di sfondo e la classe verranno chiamati selezionati perché è quello che stiamo facendo.
Stiamo aggiungendo la classe selezionata al pulsante selezionato.
E avrà solo uno sfondo impostato per iniziare.
E poi quello che faremo è dare la classe del pulsante della modalità hard uguale a quella selezionata.
E se aggiorniamo sul nostro codice puoi vedere che è impegnativo.
È orribile Sì, ma almeno ci mostra che siamo in modalità difficile.
Quindi, quello che vogliamo fare è aggiungere il codice che è un interruttore che quando cliccano su easy e quindi la parte
più difficile è mostrare i tre colori quando fai clic su easy e sui sei colori quando fai
clic su heart.
OK.
Iniziamo qui.
Quindi, per far funzionare effettivamente questi pulsanti, dobbiamo selezionarli nel nostro javascript e poi avere alcuni
listener veloci e fare alcuni ed eseguire del codice quando ognuno di essi viene cliccato.
Cerchiamo di rendere più facile la selezione e comincerò dando a ciascuno un ID facile.
DTN e poi hard ETN e cambieremo questo se vedrai delle bandiere rosse qui o se stai pensando che
stiamo usando troppe idee.
Lo rifatteremo in pochi istanti.
Ma inizieremo con due ID diversi.
Pulsante rapido Easy Button.
Vai al nostro javascript e selezionali.
Quindi, easy easy ETN equivale a documento doc query selector con Octa.
ETN facile.
Assicurati di capitalizzare le cose allo stesso modo.
Eccoci.
E la stessa cosa è dura e non so se l'hai colta in sublime.
a selezionarla tutte, ma io voglio solo queste due e sto andando a digitare piuttosto.
Se selezioni la parola easy e premi Kamandi, selezionerà automaticamente la prossima istanza
e potrò continuare
Quindi abbiamo due pulsanti e quindi possiamo fare qualcosa di simile.
Facile PTEN aggiungere listener di eventi.
Fare clic e tutto ciò che faremo è solo avvisare che il pulsante easy è stato chiuso proprio come questo.
Fai clic sul pulsante Avvia facile e assicurati che funzioni.
su Easy OK dice che il pulsante Easy ha fatto clic e quindi duplicheremo questo per il pulsante duro e diremo che
il pulsante duro è stato chiuso e l'aggiornamento facile funziona e dura ma ci dice che è stato fatto clic sul pulsante.
Quindi aggiorna fare clic
Quindi, piuttosto che farlo, lavoriamo per far sì che la classe selezionata rispecchi
quella selezionata.
Quindi, se clicchiamo sul pulsante facile, tutto quello che vogliamo fare è un semplice pulsante.
Aggiunta selezione elenco classe Doc e se si aggiorna ora faccio clic su facile.
Ha una classe selezionata.
Facile, ma il problema è che rimane ancora sul pulsante duro, quindi è facile da risolvere.
avere un hard button doc Cross list dot rimuoverlo e ora, se clicchiamo su easy, la modalità hard scompare.
Vogliamo solo
Ma se facciamo clic su di esso non abbiamo ancora questa logica, quindi possiamo risolvere
il problema semplicemente copiando questo codice e ora avremo i pulsanti rigidi senza classi che aggiungono l'elenco di classi di pulsanti facili selezionati che
rimuovono selezionati.
OK proviamolo.
Tutto ok.
Così ora abbiamo fatto la parte più semplice, che è i due pulsanti che mostrano quale
è attualmente selezionato e aggiorno e hard viene selezionato automaticamente perché abbiamo sei elementi.
Next up abbiamo bisogno di aggiungere la logica per cambiare effettivamente la difficoltà non solo lo stile di questi
pulsanti qui, ma per mostrare solo tre elementi o sei quadrati.
Quindi dobbiamo farlo prima di iniziare.
Controlliamo di nuovo sulla soluzione per vedere come funziona.
Quindi, se aggiorno e faccio clic su easy notice, otteniamo nuovi colori e dobbiamo farlo perché c'è il rischio
che io abbia sei colori qui e il colore selezionato qui potrebbe essere uno di questi tre che
quando clicco su easy quei tre vengono rimossi.
Quindi questo potrebbe essere un bel rompicapo.
Quindi, piuttosto che affrontarlo, sceglieremo tre nuovi colori.
Quindi il processo è che lo aggiorniamo.
Quindi il processo è quando clicco sul pulsante facile genereremo tre nuovi colori affinché l'array di
colori sceglierà un colore tra questi tre.
Stiamo andando ad aggiornare che appaiono con un colore selezionato.
Stiamo andando ad aggiornare i tre quadrati qui.
E la parte importante è che nascondiamo anche gli altri tre quadrati in modo che non li eliminiamo, li
nascondiamo semplicemente impostando che display non sia nessuno.
E poi la stessa cosa vale per il difficile.
Generiamo sei nuovi colori nell'array dei colori.
Ne scegliamo uno per essere le nostre scelte colorate.
Lo mostriamo qui.
Poi mostriamo i tre quadrati in basso e poi impostiamo ciascuno per avere un colore.
OK.
Quindi affrontiamo questo ora.
Prima di tutto, quando clicchiamo sul pulsante facile, iniziamo da lì.
Vogliamo generare nuovi colori in modo che i colori equivalgano a generare colori casuali questa volta 3.
E poi, una volta fatto ciò, avremo intenzione di scegliere un nuovo colore scelto in modo che il
colore scelto sia uguale al colore scelto.
Quindi, una volta ottenuti i nostri colori e il colore scelto, possiamo iniziare cambiando semplicemente il display qui
per mostrare il nuovo colore dell'immagine.
Quindi è facile come dire che il contenuto del testo visualizzato a colori equivale al colore selezionato.
E se ci aggiorniamo, avrò nuovi colori qui solo per mostrarti alcune cose.
detto prima, il colore sta cambiando e dietro le quinte c'è una matrice di colori che cambia pure.
Quando faccio clic su easy, come hai
Quindi vediamo quali sono i colori adesso e poi clicco sulla modalità facile e guardo a quali
colori sono di nuovo ed è diverso.
E ha anche scelto il colore è diverso.
Quindi ora parliamo di come nascondiamo i tre bottom div quando clicchiamo sulla modalità facile o possiamo nascondere i
primi tre.
Non importa.
cui lo faremo eseguendo il loop e impostando la proprietà threes in basso su none.
Ma ho intenzione di fare il terzo fondo nel modo in
Quindi lascia che ti mostri come funziona.
Vado a sceglierne uno.
Quindi, facciamo un selettore di query sui documenti tutto quadrato o quadrato e poi lavoriamo con il quinto.
Bene, in realtà il sesto con un indice di cinque e quindi impostare quella visualizzazione di stile per essere nessuno.
E vedrai che scompare.
E poi se voglio che ritorni, che farò se clicchiamo sulla modalità difficile, ho solo bisogno di dire stile.
Display uguale a lock.
Tutto ok.
Quindi andiamo avanti e implementiamo questo nel nostro codice il modo in cui raggiungere questo obiettivo, facendo il
ciclo di tutti e sei all'inizio.
E per i primi tre daremo loro un nuovo colore.
E per i tre inferiori li nasconderemo.
Quindi piuttosto che avere due anelli per farlo lo faremo subito.
Quindi per var I uguale a zero.
Ho solo meno della lunghezza.
Inoltre, trarremo vantaggio dal fatto che i colori contengono tre elementi.
Quindi faremo qualcosa del genere se i colori I.
Quindi se c'è un colore successivo, questo succederà nei primi tre.
Scriveremo quadrati con lo stile I colori dello sfondo sono uguali.
Quindi per i primi tre nel nostro caso, poiché i colori hanno solo tre elementi, passeremo in
rassegna tutti i quadrati e controlleremo se c'è un colore in quell'indice.
E se c'è, cambieremo il colore di quei primi tre.
Quindi assicuriamoci che funzioni.
Clicco su easy e vedrai solo i primi tre stanno cambiando.
Quindi siamo vicini.
Tutto ciò che vogliamo fare ora è nascondere i tre inferiori.
Quindi lo faremo con altro.
Piazze I stile per cui la visualizzazione è uguale a nessuna.
E se aggiorniamo e lo facciamo a schermo intero, se clicco sulla modalità facile, possiamo vedere che perdiamo il terzo inferiore
e che i colori dei primi tre stanno cambiando.
E proviamo a capire quale è questo.
Così centosessantatre rosso 125 verde e un po 'blu.
Eccoci.
Puoi rinfrescare provane ancora.
Abbiamo un piccolo problema mentre aggiorno alcuni di questi e faccio clic su modalità facile.
Stiamo generando solo tre colori qui.
Ma se clicco sul pulsante dei nuovi colori, ti mostrerò come sono i colori in questo momento.
Sono tre elementi.
Se clicco su nuovi colori e poi guardo i colori.
In realtà sono sei elementi e questo perché non teniamo traccia della modalità in cui ci troviamo.
Quindi quel codice è proprio qui sul pulsante di reset.
Diciamo solo che i colori equivalgono a generare colori casuali.
Quindi dobbiamo risolverlo alla fine.
Ma prima di farlo, prendiamo il nostro bottone duro in modo che ci rimandi a sei quadrati
e ognuno abbia il suo colore per farlo.
Prenderò solo un po 'di questo codice e lo duplicherò qui, che è sempre un brutto segno.
E questo è il motivo per cui andremo a rifattorizzarlo in un po '.
Quindi la prima cosa che voglio fare.
Sto solo andando a copiare tutto nei nostri colori di listener di eventi hard button.
Saranno sei colori scelti il ​​colore sarà lo stesso contenuto del testo di visualizzazione del colore è lo stesso.
E poi li analizzeremo tutti in questo ciclo.
Dobbiamo fare due cose diverse.
Il primo è assegnare un nuovo colore a ogni quadrato.
Ma dobbiamo anche essere sicuri che i tre siano nascosti nella parte inferiore.
if e dovremo solo impostare tutti i quadrati in modo che il colore di sfondo sia un colore.
Quindi per ora ci sbarazzeremo dell'istruzione
E tutti i quadrati avranno un display di blocco.
Quindi questo è un po 'dispendioso perché abbiamo bisogno solo degli ultimi tre tecnicamente e stiamo ripristinando
tutti loro come display block.
Ma questa è una cosa davvero secondaria su cui possiamo concentrarci più tardi.
Quindi vediamo se questo aggiornamento funziona ci dice che abbiamo un errore di sintassi sulla riga 36 Vediamo cosa
ci manca.
E abbiamo solo un rinforzo in più qui.
Quindi, se salviamo ora e aggiorniamo, abbiamo sei colori come sempre.
Se clicco facilmente, ne otteniamo tre.
Se clicco forte, ora torno alle sei.
Ho un nuovo colore qui e assicuriamoci che continui a funzionare.
Così facile difficile facile difficile quando vado in modalità difficile.
Facciamo nuovamente clic su nuovi colori.
Torna indietro per tornare facile e difficile.
Tutto ok.
E giochiamo a questo e vediamo se funziona.
Quindi scegli il colore è 196 170 57.
Quindi leggo molto verde e un po 'di blu.
Quindi questo è un sacco di rosso e verde è un colore giallo.
Quindi non sarà quello o quello.
Questo sarà molto veloce e sembra che stia funzionando bene.
Se clicco di nuovo facilmente torniamo a tre colori.
colore casuale su sei che potrebbe non esserci visualizzato che sta andando essere problematico per risolverlo
Il problema più pressante che ci attende è quando sono in modalità facile e faccio clic su Play
ancora per generare sei colori, non tre e selezionerà un
Tutto quello che dobbiamo fare è avere una variabile che tenga traccia di quale modalità ci troviamo.
Facile o difficile o il numero di quadrati tre o sei.
Quindi lo faremo qui.
Avremo una variabile chiamata numero di quadrati che inizierà alle 6 e dichiareremo semplicemente che qui sopra
i colori equivalgono a generare colori casuali del numero e facciamo in modo che diventi un numero di quadrati o
quadrati.
È un
po 'più facile e risparmia.
E poi dobbiamo sostituirlo in pochi posti.
Quindi, quando clicchiamo sulla modalità facile, vogliamo che i quadrati intorpiditi siano tre e quindi generiamo
colori casuali senza quadrati.
E poi più in basso quando clicchiamo sul pulsante duro, vogliamo che alcuni quadrati siano 6, quindi i quadrati insensibili sono uguali
a sei e quindi generano quadrati di colori casuali e poi ci sono alcuni altri posti qui quando clicchiamo su quel
pulsante di reset.
Vogliamo generare il numero corretto di colori che sarebbero anche i quadrati di Nahm.
Quindi dovrebbe occuparcene per noi se torniamo indietro e ci aggiorniamo.
Andiamo in modalità facile e vinceremo questo.
Quindi per lo più rosso un po 'blu.
Non questo.
Non quello.
Eccoci.
E se clicco di nuovo su Play assicuriamoci che quando digito i colori vedremo solo tre colori.
E se guardavo le speranze di colore scelte, sceglievo un colore, puoi vedere che è all'interno dell'array dei colori.
Quindi non dobbiamo più preoccuparci di questo.
La nostra logica ora funziona