Neste vídeo, há algumas pequenas mudanças que eu quero fazer e então vou falar
sobre como podermos refatorar isso um pouco.
Então, a primeira mudança é que quando ganhamos esse jogo.
Então vamos ganhar aqui.
Lá vamos e recebo esta mensagem correta e clico em jogar novamente.
Ainda diz correto.
E queremos que restaure qual é uma mudança muito rápida.
quando clicamos em jogar novamente, então precisamos mudar o intervalo que temos aqui e torná-lo apenas vazio.
Tudo o que precisamos fazer é encontrar o código que é executado
Então, vamos descobrir que isso faz a tela cheia.
Então, quando clicamos nesse botão de reinicialização que está aqui.
Tudo o que precisamos fazer é mudar nossa exibição, que chamamos de exibição de mensagem.
Então vamos fazer isso aqui em qualquer lugar.
Texto de exibição de mensagens, o conteúdo de texto é igual a uma string vazia.
E vamos ver como isso acontece.
Atualizar.
OK, vamos clicar até ganharmos.
OK, então, diz correto aqui.
E se eu clicar em jogar novamente, isso desaparece.
A outra ligeira alteração que eu quero fazer é que este botão só deve dizer jogar novamente uma vez
que o usuário ganha.
Então vou atualizar a página e diz novas cores, como é que queremos que ela funcione.
Então, se eu ganhar, pergunte-me se eu quero jogar de novo.
E então, se eu clicar em jogar novamente, queremos mudar o texto do botão para voltar para Novas cores.
Então, uma ligeira diferença, mas eu só quero mostrar o jogo novamente se o usuário acabou de ganhar.
Então, entre no nosso código e precisamos encontrar o lugar onde o usuário ganha o jogo que está aqui
mesmo quando o usuário clica na cor escolhida.
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,
mas o que queremos fazer é quando o usuário clica no botão de reinicialização, vamos mudar isso.
Este texto de texto de ponto para voltar para Novas cores e também podemos escrever um botão de reinicialização.
Mas é mais fácil fazer isso porque estamos dentro do ouvinte do evento para o botão de reinicialização.
E isso deve ser bom se atualizarmos rapidamente até obter o caminho certo.
Queremos jogar de novo.
Certo.
Agora, ele volta às cores novas e sempre que diz apenas novas cores uma e outra vez e, se eu ganhar, é
a única vez que diz que joga novamente.
Então, uma coisa muito pequena, mas acho muito excitante, é que, quando eu clico em um desses botões,
ele tem esse esboço irritante em torno disso.
E este é realmente o nosso navegador fazendo isso.
E podemos afastar isso.
Eu não sei se você pode ver isso no elenco da tela, mas há um contorno azul.
É lindo de nocivo.
Então, para se livrar disso, vamos para a nossa folha de estilos e, se selecionarmos
nossos botões, basta aqui, basta escrever resumir nenhum e voltar e atualizar.
Agora, se clicarmos, não temos esse contorno azul em torno disso.
Então, é tudo o que eu queria fazer para a lógica do jogo.
Agora queremos passar um pouco de tempo refatorando seu código.
Então vamos voltar.
A primeira coisa que me mostra é o código aqui onde temos um botão rígido, um botão fácil e
o ouvinte para cada um.
E eles são muito semelhantes em como eles funcionam.
Exceto que um deles funcionará com três quadrados.
O outro trabalha com seis, mas, de outra forma, eles fazem basicamente o mesmo.
Então, podemos realmente reduzir essa duplicação.
E ao invés de dar a cada um uma ideia, o que faremos é livrar-se dessas IDs e dar-lhes
uma aula e eles vão compartilhar a mesma classe.
Então, a classe será chamada de modo.
Então, vamos dar-lhes o modo de classe.
Lembre-se de um botão ou qualquer item pode ter duas classes.
Eles só precisam ser separados por espaços.
Então, este tem o modo de classe e a classe selecionada.
ESTÁ BEM.
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
esse será um documento que consulta o seletor.
Modo Paul Datt.
Então, isso nos dá dois botões.
Então, vamos percorrer os botões de modo.
Então, precisamos para var é igual a zero.
Menos do que o botão de modo surpreendente.
E o que isso também nos permitirá fazer é se, no futuro, quisermos adicionar um modo de dificuldade média ou normal
ou um modo de dificuldade super difícil.
em seguida, usando um loop versus Aqui, temos que escrever manualmente um para cada botão que adicionamos.
Nós não precisamos adicionar ouvintes extras, porque estamos selecionando todos eles e,
ESTÁ BEM.
Então termine o loop aqui.
Plus plus.
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
neste momento.
Antes de irmos mais longe, eu realmente vou comentar o código apenas para que possamos informar o que
está executando em nosso novo código e o que queremos acontecer quando clicamos em um desses botões.
A primeira coisa que queremos acontecer é que a classe selecionada seja aplicada.
Então, agora, é só quando nos deslocamos.
Nós conseguimos essa cor, eu quero que seja quando clicarmos.
Então, precisamos fazer essa lista de classe de pontos, adicionar ponto escolhido assim como aquele que é o que temos aqui, exceto que estamos
fazendo isso para botão fácil e botão rígido.
Nós podemos apenas fazer isso com esse que se refere ao que foi clicado.
A única questão é que precisamos desligar o original também.
e escrevemos os botões do modo zero ponto classe lista ponto remover e então vamos removê-lo do outro também.
E para fazer isso, vamos apenas codificar um pouco
Então, porque há apenas dois botões.
Isso não é um problema.
O que estamos fazendo é removê-lo de ambos os botões apenas para estar seguro e depois
adicioná-lo ao que acabamos de clicar.
Então, agora, se testarmos isso e atualizemos.
Você pode ver que ele só é adicionado ao que acabamos de clicar e é
removido do outro.
Então o que precisamos fazer em seguida é adicionar a maior parte da lógica aqui para esses botões.
Então, precisamos descobrir quantos quadrados para mostrar escolher novas cores e, então, precisamos escolher uma nova escolha para colorir, que é a
cor da qual estamos tentando clicar.
E, finalmente, queremos atualizar a página para refletir as mudanças.
Então, para fazer tudo isso, eu realmente vou fazer uma nova função e essa função só vou
chamar isso de redefinição e isso é algo que vamos usar em alguns lugares porque estamos
repetindo essas etapas a lote escolhendo novas cores escolhendo uma nova cor escolhida na matriz de cores e
atualizando a página para mostrar as novas cores e atualizando esta exibição aqui.
Nós estamos fazendo isso o tempo todo, então eu vou colocar isso tudo em uma função.
Então, o que precisamos fazer dentro dessa função é que, na verdade, só vou copiá-lo daqui para baixo.
Já fizemos isso aqui.
Eu ia copiar tudo isso no nosso Reset assim.
E vamos dar uma olhada no que está acontecendo.
Então, em vez de redefinir ou gerar as cores aleatórias, dependendo da variável dos quadrados numb e, então, estamos
escolhendo uma nova cor, estamos mudando a cor exibe o conteúdo.
Nós temos esse conteúdo de texto igual a cores novas.
E isso na verdade não funcionará porque isso costumava estar se referindo ao botão de reinicialização.
E isso estava dentro do evento no centro para o botão de reinicialização.
Agora, estamos em vez de uma função separada chamada reset.
Portanto, precisamos codificar o código como botão de reinicialização.
E então estamos mudando a exibição da mensagem para ficar vazio.
E então, estamos passando por todos os quadrados e estamos atualizando suas cores.
E então, estamos mudando o plano de fundo do 8: 1 de volta ao azul.
E se chamamos isso de que, em vez de aqui, acabamos de executar o reset.
Há um pequeno problema que é que nunca estamos atualizando quadrinhos dormentes.
Então, quando eu clicar no botão fácil, você deseja alterar a variável dos quadrados para ser três.
Quando eu clicar no botão rígido, você deseja alterá-lo para ser 6.
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.
Então, o botão que foi clicado se o conteúdo do texto for igual a fácil.
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.
E então chamaremos a função de reinicialização que usará os quadrados numb como você pode ver aqui na nossa
função de reinicialização.
Estamos usando alguns quadrados para chamar nossa função de gerar cores aleatórias.
Então, precisamos ter alguns quadrados atualizados, o que estamos fazendo aqui.
Na verdade, há uma maneira mais curta de escrever isso que algumas pessoas são grandes fãs.
É chamado de operador ternário.
Então vou escrever primeiro e depois vou falar sobre como funciona.
Portanto, esse conteúdo de texto é igual a iguais.
Ponto de interrogação fácil.
Numb squares é igual a três quadrares numb quadrados é igual a seis.
Então, essa linha aqui faz exatamente a mesma coisa dessas quatro linhas aqui.
Estas cinco linhas.
Então, é chamado de operador ternário.
Há três partes disso.
A primeira coisa é a condição.
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
é igual a 6.
Então, é apenas uma maneira de escrever isso.
E eu vou ficar assim.
Normalmente, se apenas tivermos uma linha rápida se declarações em que estamos definindo um valor para duas
opções possíveis diferentes, é um bom caso de uso para o operador ternário.
Nós ainda temos um problema, porém, o que nunca estamos escondendo.
Ou mostrando o número correto de quadrados.
Então, o que acontecerá se eu atualizar.
Começamos no modo rígido.
Isso funciona bem.
Tudo funciona da mesma forma.
Se eu clicar em fácil ainda, ainda temos seis quadrados aqui e você verá o fundo três, simplesmente não
altere as cores porque nós apenas geramos três cores.
Então, o que precisamos fazer em vez da nossa função de reinicialização, precisamos explicar isso.
Então aqui em vez de este loop onde estamos mudando a cor dos quadrados para combinar a
cor da matriz de cores.
Se houver apenas três itens na matriz de cores, o que realmente precisamos fazer é ocultar os outros
três quadrados.
Então vou escrever isso com uma declaração if e só vou verificar se há uma cor para pintar.
Também faço outra coisa.
Então, se houver uma cor, vamos pintar ou mudar a cor de fundo dos quadrados.
Eu para ser essa cor, caso contrário, precisamos mudar os quadrados que eu mostro para não ser nenhum.
E isso precisa ser desenhado para exibir exatamente assim.
E então isso irá escondê-lo para nós.
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
looping em seis quadrados e voltando a verificar.
Se houver uma cor que corresponda a esse quadrado e para os três primeiros haverá.
Então, definimos a cor de fundo para ser a cor da matriz.
Mas as últimas três cores, eu não serei.
Ou, na verdade, será indefinido.
Não haverá uma cor lá.
Então isso é falso.
E o que acontece é que nós configuramos a tela para não ser nenhuma.
Então, eu vou mostrar-lhe como isso funciona atualizar.
Se eu clicar com facilidade, o fundo três desaparecerá.
Continue clicando em facil, temos três novas cores.
Vamos jogar o jogo.
Aqui vamos nós.
Nós temos um problema, porém, o que é se eu clicar em um duro, estamos mudando todos os seis
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
novo plano de fundo cor para os quadrados.
Eu vou seguir em frente e mostrar-lhes.
Então, vai ser quadrados, pensei que a exibição de estilo é igual a bloqueio.
Então é assim que os devolvemos.
E nós vamos fazer isso com os seis.
Não é grande coisa.
Então, se lhes darmos uma cor de fundo, estaremos sempre garantindo que eles sejam visíveis primeiro.
Então, agora, se atualizarmos e eles são fáceis, temos três jogar um jogo.
Eu clico sobre difícil.
Agora recebemos seis chamadores.
Vamos jogar um jogo.
Lá, vamos clicar sobre fácil e voltamos para três.
Tudo bem.
Então, você pode ver que limpamos muito código aqui.
Isso costumava ser muito mais longo.
É como pelo menos três vezes por ano.
E dois ouvintes clicados diferentes e agora nosso código é relativamente versátil.
média, tudo o que precisamos fazer é mudar esta linha aqui onde teríamos um número de quadrados de número.
Se quisermos adicionar um botão de dificuldade
Talvez desejemos 5 quadrados ou queremos um nível super difícil, onde temos 10 quadrados, precisamos apenas mudar os quadrados
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
verdade, quando clicamos no botão de reinicialização .
Então, tudo o que precisamos fazer lá é substituir tudo, em vez do botão de
reiniciar, clique Lisner com apenas redefinir assim.
Então, isso impulsiona nosso código muito.
Acabamos de eliminar 10 ou mais linhas.
Então, vamos voltar salvar sem parênteses.
Vamos ao navegador e certifique-se de que ele ainda funciona.
Então vamos jogar um jogo.
Clique em reproduzir novamente e é reiniciado.
Vamos clicar em jogar com facilidade e também reiniciar tudo bem.
Tudo bem.
Então, conduzimos nosso código um pouco.
Eles vão se livrar desses dois apenas para que você possa ver o quanto encurtamos tudo