In questo video ci sono alcune piccole modifiche che voglio apportare e poi parlerò
di come potremmo rifattorizzarlo un po '.
Quindi il primo cambiamento è che quando vinceremo questo gioco.
Quindi vinceremo qui.
Eccoci e ricevo questo messaggio corretto e faccio nuovamente clic su Play.
Dice ancora corretto.
E vogliamo che si resetta, il che è un cambiamento davvero rapido.
quando clicchiamo di nuovo su Play, quindi dobbiamo cambiare lo span che abbiamo qui e renderlo appena vuoto.
Tutto quello che dobbiamo fare è trovare il codice che viene eseguito
Quindi andiamo a trovare che rendono questo schermo intero.
Quindi, quando clicchiamo su quel pulsante di reset che è proprio qui.
Tutto quello che dobbiamo fare è cambiare il nostro display che abbiamo chiamato display dei messaggi.
Quindi lo faremo qui da nessuna parte.
Il testo visualizzato dal testo aumenta il contenuto del testo è uguale alla stringa vuota.
E vediamo come va.
Ricaricare.
OK, basta fare clic finché non vinciamo.
OK, così dice corretto qui.
E se clicco di nuovo su Play, questo va via.
L'altro leggero cambiamento che voglio fare è che questo pulsante dovrebbe solo dire di nuovo giocare una volta
che l'utente vince.
Quindi aggiorno la pagina e dice nuovi colori che è il modo in cui vogliamo che funzioni.
Quindi se vinco, mi chiede se voglio giocare di nuovo.
E poi se clicco di nuovo su Play vogliamo cambiare il testo del pulsante per tornare a Nuovi colori.
Quindi davvero poca differenza, ma voglio solo mostrare di nuovo il gioco se l'utente ha appena vinto.
Quindi vai nel nostro codice e abbiamo bisogno di trovare il posto in cui l'utente vince il gioco che è proprio
qui quando l'utente fa clic sul colore scelto.
Quindi, quando l'utente fa clic sul colore giusto, cambiamo il testo del pulsante di ripristino per indicare il contenuto del
testo, ma poi quello che vogliamo fare è quando l'utente fa clic sul pulsante di reset che cambieremo.
Questo contenuto di testo punto per tornare a Nuovi colori e potremmo anche scrivere un pulsante di reset.
Ma è più facile farlo perché siamo all'interno del listener di eventi per il pulsante di ripristino.
E questo dovrebbe essere buono se ci rinfreschiamo velocemente finché non avremo quello giusto.
Vogliamo giocare di nuovo.
Sicuro.
Ora torna a Nuovi colori e ogni volta dice solo nuovi colori più e più volte e se vinco
è l'unica volta in cui viene riprodotto.
Quindi, una cosa davvero piccola, ma trovo davvero che distrae è che quando clicco su uno di questi
pulsanti ha questo contorno fastidioso intorno ad esso.
E questo è in realtà il nostro browser che lo fa.
E possiamo spegnerlo.
Non so se riesci a vederlo sul cast dello schermo ma c'è un contorno blu.
È piuttosto nocivo.
Quindi per sbarazzarci di questo andiamo al nostro foglio di stile e se selezioniamo i nostri pulsanti
proprio qui sotto possiamo solo scrivere delineare nessuno e tornare indietro e aggiornare.
Ora se clicchiamo non otteniamo quel contorno blu attorno ad esso.
Quindi questo è tutto ciò che volevo fare per la logica di gioco.
Ora vogliamo dedicare un po 'di tempo al refactoring del tuo codice.
Quindi torniamo indietro
La prima cosa che mi viene in mente è questo codice qui dove abbiamo un pulsante duro un pulsante
facile e l'ascoltatore per ognuno.
E sono molto simili nel loro modo di lavorare.
Tranne uno di loro funzionerà con tre quadrati.
L'altro funziona con sei ma altrimenti fanno praticamente la stessa cosa.
Quindi possiamo effettivamente ridurre questa duplicazione.
E invece di dare a ciascuno un'idea, quello che faremo è sbarazzarsi di quegli ID e dare
loro una lezione e condivideranno la stessa classe.
Quindi la classe verrà chiamata mode.
Quindi daremo loro la modalità di classe.
Ricorda un pulsante o qualsiasi oggetto può avere due classi.
Devono solo essere separati da spazi.
Quindi questo ha selezionato la classe e la classe.
OK.
Quindi ora andremo a cancellare questi due pulsanti qui e faremo un elenco di pulsanti chiamati pulsanti modalità e questo
sarà un documento che interroga il selettore.
Modalità Paul Datt.
Quindi questo ci dà due pulsanti.
Quindi andremo a scorrere i pulsanti di modalità.
Quindi abbiamo bisogno di var uguale a zero.
Pulsante di modalità meno che sorprendente.
E ciò che questo ci permetterà di fare è se in futuro vogliamo aggiungere una modalità di difficoltà media o normale
o una modalità di difficoltà super difficile.
quindi utilizziamo un ciclo contro Qui dobbiamo scrivere manualmente uno per ogni pulsante che aggiungiamo.
Non dobbiamo aggiungere ascoltatori extra perché li selezioniamo tutti e
OK.
Quindi finisci il ciclo qui.
Inoltre.
E quello che faremo è aggiungere un pulsante di modalità I punti per aggiungere un listener di eventi e per ora lo
lasceranno qui.
Prima di andare avanti, commenterò il codice solo per poter dire cosa sta succedendo dal
nostro nuovo codice e cosa vogliamo che succedano quando clicchiamo su uno di questi pulsanti.
La prima cosa che vogliamo succedere è che la classe selezionata venga applicata.
Quindi adesso è solo quando ci fermiamo.
Otteniamo quel colore che voglio che sia quando clicchiamo.
Quindi abbiamo bisogno di fare questo elenco di punti dot aggiungendo selezionato proprio come quello che è quello che abbiamo qui eccetto che lo stiamo
facendo per il pulsante facile e il pulsante duro.
Possiamo solo farlo a questo che si riferisce a ciò che è stato cliccato.
L'unico problema è che dobbiamo disattivarlo anche quello originale.
codice e scrivere i pulsanti della modalità punto zero punto elenco punto rimuovere selezionato e poi lo rimuoviamo dall'altro.
E per fare ciò basta aggiungere un po 'di
Quindi, perché ci sono solo due pulsanti.
Questo non è un problema.
Quello che stiamo facendo è rimuoverlo da entrambi i pulsanti solo per essere sicuri e quindi aggiungerlo
a quello che abbiamo appena cliccato.
Quindi ora se proviamo questo e aggiorniamo.
Puoi vedere che viene aggiunto solo a quello che abbiamo appena cliccato e che è
stato rimosso dall'altro.
Quindi, quello che dobbiamo fare dopo è aggiungere la maggior parte della logica qui per questi pulsanti.
Quindi abbiamo bisogno di capire quanti quadrati mostrare per scegliere nuovi colori e quindi dobbiamo scegliere un nuovo plettro per il colore, che è il colore
che stiamo cercando di fare clic su.
E infine, vogliamo aggiornare la pagina per riflettere i cambiamenti.
Quindi, per fare tutto questo, realizzerò una nuova funzione e quella funzione lo chiamerò semplicemente
reset e questo è qualcosa che useremo in alcuni punti, perché stiamo ripetendo questi
passaggi a lotto selezionando nuovi colori selezionando un nuovo colore selezionato dall'array dei colori, quindi aggiornando
la pagina per mostrare i nuovi colori e aggiornando questo display qui.
Lo facciamo sempre, quindi inserirò tutto ciò in una funzione.
Quindi quello che dobbiamo fare all'interno di questa funzione è che sto solo andando a copiarlo da qui.
L'abbiamo già fatto qui.
Stavo per copiare tutto questo nel nostro Reset proprio così.
E diamo un'occhiata a cosa sta succedendo.
Quindi, invece di ripristinare o generare i colori casuali a seconda della variabile dei quadrati intorpiditi e quindi stiamo
selezionando un nuovo colore, stiamo cambiando il contenuto dei display a colori.
Abbiamo questo contenuto di testo uguale a nuovi colori.
E che in realtà non funzionerà perché questo si riferiva al pulsante di reset.
E questo era all'interno dell'evento al centro per il pulsante di reset.
Ora siamo al posto di una funzione separata chiamata reset.
Quindi abbiamo bisogno di un hard code come pulsante di reset.
E poi stiamo cambiando il display dei messaggi per essere vuoti.
E poi passiamo in rassegna tutti i quadrati e stiamo aggiornando il loro colore.
E poi stiamo cambiando lo sfondo dell'8: 1 al blu.
E se chiamiamo questo invece di qui, eseguiamo il reset.
C'è un piccolo problema che è che non stiamo mai aggiornando i quadrati numb.
Quindi quando clicco sul pulsante facile, vuoi cambiare la variabile dei quadrati in tre.
Quando clicco sul pulsante duro, vuoi cambiarlo per essere 6.
Quindi per fare quel minuto vai qui e aggiungi un'istruzione if e tutto ciò che possiamo fare è scrivere se questo contenuto di testo.
Quindi il pulsante su cui è stato fatto clic se il contenuto del testo è uguale a facile.
Quello che faremo è dire che i quadrati intorpiditi è uguale a tre quadrati di numeri di L è uguale a sei.
E poi chiameremo la funzione di reset che userà i quadrati numb come potete vedere qui nella nostra
funzione di reset.
Stiamo usando alcuni quadrati per chiamare la nostra funzione di generare colori casuali.
Quindi abbiamo bisogno di avere alcuni riquadri aggiornati che stiamo facendo proprio qui.
C'è in realtà un modo più breve di scrivere questo che alcune persone sono grandi fan di.
Si chiama operatore ternario.
Quindi scriverò prima e poi parlerò di come funziona.
Quindi questo contenuto di testo è uguale a uguale a uguale a.
Facile punto interrogativo
I quadrati in numero uguale a tre quadrati di numero pari a sei sono pari a sei.
Quindi questa linea qui fa esattamente la stessa cosa di queste quattro linee proprio qui.
Queste cinque linee.
Quindi è chiamato l'operatore ternario.
Ci sono tre parti.
La prima cosa è la condizione.
Quindi puoi leggere questo come se il contenuto di questo testo fosse facile, quindi nessun quadrato è uguale a 3 altrimenti nessun quadrato
è uguale a 6.
Quindi è solo un modo di scrivere questo.
E lo terrò così.
Di solito se abbiamo solo una riga veloce se le istruzioni in cui impostiamo un valore su
due diverse opzioni possibili è un buon caso di utilizzo per l'operatore ternario.
Abbiamo ancora un problema, ma in realtà non ci stiamo mai nascondendo.
O mostrando il numero corretto di quadrati.
Quindi cosa succederà se mi rinfresco.
Iniziamo con la modalità difficile.
Funziona bene
Tutto funziona allo stesso modo.
Se clicco su easy anche se abbiamo ancora sei quadrati qui e vedrai i tre in basso, non
cambiare i colori perché abbiamo generato solo tre colori.
Quindi, cosa dobbiamo fare invece della nostra funzione di reset, dobbiamo renderne conto.
Quindi qui invece di questo ciclo in cui stiamo cambiando il colore dei quadrati per abbinare il
colore dell'array dei colori.
Se ci sono solo tre elementi nell'array dei colori, quello che dobbiamo effettivamente fare è nascondere gli altri
tre quadrati.
Quindi scriverò quello con un'istruzione if e vedrò solo se c'è un colore da dipingere.
Faccio anche qualcos'altro.
Quindi, se c'è un colore, stiamo andando a dipingere o cambiare il colore di sfondo dei quadrati.
Devo essere quel colore altrimenti dovremmo cambiare i quadrati che mostro per essere nessuno.
E che deve essere stilizzato per mostrare proprio così.
E così questo lo nasconderà per noi.
Quindi, cosa succede se clicco sul pulsante facile, ho una serie di colori con tre elementi che
passano attraverso sei riquadri e ricontrollano.
Se c'è un colore che corrisponde a quel quadrato e per i primi tre ci sarà.
Quindi impostiamo il colore dello sfondo come il colore dell'array.
Ma gli ultimi tre colori che sarò no.
O in realtà sarà indefinito.
Non ci sarà un colore lì.
Quindi questo è falso.
E ciò che succede è che impostiamo il display come none.
Quindi ti mostrerò come funziona.
Se clicco su easy, i tre in basso scompaiono.
Continuate a cliccare su easy otteniamo tre nuovi colori.
Giochiamo.
Eccoci.
Abbiamo un problema però se faccio clic su un disco stiamo cambiando tutti e sei i quadrati
per avere un nuovo colore Bactrim ma non ci stiamo nascondendo. I tre inferiori faranno per aggirare che è giusto prima di
dare un nuovo background colore ai quadrati.
Ho intenzione di andare avanti e mostrarli.
Quindi saranno i quadrati che ho pensato che la visualizzazione dello stile fosse uguale a un blocco.
Ecco come li riportiamo.
E lo faremo solo per tutti e sei.
Non è un grosso problema.
Quindi, se diamo loro un colore di sfondo, faremo sempre in modo che siano visibili per primi.
Quindi ora se ci aggiorniamo e se ne vanno, abbiamo tre giochi.
Clicco forte.
Ora riceviamo sei chiamanti.
Facciamo un gioco.
Andiamo a cliccare su easy e torniamo alle tre.
Tutto ok.
Quindi puoi vedere che abbiamo ripulito un sacco di codice qui.
Questo era molto più lungo.
È come tre volte almeno.
E due diversi listener cliccati e ora il nostro codice è relativamente versatile.
difficoltà, tutto ciò che dobbiamo fare è cambiare qui questa riga dove avremmo un altro numero di quadrati.
Se volessimo aggiungere un pulsante di media
Forse vogliamo 5 quadrati o vogliamo un livello super difficile in cui abbiamo 10 quadrati, dobbiamo solo cambiare i quadrati dei
numeri e chiamare la nostra funzione di reset per ottenere il posto successivo in cui possiamo usare la nostra funzione di reset è
in realtà quando clicchiamo sul pulsante di reset .
Quindi tutto ciò che dobbiamo fare è sostituire tutto invece del pulsante di ripristino, fare clic
su Lisner con il reset appena fatto.
In questo modo il nostro codice aumenta molto.
Abbiamo appena sbarazzato di circa 10 linee.
Quindi torniamo indietro senza parentesi.
Andiamo al browser e assicurati che funzioni ancora.
Quindi facciamo un gioco.
Clicca di nuovo su Play e si ripristina bene.
Facciamo clic su un altro gioco facile e si ripristina anche bene.
Tutto ok.
Quindi guidiamo il nostro codice un po '.
Stanno per sbarazzarsi di questi due solo così puoi vedere quanto accorciamo tutto