1
00:00:00,180 --> 00:00:01,330
Va bene bentornato.

2
00:00:01,530 --> 00:00:03,330
Andiamo avanti e cominciamo su questo.

3
00:00:03,330 --> 00:00:05,160
RG si sta indovinando l'applicazione di gioco.

4
00:00:05,220 --> 00:00:10,270
Creerò il file h tim prima e il C S S e creerò questa semplice griglia.

5
00:00:10,290 --> 00:00:14,460
Quindi non lo modifichiamo con i colori di sfondo e i caratteri e questo

6
00:00:14,820 --> 00:00:19,980
piccolo ora sono qui inizieremo semplicemente con sei quadrati e daremo loro dei colori di sfondo, magari un

7
00:00:19,980 --> 00:00:25,110
po 'di spazio tra di loro, ma non lo faremo fai cose come aggiungere gli angoli arrotondati ma

8
00:00:25,110 --> 00:00:26,340
non aggiungeremo nessuna animazione.

9
00:00:26,420 --> 00:00:31,710
La dissolvenza e la dissolvenza che tutto ciò che faremo è ottenere sei quadrati e poi aggiungeremo la logica di base degli

10
00:00:31,710 --> 00:00:34,780
eventi rapidi e controlleremo se si ottiene il colore corretto e così via.

11
00:00:34,950 --> 00:00:37,970
Quindi per prima cosa dobbiamo creare un vantaggio per lui che ho qui.

12
00:00:37,980 --> 00:00:42,910
Ogni volta chiamo quel gioco colorato, quindi aggiungeremo il nostro team qui.

13
00:00:43,110 --> 00:00:44,070
Il piatto della caldaia.

14
00:00:44,430 --> 00:00:45,370
Dagli un titolo.

15
00:00:45,420 --> 00:00:47,090
Farò un gioco a colori.

16
00:00:47,910 --> 00:00:50,450
Andiamo avanti e aggiungiamo i sei quadrati.

17
00:00:50,610 --> 00:00:51,790
Quindi li farò div.

18
00:00:51,810 --> 00:00:57,090
Ognuno è un div con una classe di quadrati e useremo quella classe al quadrato per modellarli in seguito.

19
00:00:57,510 --> 00:01:05,610
Va bene quindi faremo div classe uguale Square e non abbiamo bisogno di mettere nulla al suo interno

20
00:01:05,610 --> 00:01:07,380
e ne avremo sei.

21
00:01:07,380 --> 00:01:12,660
E poi solo per rendere questo pulitore ho intenzione di metterli tutti al posto di un altro div che possiamo

22
00:01:12,660 --> 00:01:13,410
stilare in seguito.

23
00:01:13,560 --> 00:01:15,490
Lo chiamerò semplicemente contenitore.

24
00:01:15,810 --> 00:01:18,210
Quindi non farà nulla in anticipo.

25
00:01:18,240 --> 00:01:22,510
Alla fine lo useremo per rendere il sito reattivo e per ridurre la rete.

26
00:01:22,530 --> 00:01:26,640
Per ora li raggrupperemo insieme in modo da non avere solo 6 quadrati in giro.

27
00:01:26,850 --> 00:01:28,970
OK, quindi abbiamo i nostri sei quadrati qui.

28
00:01:29,160 --> 00:01:33,270
Se lo apriamo nel browser game a lui così vicino.

29
00:01:33,600 --> 00:01:36,420
Non vediamo nulla, ovviamente per alcune ragioni.

30
00:01:36,430 --> 00:01:42,360
Uno anche se abbiamo sei div che non hanno Con non c'è margine non c'è colore quindi

31
00:01:42,360 --> 00:01:43,390
non vediamo nulla.

32
00:01:43,710 --> 00:01:46,520
Quindi inizieremo disegnandoli in modo molto semplice.

33
00:01:46,710 --> 00:01:52,800
Quindi è necessario aggiungere un foglio di stile, quindi collegherò prima il foglio di stile che non ho creato e lo renderò un

34
00:01:52,800 --> 00:01:53,700
po 'più grande.

35
00:01:53,820 --> 00:02:04,650
Quindi chiamerò il gioco a colori vedi SS e salva e poi crei quel file di colore C Ss e la prima cosa

36
00:02:04,650 --> 00:02:10,110
che farò è aggiungere un colore di sfondo al nostro intero corpo.

37
00:02:10,140 --> 00:02:17,600
Finora il colore di sfondo e il colore che userò è un codice esadecimale.

38
00:02:17,730 --> 00:02:23,960
È 2 3 2 3 2 3 e salva assicurati che sia collegato.

39
00:02:24,120 --> 00:02:24,510
Sì.

40
00:02:24,630 --> 00:02:26,810
Quindi otteniamo il colore di sfondo corretto.

41
00:02:26,820 --> 00:02:31,730
Avanti andiamo avanti e iniziamo a disegnare le nostre piazze.

42
00:02:32,040 --> 00:02:38,100
Useremo la stessa strategia che usiamo per realizzare questo VSS per il sito portfolio fotografico in cui abbiamo

43
00:02:38,100 --> 00:02:40,410
avuto quella griglia reattiva di immagini quadrate.

44
00:02:40,410 --> 00:02:41,640
Erano tutti in bianco e nero.

45
00:02:41,670 --> 00:02:43,400
Puoi usare la stessa idea qui.

46
00:02:43,410 --> 00:02:49,770
Quindi il modo in cui lo faremo è che ognuno di questi è all'interno di un contenitore e ciascuno di

47
00:02:49,770 --> 00:02:51,870
essi occupa il 30% di quel contenitore.

48
00:02:51,870 --> 00:02:55,000
Quindi il contenitore va solo attorno a questi quadrati.

49
00:02:55,020 --> 00:02:58,100
Non è l'intero corpo qui solo intorno ai quadrati.

50
00:02:58,140 --> 00:03:02,360
Prendono il 30 percento e quindi abbiamo un margine tra di loro su tutti i lati.

51
00:03:02,540 --> 00:03:04,180
1. 6 6 percento.

52
00:03:04,320 --> 00:03:07,770
In modo che tutto sommato sia il 100 percento del contenitore.

53
00:03:08,040 --> 00:03:13,880
Quindi faremo quella prima casella con il 30 percento.

54
00:03:14,460 --> 00:03:22,140
E se possiamo lasciarlo e dargli uno sfondo, rendiamoli viola e salvati e

55
00:03:22,140 --> 00:03:24,060
non vediamo nulla.

56
00:03:24,150 --> 00:03:29,820
E la ragione che sta accadendo ti mostrerò se ispezioniamo le nostre vite sulla pagina.

57
00:03:29,850 --> 00:03:31,400
Sono ancora vuoti.

58
00:03:31,410 --> 00:03:32,610
Cosa dobbiamo fare

59
00:03:32,640 --> 00:03:38,480
L'ultima volta che abbiamo avuto immagini e immagini abbiamo del contenuto in loro ma questi div sono vuoti.

60
00:03:38,640 --> 00:03:42,280
Quindi aggiungeremo un po 'di spazio e useremo il fondo del padding.

61
00:03:42,330 --> 00:03:49,000
Potremmo anche usare la parte superiore del padding, anche se in modo da riempire il fondo e anche il 30%.

62
00:03:49,410 --> 00:03:50,680
Quindi se mi rinfresco.

63
00:03:51,080 --> 00:03:51,940
OK.

64
00:03:52,290 --> 00:03:57,480
Ora abbiamo sei quadrati anche se sono tutti su una linea che non è ciò che vogliamo.

65
00:03:57,480 --> 00:03:59,280
Vogliamo che siano sulla stessa linea.

66
00:03:59,610 --> 00:04:03,420
Quindi dobbiamo spostarli a sinistra, cosa che abbiamo fatto anche con la griglia dell'immagine.

67
00:04:03,420 --> 00:04:06,480
Quindi fluttua a sinistra e risparmia il refresh.

68
00:04:06,750 --> 00:04:09,400
E ora finiamo con questa enorme griglia qui.

69
00:04:09,670 --> 00:04:12,990
Oh vai avanti e al margine in modo che tu possa vedere cosa sta succedendo.

70
00:04:13,020 --> 00:04:19,590
Quindi avremo margine 1. 6 6 percento e risparmia.

71
00:04:19,790 --> 00:04:25,630
Ora puoi vedere che abbiamo la nostra griglia qui e questa griglia occupa l'intero schermo.

72
00:04:25,670 --> 00:04:27,530
Quindi lo cambierò un po '.

73
00:04:27,530 --> 00:04:29,400
Non vogliamo che sia così enorme.

74
00:04:29,690 --> 00:04:35,270
E quello che possiamo fare è usare quel container che abbiamo fornito a questo contenitore ID div.

75
00:04:35,450 --> 00:04:43,910
Quindi se modifichiamo il div con l'idea di contenitore che selezioneremmo proprio così e possiamo iniziare

76
00:04:43,910 --> 00:04:48,770
dicendo semplicemente che dovrebbe essere la sua larghezza massima.

77
00:04:48,770 --> 00:04:51,200
E penso di essere andato per 600 pixel.

78
00:04:51,200 --> 00:04:52,510
Possiamo giocare con quel numero.

79
00:04:52,540 --> 00:04:56,350
Ora se aggiorno Ora puoi vedere che è molto più piccolo.

80
00:04:56,690 --> 00:04:57,810
Quindi questo è parte di esso.

81
00:04:58,070 --> 00:05:00,030
E poi, anche questo è Center.

82
00:05:00,350 --> 00:05:03,000
Quindi avremo 2 margini.

83
00:05:03,380 --> 00:05:04,420
0 auto.

84
00:05:04,550 --> 00:05:09,860
Ricorda questo trucco il margine zero nella parte superiore e inferiore del contenitore e l'auto a sinistra ea destra lo

85
00:05:09,860 --> 00:05:13,100
farà in modo che abbia le stesse dimensioni su entrambi i lati.

86
00:05:13,130 --> 00:05:15,330
E ora abbiamo questa bella griglia centrale.

87
00:05:15,500 --> 00:05:16,400
Tutto ok.

88
00:05:16,400 --> 00:05:22,400
è nel nostro H-1, quindi avrò un H1 qui e dirò semplicemente il grande R.

89
00:05:22,400 --> 00:05:27,920
E facciamo un'altra cosa che G. sii gioco dei colori e inizieremo così.

90
00:05:28,160 --> 00:05:31,110
E se ci aggiorniamo, è davvero difficile da vedere.

91
00:05:31,370 --> 00:05:37,440
Quindi rendiamolo bianco H-1 colore bianco e risparmia.

92
00:05:37,820 --> 00:05:39,610
E inizieremo con quello.

93
00:05:39,620 --> 00:05:41,810
Quindi ora usiamo alcuni javascript.

94
00:05:41,810 --> 00:05:45,340
Stiamo andando a impostare javascript per dare a ciascuno di questi un colore diverso.

95
00:05:45,650 --> 00:05:50,830
Quindi andiamo a creare un nuovo file e lo chiameremo gioco a colori.

96
00:05:50,970 --> 00:05:53,360
J. S. e salvare.

97
00:05:53,360 --> 00:05:58,870
E come vorrei sempre fare, aggiungiamo nel nostro avviso che dice connesso.

98
00:05:58,880 --> 00:06:04,670
Ora aggiungiamo lo script in source equals gioco colorato.

99
00:06:04,750 --> 00:06:10,290
Sì, salva la pagina e riceviamo il nostro avviso connesso.

100
00:06:10,790 --> 00:06:13,550
OK quindi ridimensionerò la finestra lì.

101
00:06:13,550 --> 00:06:16,400
Ora aggiungiamo il codice per dargli colori diversi.

102
00:06:16,580 --> 00:06:18,770
Quindi nel risultato finale nel gioco finale.

103
00:06:18,770 --> 00:06:25,870
Ogni volta che la pagina viene caricata, seleziona sei colori casuali e quindi assegna ciascun colore a uno dei div.

104
00:06:26,150 --> 00:06:30,350
l'aspetto randomizzato e assegneremo solo sei colori sempre uguali.

105
00:06:30,350 --> 00:06:31,250
Cominceremo con

106
00:06:31,400 --> 00:06:33,800
E poi passeremo a randomizzarli.

107
00:06:33,800 --> 00:06:39,680
Quindi andiamo al mio gioco a colori Sì e comincerò facendo una lista di colori e li chiamerò

108
00:06:39,680 --> 00:06:40,430
semplicemente colori.

109
00:06:40,430 --> 00:06:41,190
È un array.

110
00:06:41,360 --> 00:06:45,610
E ricorda nel nostro prodotto finale questo sarà un elenco casuale di colori.

111
00:06:45,680 --> 00:06:48,820
Per ora ho intenzione di aggiungere solo alcuni dei miei.

112
00:06:48,980 --> 00:06:52,050
Quindi G-B e inizierò con tutto il rosso.

113
00:06:52,070 --> 00:06:59,790
Quindi 2 5 5 0 0 e solo per renderlo leggibile per te, lo faremo tutto su linee separate.

114
00:06:59,900 --> 00:07:02,240
Quindi ne avremo sei.

115
00:07:02,420 --> 00:07:08,710
E il primo sarà tutto rosso e poi ne avremo un altro che è tutto rosso e tutto verde

116
00:07:08,710 --> 00:07:09,670
che diventerebbe giallo.

117
00:07:09,830 --> 00:07:16,030
E poi il prossimo sarà 0 rosso e tutto verde.

118
00:07:16,970 --> 00:07:27,790
E poi quello successivo sarà zero o rosso o verde e tutto blu e poi lo farà anche.

119
00:07:27,830 --> 00:07:40,130
Quindi leggiamo 0 verde 255 blu e poi faremo 255 rosso 0 verde 255 blu e questo ci darà una serie di

120
00:07:40,130 --> 00:07:42,680
sei colori come stringhe.

121
00:07:42,680 --> 00:07:48,770
E poi quello che vogliamo fare è selezionare tutti e sei di questi quadrati in loop e poi assegnare uno

122
00:07:48,770 --> 00:07:51,110
di questi colori allo sfondo di ciascuno.

123
00:07:51,290 --> 00:07:58,640
Quindi, per prima cosa, dobbiamo prima selezionare fino in fondo e lo chiameremo quadrato equivale a documento e abbiamo

124
00:07:58,640 --> 00:07:59,710
molte scelte qui.

125
00:07:59,720 --> 00:08:02,010
Userò un selettore di query tutto.

126
00:08:02,390 --> 00:08:05,810
Quindi mi assicurerò di averne tutti e sei, anziché solo il primo.

127
00:08:05,990 --> 00:08:08,930
E selezioneremo in base al quadrato della classe.

128
00:08:09,440 --> 00:08:13,930
Se avessimo appena fatto il div, ricordiamo che abbiamo un contenitore div e non vogliamo selezionarlo.

129
00:08:14,000 --> 00:08:23,030
Vogliamo solo questi sei quadrati quadrati così quadrati e poi passeremo attraverso quattro var pari a zero.

130
00:08:23,450 --> 00:08:35,310
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

131
00:08:35,420 --> 00:08:43,010
punto equals e questa è la parte interessante che prenderemo quell'occhio e useremo per accedere ai

132
00:08:43,010 --> 00:08:43,710
colori.

133
00:08:44,750 --> 00:08:49,990
O questo è Colt Sono qui con una piccola correzione che sto aggiungendo dopo il fatto.

134
00:08:50,130 --> 00:08:51,080
Solo una breve nota.

135
00:08:51,330 --> 00:08:58,650
È preferibile preferibilmente preferibile al colore di sfondo dello stile, in modo che il colore dello sfondo sia una parola con una C

136
00:08:58,710 --> 00:09:04,180
maiuscola piuttosto che uno sfondo di punti stile che è quello che sto usando in questo video.

137
00:09:04,350 --> 00:09:08,230
Così ogni volta che vedi lo sfondo stilizzato, cambialo in colore di sfondo.

138
00:09:08,400 --> 00:09:13,590
E il motivo è che funzionerà in tutti i browser attualmente in stile, ma

139
00:09:13,590 --> 00:09:17,880
lo sfondo non funziona in Firefox, quindi funziona tecnicamente con stile.

140
00:09:17,910 --> 00:09:23,160
Ad esempio, lo sfondo funzionerà in Chrome e il gioco funziona, ma ho ricevuto un sacco di

141
00:09:23,160 --> 00:09:28,490
domande su cosa sta succedendo in Firefox e questo è davvero il principale colore di sfondo in

142
00:09:28,670 --> 00:09:29,200
stile colpevole.

143
00:09:29,400 --> 00:09:34,320
Mi piacerebbe anche pensare a Del Anderson, uno degli studenti nei forum di

144
00:09:34,320 --> 00:09:37,450
discussione per averlo indicato di recente, tornerò alla codifica.

145
00:09:37,500 --> 00:09:45,300
Quindi, quello che stiamo facendo abbiamo sei quadrati e il nostro occhio passerà da 0 1 2 3 4 5 e passerà

146
00:09:45,300 --> 00:09:46,420
attraverso ogni quadrato.

147
00:09:46,560 --> 00:09:51,890
E poi quando arrivo al primo quadrato prenderò lo zero e gli darò il colore dello sfondo dei colori

148
00:09:51,890 --> 00:09:53,300
zero che è proprio qui.

149
00:09:53,340 --> 00:09:54,360
Quindi sarebbe giusto

150
00:09:54,630 --> 00:10:00,780
E poi continuiamo e ne prendiamo uno per il secondo div e gli diamo il secondo colore con indice

151
00:10:00,780 --> 00:10:03,330
1 e continuiamo a farlo fino alla fine.

152
00:10:03,330 --> 00:10:08,010
che i div siano sulla pagina è l'ordine in cui saranno colorati usando questi colori dall'array.

153
00:10:08,490 --> 00:10:10,420
Quindi stiamo praticamente andando in modo

154
00:10:10,680 --> 00:10:16,170
E se salviamo il refresh, possiamo vedere che otteniamo i nostri sei colori base.

155
00:10:16,710 --> 00:10:20,740
Quindi abbiamo il rosso ciano blu giallo verde magenta.

156
00:10:20,970 --> 00:10:22,330
Quindi va bene per ora.

157
00:10:22,500 --> 00:10:24,730
Ci concentreremo sulla randomizzazione dei colori in seguito.

158
00:10:24,870 --> 00:10:30,420
Ma come anteprima, anche se dobbiamo fare è generare tre numeri tre numeri diversi da

159
00:10:30,420 --> 00:10:32,960
0 a 255 e quindi li combiniamo.

160
00:10:33,210 --> 00:10:36,180
Quindi sono solo tre canali diversi tutti randomizzati.

161
00:10:36,180 --> 00:10:40,340
E poi li trasformiamo in un'unica grande stringa con r. g B e parentesi intorno a loro.

162
00:10:40,590 --> 00:10:42,720
Ma per ora andremo con questi colori.

163
00:10:42,720 --> 00:10:46,210
La prossima cosa che dobbiamo fare è ogni volta che la pagina viene caricata.

164
00:10:46,300 --> 00:10:49,640
Ti mostro qui non solo vengono scelti sei colori.

165
00:10:49,740 --> 00:10:55,590
Uno di questi colori è selezionato per essere l'obiettivo o il colore che stiamo cercando.

166
00:10:55,590 --> 00:10:58,490
Quindi in questo caso questo è un colore scelto.

167
00:10:58,500 --> 00:11:03,540
Quindi lo faremo anche noi e inizieremo a scrivere Portus con un codice e poi lo

168
00:11:03,540 --> 00:11:04,310
randomizzeremo in seguito.

169
00:11:04,410 --> 00:11:08,610
Quindi inizieremo col dire che il colore dell'oro è ciano.

170
00:11:08,790 --> 00:11:11,940
Quindi questo è il quarto indice di colore di tre.

171
00:11:11,970 --> 00:11:20,070
Quindi va bene che la variabile qui var ha scelto il colore equivale all'array di colori 3.

172
00:11:20,800 --> 00:11:23,900
E questo sceglierà Suyin o questo colore qui R. G. B.

173
00:11:23,910 --> 00:11:31,380
0 2 5 5 2 5 5 ed è una stringa, ricorda che quello che volevamo fare è aggiornare la nostra pagina in modo

174
00:11:31,380 --> 00:11:33,690
tale che sia proprio qui come noi.

175
00:11:33,990 --> 00:11:38,030
Ovviamente non in stile allo stesso modo, ma vogliamo dirlo R. G. B.

176
00:11:38,040 --> 00:11:45,960
un po 'se puoi ripensare al gioco dello scorekeeper in cui abbiamo avuto un H1 e stiamo cambiando il.

177
00:11:45,960 --> 00:11:52,990
E poi tra parentesi 0 2 5 5 5 5 per farlo dovremo cambiarlo o tirarlo fuori

178
00:11:53,010 --> 00:11:55,670
Giocatore un giocatore due punteggi inizialmente.

179
00:11:56,040 --> 00:12:02,310
Abbiamo appena avuto un aereo H-1 e quando lo abbiamo aggiornato ha sovrascritto automaticamente tutto il

180
00:12:02,310 --> 00:12:02,840
resto.

181
00:12:03,030 --> 00:12:04,160
Ma non vogliamo farlo.

182
00:12:04,170 --> 00:12:10,320
Vogliamo mantenere il testo il grande gioco di colori e il nostro colore va solo qui, ma non vogliamo avere

183
00:12:10,320 --> 00:12:13,970
un H-1 o qualcosa del genere perché quelli andrebbero su linee separate.

184
00:12:14,040 --> 00:12:20,070
Quindi useremo una spanna come abbiamo fatto nel gioco scorekeeper e aggiungiamo semplicemente R. G. come un segnaposto.

185
00:12:20,070 --> 00:12:21,180
essere lì

186
00:12:21,180 --> 00:12:24,320
Quindi nulla sembra diverso ma se ispezioniamo.

187
00:12:25,110 --> 00:12:30,180
Puoi vedere che ora abbiamo un intervallo che significa che puoi facilmente selezionarlo e manipolare il testo.

188
00:12:30,510 --> 00:12:33,250
E gli daremo un'idea solo per renderlo ancora più semplice.

189
00:12:33,510 --> 00:12:34,950
Quindi gli daremo l'id.

190
00:12:35,220 --> 00:12:37,850
E chiamiamolo display a colori.

191
00:12:39,040 --> 00:12:41,720
Poi andremo sul nostro javascript e selezioneremo quello.

192
00:12:41,890 --> 00:12:50,230
del colore equivale al documento e avremo l'elemento per ID solo per l'elemento child sake di varietà per ID.

193
00:12:50,230 --> 00:12:51,400
Finora la visualizzazione

194
00:12:51,730 --> 00:12:53,940
Ed era a colori.

195
00:12:54,610 --> 00:12:57,330
E lo salveremo e lo renderemo un po 'più grande.

196
00:12:57,610 --> 00:13:04,640
Salva il file e quindi vogliamo aggiornare la visualizzazione a colori in modo che indichi questo colore che abbiamo scelto.

197
00:13:05,050 --> 00:13:17,880
Quindi il contenuto del testo a colori equivale a selezionare il suo colore proprio come tale e verrà aggiornato.

198
00:13:17,920 --> 00:13:20,500
E ora finiamo col nostro colore qui.

199
00:13:20,500 --> 00:13:21,030
Grande.

200
00:13:21,130 --> 00:13:23,280
Aggiungiamo ora la logica per gli eventi di clic.

201
00:13:23,350 --> 00:13:28,660
Quindi quando clicco su uno di questi quadrati vogliamo eseguire un codice che capirà quale colore è il

202
00:13:28,840 --> 00:13:30,470
quadrato su cui abbiamo cliccato.

203
00:13:30,640 --> 00:13:34,350
E una volta che avremo quel colore, lo confronteremo con il colore pix.

204
00:13:34,360 --> 00:13:35,430
Questo qui.

205
00:13:35,740 --> 00:13:40,360
E se sono diversi, cambieremo il colore di sfondo di quel quadrato in modo che

206
00:13:40,360 --> 00:13:42,740
vada allo stesso colore dello sfondo del corpo.

207
00:13:43,030 --> 00:13:46,930
E se sono uguali, significa che il giocatore ne ha uno.

208
00:13:46,930 --> 00:13:48,570
E dobbiamo fare alcune cose speciali.

209
00:13:48,640 --> 00:13:52,930
E se sono diversi significa che un giocatore ha scelto il colore sbagliato e dovrà anche gestirlo

210
00:13:53,680 --> 00:13:54,320
per iniziare.

211
00:13:54,370 --> 00:13:58,580
Aggiungiamo solo un semplice gestore di eventi che avvisa solo quando clicchiamo.

212
00:13:58,870 --> 00:14:03,100
Quindi aggiungeremo un gestore di eventi a ognuno dei quadrati in modo da poter utilizzare lo

213
00:14:03,100 --> 00:14:04,140
stesso ciclo che abbiamo.

214
00:14:04,360 --> 00:14:13,660
Quindi aggiungo un commento qui aggiungo i colori iniziali ai quadrati e poi la parte successiva sarà due

215
00:14:15,850 --> 00:14:18,720
volte gli ascoltatori di clic.

216
00:14:18,760 --> 00:14:23,700
Quindi un altro di questi quadrati I punto aggiunge listener di eventi.

217
00:14:24,350 --> 00:14:28,720
È il momento per Click e la nostra funzione di callback.

218
00:14:29,860 --> 00:14:37,830
Tutto ciò che faremo è di avvertire abbastanza un quadrato e assicurarci che tutti e sei ci avviseranno.

219
00:14:37,860 --> 00:14:39,600
Fare clic con il tasto destro sul quadrato.

220
00:14:39,610 --> 00:14:44,130
Va bene sembra che funzionino tutti proprio bene come devono.

221
00:14:44,350 --> 00:14:55,950
Quindi ora quello che dobbiamo fare è prendere il colore del quadrato cliccato e quindi confrontare il colore per scegliere il colore.

222
00:14:55,960 --> 00:15:01,560
Il colore variabile dell'immagine che abbiamo definito appare in modo da iniziare a ottenere quel colore.

223
00:15:01,840 --> 00:15:06,450
Ricorda che possiamo usare questo che si riferisce all'elemento che è stato cliccato sul quadrato.

224
00:15:06,580 --> 00:15:10,460
Quindi possiamo dire che questo stile di sfondo.

225
00:15:10,780 --> 00:15:15,060
Facciamo un altro avviso qui e vediamo cosa otteniamo.

226
00:15:15,070 --> 00:15:18,310
Quindi se clicco su quello rosso mi avverte.

227
00:15:18,310 --> 00:15:25,510
RG B 2 5 5 0 0 e se clicco su assegna uno R G B 0 2 5 5 2 5 5.

228
00:15:25,720 --> 00:15:26,850
Quindi sta funzionando.

229
00:15:27,220 --> 00:15:34,630
Quindi quello che faremo ora è salvare questo ad una variabile che chiameremo semplicemente clic su colore proprio così.

230
00:15:35,020 --> 00:15:41,260
E poi scriveremo un'istruzione IF per confrontare i colori di Quick, quindi se il

231
00:15:42,390 --> 00:15:48,770
colore è triplo uguale scegli la bella filastrocca lì, se è così, ti avvertiremo correttamente.

232
00:15:49,590 --> 00:15:55,690
E se non corrispondono, altrimenti avvertiremo male.

233
00:15:57,240 --> 00:16:00,170
Facciamo un tentativo di aggiornamento.

234
00:16:00,290 --> 00:16:01,390
Clicco su questo

235
00:16:01,410 --> 00:16:02,330
Sbagliato.

236
00:16:02,640 --> 00:16:03,210
Sbagliato.

237
00:16:03,210 --> 00:16:04,370
E il vero test.

238
00:16:04,400 --> 00:16:07,310
Clicco su quello giusto che dice corretto.

239
00:16:07,350 --> 00:16:13,110
logica sta funzionando anche se non abbiamo nessuno dei colori casuali in ciò che facciamo è un array

240
00:16:13,110 --> 00:16:18,600
di sei colori che sono codificati e assegniamo un colore a ogni quadrato e quindi stiamo selezionando.

241
00:16:18,600 --> 00:16:19,640
Quindi la nostra

242
00:16:19,650 --> 00:16:25,050
In questo caso ciano e questo sarà casuale, ma stiamo selezionando un colore che è la nostra risposta.

243
00:16:25,320 --> 00:16:30,570
E quindi aggiungiamo un listener di eventi a ogni quadrato quando l'utente fa clic su quel quadrato o qualsiasi quadrato.

244
00:16:30,570 --> 00:16:34,110
Confrontiamo il colore del quadrato dato con il colore dell'immagine se corrispondono.

245
00:16:34,110 --> 00:16:35,010
Facciamo una cosa.

246
00:16:35,130 --> 00:16:39,840
Se non corrispondono, facciamo qualcos'altro nel prossimo video, parleremo di ciò che effettivamente faremo

247
00:16:39,840 --> 00:16:40,700
se corrispondessero.

248
00:16:40,710 --> 00:16:42,000
E cosa facciamo se non corrispondono.