Va bene bentornato.
Andiamo avanti e cominciamo su questo.
RG si sta indovinando l'applicazione di gioco.
Creerò il file h tim prima e il C S S e creerò questa semplice griglia.
Quindi non lo modifichiamo con i colori di sfondo e i caratteri e questo
piccolo ora sono qui inizieremo semplicemente con sei quadrati e daremo loro dei colori di sfondo, magari un
po 'di spazio tra di loro, ma non lo faremo fai cose come aggiungere gli angoli arrotondati ma
non aggiungeremo nessuna animazione.
La dissolvenza e la dissolvenza che tutto ciò che faremo è ottenere sei quadrati e poi aggiungeremo la logica di base degli
eventi rapidi e controlleremo se si ottiene il colore corretto e così via.
Quindi per prima cosa dobbiamo creare un vantaggio per lui che ho qui.
Ogni volta chiamo quel gioco colorato, quindi aggiungeremo il nostro team qui.
Il piatto della caldaia.
Dagli un titolo.
Farò un gioco a colori.
Andiamo avanti e aggiungiamo i sei quadrati.
Quindi li farò div.
Ognuno è un div con una classe di quadrati e useremo quella classe al quadrato per modellarli in seguito.
Va bene quindi faremo div classe uguale Square e non abbiamo bisogno di mettere nulla al suo interno
e ne avremo sei.
E poi solo per rendere questo pulitore ho intenzione di metterli tutti al posto di un altro div che possiamo
stilare in seguito.
Lo chiamerò semplicemente contenitore.
Quindi non farà nulla in anticipo.
Alla fine lo useremo per rendere il sito reattivo e per ridurre la rete.
Per ora li raggrupperemo insieme in modo da non avere solo 6 quadrati in giro.
OK, quindi abbiamo i nostri sei quadrati qui.
Se lo apriamo nel browser game a lui così vicino.
Non vediamo nulla, ovviamente per alcune ragioni.
Uno anche se abbiamo sei div che non hanno Con non c'è margine non c'è colore quindi
non vediamo nulla.
Quindi inizieremo disegnandoli in modo molto semplice.
Quindi è necessario aggiungere un foglio di stile, quindi collegherò prima il foglio di stile che non ho creato e lo renderò un
po 'più grande.
Quindi chiamerò il gioco a colori vedi SS e salva e poi crei quel file di colore C Ss e la prima cosa
che farò è aggiungere un colore di sfondo al nostro intero corpo.
Finora il colore di sfondo e il colore che userò è un codice esadecimale.
È 2 3 2 3 2 3 e salva assicurati che sia collegato.
Sì.
Quindi otteniamo il colore di sfondo corretto.
Avanti andiamo avanti e iniziamo a disegnare le nostre piazze.
Useremo la stessa strategia che usiamo per realizzare questo VSS per il sito portfolio fotografico in cui abbiamo
avuto quella griglia reattiva di immagini quadrate.
Erano tutti in bianco e nero.
Puoi usare la stessa idea qui.
Quindi il modo in cui lo faremo è che ognuno di questi è all'interno di un contenitore e ciascuno di
essi occupa il 30% di quel contenitore.
Quindi il contenitore va solo attorno a questi quadrati.
Non è l'intero corpo qui solo intorno ai quadrati.
Prendono il 30 percento e quindi abbiamo un margine tra di loro su tutti i lati.
1. 6 6 percento.
In modo che tutto sommato sia il 100 percento del contenitore.
Quindi faremo quella prima casella con il 30 percento.
E se possiamo lasciarlo e dargli uno sfondo, rendiamoli viola e salvati e
non vediamo nulla.
E la ragione che sta accadendo ti mostrerò se ispezioniamo le nostre vite sulla pagina.
Sono ancora vuoti.
Cosa dobbiamo fare
L'ultima volta che abbiamo avuto immagini e immagini abbiamo del contenuto in loro ma questi div sono vuoti.
Quindi aggiungeremo un po 'di spazio e useremo il fondo del padding.
Potremmo anche usare la parte superiore del padding, anche se in modo da riempire il fondo e anche il 30%.
Quindi se mi rinfresco.
OK.
Ora abbiamo sei quadrati anche se sono tutti su una linea che non è ciò che vogliamo.
Vogliamo che siano sulla stessa linea.
Quindi dobbiamo spostarli a sinistra, cosa che abbiamo fatto anche con la griglia dell'immagine.
Quindi fluttua a sinistra e risparmia il refresh.
E ora finiamo con questa enorme griglia qui.
Oh vai avanti e al margine in modo che tu possa vedere cosa sta succedendo.
Quindi avremo margine 1. 6 6 percento e risparmia.
Ora puoi vedere che abbiamo la nostra griglia qui e questa griglia occupa l'intero schermo.
Quindi lo cambierò un po '.
Non vogliamo che sia così enorme.
E quello che possiamo fare è usare quel container che abbiamo fornito a questo contenitore ID div.
Quindi se modifichiamo il div con l'idea di contenitore che selezioneremmo proprio così e possiamo iniziare
dicendo semplicemente che dovrebbe essere la sua larghezza massima.
E penso di essere andato per 600 pixel.
Possiamo giocare con quel numero.
Ora se aggiorno Ora puoi vedere che è molto più piccolo.
Quindi questo è parte di esso.
E poi, anche questo è Center.
Quindi avremo 2 margini.
0 auto.
Ricorda questo trucco il margine zero nella parte superiore e inferiore del contenitore e l'auto a sinistra ea destra lo
farà in modo che abbia le stesse dimensioni su entrambi i lati.
E ora abbiamo questa bella griglia centrale.
Tutto ok.
è nel nostro H-1, quindi avrò un H1 qui e dirò semplicemente il grande R.
E facciamo un'altra cosa che G. sii gioco dei colori e inizieremo così.
E se ci aggiorniamo, è davvero difficile da vedere.
Quindi rendiamolo bianco H-1 colore bianco e risparmia.
E inizieremo con quello.
Quindi ora usiamo alcuni javascript.
Stiamo andando a impostare javascript per dare a ciascuno di questi un colore diverso.
Quindi andiamo a creare un nuovo file e lo chiameremo gioco a colori.
J. S. e salvare.
E come vorrei sempre fare, aggiungiamo nel nostro avviso che dice connesso.
Ora aggiungiamo lo script in source equals gioco colorato.
Sì, salva la pagina e riceviamo il nostro avviso connesso.
OK quindi ridimensionerò la finestra lì.
Ora aggiungiamo il codice per dargli colori diversi.
Quindi nel risultato finale nel gioco finale.
Ogni volta che la pagina viene caricata, seleziona sei colori casuali e quindi assegna ciascun colore a uno dei div.
l'aspetto randomizzato e assegneremo solo sei colori sempre uguali.
Cominceremo con
E poi passeremo a randomizzarli.
Quindi andiamo al mio gioco a colori Sì e comincerò facendo una lista di colori e li chiamerò
semplicemente colori.
È un array.
E ricorda nel nostro prodotto finale questo sarà un elenco casuale di colori.
Per ora ho intenzione di aggiungere solo alcuni dei miei.
Quindi G-B e inizierò con tutto il rosso.
Quindi 2 5 5 0 0 e solo per renderlo leggibile per te, lo faremo tutto su linee separate.
Quindi ne avremo sei.
E il primo sarà tutto rosso e poi ne avremo un altro che è tutto rosso e tutto verde
che diventerebbe giallo.
E poi il prossimo sarà 0 rosso e tutto verde.
E poi quello successivo sarà zero o rosso o verde e tutto blu e poi lo farà anche.
Quindi leggiamo 0 verde 255 blu e poi faremo 255 rosso 0 verde 255 blu e questo ci darà una serie di
sei colori come stringhe.
E poi quello che vogliamo fare è selezionare tutti e sei di questi quadrati in loop e poi assegnare uno
di questi colori allo sfondo di ciascuno.
Quindi, per prima cosa, dobbiamo prima selezionare fino in fondo e lo chiameremo quadrato equivale a documento e abbiamo
molte scelte qui.
Userò un selettore di query tutto.
Quindi mi assicurerò di averne tutti e sei, anziché solo il primo.
E selezioneremo in base al quadrato della classe.
Se avessimo appena fatto il div, ricordiamo che abbiamo un contenitore div e non vogliamo selezionarlo.
Vogliamo solo questi sei quadrati quadrati così quadrati e poi passeremo attraverso quattro var pari a zero.
Io meno della lunghezza dei quadrati e io più il più invece di qui diremo poi i quadrati lo sfondo del punto di stile del
punto equals e questa è la parte interessante che prenderemo quell'occhio e useremo per accedere ai
colori.
O questo è Colt Sono qui con una piccola correzione che sto aggiungendo dopo il fatto.
Solo una breve nota.
È preferibile preferibilmente preferibile al colore di sfondo dello stile, in modo che il colore dello sfondo sia una parola con una C
maiuscola piuttosto che uno sfondo di punti stile che è quello che sto usando in questo video.
Così ogni volta che vedi lo sfondo stilizzato, cambialo in colore di sfondo.
E il motivo è che funzionerà in tutti i browser attualmente in stile, ma
lo sfondo non funziona in Firefox, quindi funziona tecnicamente con stile.
Ad esempio, lo sfondo funzionerà in Chrome e il gioco funziona, ma ho ricevuto un sacco di
domande su cosa sta succedendo in Firefox e questo è davvero il principale colore di sfondo in
stile colpevole.
Mi piacerebbe anche pensare a Del Anderson, uno degli studenti nei forum di
discussione per averlo indicato di recente, tornerò alla codifica.
Quindi, quello che stiamo facendo abbiamo sei quadrati e il nostro occhio passerà da 0 1 2 3 4 5 e passerà
attraverso ogni quadrato.
E poi quando arrivo al primo quadrato prenderò lo zero e gli darò il colore dello sfondo dei colori
zero che è proprio qui.
Quindi sarebbe giusto
E poi continuiamo e ne prendiamo uno per il secondo div e gli diamo il secondo colore con indice
1 e continuiamo a farlo fino alla fine.
che i div siano sulla pagina è l'ordine in cui saranno colorati usando questi colori dall'array.
Quindi stiamo praticamente andando in modo
E se salviamo il refresh, possiamo vedere che otteniamo i nostri sei colori base.
Quindi abbiamo il rosso ciano blu giallo verde magenta.
Quindi va bene per ora.
Ci concentreremo sulla randomizzazione dei colori in seguito.
Ma come anteprima, anche se dobbiamo fare è generare tre numeri tre numeri diversi da
0 a 255 e quindi li combiniamo.
Quindi sono solo tre canali diversi tutti randomizzati.
E poi li trasformiamo in un'unica grande stringa con r. g B e parentesi intorno a loro.
Ma per ora andremo con questi colori.
La prossima cosa che dobbiamo fare è ogni volta che la pagina viene caricata.
Ti mostro qui non solo vengono scelti sei colori.
Uno di questi colori è selezionato per essere l'obiettivo o il colore che stiamo cercando.
Quindi in questo caso questo è un colore scelto.
Quindi lo faremo anche noi e inizieremo a scrivere Portus con un codice e poi lo
randomizzeremo in seguito.
Quindi inizieremo col dire che il colore dell'oro è ciano.
Quindi questo è il quarto indice di colore di tre.
Quindi va bene che la variabile qui var ha scelto il colore equivale all'array di colori 3.
E questo sceglierà Suyin o questo colore qui R. G. B.
0 2 5 5 2 5 5 ed è una stringa, ricorda che quello che volevamo fare è aggiornare la nostra pagina in modo
tale che sia proprio qui come noi.
Ovviamente non in stile allo stesso modo, ma vogliamo dirlo R. G. B.
un po 'se puoi ripensare al gioco dello scorekeeper in cui abbiamo avuto un H1 e stiamo cambiando il.
E poi tra parentesi 0 2 5 5 5 5 per farlo dovremo cambiarlo o tirarlo fuori
Giocatore un giocatore due punteggi inizialmente.
Abbiamo appena avuto un aereo H-1 e quando lo abbiamo aggiornato ha sovrascritto automaticamente tutto il
resto.
Ma non vogliamo farlo.
Vogliamo mantenere il testo il grande gioco di colori e il nostro colore va solo qui, ma non vogliamo avere
un H-1 o qualcosa del genere perché quelli andrebbero su linee separate.
Quindi useremo una spanna come abbiamo fatto nel gioco scorekeeper e aggiungiamo semplicemente R. G. come un segnaposto.
essere lì
Quindi nulla sembra diverso ma se ispezioniamo.
Puoi vedere che ora abbiamo un intervallo che significa che puoi facilmente selezionarlo e manipolare il testo.
E gli daremo un'idea solo per renderlo ancora più semplice.
Quindi gli daremo l'id.
E chiamiamolo display a colori.
Poi andremo sul nostro javascript e selezioneremo quello.
del colore equivale al documento e avremo l'elemento per ID solo per l'elemento child sake di varietà per ID.
Finora la visualizzazione
Ed era a colori.
E lo salveremo e lo renderemo un po 'più grande.
Salva il file e quindi vogliamo aggiornare la visualizzazione a colori in modo che indichi questo colore che abbiamo scelto.
Quindi il contenuto del testo a colori equivale a selezionare il suo colore proprio come tale e verrà aggiornato.
E ora finiamo col nostro colore qui.
Grande.
Aggiungiamo ora la logica per gli eventi di clic.
Quindi quando clicco su uno di questi quadrati vogliamo eseguire un codice che capirà quale colore è il
quadrato su cui abbiamo cliccato.
E una volta che avremo quel colore, lo confronteremo con il colore pix.
Questo qui.
E se sono diversi, cambieremo il colore di sfondo di quel quadrato in modo che
vada allo stesso colore dello sfondo del corpo.
E se sono uguali, significa che il giocatore ne ha uno.
E dobbiamo fare alcune cose speciali.
E se sono diversi significa che un giocatore ha scelto il colore sbagliato e dovrà anche gestirlo
per iniziare.
Aggiungiamo solo un semplice gestore di eventi che avvisa solo quando clicchiamo.
Quindi aggiungeremo un gestore di eventi a ognuno dei quadrati in modo da poter utilizzare lo
stesso ciclo che abbiamo.
Quindi aggiungo un commento qui aggiungo i colori iniziali ai quadrati e poi la parte successiva sarà due
volte gli ascoltatori di clic.
Quindi un altro di questi quadrati I punto aggiunge listener di eventi.
È il momento per Click e la nostra funzione di callback.
Tutto ciò che faremo è di avvertire abbastanza un quadrato e assicurarci che tutti e sei ci avviseranno.
Fare clic con il tasto destro sul quadrato.
Va bene sembra che funzionino tutti proprio bene come devono.
Quindi ora quello che dobbiamo fare è prendere il colore del quadrato cliccato e quindi confrontare il colore per scegliere il colore.
Il colore variabile dell'immagine che abbiamo definito appare in modo da iniziare a ottenere quel colore.
Ricorda che possiamo usare questo che si riferisce all'elemento che è stato cliccato sul quadrato.
Quindi possiamo dire che questo stile di sfondo.
Facciamo un altro avviso qui e vediamo cosa otteniamo.
Quindi se clicco su quello rosso mi avverte.
RG B 2 5 5 0 0 e se clicco su assegna uno R G B 0 2 5 5 2 5 5.
Quindi sta funzionando.
Quindi quello che faremo ora è salvare questo ad una variabile che chiameremo semplicemente clic su colore proprio così.
E poi scriveremo un'istruzione IF per confrontare i colori di Quick, quindi se il
colore è triplo uguale scegli la bella filastrocca lì, se è così, ti avvertiremo correttamente.
E se non corrispondono, altrimenti avvertiremo male.
Facciamo un tentativo di aggiornamento.
Clicco su questo
Sbagliato.
E il vero test.
Clicco su quello giusto che dice corretto.
logica sta funzionando anche se non abbiamo nessuno dei colori casuali in ciò che facciamo è un array
di sei colori che sono codificati e assegniamo un colore a ogni quadrato e quindi stiamo selezionando.
Quindi la nostra
In questo caso ciano e questo sarà casuale, ma stiamo selezionando un colore che è la nostra risposta.
E quindi aggiungiamo un listener di eventi a ogni quadrato quando l'utente fa clic su quel quadrato o qualsiasi quadrato.
Confrontiamo il colore del quadrato dato con il colore dell'immagine se corrispondono.
Facciamo una cosa.
Se non corrispondono, facciamo qualcos'altro nel prossimo video, parleremo di ciò che effettivamente faremo
se corrispondessero.
E cosa facciamo se non corrispondono.