OK, vamos voltar neste vídeo.
Vamos trabalhar em alguns novos recursos.
O primeiro é quando eu ganho o jogo.
Isso me diz correto.
E então eu posso clicar em jogar novamente para obter novas cores e se ainda não ganhei.
Mas também quero cores novas porque, por algum motivo, não gosto das cores que tenho.
Eu também posso clicar nesse novo botão de cores.
nova cor aleatória aparecer nas seis cores aleatórias e voltaremos ao último modo fácil e difícil.
Então, basicamente, precisamos de um botão que irá redefinir o jogo escolher novas cores escolher uma
Então, esse botão faz o mesmo.
O texto muda embora se ganhássemos o jogo e perguntou se queremos jogar de novo para que possamos clicar em
jogar novamente e isso irá redefini-lo.
Mas também posso clicar em novas cores e isso também irá redefini-lo.
Então, é sobre isso que vamos nos concentrar.
E para começar, eu vou seguir em frente e adicionar o botão e adicionar essa faixa que atravessa
para que a faixa contenha esse botão para uma nova cor ou para jogar novamente.
E contém a mensagem que já temos.
E depois os dois botões que faremos mais tarde.
Então, se formos a primeira coisa que precisamos fazer, já temos uma div, eu vou apenas dar-lhe id of stripe
e então podemos usar isso.
E então, já temos o nosso espaço dentro que mostrará algo como correto ou tente novamente.
E aqui dentro, vamos apenas adicionar o nosso botão e este botão começará dizendo novas cores que podemos salvar,
nós atualizamos.
OK, isso parece tão ruim quanto você esperaria.
Vamos em frente e adicione a cor do fundo branco e centre tudo nesta div Então, nossa div é
chamada de listra.
Vamos ao nosso C Ss e vamos selecionar Strype, que é um ID.
Então, precisamos usar listra com uma reflexão tardia.
E vamos definir um fundo de cor de fundo para ser branco.
Eu vou definir a altura para ser 30 pixels, de modo que nós possamos uma div alta e
agradável, são div relativamente altas e vou configurar o texto alinhado para ser o Centro.
E agora, se eu atualizar, você obtém uma div divisão branca todo o caminho.
É um pouco mais alto do que era.
Nós temos um botão aqui dentro de qualquer coisa.
E se eu ganhar ou perder ou obter a resposta errada, há um período que você simplesmente não pode vê-lo.
E isso é porque o texto dessa extensão é branco.
Então, o que você pode pensar em fazer é entrar em nossa faixa a div e dizer que a
cor do texto deve ser preta, mas, infelizmente, isso não funciona.
a idéia de listra deve ser preto de cor de texto preto e você pensaria que OK, que
é super-específico, se você puder pensar de volta nossas primeiras leituras de especificidade CSS e ID são muito específicas.
E esta é uma questão de especificidade, porque estamos dizendo que, com esta linha, aqui, tudo dentro da
coisa com
O problema é que isso está configurando as cores para ser preto na div com faixa de identificação.
E então, estamos configurando todos os intervalos para que você possa ver aqui para ser cor branca para que isso seja branco
e isso o torna mais específico, porque na verdade estamos direcionando o elemento em
vez de o pai e ter herdado a cor.
Então, temos algumas opções.
O que eu farei é, na verdade, simplesmente me livrar disso por enquanto.
Nós não vamos definir a cor para ser mais branco e podemos atualizar e você verá que isso não muda de
cor, ainda é um espaço em branco, mesmo que estivemos livres da linha que disse que todos os
intervalos são brancos e isso é porque está dentro de um H1 e herda a cor do texto H1 que é branca.
Da mesma forma que esse espaço aqui é preto.
Ele herdou a cor do texto de preto ou apenas preto regular colorido da divisão de faixa que está
à sua volta, que você pode ver aqui cor preta.
E esse é o nosso golpeado.
ESTÁ BEM.
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.
E antes que possamos fazer isso precisamos selecionar esse botão.
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
botão de reinicialização em vez de um Javascript.
Portanto, o botão de rede var é igual ao documento que consulta o seletor com nossa oitava ou reinicia.
E então, como sempre, eu gostaria de adicionar meu ouvinte de evento de teste simples.
Então o botão de reinicialização adiciona o ouvinte de eventos.
e quando clicamos em tudo o que faremos é fazer um botão de restituição rápida de alerta simples, assim seja, seja atualizado.
Clique
E se eu clicar nisso, recebo meu alerta e isso significa que estamos bem.
Então, em seguida, podemos realmente trabalhar na lógica para redefinir.
Então, o que precisamos fazer, vamos escrever o pseudo-código.
Quando você clica nesse botão precisa gerar todas as cores novas.
Precisamos escolher uma nova cor aleatória da matriz e então precisamos alterar as cores dos quadrados
na página.
Então, para gerar todas as novas cores, na verdade, já temos essa função existente gerar cores aleatórias.
Então, vamos apenas dizer que as cores agora são iguais a gerar cores aleatórias de seis.
E então vamos escolher uma nova cor aleatória para escolher a cor agora é igual a escolher a cor do método
ou a função que definimos.
Há uma coisa mais que realmente precisamos fazer, que é mudar essa cor de exibição para combinar as novas cores
de escolha.
Então, vamos apenas dizer mudar
a exibição colorida para combinar a cor escolhida para que seja simples.
atualizamos nossa página e tentamos clicar em novas cores, o que está fazendo é gerar seis novas cores.
Tudo o que precisamos fazer é dizer que o conteúdo de texto de ponto de exibição colorida é igual à cor
escolhida e se
Ainda não os vemos porque não temos esse código.
E, em seguida, está escolhendo um daqueles como cor escolhida e, em seguida, mudando o que vemos aqui para combinar
a cor picta.
Então, nos dá uma nova cor aleatória lá e seis cores aleatórias nos bastidores.
Então, a última peça é refletir essas seis novas cores na página e já fizemos isso antes.
passando por todos os quadrados e estamos mudando o estilo quadrado do fundo para ser cores.
Abaixo, estamos
Eu, então, vou começar por duplicar tudo isso e vamos refatorar isso.
Mas para começar a colocar tudo aqui.
Então, faça um loop em todos os quadrados dos quadrados para superar-me mais plus e então tudo o que precisamos
fazer é dizer quadrados que estilo esse fundo é igual às cores.
Eu salvarei.
E se atualizamos e clicamos em novas cores, ele gera 60 cores aleatórias.
Ele escolhe um.
Atualiza a exibição para refletir a cor da imagem e muda todos os seis quadrados para combinar
as novas seis cores.
Então vamos tentar e ver se nossa lógica anterior também se mantém.
ESTÁ BEM.
Então, essa é uma quantidade decente de vermelho.
Muito pouco verde e uma quantidade decente de azul.
Vamos tentar clicar em alguns que não pensamos estar certos.
E agora vamos por um dos púrpuras.
Então parece um pouco mais vermelho o azul.
Então vou adivinhar isso e estamos certos e parece que as coisas ainda estão funcionando bem.
Novas cores rápidas novamente.
Queremos redefinir isso.
Essa é uma cosmética muito pequena.
Mas quando clicamos em novas cores, devemos redefinir a exibição aqui para que ela volte ao preto
ou a esta cor cinza escuro.
fazer é que, quando nós queremos que ele diga, jogue novamente, como você pode ver aqui, então eu vou ganhar aqui.
A outra coisa que queremos
Este é muito verde.
Eu ganho e me diz que joga novamente e faz o mesmo.
Funcionalmente, ele realmente não muda, é só nós e texto diferente.
Então isso é simples de fazer.
Tudo o que precisamos fazer é encontrar onde o código é para verificar se você ganha.
Está aqui mesmo.
E então queremos apenas mudar o conteúdo do texto desse botão.
Então, o botão foi chamado de botão de reinicialização.
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.
Agora vamos tentar jogar um desses.
Então, este é um monte de vermelho e muito verde e um pouco azul.
Então, um monte de vermelho e muito verde nos dará uma cor amarela.
Então vamos restringir alguns deles.
E então, um pouco de azul vai torná-lo mais claro e brilhante.
Então, se tentarmos um desses como este ou este, você verá que eles não estão bem.
E esta é a nossa resposta aqui e isso nos diz que jogamos novamente.
E muito rápido e faz exatamente o mesmo.
A última coisa que mencionei está mudando a cor de fundo de volta.
Então, aqui, podemos fazer isso no final do botão de reinicialização.
Nós apenas vamos selecionar aquele H-1.
É um ponto que selecionamos aqui.
Esse é o fundo dial-up.
UPS é igual.
E é isso hexadecimal 2 3 2 3 2 3, que é se você esqueceu que você poderia ir procurar em SEE avaliar
a cor do fundo do corpo.
Ou nós colocamos isso aqui quando eliminamos uma das cores se você escolher a cor errada.
Nós mudamos a cor de fundo para ser o mesmo que o corpo.
OK, vamos atualizar novas cores.
Vamos ganhar agora.
Apenas rápido, aleatoriamente apenas por causa do tempo, clicamos novamente no jogo e ele muda de volta para um
fundo preto.
Ou o fundo cinza escuro.
OK, então é tudo para este vídeo.
Em seguida, vamos adicionar os botões para escolher entre o modo fácil e difícil.
E, finalmente, vamos desenhar coisas para que elas parecem boas