1
00:00:00,700 --> 00:00:02,670
OK, então vamos pegar onde paramos.

2
00:00:02,790 --> 00:00:06,990
Vamos começar a adicionar alguns dos comportamentos para quando você clica na cor direita e

3
00:00:06,990 --> 00:00:08,620
quando você clica na cor errada.

4
00:00:08,640 --> 00:00:10,860
Então, comece com quando você escolhe a cor errada.

5
00:00:11,010 --> 00:00:16,000
O que queremos fazer é desaparecer para que ele corresponda à cor de fundo aqui.

6
00:00:16,170 --> 00:00:18,070
Então, na verdade, é bastante direto.

7
00:00:18,070 --> 00:00:26,520
É apenas uma questão de escrever este estilo de ponto em que o fundo é igual e então precisamos apenas

8
00:00:26,520 --> 00:00:31,080
combinar a cor que definimos no nosso C Ss parece assim.

9
00:00:31,080 --> 00:00:33,980
Então, vamos colar isso e salvar.

10
00:00:34,530 --> 00:00:35,470
Vamos testá-lo.

11
00:00:35,610 --> 00:00:37,050
Vamos clicar em um dos errados.

12
00:00:37,140 --> 00:00:41,670
Você pode ver isso desaparecer e se eu clicar na direita, ainda recebemos nosso alerta.

13
00:00:42,060 --> 00:00:43,710
OK, então eu vou atualizar.

14
00:00:43,710 --> 00:00:45,490
Então, é para isso que vamos começar.

15
00:00:45,600 --> 00:00:52,230
E a outra coisa que queremos acontecer é que queremos uma exibição para que você possa ver aqui aqui.

16
00:00:52,320 --> 00:00:56,700
Haverá uma exibição, então, se eu clicar em uma das cores e diz, tente novamente.

17
00:00:57,090 --> 00:01:04,740
E se eu entendi corretamente como aqui, ele exibe correto e depois se concentrará nas outras coisas, como mudar

18
00:01:04,740 --> 00:01:05,620
a cor.

19
00:01:05,820 --> 00:01:07,290
Uma vez que obtenhamos essa primeira parte.

20
00:01:07,350 --> 00:01:13,290
Então, vamos adicionar neste parágrafo ou o span realmente é o que é e tê-lo exibir a mensagem correta.

21
00:01:14,370 --> 00:01:20,520
Então, voltamos para o nosso HMO e vamos adicionar outra div e, na verdade, temos três ou

22
00:01:20,520 --> 00:01:22,680
quatro peças diferentes que irão eventualmente.

23
00:01:22,680 --> 00:01:26,890
Por enquanto, será um pequeno espaço que vai dentro da div.

24
00:01:27,450 --> 00:01:29,220
Então, como mencionei, será mais.

25
00:01:29,220 --> 00:01:34,340
Por enquanto, é apenas o período em que vai estar vazio para começar quando atualizo a página que

26
00:01:34,350 --> 00:01:36,480
você pode ver, não há nenhuma mensagem aqui.

27
00:01:36,480 --> 00:01:41,520
Então, vamos para cá, eu tenho um espaço vazio e vamos dar um I. D. e chamaremos isso de mensagem.

28
00:01:41,910 --> 00:01:45,410
E assim podemos selecioná-lo em vez do nosso Javascript.

29
00:01:45,420 --> 00:01:49,000
Então vamos ao nosso javascript agora e selecione isso.

30
00:01:49,140 --> 00:01:59,670
Então, até aqui, nós chamaremos de exibição de mensagem da fazenda igual a documento e faremos um seletor de consulta de seletor de

31
00:02:00,080 --> 00:02:02,870
consulta e que chamamos essa mensagem.

32
00:02:03,090 --> 00:02:04,410
Precisamos do ID.

33
00:02:05,010 --> 00:02:06,400
Então precisamos do arco para Thor.

34
00:02:06,960 --> 00:02:09,110
E então, se o usuário adivinha errado.

35
00:02:09,210 --> 00:02:20,260
Tudo o que precisamos fazer é escrever a mensagem exibir o conteúdo do texto do ponto equivale a tentar novamente.

36
00:02:21,180 --> 00:02:25,560
E se nós atualizamos e você clicar no errado, é realmente difícil de ver.

37
00:02:25,920 --> 00:02:28,470
Então, devemos mudar a cor do fundo ou a cor do texto.

38
00:02:28,580 --> 00:02:30,120
Nós podemos fazer isso aqui.

39
00:02:30,420 --> 00:02:37,320
Vamos dizer que todos os intervalos devem ter cor branca e se estamos frescos.

40
00:02:37,320 --> 00:02:39,620
Agora eu cliquei sobre o errado.

41
00:02:39,690 --> 00:02:41,330
Isso me diz que tente novamente.

42
00:02:41,910 --> 00:02:42,250
ESTÁ BEM.

43
00:02:42,270 --> 00:02:44,620
E continuamos recebendo isso até obter o caminho certo.

44
00:02:44,760 --> 00:02:46,180
E ainda recebemos esse alerta.

45
00:02:46,410 --> 00:02:54,360
Então, se conseguimos o correto, o que queremos fazer é mudar o que exibimos na exibição dessa mensagem.

46
00:02:54,780 --> 00:02:57,060
Queremos mudá-lo para estar correto.

47
00:02:57,300 --> 00:03:00,840
Portanto, a mensagem mostra que o conteúdo do

48
00:03:03,540 --> 00:03:05,700
texto é igual a correto.

49
00:03:06,630 --> 00:03:07,980
Bem desse jeito.

50
00:03:08,080 --> 00:03:11,000
E agora, se tentarmos isso, erramos e tente novamente.

51
00:03:11,190 --> 00:03:13,730
Nós entendemos corretamente e isso nos diz corretamente.

52
00:03:14,100 --> 00:03:14,340
ESTÁ BEM.

53
00:03:14,340 --> 00:03:20,730
Então, temos essa lógica básica lá agora, onde estamos verificando se estamos corretos ou errados e estamos

54
00:03:20,730 --> 00:03:21,280
exibindo algo.

55
00:03:21,420 --> 00:03:27,030
A próxima coisa que podemos fazer é adicionar o recurso onde quando você obtém a resposta certa, todos os quadrados mudam

56
00:03:27,030 --> 00:03:28,940
de cor para corresponder a essa resposta.

57
00:03:28,950 --> 00:03:32,180
Então, aqui você clica na resposta certa, todos mudam de grau.

58
00:03:32,340 --> 00:03:35,370
E então, também podemos fazer os antecedentes deste H1 também.

59
00:03:35,370 --> 00:03:38,360
Então, a primeira coisa que precisamos fazer para que isso funcione.

60
00:03:38,580 --> 00:03:42,750
Na verdade, vou escrever uma função separada para fazer isso pra mim, apenas para manter meu

61
00:03:42,750 --> 00:03:43,900
código um pouco mais organizado.

62
00:03:44,040 --> 00:03:52,290
Altere as cores e levará um único argumento uma string de cores e, em seguida, dentro

63
00:03:52,290 --> 00:04:01,430
daqui, precisamos fazer um loop em todos os quadrados, mudando cada cor para corresponder a determinada cor.

64
00:04:02,550 --> 00:04:09,700
é igual a zero é menor do que o comprimento de ponto colorido ou cores que o comprimento mais mais.

65
00:04:09,750 --> 00:04:15,770
Então, para percorrer todos os quadrados que já fizemos, apenas uma questão de quatro VAR I

66
00:04:15,970 --> 00:04:21,880
E então dentro é onde precisamos mudar cada cor e já fizemos isso antes.

67
00:04:22,080 --> 00:04:23,530
É apenas uma cor.

68
00:04:23,740 --> 00:04:32,820
Eu obtive um estilo de fundo difícil, igual a cor que é o que fornecemos tecnicamente, nosso código mudará cada

69
00:04:32,910 --> 00:04:35,260
quadrado para combinar a cor.

70
00:04:35,370 --> 00:04:38,670
Então, incluindo este que é a cor correta.

71
00:04:38,700 --> 00:04:42,640
Só irá substituí-lo e mudá-lo para a mesma cor que já é.

72
00:04:42,660 --> 00:04:47,340
aqui, que é o estilo de fundo da cor que foi clicado.

73
00:04:47,520 --> 00:04:56,550
Podemos adicionar algum código para corrigir isso, mas vamos começar com isso e então precisamos chamar essa função de cores de mudança e precisamos passar

74
00:04:56,550 --> 00:04:59,660
a cor correta, que é a variável que criamos

75
00:04:59,790 --> 00:05:00,700
E estamos fazendo isso.

76
00:05:00,750 --> 00:05:02,080
Se eles adivinissem isso corretamente.

77
00:05:02,130 --> 00:05:05,600
Então, se salvarmos e atualizar, veja se temos algum erro.

78
00:05:05,700 --> 00:05:06,330
Não.

79
00:05:06,630 --> 00:05:07,770
E agora é rápido.

80
00:05:07,770 --> 00:05:08,370
Errado.

81
00:05:08,400 --> 00:05:09,030
Errado.

82
00:05:10,050 --> 00:05:16,250
Corrigido e temos um problema quando você clica no correto nos diz que não podemos definir o fundo da

83
00:05:16,590 --> 00:05:22,670
propriedade de indefinido se olharmos para o que está falando sobre as cores. Eu estilo o plano de fundo.

84
00:05:22,770 --> 00:05:27,780
Claro que temos um problema aqui porque estou fazendo isso com nossa matriz de cores e isso não

85
00:05:27,780 --> 00:05:28,790
deve ser nossas cores.

86
00:05:29,120 --> 00:05:30,570
Esta é a nossa variedade de cores.

87
00:05:30,600 --> 00:05:35,070
Deve ser na matriz de quadrados quais são os quadrados que estamos tentando mudar.

88
00:05:35,060 --> 00:05:39,860
O que eu estava fazendo era o conjunto de cores apenas as cordas.

89
00:05:39,960 --> 00:05:45,810
Então, aumente o comprimento e agora deve ser bom ir e todos eles mudaram para a cor

90
00:05:46,650 --> 00:05:48,120
que foi escolhida assim.

91
00:05:48,120 --> 00:05:48,790
Tudo bem.

92
00:05:48,900 --> 00:05:54,990
Então, em seguida, vamos nos concentrar em obter as cores aleatórias na matriz e depois escolher uma cor

93
00:05:54,990 --> 00:05:55,940
aleatória dessa matriz.

94
00:05:55,940 --> 00:06:00,830
Então, vou começar com a segunda coisa que está escolhendo uma cor aleatória em vez de

95
00:06:00,840 --> 00:06:05,910
apenas fazer com que ele colore três para nos ajudar a escolher um elemento aleatório dessa matriz.

96
00:06:05,910 --> 00:06:07,830
Na verdade, vou fazer uma função.

97
00:06:07,830 --> 00:06:12,630
E o motivo pelo qual eu estou fazendo isso é um para limpar nosso código, mas nós realmente

98
00:06:12,720 --> 00:06:17,910
vamos usar essa função mais tarde, porque toda vez que iniciamos um novo jogo, temos que escolher uma nova cor.

99
00:06:17,940 --> 00:06:22,040
Então, é algo que vamos ter que chamar algumas vezes para que isso funcione.

100
00:06:22,050 --> 00:06:25,200
Eu vou começar por chamar a função que ainda não existe.

101
00:06:25,200 --> 00:06:29,460
Então eu vou dizer que a escolha é igual à cor e vamos nomeá-la.

102
00:06:29,460 --> 00:06:34,760
Escolha a cor e depois precisamos definir a escolha da cor.

103
00:06:34,980 --> 00:06:38,420
Então eu venho aqui, basta fazê-lo na parte inferior por agora escolher a função.

104
00:06:38,430 --> 00:06:43,070
Cor nesta função precisamos fazer duas coisas.

105
00:06:43,080 --> 00:06:45,330
Um é escolher um número aleatório.

106
00:06:45,810 --> 00:06:50,650
Então, algo como 0 ou 1 ou 2 até o último índice dessa matriz.

107
00:06:51,180 --> 00:06:57,220
E então precisamos usar esse número para acessar a cor desta matriz e retornar essa cor.

108
00:06:57,300 --> 00:06:59,070
Então, vamos começar por escolher um número aleatório.

109
00:06:59,220 --> 00:07:05,160
E a forma como escolhemos um número aleatório em javascript é usar matemática aleatória e matemática aleatória,

110
00:07:05,190 --> 00:07:09,420
irá escolher um número entre 0 e 1 e não inclui um.

111
00:07:09,420 --> 00:07:11,420
Então, deixe-me mostrar-lhe que as matemáticas não

112
00:07:14,340 --> 00:07:16,620
são aleatórias e é uma decimal longa e longa.

113
00:07:16,620 --> 00:07:24,860
Então, se queríamos gerar um número entre 0 e 6, por exemplo, para imitar um Dayrell, faríamos

114
00:07:24,860 --> 00:07:28,850
matemática de forma aleatória e depois a multiplicaríamos.

115
00:07:29,000 --> 00:07:36,560
Em nosso caso, se tivéssemos apenas dez centavos, nós nunca teríamos um número superior a cinco nove nove

116
00:07:36,670 --> 00:07:37,320
nove nove.

117
00:07:37,640 --> 00:07:44,790
Então, se queremos que esse número venha de um e diga a seis, poderíamos multiplicá-lo por

118
00:07:44,940 --> 00:07:48,350
seis e depois adicionar um no final.

119
00:07:48,380 --> 00:07:53,570
Agora podemos chegar até seis pontos noventa e para obter um número inteiro.

120
00:07:53,580 --> 00:08:00,660
que for devolvido da matemática, multiplicando aleatoriamente por 6 adicionando 1 e depois remover tudo após o ponto decimal.

121
00:08:00,660 --> 00:08:08,250
Nós, então, precisamos cortar esse decimal para que possamos usar o andar superior de matemática, que é outro método e

122
00:08:08,250 --> 00:08:09,630
que apenas levará o

123
00:08:09,770 --> 00:08:13,790
E isso nos dá números aleatórios entre 1 e 6.

124
00:08:13,920 --> 00:08:18,460
Como você pode ver, mas não queremos necessariamente apenas entre 1 e 6.

125
00:08:18,540 --> 00:08:22,090
Esta disposição eventualmente pode ter apenas três itens.

126
00:08:22,620 --> 00:08:25,800
Como você pode ver quando eu vou para o modo fácil, há apenas três cores.

127
00:08:25,920 --> 00:08:27,600
Então pode ter três e pode ter seis.

128
00:08:27,690 --> 00:08:33,110
em seguida, multiplique-o pelo comprimento da matriz e isso é OK, porque lembre-se que não é inclusivo.

129
00:08:33,120 --> 00:08:38,460
Então, vamos usar apenas o comprimento da matriz para gerar a nossa cor para que pareça com

130
00:08:38,460 --> 00:08:42,690
este pensamento matemático aleatório, vamos gerar um número entre 0 e 1 e,

131
00:08:42,750 --> 00:08:47,330
Portanto, mesmo que o comprimento da matriz seja mais do que o índice mais alto.

132
00:08:47,390 --> 00:08:48,970
Então o comprimento é seis.

133
00:08:49,080 --> 00:08:51,040
Mas o número mais alto que queremos é cinco.

134
00:08:51,410 --> 00:08:54,500
Porque o número aleatório só vai entre 0 e 1.

135
00:08:54,500 --> 00:08:57,140
Mas não inclui um que estamos em boa forma.

136
00:08:57,330 --> 00:09:03,900
ponto decimal remanescente e, depois de ter feito isso, nos dará um número aleatório.

137
00:09:03,890 --> 00:09:11,070
Então, vamos gerar isso e então vamos fazer matemática nesse piso daquele todo, que cortará o

138
00:09:11,610 --> 00:09:18,810
A próxima coisa que precisamos fazer é salvar isso em uma variável e usar essa variável para acessar

139
00:09:18,810 --> 00:09:20,990
um elemento da matriz nesse índice.

140
00:09:21,000 --> 00:09:26,720
Então, vamos dizer que as cores de retorno são aleatórias.

141
00:09:26,730 --> 00:09:33,230
Então, ele escolhe um número aleatório como três e depois retorna as cores de três.

142
00:09:33,240 --> 00:09:33,630
Tudo bem.

143
00:09:33,620 --> 00:09:35,420
Então vamos testar isso.

144
00:09:35,460 --> 00:09:36,490
Nós escolhemos a cor.

145
00:09:36,620 --> 00:09:39,150
Estamos chamando a escolha de cores no topo aqui.

146
00:09:39,480 --> 00:09:45,690
Então, se eu atualizar, devemos esperar que isso mude e isso muda enquanto eu atualizo.

147
00:09:45,720 --> 00:09:51,870
Você pode ver as vezes que você obtém o mesmo, porque há apenas seis e nunca mudam,

148
00:09:52,320 --> 00:09:54,170
mas isso muda quase sempre.

149
00:09:54,170 --> 00:09:57,900
Agora, verifique se nossa lógica rápida funciona da mesma maneira.

150
00:09:57,890 --> 00:10:03,060
Então, se eu clicar nisso, é zero vermelho zero verde e azul.

151
00:10:03,060 --> 00:10:05,430
Então, vamos tentar clicar em ciano vermelho.

152
00:10:05,420 --> 00:10:06,120
Boa.

153
00:10:06,210 --> 00:10:08,130
Se eu clicar em azul está correto