1
00:00:00,090 --> 00:00:01,280
Então estamos em bom estado aqui.

2
00:00:01,370 --> 00:00:06,980
O que queremos fazer em seguida é fazer com que não usemos as mesmas seis cores a cada momento.

3
00:00:07,230 --> 00:00:12,990
Em vez disso, queremos gerar seis cores aleatórias e preencher esta matriz com essas seis cores aleatórias e, em

4
00:00:12,990 --> 00:00:15,620
seguida, escolher uma dessas para gerar essas cores.

5
00:00:15,630 --> 00:00:18,320
Na verdade, vou escrever outra função para nos ajudar.

6
00:00:18,390 --> 00:00:24,360
Então, nossa função Nener nossa raça a matriz codificada e eu vou definir cores iguais à

7
00:00:24,360 --> 00:00:30,960
nossa chamada de função que chamaremos de gerar cores aleatórias e ainda não existe e vai ter um

8
00:00:30,960 --> 00:00:34,590
único argumento que decide quantas cores para gerar na matriz.

9
00:00:34,590 --> 00:00:40,230
Então, se queremos uma matriz com três itens que queremos, eventualmente, quando chegarmos ao modo fácil

10
00:00:40,230 --> 00:00:41,820
versus modo difícil, queremos 6.

11
00:00:42,060 --> 00:00:43,510
Então, vamos começar com 6.

12
00:00:43,560 --> 00:00:45,570
É o que queremos quando a página é carregada.

13
00:00:45,900 --> 00:00:51,900
Então, precisamos criar a função de gerar cores aleatórias que leva um número e retorna o número X

14
00:00:51,960 --> 00:00:54,430
de cores aleatórias em vez de uma matriz.

15
00:00:54,450 --> 00:00:57,900
Então vou fazer isso aqui.

16
00:00:57,900 --> 00:01:08,730
função gera cores aleatórias e isso deve levar um argumento sobre o qual chamaremos de dor e então em vez de aqui.

17
00:01:08,730 --> 00:01:09,060
A

18
00:01:09,060 --> 00:01:10,440
Tudo bem meu pseudo código.

19
00:01:10,440 --> 00:01:12,550
Então eu vou fazer uma matriz.

20
00:01:12,900 --> 00:01:22,410
Eu vou adicionar algumas cores aleatórias à matriz e então vou retornar essa matriz no final.

21
00:01:24,120 --> 00:01:26,370
Então, para começar, esta é a parte mais fácil.

22
00:01:26,370 --> 00:01:28,200
Faça uma matriz apenas uma vazia.

23
00:01:28,380 --> 00:01:34,590
Então, vamos chamar isso de r r apenas uma matriz vazia e, em seguida, na parte inferior, vamos apenas

24
00:01:34,590 --> 00:01:35,980
retornar a mesma matriz.

25
00:01:36,000 --> 00:01:38,610
A parte mais difícil é a lógica que existe no meio.

26
00:01:38,640 --> 00:01:42,660
Então aqui precisamos adicionar cores aleatorizadas.

27
00:01:42,690 --> 00:01:46,700
Então, o que isso significa é que precisamos repetir algo, saber o número de vezes.

28
00:01:46,760 --> 00:01:49,000
Então, seis vezes ou três vezes.

29
00:01:49,230 --> 00:01:50,830
Então, usaremos um loop para fazer isso.

30
00:01:51,120 --> 00:01:55,540
Então, vamos começar com o nosso loop para nossos iguais zero.

31
00:01:56,430 --> 00:02:01,800
Eu sou menos do que entorpecido eu mais plus.

32
00:02:02,100 --> 00:02:06,930
realmente usar I, é apenas uma maneira de percorrer três vezes seis vezes os tempos de Nahm.

33
00:02:07,410 --> 00:02:13,350
E não importa se começarmos em zero ou se começarmos em 1 e nós tornamos isso menor ou igual a porque

34
00:02:13,350 --> 00:02:13,910
não vamos

35
00:02:14,130 --> 00:02:23,010
E então, aqui, vamos realmente obter cor aleatória e empurrar para a matriz.

36
00:02:23,070 --> 00:02:28,190
Então, esta linha é realmente apenas repete as horas entorpecidas.

37
00:02:28,590 --> 00:02:33,360
Então, eu vou fazer uma função separada na verdade, que irá gerar a cor aleatória

38
00:02:33,360 --> 00:02:36,190
para nós e só vou chamar essa cor aleatória.

39
00:02:36,270 --> 00:02:41,990
Então, a função cor aleatória e o que você está vendo é que eu tenho uma função aqui.

40
00:02:42,090 --> 00:02:47,310
estou chamando outra função, apenas chamada de cor aleatória, e isso é realmente apenas para quebrar um código.

41
00:02:47,310 --> 00:02:49,860
Gere cores aleatórias que eu chamo dentro daquele eu

42
00:02:49,860 --> 00:02:55,410
Deixe claro o que é modular o que nós poderíamos ter tudo, sem nenhuma função, poderia ser o que as

43
00:02:55,950 --> 00:02:58,680
pessoas chamariam de código de espaguete, é todo o lugar.

44
00:02:58,830 --> 00:03:01,760
Então, vamos adicionar algumas funções aqui para adicionar alguma estrutura.

45
00:03:01,920 --> 00:03:06,540
E novamente no final deste projeto, quando terminamos, tudo parece ser bom, toda a funcionalidade

46
00:03:06,540 --> 00:03:07,090
está lá.

47
00:03:07,230 --> 00:03:12,690
Eu vou ter um vídeo opcional para refatorá-lo e vou falar sobre como ele pode mudar as coisas em

48
00:03:12,690 --> 00:03:18,080
torno de torná-los um pouco mais limpo um pouco mais bonito, mas vai funcionar exatamente da mesma maneira.

49
00:03:18,090 --> 00:03:30,210
Então, para começar cores aleatórias para fazer uma cor aleatória, precisaremos escolher uma leitura de 0 para 5 5 repetições de 0 2 para 5 5 e

50
00:03:31,020 --> 00:03:38,250
então precisamos escolher um verde de zero para 2 5 5 e depois um azul .

51
00:03:39,210 --> 00:03:45,490
E assim, para escolher qualquer número de 0 a 255, também precisamos usar matemática não aleatória.

52
00:03:45,570 --> 00:03:49,230
Então, será matemática não aleatória.

53
00:03:49,350 --> 00:03:51,760
Isso nos dá entre 0 e 1.

54
00:03:51,870 --> 00:03:53,070
Não inclui um.

55
00:03:53,220 --> 00:03:57,900
Precisamos multiplicar por 256 porque lembre-se que estamos encerrando.

56
00:03:58,050 --> 00:04:05,910
número possível para muitos para se multiplicar por mais 256 e então precisamos andar no chão de matemática.

57
00:04:05,910 --> 00:04:08,730
Então, queremos que 255 seja o maior

58
00:04:08,900 --> 00:04:16,290
Então, vá ao meu conselho e cole neste código, você pode ver se obtemos um número aleatório entre 0 e 255 e você

59
00:04:16,650 --> 00:04:19,630
provavelmente não verá que ele realmente vai para 255.

60
00:04:19,660 --> 00:04:21,770
Teremos que confiar em mim nessa.

61
00:04:21,900 --> 00:04:23,700
Mas você pode ver, pelo menos, fica perto.

62
00:04:23,700 --> 00:04:25,590
Eu acho que vimos 253.

63
00:04:25,590 --> 00:04:26,770
Isso é bom o suficiente por enquanto.

64
00:04:27,060 --> 00:04:33,000
vê todos os quadrados foram para roxo e isso é porque a nossa geração de cores aleatórias não retorna nada.

65
00:04:33,000 --> 00:04:33,920
E você também

66
00:04:33,930 --> 00:04:36,240
Então, ele simplesmente retorna uma string vazia.

67
00:04:36,300 --> 00:04:39,300
Então, na verdade, na verdade não estamos trilhando e dando uma cor a cada um.

68
00:04:39,300 --> 00:04:44,360
Então, está tomando o roxo padrão de C Ss apenas uma nota lateral lá.

69
00:04:44,700 --> 00:04:48,480
Então, isso gerará um número de 0 a 255.

70
00:04:48,870 --> 00:04:58,080
Vamos salvá-lo para uma variável chamada R e então faremos o mesmo para o verde e para o azul, assim como

71
00:04:58,080 --> 00:05:05,730
este espaço isso corretamente e altere os nomes para que G e B nos forneçam três números

72
00:05:05,730 --> 00:05:07,250
de 0 a 255.

73
00:05:07,530 --> 00:05:14,850
E a pior parte é sintetizá-los nesta grande cadeia que segue o formato de R. G. B parênteses e depois os

74
00:05:14,970 --> 00:05:18,640
números dentro de R G e B.

75
00:05:18,900 --> 00:05:22,260
E isso significa muitas curvas de abertura e fechamento e sinais de mais.

76
00:05:22,260 --> 00:05:25,390
Então vamos começar com o que parece ser assim.

77
00:05:25,410 --> 00:05:32,350
Vamos ter nosso G-B e, em seguida, abrir parênteses e, em seguida, mais o canal vermelho.

78
00:05:32,370 --> 00:05:45,720
Este número de 0 a 2 5 5 mais uma vírgula mais o valor de G mais outra vírgula mais o valor de B mais

79
00:05:46,770 --> 00:05:48,980
nossos parênteses de fechamento.

80
00:05:49,620 --> 00:05:51,230
E devemos ser bons para ir agora.

81
00:05:51,340 --> 00:05:52,530
Essa grande corda.

82
00:05:52,680 --> 00:05:58,570
E o que queremos fazer é realmente retornar essa string assim.

83
00:05:58,590 --> 00:06:03,350
Então, devolva essa grande string e isso gerará uma cor aleatória.

84
00:06:03,360 --> 00:06:05,090
Então, é um monte de trabalho para uma cor.

85
00:06:05,100 --> 00:06:07,650
Três números diferentes 0 2 2 5 5.

86
00:06:07,650 --> 00:06:12,450
Nós os colocamos com vírgulas entre eles parênteses em torno deles as letras R. G. B.

87
00:06:12,660 --> 00:06:15,650
E então devolvemos isso para que possamos usá-lo aqui.

88
00:06:15,660 --> 00:06:21,330
página, vá para o nosso cônsul e tente chamar cores aleatórias e isso parece ser bom para mim.

89
00:06:21,330 --> 00:06:25,600
E se queremos apenas testar se isso funciona, vamos continuar e atualizar a

90
00:06:25,620 --> 00:06:26,770
Estamos recebendo uma cor aleatória.

91
00:06:26,790 --> 00:06:27,910
Parênteses estão corretos.

92
00:06:27,990 --> 00:06:29,910
As vírgulas são todas boas.

93
00:06:29,910 --> 00:06:33,510
Vamos agora e usamos isso aqui.

94
00:06:34,170 --> 00:06:39,990
Então, vamos chamar essa cor aleatória e vamos empurrar isso para nossa matriz.

95
00:06:39,990 --> 00:06:41,240
Aqui estão eles.

96
00:06:41,280 --> 00:06:46,510
Então, nosso impulso DOT e nós não precisamos usar o push, mas isso vai acontecer aqui.

97
00:06:46,710 --> 00:06:49,820
E isso agora nos criará uma boa variedade de cores.

98
00:06:50,210 --> 00:06:52,580
Então, gere cores aleatórias 6.

99
00:06:52,770 --> 00:06:56,740
Chamamos isso de repetição seis vezes por vez.

100
00:06:56,910 --> 00:06:59,230
Ele empurra uma cor aleatória para a matriz.

101
00:06:59,430 --> 00:07:02,440
Então vou mudar o nosso comentário aqui.

102
00:07:02,460 --> 00:07:03,260
Aqui vamos nós.

103
00:07:03,600 --> 00:07:06,040
E para verificar se isso funciona se atualizamos.

104
00:07:06,180 --> 00:07:13,050
seis cores aleatórias e não só que são cores aleatórias que escolhemos a única cor que nós escolhemos da matriz também muda.

105
00:07:13,050 --> 00:07:15,250
Você pode ver agora que nós recebemos

106
00:07:15,270 --> 00:07:16,520
Então, não quebrou isso.

107
00:07:16,530 --> 00:07:19,190
Tudo ainda funciona ou faz isso.

108
00:07:19,200 --> 00:07:20,000
Vamos ver.

109
00:07:20,000 --> 00:07:25,510
Então, se eu clicar em algumas dessas cores, tente novamente, tente novamente, tente novamente, talvez eu tenha apenas um livro realmente ruim,

110
00:07:25,860 --> 00:07:27,210
mas não há algo errado.

111
00:07:27,400 --> 00:07:28,920
Então, o problema é um pouco complicado.

112
00:07:29,130 --> 00:07:34,830
o bug que eu criei quando fizemos o jogo do marcador quando comparamos as coisas aqui.

113
00:07:34,830 --> 00:07:36,500
É um pouco parecido com

114
00:07:36,930 --> 00:07:42,260
Se verificamos se o usuário está certo se eles escolherem a cor certa, algo estava acontecendo errado antes de

115
00:07:42,300 --> 00:07:43,110
termos um número.

116
00:07:43,110 --> 00:07:44,880
E estávamos comparando isso com uma string.

117
00:07:45,030 --> 00:07:46,760
Neste caso, é um pouco diferente.

118
00:07:46,920 --> 00:07:53,000
Então, deixe-me mostrar que você vai fazer outro con. registro do cinto clique para colorir e, em seguida, escolha a cor.

119
00:07:53,250 --> 00:07:56,190
E vamos ver o que eles parecem, talvez eles sejam um pouco diferentes.

120
00:07:56,340 --> 00:08:00,570
Vamos atualizar a página e abrir o con. E vamos começar a clicar.

121
00:08:00,570 --> 00:08:06,120
Então, esta é uma quantidade média de Fred um pouco verde e um pouco azul.

122
00:08:06,300 --> 00:08:07,510
Então, vamos clicar em alguns.

123
00:08:08,160 --> 00:08:12,700
E observe os números à esquerda, a seqüência RGV e a direita à direita.

124
00:08:12,990 --> 00:08:15,180
E é claro que estes não combinam.

125
00:08:15,840 --> 00:08:21,930
Mas se você clicar na direita você pode ver que quando eles combinam ainda pensa que estamos errados.

126
00:08:21,960 --> 00:08:23,220
Isso diz que tente novamente.

127
00:08:23,490 --> 00:08:28,080
E se você comparar as duas cadeias aqui, esta é a cor clicada.

128
00:08:28,080 --> 00:08:29,420
Isto é o que está voltando.

129
00:08:29,550 --> 00:08:36,810
Quando clicamos em um elemento e pedimos esse ponto marcado de fundo e essa é a cor que

130
00:08:36,810 --> 00:08:38,290
nós escolhemos da matriz.

131
00:08:38,400 --> 00:08:40,380
Então, de alguma forma, eles são um pouco diferentes.

132
00:08:40,380 --> 00:08:46,740
E o que acontece é que, quando configuramos a cor de fundo de um elemento, o SS

133
00:08:46,740 --> 00:08:50,620
automaticamente adiciona no dormitório adiciona automaticamente 10 espaços entre eles.

134
00:08:50,970 --> 00:08:59,370
Então, para consertar o que queremos fazer é apenas adicionar espaços aqui entre nossos números, então, depois dos cometas, e se o

135
00:08:59,370 --> 00:09:02,930
fizermos, eles serão comparados e serão iguais uns aos outros.

136
00:09:02,970 --> 00:09:04,890
Então é um tipo de bug complicado.

137
00:09:04,920 --> 00:09:10,080
Só tem que ver com a maneira como comparamos coisas com iguais triplos e não é que os iguais

138
00:09:10,080 --> 00:09:11,740
duplos consertam isso de qualquer maneira.

139
00:09:11,820 --> 00:09:15,660
O dobro das chamadas não ignora espaços ou nada, mas é apenas um problema com a forma

140
00:09:15,660 --> 00:09:16,460
como geramos as cores.

141
00:09:16,740 --> 00:09:19,240
Então, se tentarmos novamente e atualizarmos.

142
00:09:19,410 --> 00:09:20,990
Agora vamos clicar.

143
00:09:21,120 --> 00:09:24,780
Você pode ver que nossos espaços estão aqui e estes definitivamente irão combinar.

144
00:09:24,780 --> 00:09:32,060
Uma vez que clicamos na cor certa, que é a última e nós conseguimos o nosso correto.

145
00:09:32,100 --> 00:09:34,650
Então definitivamente um erro complicado lá para encerrar.

146
00:09:34,650 --> 00:09:40,110
Vamos tentar jogar um jogo e uma tela cheia e livrar-se do console e atualizar e

147
00:09:40,110 --> 00:09:41,280
admirar nossas cores aleatórias.

148
00:09:41,280 --> 00:09:48,210
A última coisa que podemos fazer é quando conseguimos corrigi-lo, também podemos mudar o cenário H-1 como

149
00:09:48,210 --> 00:09:48,950
fiz aqui.

150
00:09:49,110 --> 00:09:52,940
Então, quando você adivinha a cor certa, ela também altera a cor de fundo.

151
00:09:53,040 --> 00:09:54,910
E essa é uma mudança simples.

152
00:09:54,960 --> 00:09:57,540
Tudo o que precisamos fazer é selecionar o H-1.

153
00:09:58,080 --> 00:10:01,920
Então, H-1 e podemos selecionar isso o único H-1 na página.

154
00:10:01,950 --> 00:10:09,750
Então aqui em cima vou selecionar na base var H-1 é igual ao documento que o

155
00:10:13,470 --> 00:10:16,200
seletor de consultas H-1 salvar isso.

156
00:10:16,200 --> 00:10:25,470
E então, quando o usuário adivinha corretamente o que está aqui, vamos mudar o fundo H-1 DOD ou

157
00:10:25,620 --> 00:10:28,460
o estilo desse plano de fundo.

158
00:10:29,610 --> 00:10:39,860
E isso deve ser igual a cores coletadas e salvaremos isso na versão correta da atualização do nosso jogo

159
00:10:40,080 --> 00:10:42,060
e vamos tentar clicar.

160
00:10:42,930 --> 00:10:47,880
nós temos um jeito de seguir nosso estilo comparado a isso, mas estamos chegando lá com a lógica.

161
00:10:47,880 --> 00:10:48,950
E nós vamos definitivamente,

162
00:10:49,200 --> 00:10:53,120
Então, você adora incorretamente que desaparece simplesmente mudando a cor de fundo.

163
00:10:53,400 --> 00:10:58,240
E se você adivinhou corretamente, todos mudaram de cor e a H-1 também mudou.

164
00:10:58,620 --> 00:11:03,690
No próximo vídeo, vamos adicionar a funcionalidade Play novamente e adicionaremos um pouco mais de estilo.