1
00:00:00,180 --> 00:00:01,330
Tudo bem, de volta.

2
00:00:01,530 --> 00:00:03,330
Vamos continuar e começar a isso.

3
00:00:03,330 --> 00:00:05,160
RG deve ser uma aplicação de jogo de adivinhação.

4
00:00:05,220 --> 00:00:10,270
Eu vou fazer o arquivo h tim primeiro e o C S S e criar essa grade simples.

5
00:00:10,290 --> 00:00:14,460
Então, não vamos desenhá-lo com as cores de fundo e as fontes e este pequeno

6
00:00:14,820 --> 00:00:19,980
agora está aqui, vamos começar simplesmente simples com seis quadrados e dar-lhes algumas cores de fundo talvez um

7
00:00:19,980 --> 00:00:25,110
pouco de espaçamento entre eles, mas não vamos faça coisas como adicionar os cantos arredondados, mas não vamos

8
00:00:25,110 --> 00:00:26,340
adicionar nenhuma das animações.

9
00:00:26,420 --> 00:00:31,710
O desvanecimento e o desaparecimento de tudo o que faremos é obter seis quadrados e, em seguida, adicionaremos a lógica básica de eventos

10
00:00:31,710 --> 00:00:34,780
rápidos e verificaremos se você consegue a cor correta e assim por diante.

11
00:00:34,950 --> 00:00:37,970
Então, primeiro precisamos dar uma conta ao arquivo que eu tenho aqui.

12
00:00:37,980 --> 00:00:42,910
Eu chamo esse jogo colorido de cada vez, então vamos adicionar em nossa equipe aqui.

13
00:00:43,110 --> 00:00:44,070
A placa da caldeira.

14
00:00:44,430 --> 00:00:45,370
Dê-lhe um título.

15
00:00:45,420 --> 00:00:47,090
Eu faço o jogo de cores.

16
00:00:47,910 --> 00:00:50,450
Vamos em frente e adicione os seis quadrados.

17
00:00:50,610 --> 00:00:51,790
Então vou fazê-los divs.

18
00:00:51,810 --> 00:00:57,090
Cada um é um div com uma classe de quadrado e usaremos essa aula quadrada para modelá-los mais tarde.

19
00:00:57,510 --> 00:01:05,610
Tudo bem, então, vamos fazer a classe div igual praça e não precisamos colocar nada dentro disso

20
00:01:05,610 --> 00:01:07,380
e teremos seis desses.

21
00:01:07,380 --> 00:01:12,660
E então, apenas para fazer este limpador, eu vou colocá-los todos em vez de outra div que possamos

22
00:01:12,660 --> 00:01:13,410
modelar mais tarde.

23
00:01:13,560 --> 00:01:15,490
Só vou chamar isso de recipiente.

24
00:01:15,810 --> 00:01:18,210
Então, não vai fazer nada adiantado.

25
00:01:18,240 --> 00:01:22,510
Eventualmente, vamos usá-lo para tornar o site sensível e para reduzir a grade.

26
00:01:22,530 --> 00:01:26,640
Por enquanto, apenas os agruparemos para que não possamos apenas 6 quadrados flutuando.

27
00:01:26,850 --> 00:01:28,970
OK, então temos nossos seis quadrados aqui.

28
00:01:29,160 --> 00:01:33,270
Se abrimos isso no jogo do navegador que se aproxima dele.

29
00:01:33,600 --> 00:01:36,420
Não vemos nada, por certo, por alguns motivos.

30
00:01:36,430 --> 00:01:42,360
Um, mesmo que tenhamos seis divs, eles não têm. Com isso, não há margem, não há cor, então

31
00:01:42,360 --> 00:01:43,390
não vemos nada.

32
00:01:43,710 --> 00:01:46,520
Então, vamos começar por denominá-los basicamente.

33
00:01:46,710 --> 00:01:52,800
Então, precise adicionar uma folha de estilo, então eu vou ligar à folha de estilo primeiro, que eu não criei e faça isso

34
00:01:52,800 --> 00:01:53,700
um pouco maior.

35
00:01:53,820 --> 00:02:04,650
Então, eu vou chamar o jogo de cores, ver SS e salvar e, em seguida, fazer esse jogo de cor do arquivo C Ss e a primeira

36
00:02:04,650 --> 00:02:10,110
coisa que farei é apenas adicionar uma cor de fundo ao nosso corpo inteiro.

37
00:02:10,140 --> 00:02:17,600
Até agora, a cor de fundo e a cor que vou usar é um código hexadecimal.

38
00:02:17,730 --> 00:02:23,960
É 2 3 2 3 2 3 e salve, certifique-se de estar conectado.

39
00:02:24,120 --> 00:02:24,510
Sim.

40
00:02:24,630 --> 00:02:26,810
Então nós conseguimos a cor de fundo correta.

41
00:02:26,820 --> 00:02:31,730
Em seguida, vamos em frente e começamos a modelar nossos quadrados.

42
00:02:32,040 --> 00:02:38,100
Nós vamos usar a mesma estratégia que usamos para criar este site VSS para portfólio de fotografia onde

43
00:02:38,100 --> 00:02:40,410
tivemos essa grade responsiva de imagens quadradas.

44
00:02:40,410 --> 00:02:41,640
Eles eram todos em preto e branco.

45
00:02:41,670 --> 00:02:43,400
Você pode usar a mesma idéia aqui.

46
00:02:43,410 --> 00:02:49,770
Então, a maneira como vamos fazer isso é que cada um deles está dentro de um recipiente e cada

47
00:02:49,770 --> 00:02:51,870
um leva até 30% desse recipiente.

48
00:02:51,870 --> 00:02:55,000
Então, o recipiente só vai em frente a esses quadrados.

49
00:02:55,020 --> 00:02:58,100
Não é o corpo inteiro aqui ao redor dos quadrados.

50
00:02:58,140 --> 00:03:02,360
Eles ocupam 30% e então temos uma margem entre eles em todos os lados.

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

52
00:03:04,320 --> 00:03:07,770
Então, tudo se resume a 100 por cento do recipiente.

53
00:03:08,040 --> 00:03:13,880
Então, vamos fazer essa primeira praça com 30 por cento.

54
00:03:14,460 --> 00:03:22,140
E se pudermos deixá-lo e dar-lhe um fundo, vamos torná-los roxos e salvar e

55
00:03:22,140 --> 00:03:24,060
não vemos nada ainda.

56
00:03:24,150 --> 00:03:29,820
E o motivo que está acontecendo, eu vou te mostrar se inspecionamos nossas vidas estão na página.

57
00:03:29,850 --> 00:03:31,400
Eles ainda estão vazios.

58
00:03:31,410 --> 00:03:32,610
O que precisamos fazer.

59
00:03:32,640 --> 00:03:38,480
A última vez que tínhamos imagens e imagens tinham algum conteúdo nelas, mas essas divs estão vazias.

60
00:03:38,640 --> 00:03:42,280
Então, vamos adicionar algum espaço e vamos usar o fundo do preenchimento.

61
00:03:42,330 --> 00:03:49,000
Nós também poderíamos usar a parte superior do preenchimento, portanto, o fundo do preenchimento e isso também será 30 por cento.

62
00:03:49,410 --> 00:03:50,680
Então, se eu atualizar.

63
00:03:51,080 --> 00:03:51,940
ESTÁ BEM.

64
00:03:52,290 --> 00:03:57,480
Agora temos seis quadrados, embora estejam todos em uma linha que não é o que queremos.

65
00:03:57,480 --> 00:03:59,280
Queremos que estejam na mesma linha.

66
00:03:59,610 --> 00:04:03,420
Então, precisamos flutuar para a esquerda, o que fizemos com a grade da imagem também.

67
00:04:03,420 --> 00:04:06,480
Então flutuasse para a esquerda e salve, nós atualizamos.

68
00:04:06,750 --> 00:04:09,400
E agora acabamos com esta grade maciça aqui.

69
00:04:09,670 --> 00:04:12,990
Oh vá em frente e na margem para que você possa ver o que está acontecendo.

70
00:04:13,020 --> 00:04:19,590
Então, vamos ter a margem 1. 6 6 por cento e economize.

71
00:04:19,790 --> 00:04:25,630
Agora você pode ver nossa grade aqui e esta grade ocupa toda a tela.

72
00:04:25,670 --> 00:04:27,530
Então vou mudar isso um pouco.

73
00:04:27,530 --> 00:04:29,400
Nós não queremos que seja tão grande.

74
00:04:29,690 --> 00:04:35,270
E o que podemos fazer é usar esse recipiente que fornecemos este recipiente ID ID.

75
00:04:35,450 --> 00:04:43,910
Então, se formos o estilo de que a div com a idéia de um recipiente que selecionaríamos assim,

76
00:04:43,910 --> 00:04:48,770
e podemos começar dizendo que sua largura máxima deveria ser.

77
00:04:48,770 --> 00:04:51,200
E eu acho que fui para 600 pixels.

78
00:04:51,200 --> 00:04:52,510
Podemos jogar com esse número.

79
00:04:52,540 --> 00:04:56,350
Agora, se eu atualizar Agora você pode ver que é muito menor.

80
00:04:56,690 --> 00:04:57,810
Então é parte disso.

81
00:04:58,070 --> 00:05:00,030
E então, o que também é Center.

82
00:05:00,350 --> 00:05:03,000
Então, vamos 2 margens.

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

84
00:05:04,550 --> 00:05:09,860
Lembre-se deste truque, a margem zero na parte superior e inferior do recipiente e auto na esquerda e na

85
00:05:09,860 --> 00:05:13,100
direita fará com que seja do mesmo tamanho em ambos os lados.

86
00:05:13,130 --> 00:05:15,330
E agora temos essa grade central agradável.

87
00:05:15,500 --> 00:05:16,400
Tudo bem.

88
00:05:16,400 --> 00:05:22,400
que está no nosso H-1, então vou ter um H1 aqui e só vai dizer o grande R.

89
00:05:22,400 --> 00:05:27,920
E vamos fazer mais uma coisa G. Seja um jogo de cores e nós simplesmente começaremos assim.

90
00:05:28,160 --> 00:05:31,110
E se refrescar, é claro, é realmente difícil de ver.

91
00:05:31,370 --> 00:05:37,440
Então, vamos torná-lo branco de cor H-1 e salvar.

92
00:05:37,820 --> 00:05:39,610
E vamos começar com isso.

93
00:05:39,620 --> 00:05:41,810
Então, agora vamos usar alguns javascript.

94
00:05:41,810 --> 00:05:45,340
Vamos configurar javascript para dar a cada uma dessas cores diferentes.

95
00:05:45,650 --> 00:05:50,830
Então, vamos fazer um novo arquivo e chamaremos o jogo de cores.

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

97
00:05:53,360 --> 00:05:58,870
E, como eu sempre quero fazer, vamos adicionar em nosso alerta que diz que está conectado.

98
00:05:58,880 --> 00:06:04,670
Agora vamos adicionar o script na fonte, igual ao jogo colorido.

99
00:06:04,750 --> 00:06:10,290
Sim, salve a atualização da página e recebemos nosso alerta conectado.

100
00:06:10,790 --> 00:06:13,550
OK, então eu vou redimensionar a janela lá.

101
00:06:13,550 --> 00:06:16,400
Agora vamos adicionar o código para dar-lhes cores diferentes.

102
00:06:16,580 --> 00:06:18,770
Então, no final, o resultado no final do jogo.

103
00:06:18,770 --> 00:06:25,870
Toda vez que a página carrega ele escolhe seis cores aleatórias e então atribui cada cor a uma das divs.

104
00:06:26,150 --> 00:06:30,350
o aspecto randomizado e apenas vamos atribuir seis cores que são sempre as mesmas.

105
00:06:30,350 --> 00:06:31,250
Vamos começar com

106
00:06:31,400 --> 00:06:33,800
E então, vamos seguir em frente para aleitá-los.

107
00:06:33,800 --> 00:06:39,680
Então, vamos ao meu jogo de cores Sim e vou começar por fazer uma lista de cores e eu apenas as

108
00:06:39,680 --> 00:06:40,430
chamarei de cores.

109
00:06:40,430 --> 00:06:41,190
É uma matriz.

110
00:06:41,360 --> 00:06:45,610
E lembre-se em nosso produto final, esta será uma lista aleatória de cores.

111
00:06:45,680 --> 00:06:48,820
Por enquanto, eu vou apenas adicionar alguns dos meus.

112
00:06:48,980 --> 00:06:52,050
Então G-B e eu começamos com todo o vermelho.

113
00:06:52,070 --> 00:06:59,790
Então, 2 5 5 0 0 e apenas para tornar isso legível para você, eu vou fazer isso tudo em linhas separadas.

114
00:06:59,900 --> 00:07:02,240
Então, teremos seis desses.

115
00:07:02,420 --> 00:07:08,710
E o primeiro será todo vermelho e então teremos outro que é todo vermelho e todo verde

116
00:07:08,710 --> 00:07:09,670
que faria amarelo.

117
00:07:09,830 --> 00:07:16,030
E então o próximo será 0 vermelho e todo verde.

118
00:07:16,970 --> 00:07:27,790
E então o próximo depois disso será zero vermelho ou verde e todo azul e depois também o fará.

119
00:07:27,830 --> 00:07:40,130
Então você lê 0 verde 255 azul e então vamos fazer 255 vermelho 0 verde 255 azul e isso nos dará uma série

120
00:07:40,130 --> 00:07:42,680
de seis cores como cordas.

121
00:07:42,680 --> 00:07:48,770
E então, o que queremos fazer é selecionar todos os seis quadrados que os atravessam e depois atribuir uma

122
00:07:48,770 --> 00:07:51,110
dessas cores ao fundo de cada uma.

123
00:07:51,290 --> 00:07:58,640
Então, para percorrer primeiro, precisamos selecionar até agora e chamaremos de quadrados iguais ao documento e temos

124
00:07:58,640 --> 00:07:59,710
muitas opções aqui.

125
00:07:59,720 --> 00:08:02,010
Eu vou usar um seletor de consulta tudo.

126
00:08:02,390 --> 00:08:05,810
Então eu tenho certeza de obter todos os seis deles, em vez de apenas o primeiro.

127
00:08:05,990 --> 00:08:08,930
E vamos selecionar com base no quadrado da classe.

128
00:08:09,440 --> 00:08:13,930
Se tivéssemos acabado de fazer, lembre-se de que temos um container div e não queremos selecionar aquele.

129
00:08:14,000 --> 00:08:23,030
Nós só queremos essas seis divisões quadradas tão quadradas e, então, vamos percorrer quatro var igual a zero.

130
00:08:23,450 --> 00:08:35,310
Eu menos do que o tamanho dos quadrados e eu mais plus, em vez de aqui, então, nós diremos quadrados que eu ponto estilo ponto de fundo

131
00:08:35,420 --> 00:08:43,010
é igual e esta é a parte interessante que vamos levar esse olho e usá-lo para acessar

132
00:08:43,010 --> 00:08:43,710
as cores.

133
00:08:44,750 --> 00:08:49,990
Ou é o Colt, estou aqui com uma pequena correção que estou adicionando após o fato.

134
00:08:50,130 --> 00:08:51,080
Apenas uma nota rápida.

135
00:08:51,330 --> 00:08:58,650
É muito preferível preferível à sua cor de fundo do estilo, de modo a uma cor de fundo uma palavra com uma maiúscula

136
00:08:58,710 --> 00:09:04,180
e em vez de um estilo ponto de fundo que é o que estou usando neste vídeo.

137
00:09:04,350 --> 00:09:08,230
Então, qualquer vez que você vê o estilo de fundo, mude para a cor de fundo.

138
00:09:08,400 --> 00:09:13,590
E o motivo disso é que ele funcionará em todos os navegadores no momento, mas o

139
00:09:13,590 --> 00:09:17,880
plano de fundo não funciona no Firefox, portanto, ele funciona tecnicamente com estilo.

140
00:09:17,910 --> 00:09:23,160
Esse pano de fundo funcionará no Chrome, por exemplo, é bom e o jogo funciona, mas eu tenho recebido

141
00:09:23,160 --> 00:09:28,490
muitas perguntas sobre o que está acontecendo no Firefox e esta é realmente a principal cor do fundo de

142
00:09:28,670 --> 00:09:29,200
estilo culpado.

143
00:09:29,400 --> 00:09:34,320
Além disso, eu gostaria de pensar que Del Anderson, um dos alunos nos fóruns de

144
00:09:34,320 --> 00:09:37,450
discussão, por apontar isso mais recentemente, vou voltar à codificação.

145
00:09:37,500 --> 00:09:45,300
Então, o que estamos fazendo, temos seis quadrados e nosso olho vai passar de 0 1 2 3 4 5 e isso irá

146
00:09:45,300 --> 00:09:46,420
percorrer cada quadrado.

147
00:09:46,560 --> 00:09:51,890
E então, quando eu chegar ao primeiro quadrado eu vou pegar zero e dar-lhe a cor de fundo das

148
00:09:51,890 --> 00:09:53,300
cores zero que está aqui.

149
00:09:53,340 --> 00:09:54,360
Então, isso seria certo.

150
00:09:54,630 --> 00:10:00,780
E então continuamos e tomamos um para o segundo div e nós damos a segunda cor com índice de 1

151
00:10:00,780 --> 00:10:03,330
e continuamos fazendo isso até chegar ao fim.

152
00:10:03,330 --> 00:10:08,010
divs estão na página é a ordem em que eles serão coloridos usando essas cores da matriz.

153
00:10:08,490 --> 00:10:10,420
Então, estamos basicamente indo para que os

154
00:10:10,680 --> 00:10:16,170
E se salvamos as atualizações, você pode ver nossas seis cores básicas.

155
00:10:16,710 --> 00:10:20,740
Então, temos magenta azul amarelo cian verde e amarelo.

156
00:10:20,970 --> 00:10:22,330
Então está tudo bem por enquanto.

157
00:10:22,500 --> 00:10:24,730
Nós nos concentraremos em aleatorizar cores mais tarde.

158
00:10:24,870 --> 00:10:30,420
Mas, como uma prévia, embora precisemos fazer é gerar três números, três números diferentes de

159
00:10:30,420 --> 00:10:32,960
0 a 255 e depois os combinamos.

160
00:10:33,210 --> 00:10:36,180
Então, são apenas três canais diferentes, todos randomizados.

161
00:10:36,180 --> 00:10:40,340
E então nós os transformamos em uma grande corda com r. g B e parênteses à sua volta.

162
00:10:40,590 --> 00:10:42,720
Mas agora iremos com essas cores.

163
00:10:42,720 --> 00:10:46,210
A próxima coisa que precisamos fazer é toda vez que a página é carregada.

164
00:10:46,300 --> 00:10:49,640
Eu mostro você aqui não só são escolhidas seis cores.

165
00:10:49,740 --> 00:10:55,590
Uma dessas cores é selecionada para ser o objetivo ou para ser a cor que estamos procurando.

166
00:10:55,590 --> 00:10:58,490
Então, neste caso, esta é uma cor que é escolhida.

167
00:10:58,500 --> 00:11:03,540
Então, vamos fazer isso também e vamos começar a codificar o Portus e, em seguida, o

168
00:11:03,540 --> 00:11:04,310
randomizaremos depois.

169
00:11:04,410 --> 00:11:08,610
Então, vamos começar dizendo que a cor do ouro é ciano.

170
00:11:08,790 --> 00:11:11,940
Então esse é o quarto índice de cores de três.

171
00:11:11,970 --> 00:11:20,070
Então, tudo bem, a variável aqui var escolhida é igual ao índice de matrizes de cores 3.

172
00:11:20,800 --> 00:11:23,900
E isso irá escolher Suyin ou essa cor aqui R. G. B.

173
00:11:23,910 --> 00:11:31,380
0 2 5 5 2 5 5 e é uma seqüência de caracteres, lembre-se, então, o que queríamos fazer é atualizar nossa página para que ela

174
00:11:31,380 --> 00:11:33,690
diga que aqui mesmo, como nós, temos aqui.

175
00:11:33,990 --> 00:11:38,030
Obviamente, não é denominado da mesma forma, mas queremos que diga R. G. B.

176
00:11:38,040 --> 00:11:45,960
para ele um pouco se você puder pensar no jogo do marcador onde tivemos um H1 e estamos mudando o.

177
00:11:45,960 --> 00:11:52,990
E então entre parênteses 0 2 5 5 5 5 para fazer isso, teremos que mudar ou

178
00:11:53,010 --> 00:11:55,670
Jogar um jogador dois pontos inicialmente.

179
00:11:56,040 --> 00:12:02,310
Nós apenas tivemos um avião H-1 E quando atualizamos, ele substituiu automaticamente tudo o resto que estava

180
00:12:02,310 --> 00:12:02,840
lá.

181
00:12:03,030 --> 00:12:04,160
Mas não queremos fazer isso.

182
00:12:04,170 --> 00:12:10,320
Queremos manter o texto o grande e o jogo colorido e a nossa cor só vai aqui, mas não queremos

183
00:12:10,320 --> 00:12:13,970
ter um H-1 ou algo separado, porque esses irão em linhas separadas.

184
00:12:14,040 --> 00:12:20,070
Então, vamos usar um intervalo exatamente como fizemos no jogo de pontuação e apenas adicione R. G. como um espaço reservado.

185
00:12:20,070 --> 00:12:21,180
estar lá

186
00:12:21,180 --> 00:12:24,320
Então, nada parece diferente, mas se inspecionamos.

187
00:12:25,110 --> 00:12:30,180
Você pode ver que agora temos um espaço que significa que você pode facilmente selecioná-lo e manipular o texto.

188
00:12:30,510 --> 00:12:33,250
E nós vamos dar uma idéia apenas para torná-lo ainda mais fácil.

189
00:12:33,510 --> 00:12:34,950
Então, damos isso.

190
00:12:35,220 --> 00:12:37,850
E vamos chamá-lo de exibição em cores.

191
00:12:39,040 --> 00:12:41,720
Então, iremos para o nosso javascript e selecione isso.

192
00:12:41,890 --> 00:12:50,230
exibição em cores é igual ao documento e nós vamos obter o elemento por identificação apenas para o elemento de criança de variedade por ID.

193
00:12:50,230 --> 00:12:51,400
Até agora, a

194
00:12:51,730 --> 00:12:53,940
E foi exibição em cores.

195
00:12:54,610 --> 00:12:57,330
E vamos economizar e tornar isso um pouco maior.

196
00:12:57,610 --> 00:13:04,640
Salve o arquivo e então queremos atualizar a exibição de cores para que ele diga essa cor que escolhemos.

197
00:13:05,050 --> 00:13:17,880
Então, isso vai ser o conteúdo de texto de exibição de cores é igual a escolha é cor exatamente assim e irá atualizar.

198
00:13:17,920 --> 00:13:20,500
E agora acabamos com nossa cor aqui.

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

200
00:13:21,130 --> 00:13:23,280
Vamos adicionar a lógica agora para os eventos de clique.

201
00:13:23,350 --> 00:13:28,660
Então, quando eu clicar em um desses quadrados, queremos executar algum código que vai descobrir qual cor

202
00:13:28,840 --> 00:13:30,470
do quadrado é que clicamos.

203
00:13:30,640 --> 00:13:34,350
E uma vez que temos essa cor, vamos compará-la à cor do pix.

204
00:13:34,360 --> 00:13:35,430
Este aqui mesmo.

205
00:13:35,740 --> 00:13:40,360
E se eles são diferentes Vamos mudar a cor de fundo desse quadrado para que ele vá

206
00:13:40,360 --> 00:13:42,740
para a mesma cor que o fundo do corpo.

207
00:13:43,030 --> 00:13:46,930
E se eles são o mesmo, então isso significa que o jogador tem um.

208
00:13:46,930 --> 00:13:48,570
E precisamos fazer algumas coisas especiais.

209
00:13:48,640 --> 00:13:52,930
E se eles são diferentes, isso significa que um jogador escolheu a cor errada e também terá que lidar com

210
00:13:53,680 --> 00:13:54,320
isso para começar.

211
00:13:54,370 --> 00:13:58,580
Vamos adicionar apenas um manipulador de evento de simples clique que apenas alerta quando clicamos.

212
00:13:58,870 --> 00:14:03,100
Então, vamos adicionar um manipulador de eventos a cada um dos quadrados para que possamos usar o

213
00:14:03,100 --> 00:14:04,140
mesmo loop que temos.

214
00:14:04,360 --> 00:14:13,660
Então, vou adicionar um comentário aqui, adicione cores iniciais aos quadrados e, em seguida, a próxima parte será dois

215
00:14:15,850 --> 00:14:18,720
ouvintes do clique em dois quadrados.

216
00:14:18,760 --> 00:14:23,700
Então, outro desses quadrados, eu dot, adiciono ouvinte de eventos.

217
00:14:24,350 --> 00:14:28,720
É hora de clicar e nossa função de retorno de chamada.

218
00:14:29,860 --> 00:14:37,830
Tudo o que faremos é alertar bastante um quadrado e ter certeza de que todos os seis deles nos alertarão.

219
00:14:37,860 --> 00:14:39,600
Clique com o botão direito do mouse no quadrado.

220
00:14:39,610 --> 00:14:44,130
Tudo bem, parece que todos eles funcionam bem como eles precisam.

221
00:14:44,350 --> 00:14:55,950
Então agora o que precisamos fazer é pegar cor do quadrado clicado e, em seguida, comparar cores para escolher cores.

222
00:14:55,960 --> 00:15:01,560
A cor da imagem variável que definimos aparece, então vamos começar a obter essa cor.

223
00:15:01,840 --> 00:15:06,450
Lembre-se que podemos usar isso que se refere ao item que foi clicado no quadrado.

224
00:15:06,580 --> 00:15:10,460
Então podemos dizer isso esse estilo de fundo.

225
00:15:10,780 --> 00:15:15,060
E vamos fazer outro alerta aqui e vamos ver o que recebemos.

226
00:15:15,070 --> 00:15:18,310
Então, se eu clicar no vermelho, ele me alerta.

227
00:15:18,310 --> 00:15:25,510
RG B 2 5 5 0 0 e se eu clicar em atribuir um R G B 0 2 5 5 2 5 5.

228
00:15:25,720 --> 00:15:26,850
Então, isso está funcionando.

229
00:15:27,220 --> 00:15:34,630
Então, o que faremos agora é salvar isso em uma variável, vamos apenas chamar isso de cor clicada assim.

230
00:15:35,020 --> 00:15:41,260
E então, vamos escrever uma declaração IF para comparar as cores de Quick, então, se a cor

231
00:15:42,390 --> 00:15:48,770
for tripla igual, escolha a cor de uma boa rima lá se for esse o caso, alertaremos corretamente.

232
00:15:49,590 --> 00:15:55,690
E se eles não combinam com ou então, alertaremos o erro.

233
00:15:57,240 --> 00:16:00,170
Vamos dar um tiro refrescar.

234
00:16:00,290 --> 00:16:01,390
Eu clique nisso.

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

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

237
00:16:03,210 --> 00:16:04,370
E o verdadeiro teste.

238
00:16:04,400 --> 00:16:07,310
Eu clico no lado direito que diz correto.

239
00:16:07,350 --> 00:16:13,110
está funcionando mesmo que não possamos ter nenhuma das cores aleatórias no que temos é uma série de

240
00:16:13,110 --> 00:16:18,600
seis cores que estão codificadas e que estamos atribuindo uma cor a cada quadrado e depois estamos escolhendo.

241
00:16:18,600 --> 00:16:19,640
Portanto, nossa lógica

242
00:16:19,650 --> 00:16:25,050
Neste caso ciano e isso será aleatório, é claro, mas estamos escolhendo uma cor que é a nossa resposta.

243
00:16:25,320 --> 00:16:30,570
E então, estamos adicionando um ouvinte de eventos a cada quadrado quando o usuário clica nesse quadrado ou em qualquer quadrado.

244
00:16:30,570 --> 00:16:34,110
Comparamos a cor do quadrado dado com a cor da imagem se combinarem.

245
00:16:34,110 --> 00:16:35,010
Nós fazemos uma coisa.

246
00:16:35,130 --> 00:16:39,840
Se eles não combinam, fazemos outra coisa no próximo vídeo, vamos falar sobre o que realmente

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

248
00:16:40,710 --> 00:16:42,000
E o que fazemos se não combinarem.