OK, então vamos pegar onde paramos.
Vamos começar a adicionar alguns dos comportamentos para quando você clica na cor direita e
quando você clica na cor errada.
Então, comece com quando você escolhe a cor errada.
O que queremos fazer é desaparecer para que ele corresponda à cor de fundo aqui.
Então, na verdade, é bastante direto.
É apenas uma questão de escrever este estilo de ponto em que o fundo é igual e então precisamos apenas
combinar a cor que definimos no nosso C Ss parece assim.
Então, vamos colar isso e salvar.
Vamos testá-lo.
Vamos clicar em um dos errados.
Você pode ver isso desaparecer e se eu clicar na direita, ainda recebemos nosso alerta.
OK, então eu vou atualizar.
Então, é para isso que vamos começar.
E a outra coisa que queremos acontecer é que queremos uma exibição para que você possa ver aqui aqui.
Haverá uma exibição, então, se eu clicar em uma das cores e diz, tente novamente.
E se eu entendi corretamente como aqui, ele exibe correto e depois se concentrará nas outras coisas, como mudar
a cor.
Uma vez que obtenhamos essa primeira parte.
Então, vamos adicionar neste parágrafo ou o span realmente é o que é e tê-lo exibir a mensagem correta.
Então, voltamos para o nosso HMO e vamos adicionar outra div e, na verdade, temos três ou
quatro peças diferentes que irão eventualmente.
Por enquanto, será um pequeno espaço que vai dentro da div.
Então, como mencionei, será mais.
Por enquanto, é apenas o período em que vai estar vazio para começar quando atualizo a página que
você pode ver, não há nenhuma mensagem aqui.
Então, vamos para cá, eu tenho um espaço vazio e vamos dar um I. D. e chamaremos isso de mensagem.
E assim podemos selecioná-lo em vez do nosso Javascript.
Então vamos ao nosso javascript agora e selecione isso.
Então, até aqui, nós chamaremos de exibição de mensagem da fazenda igual a documento e faremos um seletor de consulta de seletor de
consulta e que chamamos essa mensagem.
Precisamos do ID.
Então precisamos do arco para Thor.
E então, se o usuário adivinha errado.
Tudo o que precisamos fazer é escrever a mensagem exibir o conteúdo do texto do ponto equivale a tentar novamente.
E se nós atualizamos e você clicar no errado, é realmente difícil de ver.
Então, devemos mudar a cor do fundo ou a cor do texto.
Nós podemos fazer isso aqui.
Vamos dizer que todos os intervalos devem ter cor branca e se estamos frescos.
Agora eu cliquei sobre o errado.
Isso me diz que tente novamente.
ESTÁ BEM.
E continuamos recebendo isso até obter o caminho certo.
E ainda recebemos esse alerta.
Então, se conseguimos o correto, o que queremos fazer é mudar o que exibimos na exibição dessa mensagem.
Queremos mudá-lo para estar correto.
Portanto, a mensagem mostra que o conteúdo do
texto é igual a correto.
Bem desse jeito.
E agora, se tentarmos isso, erramos e tente novamente.
Nós entendemos corretamente e isso nos diz corretamente.
ESTÁ BEM.
Então, temos essa lógica básica lá agora, onde estamos verificando se estamos corretos ou errados e estamos
exibindo algo.
A próxima coisa que podemos fazer é adicionar o recurso onde quando você obtém a resposta certa, todos os quadrados mudam
de cor para corresponder a essa resposta.
Então, aqui você clica na resposta certa, todos mudam de grau.
E então, também podemos fazer os antecedentes deste H1 também.
Então, a primeira coisa que precisamos fazer para que isso funcione.
Na verdade, vou escrever uma função separada para fazer isso pra mim, apenas para manter meu
código um pouco mais organizado.
Altere as cores e levará um único argumento uma string de cores e, em seguida, dentro
daqui, precisamos fazer um loop em todos os quadrados, mudando cada cor para corresponder a determinada cor.
é igual a zero é menor do que o comprimento de ponto colorido ou cores que o comprimento mais mais.
Então, para percorrer todos os quadrados que já fizemos, apenas uma questão de quatro VAR I
E então dentro é onde precisamos mudar cada cor e já fizemos isso antes.
É apenas uma cor.
Eu obtive um estilo de fundo difícil, igual a cor que é o que fornecemos tecnicamente, nosso código mudará cada
quadrado para combinar a cor.
Então, incluindo este que é a cor correta.
Só irá substituí-lo e mudá-lo para a mesma cor que já é.
aqui, que é o estilo de fundo da cor que foi clicado.
Podemos adicionar algum código para corrigir isso, mas vamos começar com isso e então precisamos chamar essa função de cores de mudança e precisamos passar
a cor correta, que é a variável que criamos
E estamos fazendo isso.
Se eles adivinissem isso corretamente.
Então, se salvarmos e atualizar, veja se temos algum erro.
Não.
E agora é rápido.
Errado.
Corrigido e temos um problema quando você clica no correto nos diz que não podemos definir o fundo da
propriedade de indefinido se olharmos para o que está falando sobre as cores. Eu estilo o plano de fundo.
Claro que temos um problema aqui porque estou fazendo isso com nossa matriz de cores e isso não
deve ser nossas cores.
Esta é a nossa variedade de cores.
Deve ser na matriz de quadrados quais são os quadrados que estamos tentando mudar.
O que eu estava fazendo era o conjunto de cores apenas as cordas.
Então, aumente o comprimento e agora deve ser bom ir e todos eles mudaram para a cor
que foi escolhida assim.
Tudo bem.
Então, em seguida, vamos nos concentrar em obter as cores aleatórias na matriz e depois escolher uma cor
aleatória dessa matriz.
Então, vou começar com a segunda coisa que está escolhendo uma cor aleatória em vez de
apenas fazer com que ele colore três para nos ajudar a escolher um elemento aleatório dessa matriz.
Na verdade, vou fazer uma função.
E o motivo pelo qual eu estou fazendo isso é um para limpar nosso código, mas nós realmente
vamos usar essa função mais tarde, porque toda vez que iniciamos um novo jogo, temos que escolher uma nova cor.
Então, é algo que vamos ter que chamar algumas vezes para que isso funcione.
Eu vou começar por chamar a função que ainda não existe.
Então eu vou dizer que a escolha é igual à cor e vamos nomeá-la.
Escolha a cor e depois precisamos definir a escolha da cor.
Então eu venho aqui, basta fazê-lo na parte inferior por agora escolher a função.
Cor nesta função precisamos fazer duas coisas.
Um é escolher um número aleatório.
Então, algo como 0 ou 1 ou 2 até o último índice dessa matriz.
E então precisamos usar esse número para acessar a cor desta matriz e retornar essa cor.
Então, vamos começar por escolher um número aleatório.
E a forma como escolhemos um número aleatório em javascript é usar matemática aleatória e matemática aleatória,
irá escolher um número entre 0 e 1 e não inclui um.
Então, deixe-me mostrar-lhe que as matemáticas não
são aleatórias e é uma decimal longa e longa.
Então, se queríamos gerar um número entre 0 e 6, por exemplo, para imitar um Dayrell, faríamos
matemática de forma aleatória e depois a multiplicaríamos.
Em nosso caso, se tivéssemos apenas dez centavos, nós nunca teríamos um número superior a cinco nove nove
nove nove.
Então, se queremos que esse número venha de um e diga a seis, poderíamos multiplicá-lo por
seis e depois adicionar um no final.
Agora podemos chegar até seis pontos noventa e para obter um número inteiro.
que for devolvido da matemática, multiplicando aleatoriamente por 6 adicionando 1 e depois remover tudo após o ponto decimal.
Nós, então, precisamos cortar esse decimal para que possamos usar o andar superior de matemática, que é outro método e
que apenas levará o
E isso nos dá números aleatórios entre 1 e 6.
Como você pode ver, mas não queremos necessariamente apenas entre 1 e 6.
Esta disposição eventualmente pode ter apenas três itens.
Como você pode ver quando eu vou para o modo fácil, há apenas três cores.
Então pode ter três e pode ter seis.
em seguida, multiplique-o pelo comprimento da matriz e isso é OK, porque lembre-se que não é inclusivo.
Então, vamos usar apenas o comprimento da matriz para gerar a nossa cor para que pareça com
este pensamento matemático aleatório, vamos gerar um número entre 0 e 1 e,
Portanto, mesmo que o comprimento da matriz seja mais do que o índice mais alto.
Então o comprimento é seis.
Mas o número mais alto que queremos é cinco.
Porque o número aleatório só vai entre 0 e 1.
Mas não inclui um que estamos em boa forma.
ponto decimal remanescente e, depois de ter feito isso, nos dará um número aleatório.
Então, vamos gerar isso e então vamos fazer matemática nesse piso daquele todo, que cortará o
A próxima coisa que precisamos fazer é salvar isso em uma variável e usar essa variável para acessar
um elemento da matriz nesse índice.
Então, vamos dizer que as cores de retorno são aleatórias.
Então, ele escolhe um número aleatório como três e depois retorna as cores de três.
Tudo bem.
Então vamos testar isso.
Nós escolhemos a cor.
Estamos chamando a escolha de cores no topo aqui.
Então, se eu atualizar, devemos esperar que isso mude e isso muda enquanto eu atualizo.
Você pode ver as vezes que você obtém o mesmo, porque há apenas seis e nunca mudam,
mas isso muda quase sempre.
Agora, verifique se nossa lógica rápida funciona da mesma maneira.
Então, se eu clicar nisso, é zero vermelho zero verde e azul.
Então, vamos tentar clicar em ciano vermelho.
Boa.
Se eu clicar em azul está correto