OK, quindi riprendiamo da dove eravamo rimasti.
Inizieremo ad aggiungere alcuni comportamenti per quando fai clic sul colore giusto e quando
fai clic sul colore sbagliato.
Quindi iniziamo con quando scegli il colore sbagliato.
Quello che vogliamo fare è sfumare in modo che corrisponda al colore dello sfondo qui.
Quindi questo è in realtà piuttosto semplice.
È solo questione di scrivere questo stile punto che lo sfondo è uguale e quindi dobbiamo solo abbinare
il colore che abbiamo impostato nel nostro C Ss.
Quindi lo incolleremo e salveremo.
Proviamoci.
Facciamo clic su uno di quelli sbagliati.
Puoi vederlo svanire e se ho cliccato su quello giusto otteniamo ancora il nostro avviso.
OK, quindi mi aggiornerò.
Quindi è quello con cui inizieremo.
E l'altra cosa che vogliamo succedere è che vogliamo un display in modo da poter vedere qui proprio qui.
Ci sarà un display quindi se clicco su uno dei colori e dice di riprovare.
E se ho capito bene come qui, viene visualizzato correttamente e quindi si concentrerà sulle altre cose come cambiare
il colore.
Una volta che otteniamo quella prima parte.
Quindi aggiungiamo in questo paragrafo o l'intervallo in realtà è quello che è e farlo visualizzare il messaggio corretto.
Quindi torniamo al nostro HMO e aggiungeremo un altro div in e in realtà abbiamo tre o quattro pezzi
diversi che andranno qui alla fine.
Per ora sarà solo un piccolo intervallo che entra in quel div.
Quindi, come ho detto, sarà di più.
Per ora è solo l'intervallo che sarà vuoto per iniziare mentre aggiorno la pagina è possibile
vedere non c'è nessun messaggio qui.
Quindi andremo qui Ho una campata vuota e diamogli una I. D. e lo chiameremo semplicemente messaggio.
E in questo modo possiamo selezionarlo dal nostro Javascript.
Quindi andiamo al nostro javascript ora e selezionalo.
Quindi qui chiameremo la visualizzazione dei messaggi Farm uguale al documento e faremo un selettore di query sul selettore di query
e che chiameremo quel messaggio.
Abbiamo bisogno dell'ID.
Quindi abbiamo bisogno dell'arco per Thor.
E poi se l'utente indovina sbagliato.
Tutto quello che dobbiamo fare è scrivere il contenuto del testo del punto di visualizzazione dei messaggi equivale a riprovare.
E se ci aggiorniamo e fai clic su quello sbagliato, è davvero difficile da vedere.
Quindi dovremmo cambiare il colore di sfondo o il colore del testo.
Possiamo farlo qui.
Diremo solo che tutte le span dovrebbero avere il colore bianco e se siamo freschi.
Ora ho fatto clic su quello sbagliato.
Mi dice di riprovare.
OK.
E continuiamo a farlo finché non avrò quello giusto.
E otteniamo ancora questo avviso.
Quindi, se otteniamo quello corretto, quello che vorremmo fare è cambiare ciò che mostriamo in quel display dei messaggi.
Vogliamo cambiarlo per essere corretto.
Quindi il messaggio mostra che il contenuto
del testo è corretto.
Proprio così.
E ora se proviamo questo ci sbagliamo e proviamo ancora.
Abbiamo capito bene e ci dice corretto.
OK.
Quindi abbiamo quella logica di base lì ora dove stiamo controllando se abbiamo ragione o torto e stiamo
mostrando qualcosa.
La prossima cosa che potremmo fare è aggiungere la funzione dove, quando ottieni la risposta giusta, tutti i quadrati
cambiano colore per abbinare quella risposta.
Quindi qui fai clic sulla risposta giusta, tutti cambiano di livello.
E poi possiamo anche fare lo sfondo di questo H1.
Quindi la prima cosa che dobbiamo fare per farlo funzionare.
In realtà scriverò una funzione separata per farlo solo per mantenere il mio codice
un po 'più organizzato.
Cambia i colori e ci vorrà un singolo argomento per una stringa di colori e poi all'interno di
qui abbiamo bisogno di scorrere tutti i quadrati per cambiare ogni colore in modo che corrisponda al colore dato.
VAR I uguale a zero è inferiore alla lunghezza del colore o alla lunghezza del colore più il valore più.
Quindi, per passare in rassegna tutti i quadrati che abbiamo già fatto, solo una questione di quattro
E poi dentro è dove dovremo cambiare ogni colore e lo abbiamo già fatto prima.
Sono solo un colore
Ho ottenuto uno stile di sfondo duro uguale a quello che abbiamo fornito tecnicamente il nostro codice cambierà ogni singolo quadrato
in modo che corrisponda al colore.
Quindi includendo questo che è il colore corretto.
Lo sovrascriverà e lo cambierà nello stesso colore che è già.
qui, che è lo sfondo in stile del colore che è stato cliccato
Possiamo aggiungere del codice per risolvere il problema ma iniziamo con questo e poi dobbiamo chiamare questa funzione per cambiare i colori e dobbiamo passare il
colore corretto che è la variabile che abbiamo creato
E lo stiamo facendo.
Se lo hanno indovinato correttamente.
Quindi se salviamo e aggiorniamo vediamo se abbiamo errori.
No.
E ora è veloce.
Sbagliato.
Correggere e abbiamo un problema quando si fa clic sulla corretta ci dice che non è possibile impostare lo
sfondo di proprietà di indefinito se guardiamo a ciò che sta parlando di colori io stile lo sfondo.
Ovviamente abbiamo un problema qui perché sto facendo questo al nostro array di colori e questo non dovrebbe
essere il nostro colore.
Questa è la nostra gamma di colori.
Dovrebbe essere sulla matrice di quadrati che sono i quadrati che stiamo cercando di cambiare.
Quello che stavo facendo era l'array di colori solo le corde.
Quindi quadra la lunghezza e ora dovrebbe essere bello andare e tutti cambiano per il colore che è
stato selezionato proprio così.
Tutto ok.
Quindi, la prossima volta concentriamoci sull'ottenere i colori casuali nell'array e quindi scegliere un colore casuale
da quella matrice.
Quindi inizierò con la seconda cosa che seleziona un colore casuale invece di
renderlo automaticamente color tre per aiutarci a scegliere un elemento casuale da questo array.
In realtà sto per fare una funzione.
E la ragione per cui lo sto facendo è quella di ripulire il nostro codice, ma in
realtà useremo quella funzione in seguito perché ogni volta che iniziamo un nuovo gioco dobbiamo scegliere un nuovo colore.
Quindi è qualcosa che dovremo chiamare un paio di volte per farlo funzionare.
Inizierò chiamando la funzione che non esiste ancora.
Quindi ho intenzione di dire che il colore di pick è uguale e chiamiamolo.
Scegli il colore e quindi dobbiamo definire il colore scelto.
Quindi vengo quaggiù, fallo in fondo per la selezione delle funzioni.
Colore in questa funzione, dobbiamo fare due cose.
Uno è scegliere un numero casuale.
Quindi qualcosa come 0 o 1 o 2 fino all'ultimo indice di questo array.
E poi dobbiamo usare quel numero per accedere al colore da questo array e restituire quel colore.
Quindi inizieremo selezionando un numero casuale.
E il modo in cui selezioniamo un numero casuale in javascript è usando la matematica casuale e la matematica fuori
casuale sceglierà un numero compreso tra 0 e 1 e non ne include uno.
Quindi lascia che ti mostri quella matematica
non casuale ed è un decimale lungo e lungo.
Quindi, se volessimo generare un numero compreso tra 0 e 6, ad esempio per simulare un
Dayrell, faremmo matematica a caso e poi moltiplicarlo.
Nel nostro caso, se avessimo fatto solo 6 centesimi, non avremmo mai ottenuto un numero superiore a cinque, nove, nove, nove
e nove.
Quindi, se vogliamo che quel numero passi da uno in alto e lo comunichi a sei, potremmo moltiplicarlo
per sei e poi aggiungerne uno alla fine.
Ora possiamo arrivare fino a sei virgola novantanove e ottenere un numero intero.
che viene restituito dalla matematica moltiplicando casualmente per 6 aggiungendo 1 e quindi rimuovendo tutto dopo il punto decimale.
Abbiamo quindi bisogno di tagliare quel decimale così possiamo usare l'ultimo piano di matematica che è un altro metodo e che
prenderà semplicemente tutto ciò
E questo ci dà numeri casuali tra 1 e 6.
Come puoi vedere, ma non necessariamente vogliamo solo tra 1 e 6.
Alla fine questo array potrebbe avere solo tre elementi.
Come puoi vedere quando vado in modalità facile ci sono solo tre colori.
Quindi potrebbe avere tre e potrebbe avere sei.
quindi moltiplicarlo per la lunghezza dell'array e questo è OK perché ricorda che non è inclusivo.
Quindi useremo solo la lunghezza dell'array per generare il nostro colore in modo che sembrerà casuale
questa matematica penseremo di generare un numero compreso tra 0 e 1 e
Quindi, anche se la lunghezza dell'array è uno più dell'indice più alto.
Quindi la lunghezza è sei.
Ma il numero più alto che vogliamo è cinque.
Perché il numero casuale va solo tra 0 e 1.
Ma non include uno siamo in buona forma.
il punto decimale rimanente e poi, una volta ottenuto ciò, forniremo un numero casuale.
Quindi lo genereremo e poi faremo il calcolo matematico su quel piano dell'intera cosa che taglierà
La prossima cosa che dobbiamo fare è salvare questo in una variabile e quindi usare quella variabile per accedere a
un elemento dalla matrice in quell'indice.
Quindi, stiamo per dire restituire i colori casuali.
Quindi questo sceglie un numero casuale come tre e poi restituisce i colori di tre.
Tutto ok.
Quindi proviamo questo.
Abbiamo scelto il colore.
Stiamo chiamando pick up in alto qui.
Quindi, se aggiorno, dovremmo aspettarci che questo cambi e cambia mentre aggiorno.
Puoi vedere che a volte ottieni lo stesso perché ce ne sono solo sei e non cambiano mai,
ma cambia quasi ogni volta.
Ora controlliamo se la nostra logica veloce funziona allo stesso modo.
Quindi se clicco su questo è zero rosso zero verde e tutto blu.
Quindi proviamo a cliccare su cyan rosso.
Buona.
Se clicco su blu è corretto