1
00:00:00,650 --> 00:00:02,670
OK, vamos voltar neste vídeo.

2
00:00:02,670 --> 00:00:05,040
Vamos trabalhar em alguns novos recursos.

3
00:00:05,040 --> 00:00:08,190
O primeiro é quando eu ganho o jogo.

4
00:00:08,460 --> 00:00:09,410
Isso me diz correto.

5
00:00:09,630 --> 00:00:15,440
E então eu posso clicar em jogar novamente para obter novas cores e se ainda não ganhei.

6
00:00:15,530 --> 00:00:19,460
Mas também quero cores novas porque, por algum motivo, não gosto das cores que tenho.

7
00:00:19,680 --> 00:00:21,750
Eu também posso clicar nesse novo botão de cores.

8
00:00:21,930 --> 00:00:27,300
nova cor aleatória aparecer nas seis cores aleatórias e voltaremos ao último modo fácil e difícil.

9
00:00:27,300 --> 00:00:32,770
Então, basicamente, precisamos de um botão que irá redefinir o jogo escolher novas cores escolher uma

10
00:00:32,940 --> 00:00:35,870
Então, esse botão faz o mesmo.

11
00:00:36,040 --> 00:00:42,240
O texto muda embora se ganhássemos o jogo e perguntou se queremos jogar de novo para que possamos clicar em

12
00:00:42,240 --> 00:00:44,150
jogar novamente e isso irá redefini-lo.

13
00:00:44,220 --> 00:00:48,540
Mas também posso clicar em novas cores e isso também irá redefini-lo.

14
00:00:48,570 --> 00:00:49,840
Então, é sobre isso que vamos nos concentrar.

15
00:00:50,010 --> 00:00:55,590
E para começar, eu vou seguir em frente e adicionar o botão e adicionar essa faixa que atravessa

16
00:00:55,590 --> 00:01:00,290
para que a faixa contenha esse botão para uma nova cor ou para jogar novamente.

17
00:01:00,870 --> 00:01:02,890
E contém a mensagem que já temos.

18
00:01:03,060 --> 00:01:04,970
E depois os dois botões que faremos mais tarde.

19
00:01:05,250 --> 00:01:11,590
Então, se formos a primeira coisa que precisamos fazer, já temos uma div, eu vou apenas dar-lhe id of stripe

20
00:01:12,750 --> 00:01:14,240
e então podemos usar isso.

21
00:01:14,550 --> 00:01:19,560
E então, já temos o nosso espaço dentro que mostrará algo como correto ou tente novamente.

22
00:01:19,590 --> 00:01:27,990
E aqui dentro, vamos apenas adicionar o nosso botão e este botão começará dizendo novas cores que podemos salvar,

23
00:01:28,780 --> 00:01:29,820
nós atualizamos.

24
00:01:30,160 --> 00:01:33,140
OK, isso parece tão ruim quanto você esperaria.

25
00:01:33,330 --> 00:01:39,330
Vamos em frente e adicione a cor do fundo branco e centre tudo nesta div Então, nossa div é

26
00:01:39,330 --> 00:01:40,210
chamada de listra.

27
00:01:40,590 --> 00:01:45,220
Vamos ao nosso C Ss e vamos selecionar Strype, que é um ID.

28
00:01:45,360 --> 00:01:48,970
Então, precisamos usar listra com uma reflexão tardia.

29
00:01:49,260 --> 00:01:54,580
E vamos definir um fundo de cor de fundo para ser branco.

30
00:01:54,660 --> 00:02:02,460
Eu vou definir a altura para ser 30 pixels, de modo que nós possamos uma div alta e

31
00:02:02,460 --> 00:02:09,030
agradável, são div relativamente altas e vou configurar o texto alinhado para ser o Centro.

32
00:02:09,300 --> 00:02:13,330
E agora, se eu atualizar, você obtém uma div divisão branca todo o caminho.

33
00:02:13,350 --> 00:02:15,220
É um pouco mais alto do que era.

34
00:02:15,240 --> 00:02:17,230
Nós temos um botão aqui dentro de qualquer coisa.

35
00:02:17,400 --> 00:02:23,640
E se eu ganhar ou perder ou obter a resposta errada, há um período que você simplesmente não pode vê-lo.

36
00:02:23,640 --> 00:02:27,290
E isso é porque o texto dessa extensão é branco.

37
00:02:28,380 --> 00:02:34,950
Então, o que você pode pensar em fazer é entrar em nossa faixa a div e dizer que a

38
00:02:34,950 --> 00:02:38,690
cor do texto deve ser preta, mas, infelizmente, isso não funciona.

39
00:02:38,880 --> 00:02:45,390
a idéia de listra deve ser preto de cor de texto preto e você pensaria que OK, que

40
00:02:45,390 --> 00:02:52,110
é super-específico, se você puder pensar de volta nossas primeiras leituras de especificidade CSS e ID são muito específicas.

41
00:02:52,170 --> 00:02:58,890
E esta é uma questão de especificidade, porque estamos dizendo que, com esta linha, aqui, tudo dentro da

42
00:02:58,890 --> 00:02:59,710
coisa com

43
00:02:59,790 --> 00:03:05,440
O problema é que isso está configurando as cores para ser preto na div com faixa de identificação.

44
00:03:05,970 --> 00:03:13,080
E então, estamos configurando todos os intervalos para que você possa ver aqui para ser cor branca para que isso seja branco

45
00:03:13,140 --> 00:03:17,820
e isso o torna mais específico, porque na verdade estamos direcionando o elemento em

46
00:03:17,820 --> 00:03:20,630
vez de o pai e ter herdado a cor.

47
00:03:21,090 --> 00:03:22,570
Então, temos algumas opções.

48
00:03:22,590 --> 00:03:25,960
O que eu farei é, na verdade, simplesmente me livrar disso por enquanto.

49
00:03:26,040 --> 00:03:31,710
Nós não vamos definir a cor para ser mais branco e podemos atualizar e você verá que isso não muda de

50
00:03:31,710 --> 00:03:36,720
cor, ainda é um espaço em branco, mesmo que estivemos livres da linha que disse que todos os

51
00:03:37,050 --> 00:03:42,960
intervalos são brancos e isso é porque está dentro de um H1 e herda a cor do texto H1 que é branca.

52
00:03:42,990 --> 00:03:45,590
Da mesma forma que esse espaço aqui é preto.

53
00:03:45,600 --> 00:03:51,720
Ele herdou a cor do texto de preto ou apenas preto regular colorido da divisão de faixa que está

54
00:03:51,720 --> 00:03:55,160
à sua volta, que você pode ver aqui cor preta.

55
00:03:55,410 --> 00:03:56,770
E esse é o nosso golpeado.

56
00:03:57,060 --> 00:03:57,660
ESTÁ BEM.

57
00:03:57,810 --> 00:04:06,720
Então, vamos agora trabalhar para obter este botão para reiniciar o jogo, então, para começar, precisamos adicionar um ouvinte de eventos.

58
00:04:06,870 --> 00:04:09,750
E antes que possamos fazer isso precisamos selecionar esse botão.

59
00:04:09,960 --> 00:04:18,000
Então eu vou dar esse botão e ID aqui, vamos chamá-lo de identificação igual a redefinir e então selecionaremos esse

60
00:04:18,000 --> 00:04:21,000
botão de reinicialização em vez de um Javascript.

61
00:04:21,000 --> 00:04:31,980
Portanto, o botão de rede var é igual ao documento que consulta o seletor com nossa oitava ou reinicia.

62
00:04:31,980 --> 00:04:37,120
E então, como sempre, eu gostaria de adicionar meu ouvinte de evento de teste simples.

63
00:04:37,140 --> 00:04:40,680
Então o botão de reinicialização adiciona o ouvinte de eventos.

64
00:04:40,860 --> 00:04:51,990
e quando clicamos em tudo o que faremos é fazer um botão de restituição rápida de alerta simples, assim seja, seja atualizado.

65
00:04:52,070 --> 00:04:52,820
Clique

66
00:04:52,970 --> 00:04:57,590
E se eu clicar nisso, recebo meu alerta e isso significa que estamos bem.

67
00:04:57,590 --> 00:05:01,030
Então, em seguida, podemos realmente trabalhar na lógica para redefinir.

68
00:05:01,250 --> 00:05:03,890
Então, o que precisamos fazer, vamos escrever o pseudo-código.

69
00:05:03,890 --> 00:05:10,030
Quando você clica nesse botão precisa gerar todas as cores novas.

70
00:05:10,040 --> 00:05:20,750
Precisamos escolher uma nova cor aleatória da matriz e então precisamos alterar as cores dos quadrados

71
00:05:20,750 --> 00:05:22,030
na página.

72
00:05:22,280 --> 00:05:28,310
Então, para gerar todas as novas cores, na verdade, já temos essa função existente gerar cores aleatórias.

73
00:05:29,030 --> 00:05:33,940
Então, vamos apenas dizer que as cores agora são iguais a gerar cores aleatórias de seis.

74
00:05:34,580 --> 00:05:41,270
E então vamos escolher uma nova cor aleatória para escolher a cor agora é igual a escolher a cor do método

75
00:05:41,270 --> 00:05:42,860
ou a função que definimos.

76
00:05:42,860 --> 00:05:48,890
Há uma coisa mais que realmente precisamos fazer, que é mudar essa cor de exibição para combinar as novas cores

77
00:05:48,890 --> 00:05:49,540
de escolha.

78
00:05:49,850 --> 00:05:52,040
Então, vamos apenas dizer mudar

79
00:05:55,250 --> 00:06:01,090
a exibição colorida para combinar a cor escolhida para que seja simples.

80
00:06:01,160 --> 00:06:08,870
atualizamos nossa página e tentamos clicar em novas cores, o que está fazendo é gerar seis novas cores.

81
00:06:12,890 --> 00:06:21,890
Tudo o que precisamos fazer é dizer que o conteúdo de texto de ponto de exibição colorida é igual à cor

82
00:06:21,890 --> 00:06:23,110
escolhida e se

83
00:06:23,120 --> 00:06:25,400
Ainda não os vemos porque não temos esse código.

84
00:06:25,580 --> 00:06:30,750
E, em seguida, está escolhendo um daqueles como cor escolhida e, em seguida, mudando o que vemos aqui para combinar

85
00:06:30,770 --> 00:06:31,410
a cor picta.

86
00:06:31,730 --> 00:06:36,220
Então, nos dá uma nova cor aleatória lá e seis cores aleatórias nos bastidores.

87
00:06:36,230 --> 00:06:42,230
Então, a última peça é refletir essas seis novas cores na página e já fizemos isso antes.

88
00:06:42,260 --> 00:06:49,070
passando por todos os quadrados e estamos mudando o estilo quadrado do fundo para ser cores.

89
00:06:49,460 --> 00:06:50,440
Abaixo, estamos

90
00:06:50,450 --> 00:06:56,060
Eu, então, vou começar por duplicar tudo isso e vamos refatorar isso.

91
00:06:56,350 --> 00:06:58,340
Mas para começar a colocar tudo aqui.

92
00:06:58,370 --> 00:07:07,170
Então, faça um loop em todos os quadrados dos quadrados para superar-me mais plus e então tudo o que precisamos

93
00:07:07,450 --> 00:07:12,600
fazer é dizer quadrados que estilo esse fundo é igual às cores.

94
00:07:13,020 --> 00:07:15,820
Eu salvarei.

95
00:07:16,070 --> 00:07:21,660
E se atualizamos e clicamos em novas cores, ele gera 60 cores aleatórias.

96
00:07:21,740 --> 00:07:22,820
Ele escolhe um.

97
00:07:22,820 --> 00:07:29,090
Atualiza a exibição para refletir a cor da imagem e muda todos os seis quadrados para combinar

98
00:07:29,090 --> 00:07:30,360
as novas seis cores.

99
00:07:30,710 --> 00:07:34,730
Então vamos tentar e ver se nossa lógica anterior também se mantém.

100
00:07:35,240 --> 00:07:35,850
ESTÁ BEM.

101
00:07:36,290 --> 00:07:39,130
Então, essa é uma quantidade decente de vermelho.

102
00:07:39,140 --> 00:07:41,460
Muito pouco verde e uma quantidade decente de azul.

103
00:07:41,840 --> 00:07:45,280
Vamos tentar clicar em alguns que não pensamos estar certos.

104
00:07:46,160 --> 00:07:48,880
E agora vamos por um dos púrpuras.

105
00:07:49,070 --> 00:07:50,940
Então parece um pouco mais vermelho o azul.

106
00:07:50,960 --> 00:07:56,510
Então vou adivinhar isso e estamos certos e parece que as coisas ainda estão funcionando bem.

107
00:07:56,540 --> 00:07:58,470
Novas cores rápidas novamente.

108
00:07:58,610 --> 00:08:00,320
Queremos redefinir isso.

109
00:08:00,320 --> 00:08:01,960
Essa é uma cosmética muito pequena.

110
00:08:02,030 --> 00:08:08,470
Mas quando clicamos em novas cores, devemos redefinir a exibição aqui para que ela volte ao preto

111
00:08:08,510 --> 00:08:11,000
ou a esta cor cinza escuro.

112
00:08:11,000 --> 00:08:16,670
fazer é que, quando nós queremos que ele diga, jogue novamente, como você pode ver aqui, então eu vou ganhar aqui.

113
00:08:17,030 --> 00:08:18,480
A outra coisa que queremos

114
00:08:18,530 --> 00:08:20,350
Este é muito verde.

115
00:08:20,540 --> 00:08:24,980
Eu ganho e me diz que joga novamente e faz o mesmo.

116
00:08:24,980 --> 00:08:29,260
Funcionalmente, ele realmente não muda, é só nós e texto diferente.

117
00:08:29,300 --> 00:08:31,060
Então isso é simples de fazer.

118
00:08:31,100 --> 00:08:35,150
Tudo o que precisamos fazer é encontrar onde o código é para verificar se você ganha.

119
00:08:35,180 --> 00:08:36,240
Está aqui mesmo.

120
00:08:36,620 --> 00:08:39,500
E então queremos apenas mudar o conteúdo do texto desse botão.

121
00:08:39,740 --> 00:08:41,820
Então, o botão foi chamado de botão de reinicialização.

122
00:08:41,930 --> 00:08:51,740
Então, o botão de reinicialização que o conteúdo de texto é igual a reproduzir novamente com uma atualização de ponto de interrogação diz novas cores.

123
00:08:52,790 --> 00:08:54,560
Agora vamos tentar jogar um desses.

124
00:08:54,740 --> 00:08:58,750
Então, este é um monte de vermelho e muito verde e um pouco azul.

125
00:08:58,790 --> 00:09:02,070
Então, um monte de vermelho e muito verde nos dará uma cor amarela.

126
00:09:02,210 --> 00:09:04,100
Então vamos restringir alguns deles.

127
00:09:04,100 --> 00:09:08,180
E então, um pouco de azul vai torná-lo mais claro e brilhante.

128
00:09:08,480 --> 00:09:13,590
Então, se tentarmos um desses como este ou este, você verá que eles não estão bem.

129
00:09:13,880 --> 00:09:17,230
E esta é a nossa resposta aqui e isso nos diz que jogamos novamente.

130
00:09:17,300 --> 00:09:20,120
E muito rápido e faz exatamente o mesmo.

131
00:09:20,180 --> 00:09:23,570
A última coisa que mencionei está mudando a cor de fundo de volta.

132
00:09:23,570 --> 00:09:28,430
Então, aqui, podemos fazer isso no final do botão de reinicialização.

133
00:09:28,520 --> 00:09:30,950
Nós apenas vamos selecionar aquele H-1.

134
00:09:31,200 --> 00:09:34,610
É um ponto que selecionamos aqui.

135
00:09:34,670 --> 00:09:37,090
Esse é o fundo dial-up.

136
00:09:37,160 --> 00:09:40,600
UPS é igual.

137
00:09:40,640 --> 00:09:47,600
E é isso hexadecimal 2 3 2 3 2 3, que é se você esqueceu que você poderia ir procurar em SEE avaliar

138
00:09:47,900 --> 00:09:49,560
a cor do fundo do corpo.

139
00:09:49,800 --> 00:09:55,410
Ou nós colocamos isso aqui quando eliminamos uma das cores se você escolher a cor errada.

140
00:09:55,580 --> 00:09:58,680
Nós mudamos a cor de fundo para ser o mesmo que o corpo.

141
00:09:59,150 --> 00:10:02,130
OK, vamos atualizar novas cores.

142
00:10:02,330 --> 00:10:03,820
Vamos ganhar agora.

143
00:10:04,010 --> 00:10:10,760
Apenas rápido, aleatoriamente apenas por causa do tempo, clicamos novamente no jogo e ele muda de volta para um

144
00:10:10,760 --> 00:10:11,300
fundo preto.

145
00:10:11,310 --> 00:10:13,060
Ou o fundo cinza escuro.

146
00:10:13,570 --> 00:10:15,530
OK, então é tudo para este vídeo.

147
00:10:15,530 --> 00:10:19,790
Em seguida, vamos adicionar os botões para escolher entre o modo fácil e difícil.

148
00:10:19,820 --> 00:10:22,590
E, finalmente, vamos desenhar coisas para que elas parecem boas