1
00:00:00,170 --> 00:00:04,320
Neste vídeo, há algumas pequenas mudanças que eu quero fazer e então vou falar

2
00:00:04,320 --> 00:00:06,330
sobre como podermos refatorar isso um pouco.

3
00:00:06,330 --> 00:00:09,570
Então, a primeira mudança é que quando ganhamos esse jogo.

4
00:00:09,840 --> 00:00:11,860
Então vamos ganhar aqui.

5
00:00:11,880 --> 00:00:16,320
Lá vamos e recebo esta mensagem correta e clico em jogar novamente.

6
00:00:16,710 --> 00:00:18,080
Ainda diz correto.

7
00:00:18,300 --> 00:00:22,030
E queremos que restaure qual é uma mudança muito rápida.

8
00:00:22,320 --> 00:00:27,330
quando clicamos em jogar novamente, então precisamos mudar o intervalo que temos aqui e torná-lo apenas vazio.

9
00:00:27,330 --> 00:00:30,730
Tudo o que precisamos fazer é encontrar o código que é executado

10
00:00:30,750 --> 00:00:33,760
Então, vamos descobrir que isso faz a tela cheia.

11
00:00:34,410 --> 00:00:38,570
Então, quando clicamos nesse botão de reinicialização que está aqui.

12
00:00:39,360 --> 00:00:44,190
Tudo o que precisamos fazer é mudar nossa exibição, que chamamos de exibição de mensagem.

13
00:00:44,190 --> 00:00:48,090
Então vamos fazer isso aqui em qualquer lugar.

14
00:00:48,090 --> 00:00:57,960
Texto de exibição de mensagens, o conteúdo de texto é igual a uma string vazia.

15
00:00:58,360 --> 00:01:00,330
E vamos ver como isso acontece.

16
00:01:00,540 --> 00:01:01,730
Atualizar.

17
00:01:01,810 --> 00:01:03,740
OK, vamos clicar até ganharmos.

18
00:01:04,050 --> 00:01:05,680
OK, então, diz correto aqui.

19
00:01:05,790 --> 00:01:09,440
E se eu clicar em jogar novamente, isso desaparece.

20
00:01:09,660 --> 00:01:15,270
A outra ligeira alteração que eu quero fazer é que este botão só deve dizer jogar novamente uma vez

21
00:01:15,270 --> 00:01:16,290
que o usuário ganha.

22
00:01:16,320 --> 00:01:20,760
Então vou atualizar a página e diz novas cores, como é que queremos que ela funcione.

23
00:01:20,760 --> 00:01:23,910
Então, se eu ganhar, pergunte-me se eu quero jogar de novo.

24
00:01:24,120 --> 00:01:30,080
E então, se eu clicar em jogar novamente, queremos mudar o texto do botão para voltar para Novas cores.

25
00:01:30,090 --> 00:01:35,280
Então, uma ligeira diferença, mas eu só quero mostrar o jogo novamente se o usuário acabou de ganhar.

26
00:01:35,850 --> 00:01:41,820
Então, entre no nosso código e precisamos encontrar o lugar onde o usuário ganha o jogo que está aqui

27
00:01:41,820 --> 00:01:44,240
mesmo quando o usuário clica na cor escolhida.

28
00:01:44,370 --> 00:01:50,970
Então, quando o usuário clica na cor direita, alteramos o texto do botão de reinicialização para dizer conteúdo de texto,

29
00:01:50,970 --> 00:01:56,650
mas o que queremos fazer é quando o usuário clica no botão de reinicialização, vamos mudar isso.

30
00:01:56,790 --> 00:02:05,040
Este texto de texto de ponto para voltar para Novas cores e também podemos escrever um botão de reinicialização.

31
00:02:05,040 --> 00:02:09,540
Mas é mais fácil fazer isso porque estamos dentro do ouvinte do evento para o botão de reinicialização.

32
00:02:10,050 --> 00:02:15,270
E isso deve ser bom se atualizarmos rapidamente até obter o caminho certo.

33
00:02:15,360 --> 00:02:16,440
Queremos jogar de novo.

34
00:02:16,680 --> 00:02:17,480
Certo.

35
00:02:17,490 --> 00:02:24,350
Agora, ele volta às cores novas e sempre que diz apenas novas cores uma e outra vez e, se eu ganhar, é

36
00:02:24,360 --> 00:02:26,900
a única vez que diz que joga novamente.

37
00:02:26,910 --> 00:02:31,770
Então, uma coisa muito pequena, mas acho muito excitante, é que, quando eu clico em um desses botões,

38
00:02:32,220 --> 00:02:34,350
ele tem esse esboço irritante em torno disso.

39
00:02:34,680 --> 00:02:36,990
E este é realmente o nosso navegador fazendo isso.

40
00:02:36,990 --> 00:02:38,560
E podemos afastar isso.

41
00:02:38,610 --> 00:02:41,940
Eu não sei se você pode ver isso no elenco da tela, mas há um contorno azul.

42
00:02:42,070 --> 00:02:43,190
É lindo de nocivo.

43
00:02:43,200 --> 00:02:49,560
Então, para se livrar disso, vamos para a nossa folha de estilos e, se selecionarmos

44
00:02:49,560 --> 00:02:54,290
nossos botões, basta aqui, basta escrever resumir nenhum e voltar e atualizar.

45
00:02:54,310 --> 00:02:57,810
Agora, se clicarmos, não temos esse contorno azul em torno disso.

46
00:02:57,960 --> 00:03:00,260
Então, é tudo o que eu queria fazer para a lógica do jogo.

47
00:03:00,450 --> 00:03:03,500
Agora queremos passar um pouco de tempo refatorando seu código.

48
00:03:03,630 --> 00:03:04,880
Então vamos voltar.

49
00:03:04,980 --> 00:03:10,770
A primeira coisa que me mostra é o código aqui onde temos um botão rígido, um botão fácil e

50
00:03:10,770 --> 00:03:12,120
o ouvinte para cada um.

51
00:03:12,240 --> 00:03:14,370
E eles são muito semelhantes em como eles funcionam.

52
00:03:14,370 --> 00:03:17,100
Exceto que um deles funcionará com três quadrados.

53
00:03:17,100 --> 00:03:20,860
O outro trabalha com seis, mas, de outra forma, eles fazem basicamente o mesmo.

54
00:03:21,090 --> 00:03:23,720
Então, podemos realmente reduzir essa duplicação.

55
00:03:23,880 --> 00:03:30,300
E ao invés de dar a cada um uma ideia, o que faremos é livrar-se dessas IDs e dar-lhes

56
00:03:30,300 --> 00:03:33,180
uma aula e eles vão compartilhar a mesma classe.

57
00:03:33,390 --> 00:03:37,660
Então, a classe será chamada de modo.

58
00:03:37,770 --> 00:03:39,570
Então, vamos dar-lhes o modo de classe.

59
00:03:39,600 --> 00:03:42,850
Lembre-se de um botão ou qualquer item pode ter duas classes.

60
00:03:42,870 --> 00:03:45,010
Eles só precisam ser separados por espaços.

61
00:03:45,030 --> 00:03:48,030
Então, este tem o modo de classe e a classe selecionada.

62
00:03:48,420 --> 00:03:49,020
ESTÁ BEM.

63
00:03:49,160 --> 00:03:56,460
Então, agora iremos e elimine estes dois botões aqui e faça uma lista de botões chamados botões de modo e

64
00:03:56,460 --> 00:03:59,220
esse será um documento que consulta o seletor.

65
00:03:59,350 --> 00:04:03,090
Modo Paul Datt.

66
00:04:03,160 --> 00:04:05,410
Então, isso nos dá dois botões.

67
00:04:05,700 --> 00:04:08,360
Então, vamos percorrer os botões de modo.

68
00:04:08,370 --> 00:04:13,020
Então, precisamos para var é igual a zero.

69
00:04:13,290 --> 00:04:16,740
Menos do que o botão de modo surpreendente.

70
00:04:16,910 --> 00:04:23,250
E o que isso também nos permitirá fazer é se, no futuro, quisermos adicionar um modo de dificuldade média ou normal

71
00:04:23,280 --> 00:04:25,380
ou um modo de dificuldade super difícil.

72
00:04:25,470 --> 00:04:30,990
em seguida, usando um loop versus Aqui, temos que escrever manualmente um para cada botão que adicionamos.

73
00:04:30,990 --> 00:04:34,800
Nós não precisamos adicionar ouvintes extras, porque estamos selecionando todos eles e,

74
00:04:35,100 --> 00:04:35,330
ESTÁ BEM.

75
00:04:35,340 --> 00:04:36,480
Então termine o loop aqui.

76
00:04:36,570 --> 00:04:37,740
Plus plus.

77
00:04:38,100 --> 00:04:49,360
E o que vamos fazer é adicionar um botão de modo, eu adicionar um clique de ouvinte de evento e eles vão deixá-lo

78
00:04:49,360 --> 00:04:50,590
neste momento.

79
00:04:50,590 --> 00:04:56,020
Antes de irmos mais longe, eu realmente vou comentar o código apenas para que possamos informar o que

80
00:04:56,020 --> 00:05:01,100
está executando em nosso novo código e o que queremos acontecer quando clicamos em um desses botões.

81
00:05:01,210 --> 00:05:05,580
A primeira coisa que queremos acontecer é que a classe selecionada seja aplicada.

82
00:05:05,680 --> 00:05:07,260
Então, agora, é só quando nos deslocamos.

83
00:05:07,300 --> 00:05:10,220
Nós conseguimos essa cor, eu quero que seja quando clicarmos.

84
00:05:10,780 --> 00:05:20,140
Então, precisamos fazer essa lista de classe de pontos, adicionar ponto escolhido assim como aquele que é o que temos aqui, exceto que estamos

85
00:05:20,170 --> 00:05:23,510
fazendo isso para botão fácil e botão rígido.

86
00:05:23,710 --> 00:05:27,070
Nós podemos apenas fazer isso com esse que se refere ao que foi clicado.

87
00:05:27,220 --> 00:05:31,180
A única questão é que precisamos desligar o original também.

88
00:05:31,540 --> 00:05:42,400
e escrevemos os botões do modo zero ponto classe lista ponto remover e então vamos removê-lo do outro também.

89
00:05:42,550 --> 00:05:47,320
E para fazer isso, vamos apenas codificar um pouco

90
00:05:47,800 --> 00:05:49,360
Então, porque há apenas dois botões.

91
00:05:49,390 --> 00:05:50,550
Isso não é um problema.

92
00:05:50,560 --> 00:05:55,840
O que estamos fazendo é removê-lo de ambos os botões apenas para estar seguro e depois

93
00:05:55,840 --> 00:05:57,690
adicioná-lo ao que acabamos de clicar.

94
00:05:57,700 --> 00:06:00,690
Então, agora, se testarmos isso e atualizemos.

95
00:06:01,030 --> 00:06:05,560
Você pode ver que ele só é adicionado ao que acabamos de clicar e é

96
00:06:05,560 --> 00:06:06,630
removido do outro.

97
00:06:06,640 --> 00:06:10,900
Então o que precisamos fazer em seguida é adicionar a maior parte da lógica aqui para esses botões.

98
00:06:11,080 --> 00:06:26,290
Então, precisamos descobrir quantos quadrados para mostrar escolher novas cores e, então, precisamos escolher uma nova escolha para colorir, que é a

99
00:06:26,310 --> 00:06:30,420
cor da qual estamos tentando clicar.

100
00:06:30,670 --> 00:06:37,850
E, finalmente, queremos atualizar a página para refletir as mudanças.

101
00:06:38,110 --> 00:06:43,810
Então, para fazer tudo isso, eu realmente vou fazer uma nova função e essa função só vou

102
00:06:43,810 --> 00:06:49,060
chamar isso de redefinição e isso é algo que vamos usar em alguns lugares porque estamos

103
00:06:49,060 --> 00:06:55,030
repetindo essas etapas a lote escolhendo novas cores escolhendo uma nova cor escolhida na matriz de cores e

104
00:06:55,150 --> 00:06:59,650
atualizando a página para mostrar as novas cores e atualizando esta exibição aqui.

105
00:06:59,650 --> 00:07:03,400
Nós estamos fazendo isso o tempo todo, então eu vou colocar isso tudo em uma função.

106
00:07:03,400 --> 00:07:08,500
Então, o que precisamos fazer dentro dessa função é que, na verdade, só vou copiá-lo daqui para baixo.

107
00:07:08,530 --> 00:07:09,860
Já fizemos isso aqui.

108
00:07:09,990 --> 00:07:15,200
Eu ia copiar tudo isso no nosso Reset assim.

109
00:07:15,430 --> 00:07:17,150
E vamos dar uma olhada no que está acontecendo.

110
00:07:17,350 --> 00:07:24,740
Então, em vez de redefinir ou gerar as cores aleatórias, dependendo da variável dos quadrados numb e, então, estamos

111
00:07:24,740 --> 00:07:29,310
escolhendo uma nova cor, estamos mudando a cor exibe o conteúdo.

112
00:07:29,530 --> 00:07:32,020
Nós temos esse conteúdo de texto igual a cores novas.

113
00:07:32,050 --> 00:07:37,060
E isso na verdade não funcionará porque isso costumava estar se referindo ao botão de reinicialização.

114
00:07:37,390 --> 00:07:40,420
E isso estava dentro do evento no centro para o botão de reinicialização.

115
00:07:40,540 --> 00:07:43,240
Agora, estamos em vez de uma função separada chamada reset.

116
00:07:43,270 --> 00:07:45,720
Portanto, precisamos codificar o código como botão de reinicialização.

117
00:07:45,880 --> 00:07:49,140
E então estamos mudando a exibição da mensagem para ficar vazio.

118
00:07:49,570 --> 00:07:54,660
E então, estamos passando por todos os quadrados e estamos atualizando suas cores.

119
00:07:54,970 --> 00:07:57,920
E então, estamos mudando o plano de fundo do 8: 1 de volta ao azul.

120
00:07:58,180 --> 00:08:02,170
E se chamamos isso de que, em vez de aqui, acabamos de executar o reset.

121
00:08:02,170 --> 00:08:06,760
Há um pequeno problema que é que nunca estamos atualizando quadrinhos dormentes.

122
00:08:06,880 --> 00:08:11,870
Então, quando eu clicar no botão fácil, você deseja alterar a variável dos quadrados para ser três.

123
00:08:11,920 --> 00:08:15,180
Quando eu clicar no botão rígido, você deseja alterá-lo para ser 6.

124
00:08:15,220 --> 00:08:22,940
Então, para fazer esse minuto, vá aqui e adicione uma declaração if e tudo o que podemos fazer é escrever se este conteúdo de texto.

125
00:08:22,960 --> 00:08:27,880
Então, o botão que foi clicado se o conteúdo do texto for igual a fácil.

126
00:08:28,250 --> 00:08:36,510
O que vamos fazer é dizer que os quadrados entorpecidos são iguais a três quadrados numéricos de L'são iguais a seis.

127
00:08:36,640 --> 00:08:42,130
E então chamaremos a função de reinicialização que usará os quadrados numb como você pode ver aqui na nossa

128
00:08:42,130 --> 00:08:43,030
função de reinicialização.

129
00:08:43,150 --> 00:08:47,410
Estamos usando alguns quadrados para chamar nossa função de gerar cores aleatórias.

130
00:08:47,600 --> 00:08:51,970
Então, precisamos ter alguns quadrados atualizados, o que estamos fazendo aqui.

131
00:08:52,000 --> 00:08:57,010
Na verdade, há uma maneira mais curta de escrever isso que algumas pessoas são grandes fãs.

132
00:08:57,010 --> 00:08:58,580
É chamado de operador ternário.

133
00:08:58,570 --> 00:09:01,720
Então vou escrever primeiro e depois vou falar sobre como funciona.

134
00:09:01,720 --> 00:09:06,350
Portanto, esse conteúdo de texto é igual a iguais.

135
00:09:06,670 --> 00:09:10,870
Ponto de interrogação fácil.

136
00:09:11,000 --> 00:09:19,110
Numb squares é igual a três quadrares numb quadrados é igual a seis.

137
00:09:19,120 --> 00:09:23,710
Então, essa linha aqui faz exatamente a mesma coisa dessas quatro linhas aqui.

138
00:09:23,710 --> 00:09:25,430
Estas cinco linhas.

139
00:09:25,510 --> 00:09:27,360
Então, é chamado de operador ternário.

140
00:09:27,400 --> 00:09:28,950
Há três partes disso.

141
00:09:28,960 --> 00:09:30,860
A primeira coisa é a condição.

142
00:09:31,070 --> 00:09:40,390
Então, você pode ler isso como se esse conteúdo de texto fosse igual a fácil, então nenhum quadrado é igual a 3 Caso contrário, nenhum quadrado

143
00:09:40,450 --> 00:09:42,080
é igual a 6.

144
00:09:42,250 --> 00:09:44,060
Então, é apenas uma maneira de escrever isso.

145
00:09:44,380 --> 00:09:46,280
E eu vou ficar assim.

146
00:09:46,270 --> 00:09:51,880
Normalmente, se apenas tivermos uma linha rápida se declarações em que estamos definindo um valor para duas

147
00:09:51,880 --> 00:09:55,970
opções possíveis diferentes, é um bom caso de uso para o operador ternário.

148
00:09:56,600 --> 00:09:59,420
Nós ainda temos um problema, porém, o que nunca estamos escondendo.

149
00:09:59,420 --> 00:10:01,380
Ou mostrando o número correto de quadrados.

150
00:10:01,390 --> 00:10:03,940
Então, o que acontecerá se eu atualizar.

151
00:10:04,030 --> 00:10:04,950
Começamos no modo rígido.

152
00:10:04,950 --> 00:10:05,860
Isso funciona bem.

153
00:10:05,870 --> 00:10:07,290
Tudo funciona da mesma forma.

154
00:10:07,450 --> 00:10:13,240
Se eu clicar em fácil ainda, ainda temos seis quadrados aqui e você verá o fundo três, simplesmente não

155
00:10:13,240 --> 00:10:16,160
altere as cores porque nós apenas geramos três cores.

156
00:10:16,370 --> 00:10:21,890
Então, o que precisamos fazer em vez da nossa função de reinicialização, precisamos explicar isso.

157
00:10:21,880 --> 00:10:26,750
Então aqui em vez de este loop onde estamos mudando a cor dos quadrados para combinar a

158
00:10:26,740 --> 00:10:28,000
cor da matriz de cores.

159
00:10:28,210 --> 00:10:33,370
Se houver apenas três itens na matriz de cores, o que realmente precisamos fazer é ocultar os outros

160
00:10:33,380 --> 00:10:34,060
três quadrados.

161
00:10:34,270 --> 00:10:40,060
Então vou escrever isso com uma declaração if e só vou verificar se há uma cor para pintar.

162
00:10:40,670 --> 00:10:42,070
Também faço outra coisa.

163
00:10:42,110 --> 00:10:47,410
Então, se houver uma cor, vamos pintar ou mudar a cor de fundo dos quadrados.

164
00:10:47,410 --> 00:10:57,200
Eu para ser essa cor, caso contrário, precisamos mudar os quadrados que eu mostro para não ser nenhum.

165
00:10:57,320 --> 00:11:02,920
E isso precisa ser desenhado para exibir exatamente assim.

166
00:11:03,100 --> 00:11:05,130
E então isso irá escondê-lo para nós.

167
00:11:05,360 --> 00:11:12,280
Então, o que acontece se eu clicar no botão fácil, eu tenho uma série de cores com três itens que estavam em

168
00:11:12,280 --> 00:11:14,870
looping em seis quadrados e voltando a verificar.

169
00:11:14,920 --> 00:11:19,790
Se houver uma cor que corresponda a esse quadrado e para os três primeiros haverá.

170
00:11:19,820 --> 00:11:22,890
Então, definimos a cor de fundo para ser a cor da matriz.

171
00:11:23,020 --> 00:11:26,700
Mas as últimas três cores, eu não serei.

172
00:11:26,740 --> 00:11:27,910
Ou, na verdade, será indefinido.

173
00:11:27,910 --> 00:11:29,240
Não haverá uma cor lá.

174
00:11:29,470 --> 00:11:31,010
Então isso é falso.

175
00:11:31,270 --> 00:11:34,560
E o que acontece é que nós configuramos a tela para não ser nenhuma.

176
00:11:34,820 --> 00:11:37,770
Então, eu vou mostrar-lhe como isso funciona atualizar.

177
00:11:38,230 --> 00:11:41,180
Se eu clicar com facilidade, o fundo três desaparecerá.

178
00:11:41,170 --> 00:11:43,720
Continue clicando em facil, temos três novas cores.

179
00:11:43,780 --> 00:11:44,840
Vamos jogar o jogo.

180
00:11:44,840 --> 00:11:46,410
Aqui vamos nós.

181
00:11:46,450 --> 00:11:52,250
Nós temos um problema, porém, o que é se eu clicar em um duro, estamos mudando todos os seis

182
00:11:52,240 --> 00:11:59,530
quadrados para ter uma nova cor Bactrim, mas não estamos escondendo o fundo três farão para contornar isso é certo antes de dar um

183
00:11:59,530 --> 00:12:01,720
novo plano de fundo cor para os quadrados.

184
00:12:01,720 --> 00:12:03,960
Eu vou seguir em frente e mostrar-lhes.

185
00:12:03,970 --> 00:12:09,470
Então, vai ser quadrados, pensei que a exibição de estilo é igual a bloqueio.

186
00:12:09,590 --> 00:12:11,320
Então é assim que os devolvemos.

187
00:12:11,410 --> 00:12:13,140
E nós vamos fazer isso com os seis.

188
00:12:13,150 --> 00:12:14,170
Não é grande coisa.

189
00:12:14,200 --> 00:12:18,490
Então, se lhes darmos uma cor de fundo, estaremos sempre garantindo que eles sejam visíveis primeiro.

190
00:12:19,340 --> 00:12:24,590
Então, agora, se atualizarmos e eles são fáceis, temos três jogar um jogo.

191
00:12:24,760 --> 00:12:26,160
Eu clico sobre difícil.

192
00:12:26,380 --> 00:12:28,070
Agora recebemos seis chamadores.

193
00:12:28,070 --> 00:12:30,520
Vamos jogar um jogo.

194
00:12:30,520 --> 00:12:33,700
Lá, vamos clicar sobre fácil e voltamos para três.

195
00:12:33,700 --> 00:12:34,280
Tudo bem.

196
00:12:34,450 --> 00:12:37,390
Então, você pode ver que limpamos muito código aqui.

197
00:12:37,510 --> 00:12:39,480
Isso costumava ser muito mais longo.

198
00:12:39,480 --> 00:12:41,360
É como pelo menos três vezes por ano.

199
00:12:41,380 --> 00:12:46,120
E dois ouvintes clicados diferentes e agora nosso código é relativamente versátil.

200
00:12:46,120 --> 00:12:51,850
média, tudo o que precisamos fazer é mudar esta linha aqui onde teríamos um número de quadrados de número.

201
00:12:51,860 --> 00:12:54,040
Se quisermos adicionar um botão de dificuldade

202
00:12:54,040 --> 00:12:59,950
Talvez desejemos 5 quadrados ou queremos um nível super difícil, onde temos 10 quadrados, precisamos apenas mudar os quadrados

203
00:12:59,950 --> 00:13:06,380
numéricos e chamar a nossa função de reinicialização para obter o próximo local que podemos usar nossa função de reinicialização, na

204
00:13:06,670 --> 00:13:09,160
verdade, quando clicamos no botão de reinicialização .

205
00:13:09,430 --> 00:13:15,050
Então, tudo o que precisamos fazer lá é substituir tudo, em vez do botão de

206
00:13:15,040 --> 00:13:17,630
reiniciar, clique Lisner com apenas redefinir assim.

207
00:13:17,650 --> 00:13:19,500
Então, isso impulsiona nosso código muito.

208
00:13:19,570 --> 00:13:22,650
Acabamos de eliminar 10 ou mais linhas.

209
00:13:23,170 --> 00:13:26,280
Então, vamos voltar salvar sem parênteses.

210
00:13:26,600 --> 00:13:29,020
Vamos ao navegador e certifique-se de que ele ainda funciona.

211
00:13:29,020 --> 00:13:31,580
Então vamos jogar um jogo.

212
00:13:31,850 --> 00:13:35,000
Clique em reproduzir novamente e é reiniciado.

213
00:13:35,320 --> 00:13:40,750
Vamos clicar em jogar com facilidade e também reiniciar tudo bem.

214
00:13:40,750 --> 00:13:41,430
Tudo bem.

215
00:13:41,530 --> 00:13:43,340
Então, conduzimos nosso código um pouco.

216
00:13:43,380 --> 00:13:47,690
Eles vão se livrar desses dois apenas para que você possa ver o quanto encurtamos tudo