Então, agora temos duas coisas diferentes nas quais podemos nos concentrar.
O primeiro está mudando a exibição aqui para ser verde no jogador vencedor e esse é bastante
simples.
E o segundo está fazendo com que o botão de reinicialização funcione para que possamos redefinir e reproduzir novamente.
Então, vamos começar com a mudança de cor e eu vou fazer isso definindo uma classe em um arquivo CSSA.
Então eu preciso fazer um arquivo C S S e eu só vou chamar esse scorekeeper.
C Ss então eu vou ligar para ele em vez do meu scorekeeper de arquivo HDMI Dotsie SS e salvar.
e vou chamar isso de inverno e vou dizer que a cor é verde e é tudo o que precisamos e salvaremos.
Então eu vou para o meu arquivo CSSA e definir uma aula
E apenas para verificar se parece do jeito que eu quero.
Vamos apenas adicioná-lo ao lapso, então, dirá iguais de classe e vamos dar-lhe uma aula de vencedor para a exibição
do jogador 1 do get go.
E se eu atualizar, você pode ver que temos um verde 0.
É exatamente isso que queremos como um incremento.
Claro que queremos que ele comece como preto e apenas adicione a classe.
Quando o jogo acabou, então precisamos voltar para o nosso javascript e nos livrar disso.
Então, ele volta ao preto.
Acesse nosso javascript agora.
Então, vamos começar para o jogador 1 e precisamos verificar se a pontuação do jogador 1 é igual à pontuação vencedora.
Isso significa que o jogador ganhou.
Então, aqui, vamos adicionar a lista de classe de exibição do jogador 1.
Vamos adicionar o vencedor da classe e isso é tudo o que temos a fazer.
Então, se atualizarmos, verá como eu incrementar a pontuação do jogador 1 e chegar a 5.
Essa classe foi adicionada.
Então, se dar uma olhada aqui, eu vou inspecionar isso.
Não há classe e continuo aumentando até chegar até 5.
Preste atenção aqui e obtemos vencedores de classe igualados quando chegarmos a 5.
Então, faremos o mesmo para o Player 2.
Então, se o jogador dois marcar, a pontuação vencedora mudará o jogador para exibição.
Vamos verificar o incremento para 5.
Ótimo.
Tudo parece estar funcionando bem.
Então, a próxima peça está fazendo com que o botão de reinicialização funcione agora.
Se conseguimos o jogo, ele sempre está definido para ser verdade.
Não há como mudar o jogo.
Então, clicar no botão de reinicialização precisa disparar algumas linhas de código diferentes.
O primeiro que você deseja mudar.
Jogador 1 pontuação e jogador para marcar de volta a zero.
Queremos alterar os valores aqui exibidos na tela do player 1 e o player para exibir
para ser zero e queremos remover essa classe verde de qualquer elemento em que esteja.
E então, a última coisa é que precisamos garantir que o jogo acabe por ser falso, de modo que
nosso código e aqui possam ser executados novamente.
Então, a primeira coisa que precisamos para selecionar o botão, nós lhe damos id igual a redefinição.
Então precisamos ir aqui e simplesmente selecioná-lo.
Então vou fazer isso com os outros botões até agora.
O botão Reset é igual ao ponto do documento e faremos outro elemento get por id e, desta vez, o ID será reiniciado e salvará
e, em seguida, apenas para verificar se ele funciona.
Faça um registro constante.
Reinicie o botão de reinicialização e atualize.
Se olharmos no nosso console, obtemos o nosso botão correto.
Foi cancelado.
OK, então, devemos começar adicionando nosso ouvinte de eventos para clicar nesse botão de reinicialização, então o botão
de reinicialização que o ouvinte de evento clique em nossa função de retorno de chamada e tudo o que queremos fazer para começar de novo, basta
cancelar o rescisão do registro clicado apenas para se certificar de que funciona e aí, nosso botão de reinicialização foi clicado.
Então, a lógica, como discutimos, precisamos definir.
Jogador 1 pontuação e jogador para marcar de volta a zero.
Então isso é bastante direto.
Jogador 1 pontuação zero jogador para marcar é zero.
Mas se eu executar este agora, onde eu apenas altero a pontuação do jogador 1 no jogador para marcar para zero e incrementar
para que o jogador ganhe e depois clique em redefinir.
Nada parece acontecer e é porque apenas alteramos a pontuação em javascript.
Nunca atualizamos as pontuações na página, então essas são as variáveis ​​de exibição P1 e P2 que
precisamos atualizar.
Então, queremos fazer um conteúdo de texto de exibição e podemos simplesmente configurá-lo para zero.
Podemos também definir que seja 1 pontuação.
Ambos deveriam ser zero.
Então o mesmo Pete para exibir conteúdo de texto é zero.
Se atualizarmos agora e chegarmos a 5.
Ambos voltam a zero.
Então vamos fazer um jogo mais próximo.
E clique em reset para voltar a zero.
Em seguida, vamos remover a cláusula do vencedor.
Isso fará isso de maneira fácil, removendo a classe vencedora de ambos.
Então, nem sequer verificaremos qual deles tem.
Vamos simplesmente removê-lo de ambos.
É apenas uma questão de exibição.
As listas de classes removem o vencedor.
Então, isso vai se livrar da cláusula e também será feito para exibir.
Então, qualquer um que tenha, não importa porque estamos removendo isso de ambos.
Então, agora, se jogarmos um jogo, obtemos um vencedor.
Eu clique em redefinir.
Ambos voltam a apenas um texto simples em branco.
Mas, como você pode ver, chego às cinco.
Eu clique no botão de reiniciar ainda não funcionando.
E isso porque o jogo ainda é verdadeiro.
E, portanto, nenhum de nossos códigos em vez desses eventos será executado.
Então, a última coisa que precisamos fazer é definir.
O jogo de volta ao falso e isso deve nos permitir continuar jogando.
Então vou atualizar os incrementos.
Vamos começar um jogo.
Aqui vamos nós.
Eu não posso mais jogar.
Eu clico no reset e agora o jogo está de volta a falso e eu posso jogar novamente e continuar.
Então, essa é a funcionalidade básica aqui.
Nós quase tudo fizeram a última coisa é conseguir que o jogo seja igual ou o resultado vencedor seja
uma variável.
Portanto, nem sempre são apenas cinco.
Então, temos essa contribuição e queremos usar isso para que, quando eu mudar isso, eu tenho sete, isso diz
que joga para 7 e nosso máximo ou nossa pontuação vencedora é sete em vez de cinco.
Então, temos alguns passos para chegar lá.
A primeira coisa que precisamos fazer é selecionar esta entrada, como você pode ver, temos o tipo de entrada igual ao número.
É a única entrada na página.
Então, não precisamos ter uma ID ou qualquer coisa.
Então eu vou para aqui e selecione-o apenas com meus outros seletores var.
Vamos apenas chamá-lo de nenhuma entrada, é igual ao documento e há muitas maneiras de obtê-lo pode fazer documentar
essa entrada do seletor de consulta.
Nós também poderíamos especificar apenas onde.
O tipo é igual ao número porque pode haver outras entradas.
No nosso caso, eu vou ficar simples.
Há apenas uma entrada.
Então, isso vai funcionar bem.
ESTÁ BEM.
Então, temos essa entrada selecionada.
Então, agora vamos adicionar um evento.
Então, o que queremos acontecer é que, a qualquer momento, isso altera o valor ou o número de mudanças que
queremos que isso atualize e queremos que a variável de pontuação vencedora também seja atualizada.
Então, o que precisamos fazer é adicionar um evento.
Então, vamos ficar entorpecidos e colocar Dot teve o evento Lessner clique apenas faça isso aqui.
Função e todos fazem um alerta.
a entrada e o que você verá é que, na verdade, um ouvinte de cliques não é a melhor ferramenta para esse trabalho.
Clicou
Porque sim, podemos mudar o valor com um clique, como acabei de fazer lá.
Mas eu também posso pressionar apagar e digitar um número e nenhum evento foi disparado porque não tive que clicar.
Então, se eu usar os pequenos botões aqui, um evento rápido dispara.
Caso contrário, se eu usar o meu teclado não recebemos um evento rápido.
Então, há outro tipo de evento que é muito melhor neste caso, que se chama mudança.
Então, um evento de mudança será executado sempre que o valor mudar e não importa como esse valor foi alterado.
Se foi porque cliquei ou pressione a tecla de exclusão.
Então, vamos mudar o alerta aqui para dizer que mudou a entrada e depois atualize.
E se eu clicar aqui para mudá-lo, ele me diz que você mudou a entrada.
Mas se eu excluir e eu digito um número que não envolve clicar nele, também me diz que eu
mudo a entrada para que seja ótimo.
Este é o evento em que queremos usar o evento de mudança a qualquer momento em que
o valor muda, queremos atualizar este número aqui e também queremos atualizar nossa pontuação vencedora para que nosso jogo continue até chegar a
essa nova pontuação vencedora.
Espero que este não seja o nosso resultado real.
Definitivamente um longo jogo de tesoura de papel rock.
Então, a primeira coisa é atualizar esse valor aqui.
Então, como antes, precisamos selecionar o que é um parágrafo.
Então, precisamos selecionar nosso parágrafo e vou fazer um parágrafo VAR igual ao documento que faz a consulta
do seletor.
E então, neste evento rápido, acabaremos de mudar esse conteúdo de texto e começaremos simplesmente mudando
para dizer clicar ou digamos que o valor foi alterado.
Assim como e atualize.
Agora, se eu alterar o valor que o parágrafo muda para dizer o valor alterado, mas este é o nosso
mesmo problema que enfrentamos anteriormente com o H-1, não queremos alterar o parágrafo inteiro.
Nós só queremos mudar essa pequena porção.
Então o que queremos usar é realmente um outro período.
Então vamos voltar e adicionaremos um espaço ao redor do número.
E este é um uso perfeito para um período em que novamente podemos usá-lo para atingir apenas uma
pequena porção de um elemento, não o todo.
E na verdade não vou dar uma ideia desta vez apenas para mostrar-lhe outra maneira de selecioná-lo.
Então, lembre-se de que é um intervalo em vez de um parágrafo.
E é o único como esse na nossa página.
Então vamos voltar.
Então, ao invés de selecionar o parágrafo, vamos criar uma nova variável e nós chamaremos de exibição de pontuação ganhadora
e será o seletor de consultas de documentos.
Mas ao invés de apenas span, porque há outras extensões na página, queremos selecionar extensões dentro
dos parágrafos.
Então é tudo o que temos que escrever.
P espaço.
Período.
E vamos economizar.
E agora vamos continuar e atualizar a pontuação vencedora exibida aqui em vez do parágrafo.
Então, a exibição ganhadora é assim.
E ainda não vai ser perfeito.
Só atualizará o valor alterado todas as vezes, mas pelo menos não está atualizando o parágrafo inteiro.
atualizar para exibir o número que está dentro da entrada para que os valores sejam sincronizados juntos.
Então, o próximo passo é fazê-lo
Então, nós realmente não vimos como obtemos os dados de uma entrada.
Como obtemos o valor atual.
Vou mostrar você aqui selecionando a entrada.
Então, documente esse seletor de consulta e vamos fazê-lo na entrada do console e eu vou salvá-lo em uma
variável para chamar o documento de entrada var taqueria selecione sua entrada e então faremos um valor
de entrada daat.
Então, esse valor será uma série de tudo o que contiver esta entrada, qualquer que seja o valor.
Então, se eu mudar isso para 7 e eu executar o código novamente, eu recebo 7.
Se eu for um grande número e desta vez eu faço isso novamente, reflete o valor que seja dentro
dessa entrada.
Então, vamos usar isso mudando isso ao invés de mudar o valor da string.
Nós vamos mudar isso para ser o valor do ponto de entrada Nahm, de modo que o valor da partir daqui e mudar a pontuação vencedora
exibirá o conteúdo do texto.
Então, atualizamos e atualizo isso e agora você pode sincronizar juntos.
isso para ser um a três, meu jogo ou a exibição de pontuação vencedora também atualiza para 1 a 3.
Então, enquanto atualizo
Então, é claro, não estamos jogando para 123.
Nós ainda estamos jogando para cinco.
E é porque a nossa lógica não está refletindo esse novo valor de entrada, tudo o que está refletindo é o
nosso resultado original de 5.
Então, também queremos mudar para baixo aqui, a pontuação vencedora é igual ao valor de entrada adormecido e salva.
E agora vamos tentar mudar isso, então estamos jogando para três e clicamos e você notará que nós temos
algum comportamento estranho.
Então não parou às cinco.
Apenas continua indo para sempre.
Então, este é um bug divertido que tem que ver com diferentes tipos de cadeias e números de dados
e comparando-os iguais duplos versus triplos iguais.
Então, para chegar ao fundo, vamos fazer alguns contras. exploração madeireira.
Então, sabemos que o cerne de tudo isso é essa linha aqui ou esta linha aqui, onde estamos verificando se o jogador
tem uma se a pontuação do jogador igual a pontuação vencedora.
É aí que definimos o jogo para ser verdade.
E isso não está acontecendo agora porque o jogo acabou.
Se mudarmos a pontuação.
Game over nunca está mudando.
É sempre falso.
Então, alguma coisa está errada com esta linha.
Então, vamos fazer um registro cancelado e vamos fazer duas coisas.
Vamos apenas imprimir a pontuação do jogador 1 e imprimiremos a pontuação vencedora e podemos separá-los por
vírgulas e eles apenas os imprimirão na mesma linha.
Apenas uma nota rápida usando os logs do Comstock é como vamos depurar por enquanto, mas estaremos falando
sobre maneiras mais avançadas de depuração mais tarde.
Então eu vou atualizar e, se começarmos, damos uma olhada na pontuação aumentada do jogador 1 e você pode ver que temos
três e estamos comparando isso com o número cinco.
Então, o marcador de jogador 1 é de três pontos ganhadores é de cinco.
Mas assim que eu mudar isso, digamos 7 e agora eu clique.
O jogador 1, agora comparamos a pontuação do jogador 1, que é o número quatro para a pontuação vencedora, que é a
string sete.
Então, atualize novamente se eu começar com cinco.
Isso funciona bem.
Mas se eu mudar isso e agora nós comparamos isso com o número e a corda e isso não vai funcionar
para nós porque estamos fazendo iguais triplos aqui.
Então, podemos fazer iguais duplos, mas você sabe que não sou fã disso.
Então, o que vamos fazer é ir aqui e simplesmente pegar isso e colocar esse valor e transformá-lo
em uma string.
esse capital e numero e depois passe e ponha valor que o transformará em uma string e configurará isso para ganhar pontuação.
Então, com um número igual a
Então estávamos frescos.
Agora isso funciona muito bem.
Chegamos a cinco, mas se mudarmos isso para o nosso jogo acabou em 2.
Há uma pequena questão em que precisamos nos concentrar em que é se estamos jogando um jogo para cinco,
o que começamos a fazer.
E se eu decidir meio caminho, eu quero mudar a pontuação vencedora com a pontuação máxima.
com isso muito bem, porque se eu mudar isso, agora estamos jogando apenas para três.
Nosso código agora não lida
Temos duas maneiras diferentes de lidar com isso.
O primeiro é redefinir a pontuação e tudo de volta a zero.
E o outro continua a jogar até cinco.
Mas o que realmente está acontecendo é que estamos jogando para três, mas já passamos três.
Então, porque já passamos, nosso código realmente não funciona mais porque estamos mentindo é
apenas verificar se o jogador é igual ao resultado vencedor.
Não está a verificar se é maior do que o resultado vencedor.
Então, se pudéssemos mudar isso.
Então, diz se é maior do que o resultado vencedor, o jogo acabou e tudo bem.
Mas acho que a melhor solução é reajustar a zero sempre que mudarmos a pontuação máxima, porque nunca mudamos a pontuação máxima a meio
do jogo de qualquer forma, queremos começar o jogo e a outra
razão que eu quero que façamos isso É um bom caso de uso para um pequeno refator.
Então, quando mudamos a pontuação, aqui está a pontuação vencedora.
Queremos redefinir o jogo que é a mesma lógica que estamos executando aqui.
Então, faremos isso simplesmente simplesmente vamos copiar esse código e criar uma nova função chamada redefinição.
Então, a função reset apenas colocou todo esse código lá e então, uma vez que a entrada do
número muda, vamos apenas executar a reinicialização.
Então você verá que eu restaurei aqui jogando para cinco.
Isso funciona bem.
Chegamos a cinco.
Eu clique em redefinir e não chamamos a função de reinicialização dentro deste ouvinte de eventos, então precisamos adicionar nossa
chamada de função de reinicialização.
E agora, se atualizarmos, chegamos a 5.
Eu clique em redefinir.
Está tudo bem.
E agora, se eu estiver no meio de um jogo e eu mudo a pontuação também nos reafirma e agora jogamos para 1.
E funciona.
Ou se eu mudar.
Então, estamos jogando para 7.
Ele nos restaura de volta a zero.
Então, se eu decidir que você sabe, isso é realmente um jogo que vai para 2 em vez disso, ele modifica a especificação para zero.
E não precisamos nos preocupar com como lidar com isso.
Se mudarmos a meio caminho.
Então, o que estamos fazendo é apenas reiniciar uma função separada para secar o código em
vez de duplicar isso aqui e para baixo aqui.
Então é por agora.
Isso é tudo o que precisamos fazer.
Alguns de vocês podem estar se perguntando se este código é realmente a melhor maneira de possivelmente fazer isso.
A resposta é não.
E se você olhar de perto, verá que é extremamente similar.
É basicamente o mesmo, exceto que estamos fazendo um aqui e P2 aqui.
Mas todas as outras palavras são as mesmas.
Portanto, há formas mais avançadas de refatoração de fazer isso um pouco melhor.
Mas não vou fazer isso aqui, porque tudo o que eu quero focar é conceitualmente como podemos ter uma relação dominante
de seqüestros de ouvintes do evento javascript e uma IMO HD interativa e é sobre isso que eu quero focar.
Mas só sei que estaremos vendo formas de tornar o código como este um pouco melhor ser
um pouco mais curto.
Há uma coisa que podemos fazer aqui e colocar isso no ouvinte de eventos.
Nós poderíamos apenas substituir a entrada numbada aqui com a palavra esta é uma mudança menor, mas podemos fazer isso e apenas
encurtar o código um pouco.
Então, se eu mudar isso, agora estamos jogando para três.
Tudo ainda funciona exatamente.
Eu usei apenas a palavra-chave que se refere ao que o evento estava escutando em qual era a entrada de número.
Tudo bem, então é por esta lição.
construir algo mais substancial e prometo que ficará muito melhor do que isso aconteceu aqui.
Como mencionei no próximo projeto, vamos