Bem vindo de volta.
Neste vídeo, vamos nos concentrar em adicionar os botões fáceis e difíceis aqui que afetarão a
dificuldade do jogo.
Então, quando carregamos a página duramente, já foi selecionada e vemos seis botões diferentes aqui ou seis
quadrados diferentes.
E então eu posso clicar em fácil e isso permanece selecionado.
E nós só temos três quadrados para escolher.
E então eu posso voltar para o coração.
Vamos começar adicionando nos dois botões que precisamos.
Então vou entrar no meu HMO e adicionar dois botões.
O primeiro direcionaremos fácil.
O segundo dirá muito e irá atualizar.
ESTÁ BEM.
E isso parece bem agora.
Você perceberá que nossa extensão ainda não está ocupando nenhum espaço.
E eu vejo que há algum texto aparece.
Ele empurra esses botões afastado se concentrará no estilo mais tarde, mas há um elemento do estilo
em que eu quero focar, o que faz com que ele seja selecionado quando a página é carregada
ou quando escolhemos fácil ou duramente, o botão correspondente deve permanecer azul.
E a maneira como fazemos isso é usar uma classe e ativar e desativar essa classe.
Então, vou definir uma classe aqui e será mais simples do que esse estilo de estilo aqui, só vai
ser uma cor.
Então nossa cor de fundo e a classe serão chamadas selecionadas porque é isso que estamos fazendo.
Estamos adicionando a classe selecionada ao botão que está selecionado.
E vai ter um conjunto de fundo para você começar.
E, então, o que vamos fazer é simplesmente atribuir a classe de botão de modo rígido igual selecionada.
E se atualizarmos no nosso código, você pode ver que isso é difícil.
É horrível sim, mas pelo menos mostra-nos que estamos no modo rígido.
Então, o que queremos fazer é adicionar o código que é um interruptor que, quando eles clicam em fácil e, em seguida,
a parte mais complicada está mostrando as três cores ao clicar nas cores fácil e seis quando você
clica no coração.
ESTÁ BEM.
Vamos começar aqui.
Então, para que esses botões realmente funcionem, precisamos selecioná-los em nosso javascript e, em seguida, ter alguns
ouvintes rápidos e fazer alguns e executar algum código quando cada um deles for clicado.
Então, vamos facilitar a seleção e eu vou começar por dar-lhes cada uma identificação fácil.
DTN e, em seguida, dura ETN e vamos mudar isso se você estiver vendo alguma bandeira vermelha aqui ou se você está pensando
que estamos usando muitas idéias.
Vamos refatorar isso em apenas alguns momentos.
Mas vamos começar com duas IDs diferentes.
Botão botão fácil botão.
Acesse o nosso javascript e selecione-os.
Então, var ETN fácil é o seletor de consulta doc doc com Octa.
ETN fácil.
Certifique-se de que capitalizamos as coisas da mesma forma.
Aqui vamos nós.
E o mesmo por difícil e eu não sei se você pegou isso em sublime.
isso para selecionar todos eles, mas eu quero apenas esses dois e eu vou digitar com força em vez disso.
Se você selecionar a palavra com facilidade e bater em Kamandi, então selecionará automaticamente a próxima instância
e eu continuarei fazendo
Então, temos dois botões e então podemos fazer algo assim.
Easy PTEN adiciona o ouvinte de eventos.
Clique e tudo o que vamos fazer é apenas alertar que o botão fácil foi encerrado assim.
Alerta botão fácil clicado e certifique-se de que isso funciona.
Easy OK, diz o botão Easy clicado e, em seguida, vamos duplicar isso para o botão rígido e diremos que o
botão rígido foi encerrado e a atualização ainda funciona e dura, mas nos diz que o botão rígido foi clicado.
Então, atualizamos clique em
Então, ao invés de apenas fazer isso, vamos trabalhar para obter a classe da classe selecionada para refletir
qual é selecionado.
Então, se clicarmos no botão fácil, tudo o que queremos fazer é um botão fácil.
A lista de classe do Doc adiciona selecionada e, se atualizarmos agora, clicoi com facilidade.
Tem uma classe selecionada.
Fácil, mas o problema é que ele ainda permanece no botão rígido para que seja fácil de consertar.
queremos ter um botão rígido, digite o ponto da Lista cruzada, remova-o e agora, se clicarmos com facilidade, o modo rígido desaparecerá.
Nós só
Mas se clicarmos com dificuldade, ainda não temos essa lógica para que possamos corrigir isso
apenas copiando esse código e agora teremos botões rígidos sem classe que adicionem a lista de classes de botão fácil selecionada que
remove selecionada.
OK, vamos testá-lo.
Tudo bem.
Então, agora temos a parte mais fácil, quais são os dois botões mostrando qual é
atualmente selecionado e eu atualizo e difícil é automaticamente selecionado porque temos seis elementos.
Em seguida, precisamos adicionar a lógica para realmente mudar a dificuldade, não apenas o estilo desses
botões, mas apenas mostrar três elementos ou seis quadrados.
Então precisamos fazer isso antes de começarmos.
Vamos verificar novamente a solução para ver como isso funciona.
Então, se eu atualizar e clico em uma notificação fácil de obter novas cores e temos que fazer isso porque existe
o risco de ter seis cores aqui e a cor que está selecionada aqui pode ser uma dessas três que
quando eu clicar em facil esses três são removidos.
Então, esse poderia ser um belo erro de quebra de jogo.
Então, em vez de lidar com isso, vamos escolher três cores novas.
Então o processo é que nós atualizamos isso.
Então, o processo é quando eu clicar no botão fácil que vamos gerar três novas cores para a
matriz de cores vão escolher uma cor desses três.
Vamos atualizar que aparecem com uma cor escolhida.
Vamos atualizar os três quadrados aqui.
E a parte importante é que também escondemos os outros três quadrados para que não os eliminemos, apenas os
escondermos configurando a exibição para não ser nenhum.
E a mesma coisa é difícil.
Geramos seis novas cores na matriz de cores.
Escolhemos uma para ser nossa escolha colorida.
Mostramos isso aqui.
Então mostramos os três quadrados na parte inferior e depois colocamos cada um para ter uma cor.
ESTÁ BEM.
Então vamos resolver isso agora.
Em primeiro lugar, quando clicamos no botão fácil, vamos começar.
Vamos querer gerar novas cores para que as cores sejam iguais a gerar cores aleatórias neste momento 3.
E então, uma vez que temos feito isso, iremos querer escolher uma nova cor escolhida, de modo que a cor
escolhida é igual a escolher a cor assim.
Então, uma vez que temos nossas cores e nossa cor escolhida, podemos começar simplesmente mudando a exibição aqui para
mostrar a nova cor da imagem.
Então, é tão fácil quanto dizer que o conteúdo de texto de exibição em cores é igual a cor escolhida.
E se atualizarmos, eu vou ter algumas cores novas aqui apenas para lhe mostrar algumas coisas.
mencionou antes, a cor está mudando e, por trás das cenas, há uma matriz de cores que também muda.
Quando eu clicar em fácil como você
Então, vamos ver o que as cores são agora e então eu clico no modo fácil e eu olho para
o que as cores são novamente e é diferente.
E também escolheu cores é diferente.
Então, vamos conversar sobre como escondemos os três divs inferiores quando clicamos no modo fácil ou podemos esconder os
três primeiros.
Não importa.
ao fazer um loop e definir a propriedade de exibição de Threes inferior para não ser nenhuma.
Mas eu vou fazer os três inferiores do jeito que faremos isso,
Então, deixe-me mostrar-lhe como isso funciona.
Eu vou escolher um deles.
Então, vamos fazer um seletor de consulta de documentos todo o quadrado ou um quadrado e depois trabalhar com o quinto.
Bem, na verdade o sexto com índice de cinco e, em seguida, defina essa exibição de estilo para não ser nenhuma.
E você verá que isso desaparece.
E então, se eu quiser que ele volte o que farei, se clicarmos no modo rígido, eu só preciso dizer estilo.
A exibição é igual a bloqueio.
Tudo bem.
Então, vamos em frente e implementemos isso em nosso código da maneira que isso vai conseguir isso, é através do loop
de todos os seis no início.
E para os três primeiros vamos dar-lhes uma nova cor.
E para o fundo três vamos escondê-los.
Então, ao invés de ter dois loops para fazer isso, vamos fazê-lo de uma só vez.
Então, para var I é igual a zero.
Eu apenas tenho menos que quadrados.
Além disso, vamos aproveitar o fato de que as cores possuem três itens.
Então, vamos fazer algo assim se as cores I.
Então, se houver uma próxima cor para que isso aconteça nos três primeiros.
Nós vamos escrever quadrados que eu estilo o fundo é igual à cor.
Então, para os três primeiros em nosso caso, porque as cores só têm três itens, vamos
percorrer todos os quadrados e verificar se há uma cor nesse índice.
E se houver, vamos mudar a cor desses três primeiros.
Então, vamos nos certificar de que funciona.
Eu clique em fácil e você verá apenas os três principais estão mudando.
Então estamos perto.
Tudo o que queremos fazer agora é esconder os três inferiores.
Então, faremos isso com mais.
Os quadrados que eu exibo não exibem nenhum.
E se nós atualizamos e tornamos a tela cheia se eu clicar no modo fácil, você pode ver que perdemos o
fundo três e as cores dos três principais estão mudando.
E vamos tentar descobrir qual é esse.
Então, cento e sessenta e três vermelhos de verde e um pouco de azul.
Aqui vamos nós.
Você pode atualizar, tente mais alguns.
Temos um pequeno problema ao atualizar alguns desses e eu clico no modo fácil.
Estamos apenas gerando três cores aqui.
Mas se eu clicar no botão de novas cores para que eu mostre o que as cores parecem agora.
São três itens.
Se eu clicar em novas cores e então eu olho para as cores.
Na verdade, são seis itens e é porque não estamos acompanhando o modo em que estamos.
Então esse código está aqui no botão de reinicialização.
Estamos apenas dizendo que as cores são iguais para gerar cores aleatórias.
Então, precisamos corrigir isso eventualmente.
Mas antes de fazer isso, obtenha nosso botão rígido para que ele nos torne de volta a seis quadrados e
cada um tem sua própria cor para fazer isso.
Eu vou pegar um pouco desse código e duplicá-lo aqui, o que sempre é um sinal ruim.
E é por isso que vamos refatorar isso apenas um pouco.
Então, a primeira coisa que eu quero fazer.
Eu apenas vou copiar tudo isso em nossas cores do ouvinte do evento do botão rígido.
Serão seis cores escolhidas, a cor será o mesmo conteúdo em cores, o conteúdo do texto é o mesmo.
E então vamos passar por todos eles neste loop.
Precisamos fazer duas coisas diferentes.
O primeiro é atribuir uma nova cor a cada quadrado.
Mas também possivelmente precisamos ter certeza de que os três estão desativados na parte inferior.
if por enquanto e vamos definir todos os quadrados para ter uma cor de fundo para serem cores.
Então, vamos nos livrar da afirmação
E todos os quadrados terão uma exibição de bloco.
Então, isso é um pouco desperdício porque só precisamos dos últimos três tecnicamente e estamos reiniciando todos eles
para ser um bloco de exibição.
Mas essa é uma coisa muito pequena sobre a qual podemos nos concentrar mais tarde.
Então, vamos ver se isso funciona, atualizar nos diz que temos um erro de sintaxe na linha 36. Vejamos o que
estamos perdendo.
E nós só temos uma cinta extra curly aqui.
Então, se economizarmos agora e atualizamos, temos seis cores, como sempre temos.
Se eu clicar com facilidade, temos três.
Se eu clicar em disco, volto para seis.
Recebo uma nova cor aqui e vamos nos certificar de que isso continue funcionando.
Tão fácil, fácil e difícil, quando eu vou para o modo rígido.
Vamos clicar em novas cores novamente.
Volte para facilitar voltar a ser difícil e fácil.
Tudo bem.
E vamos jogar isso e ver se ele funciona.
Então escolha a cor é 196 170 57.
Então, liso muito de verde e um pouco de azul.
Então, isso é muito vermelho e verde é de cor amarela.
Então não será esse ou aquele.
Esse será o primeiro rápido e parece que está funcionando bem.
Se eu clicar em fácil novamente, voltamos para três cores.
aleatória de seis que pode não estar nos mostrando o que está indo para ser problemático para consertar isso.
O problema mais urgente que enfrenta, porém, é quando eu estou no modo fácil e eu clique em jogar novamente, isso
vai gerar seis cores e não três e vai escolher uma cor
Tudo o que precisamos fazer é ter uma variável que acompanhe o modo em que estamos.
Fácil ou difícil ou o número de quadrados três ou seis.
Então vamos fazer isso aqui.
Teremos uma variável chamada número de quadrados e que começará às 6 e declararemos que aqui
e dizer cores é igual a gerar cores aleatórias de número e vamos fazer número de quadrados ou
quadrados.
É um
pouco mais fácil assim e economize.
E então precisamos substituir isso em alguns lugares.
Então, quando clicamos no modo fácil, você quer que os quadrinhos entorpecidos sejam três e depois geramos
cores aleatórias sem quadrados.
E então, mais abaixo, quando clicamos no botão rígido, queremos que alguns quadrados sejam 6, então os quadrados entorpecidos são iguais
a seis e depois geram quadrados de cores aleatórias e, em seguida, há alguns outros lugares aqui quando clicamos nesse
botão de reinicialização.
Queremos gerar o número correto de cores que também seriam os quadrados Nahm.
Então, isso deve cuidar disso para nós, se voltarmos e atualizarmos.
Vamos ao modo fácil e vamos ganhar esse.
Então, principalmente vermelho um pouco azul.
Esse não.
Não aquele.
Aqui vamos nós.
E se eu clicar em jogar novamente, vamos nos certificar de que, ao digitar cores, nós apenas vejo três cores.
E se eu olhei as esperanças de cores escolhidas escolheu uma cor, você pode ver que está dentro da matriz de cores.
Então, não precisamos nos preocupar mais com isso.
Nossa lógica agora funciona