OK torneremo in questo video.
Lavoreremo su alcune nuove funzionalità.
Il primo è quando vinco il gioco.
Mi dice corretto.
E poi posso fare nuovamente clic su Play per ottenere nuovi colori e se non ho ancora vinto.
Ma voglio anche nuovi colori, perché per qualche motivo non mi piacciono i colori che ho.
Posso anche fare clic sul pulsante Nuovi colori.
nuovo colore casuale tra i sei colori casuali e torneremo alla modalità facile e difficile per ultimi.
Quindi, in pratica, abbiamo bisogno di un pulsante che ripristinerà il gioco, i nuovi colori selezioneranno un
Quindi questo pulsante fa la stessa cosa.
Il testo cambia però se abbiamo vinto il gioco e ha chiesto se vogliamo giocare di nuovo in modo che possiamo fare nuovamente
clic su Play e questo lo ripristinerà.
Ma posso anche fare clic su nuovi colori e anche questo lo ripristinerà.
Quindi questo è ciò su cui ci concentreremo.
E per iniziare ho intenzione di andare avanti e aggiungere il pulsante e aggiungere quella striscia che attraversa in
modo che la striscia conterrà questo pulsante per un nuovo colore o per giocare di nuovo.
E contiene il messaggio che abbiamo già.
E poi i due pulsanti che faremo più tardi.
Quindi se andiamo la prima cosa che dobbiamo fare abbiamo già un div, gli darò solo l'id di stripe
e quindi potremo usarlo.
E quindi abbiamo già la nostra durata all'interno che mostrerà qualcosa di simile o riprovare.
E qui dentro aggiungeremo il nostro pulsante e questo pulsante inizierà dicendo nuovi colori che possiamo salvare
e aggiornare.
OK, sembra tanto male come ci si aspetterebbe.
Andiamo avanti e aggiungiamo il colore di sfondo bianco e centriamo tutto in questo div Così il nostro div
è chiamato stripe.
Andiamo alle nostre C S e selezioneremo Strype che è un ID.
Quindi dobbiamo usare la striscia con un ripensamento.
E stiamo per impostare uno sfondo di colore di sfondo per essere bianco.
Ho intenzione di impostare l'altezza di 30 pixel in modo che abbiamo una div bella e alta
sono div relativamente alti e ho intenzione di impostare il testo allineato per essere centrale.
E ora, se ti rinfresco, ottieni un div bianco che attraversa tutto il percorso.
È un po 'più alto di quello che era.
Abbiamo un pulsante qui solo per qualsiasi cosa.
E se vinco o perdo o ottengo la risposta sbagliata c'è un intervallo che non riesci a vederlo.
E questo perché il testo di quella spanna è bianco.
Quindi quello che potresti pensare di fare è entrare nella nostra stripe div e dire che il
colore del testo dovrebbe essere nero ma sfortunatamente non funziona.
con l'idea di striscia dovrebbe essere nero di colore nero e tu penseresti OK che è snidante che
è super-specifico se puoi ripensare a le nostre prime lezioni e ID sulla specificità dei CSS sono molto specifiche.
E questo è un problema di specificità perché stiamo dicendo che con questa linea proprio qui tutto dentro
la cosa
Il fatto è che questo è l'impostazione dei colori per essere nero sul div con striscia ID.
E quindi stiamo impostando tutti gli span in modo che tu possa vedere qui il colore bianco in modo che l'impostazione sia bianca
e ciò lo rende più specifico perché in realtà stiamo prendendo di mira l'elemento stesso
anziché il genitore e se ne eredita il colore.
Quindi abbiamo alcune opzioni.
Per il momento, quello che farò è liberarsi di questo.
Non imposteremo più il colore per diventare bianchi e possiamo aggiornare e vedremo che questo non cambia colore è
ancora un bianco, anche se ci siamo sbarazzati della linea che diceva che tutti gli span sono
bianchi e questo è perché è all'interno di un H1 e eredita il colore del testo H1 che è bianco.
Lo stesso modo in cui questo intervallo qui è nero.
Ha ereditato il colore del testo del nero o solo il nero colorato normale dal div di striscia
che lo circonda, che puoi vedere qui di colore nero.
E questo è ciò che ci ha colpito.
OK.
Ora lavoriamo su questo pulsante per resettare il gioco, quindi per iniziare dobbiamo aggiungere un listener di eventi.
E prima che possiamo farlo, dobbiamo selezionare quel pulsante.
Quindi ho intenzione di dare quel pulsante e l'ID qui che chiameremo ID uguale a reset e quindi selezioneremo quel
pulsante di reset invece di un Javascript.
Quindi il pulsante di ripristino var equivale a documentare il selettore di query con la nostra ottava o reset.
E poi come sempre vorrei aggiungere il mio semplice ascoltatore di eventi di test.
Quindi il pulsante di reset aggiunge listener di eventi.
e quando facciamo clic su tutto ciò che faremo è fare un semplice pulsante di reset rapido di avviso proprio come quello essere aggiornato.
Fare clic
E se clicco su questo, ottengo la mia attenzione e questo significa che siamo a posto.
Quindi, in seguito, possiamo effettivamente lavorare sulla logica da resettare.
Quindi, cosa dobbiamo fare, scriviamo lo pseudo codice.
Quando fai clic su quel pulsante devi generare tutti i nuovi colori.
Abbiamo bisogno di scegliere un nuovo colore casuale dalla matrice e quindi abbiamo bisogno di cambiare i colori dei quadrati
sulla pagina.
Quindi, per generare tutti i nuovi colori, abbiamo già una funzione esistente che genera colori casuali.
Quindi diremo semplicemente che i colori ora equivalgono a generare colori casuali di sei.
Quindi selezioneremo un nuovo colore casuale, quindi scegli il colore ora è uguale a selezionare il metodo o la
funzione che abbiamo definito.
C'è ancora una cosa che dobbiamo effettivamente fare, che è cambiare questo colore del display in modo che corrisponda al nuovo colore
dei plettri.
Quindi diremo semplicemente cambiare la
visualizzazione del colore per abbinare il colore selezionato in modo che uno sia semplice.
pagina e proviamo a fare clic su nuovi colori, ciò che sta facendo sta generando sei nuovi colori.
Tutto quello che dobbiamo fare è dire che il contenuto del testo del display a colori equivale al colore selezionato e se
aggiorniamo la nostra
Non li stiamo ancora vedendo perché non abbiamo quel codice.
E poi seleziona uno di questi come colore selezionato e poi cambia quello che vediamo qui per abbinare il
colore picta.
Quindi ci dà un nuovo colore casuale lassù e sei colori casuali dietro le quinte.
Quindi l'ultimo pezzo è quello di riflettere quei sei nuovi colori sulla pagina e l'abbiamo già fatto prima.
passiamo in rassegna tutti i quadrati e cambiamo stile in modo che lo sfondo sia il colore.
Giù qui
Quindi inizierò semplicemente duplicando tutto questo qui e lo rifatteremo.
Ma per iniziare a mettere tutto qui.
Quindi passiamo in rassegna tutti i quadrati delle piazze per aggirare I plus più e poi tutto ciò che dobbiamo fare
è dire quadrati io stile che lo sfondo è uguale ai colori.
Salverò.
E se aggiorniamo e facciamo clic su nuovi colori, genera 60 colori casuali.
Ne sceglie uno.
Aggiorna il display per riflettere il colore dell'immagine e cambia tutti i sei quadrati per abbinare i
nuovi sei colori.
Quindi proviamo e vediamo se anche la nostra precedente logica regge.
OK.
Quindi questa è una discreta quantità di rosso.
Molto poco verde e una discreta quantità di blu.
Proviamo a cliccare su alcuni che non pensiamo siano corretti.
E ora andiamo per uno dei viola.
Quindi sembra un po 'più rosso il blu.
Quindi ho intenzione di indovinare questo e abbiamo ragione e sembra che le cose funzionino ancora bene.
Nuovi colori rapidi di nuovo.
Vogliamo resettare questo.
Questa è una cosa cosmetica davvero piccola.
Ma quando clicchiamo su nuovi colori dovremmo resettare lo schermo qui in modo che ritorni al nero
o a questo colore grigio scuro.
fare è che quando vogliamo che diciamo di giocare di nuovo come puoi vedere qui, allora vincerò qui.
L'altra cosa che vogliamo
Questo è molto verde.
Io vinco e mi dice di giocare di nuovo e fa la stessa cosa.
Funzionalmente non cambia in realtà solo noi e il nostro testo.
Quindi è semplice da fare.
Tutto quello che dobbiamo fare è trovare il codice per verificare se vinci.
È proprio qui.
E poi vogliamo solo cambiare il contenuto del testo di quel pulsante.
Quindi il pulsante è stato chiamato pulsante di ripristino.
Quindi, ripristina il pulsante che il contenuto del testo equivale a riprodurre di nuovo con un punto di domanda che aggiorna dice nuovi colori.
Ora proviamo a suonare uno di questi.
Quindi questo è molto rosso e molto verde e un po 'blu.
Quindi molto rosso e tanto verde ci darà un colore giallo.
Quindi restringiamo alcuni di essi.
E poi un po 'di blu lo renderà più leggero e luminoso.
Quindi se proviamo uno di questi come questo o questo vedrai che non sono del tutto corretti.
E questa è la nostra risposta qui e ci dice di giocare di nuovo.
E molto veloce e fa esattamente la stessa cosa.
L'ultima cosa che ho menzionato è il ritorno del colore di sfondo.
Quindi qui possiamo semplicemente farlo alla fine del pulsante di reset.
Stiamo per selezionare quell'H-1.
È un punto che abbiamo selezionato qui.
Quello è lo sfondo dial-up.
UPS è uguale.
Ed è proprio quello esadecimale 2 3 2 3 2 3 che è se ti dimentichi che potresti andare a cercare in SEE per valutare
il colore di sfondo del corpo.
O lo impostiamo qui quando eliminiamo uno dei colori se scegli il colore sbagliato.
Cambiamo il colore dello sfondo per essere lo stesso del corpo.
OK, aggiorniamo i nuovi colori.
Ora vinciamo.
Semplicemente in modo casuale, solo per il tempo necessario, facciamo nuovamente clic su Play e questo torna su uno
sfondo nero.
O lo sfondo grigio scuro.
OK, questo è tutto per questo video.
In seguito aggiungeremo i pulsanti per scegliere tra la modalità facile e quella difficile.
E poi, infine, modelleremo le cose in modo che sembrino belle