Bem vindo de volta.
Então, até agora, tudo o que fizemos em torno de eventos e ouvintes do evento no dormitório e relação
dominante e despeja as letras que acabamos de fazer, um dos exercícios rápidos que realmente não
representam muito.
E isso foi apenas para mostrar peças individuais como elas funcionaram.
Agora, vamos ver como eles se encaixam e fazem um aplicativo um tanto substancial.
Então, como você pode ver, esse não é o aplicativo mais bonito que vem.
aqui, como levamos os eventos, como selecionamos elementos, como escrevemos sobre ele como e como todos se encaixam.
Estamos apenas nos concentrando em como conceitualmente as peças se encaixam
O estilo é apenas extra.
Neste ponto, mas no próximo projeto que fazemos.
Vamos colocar muito foco no estilo e torná-lo bonito.
Eu prometo.
Então, o que vamos fazer é um aplicativo de classificação simples.
tesoura de papel rock com um amigo ou ping pong ou tic tac toe e é tão cansativo
para acompanhar a pontuação e tão difícil saber quem está ganhando quando isso O aplicativo é para você da maneira que funciona.
Então eu quero que você pense em todas as vezes que você jogou
Jogador de dois jogadores jogador 1 para marcar.
Você carrega a página e nos diz que estamos jogando para cinco.
E então, tudo o que fazemos é adicionar um ponto clicando em um botão.
Então, para adicionar um ponto ao jogador 1, clicamos no Player 1 se quisermos adicionar um jogador de ponto para
clicar no Player 2 e depois quem chegar a cinco.
Você percebe que fica verde.
E se eu tentar marcar novamente, não posso.
Isso ocorre porque o jogo acabou.
Então eu posso redefinir clicando no botão reiniciar.
E agora um jogador superior dois varreve totalmente e é isso que não podemos jogar mais.
E essa recuperação rápida.
Então, uma característica mais é que também podemos especificar o que estamos jogando.
Então, se você quiser ter um jogo que vai até as 7:00, eu posso usar este número de entrada
aqui e então tudo o que tenho que fazer é fazer isso um jogo mais próximo e um jogador apenas se esgueirou no final 4:53 eo jogo termina
em 7 e o jogador 1 fica verde e não podemos adicionar mais pontos e podemos redefinir novamente.
Então, é isso que vamos nos concentrar em construir aqui.
Então, a primeira coisa que queremos fazer é obter o nosso arquivo configurado e, em seguida, criar a estrutura H L da
equipe e, em seguida, entraremos com javascript e fazer as coisas funcionarem.
Então, vamos em frente e comecemos.
Então eu tenho um espaço em branco que vou documentar.
Estou ligando para o ponto de pontuação h Timo vai adicionar no nosso boilerplate e dar-lhe
um título assim.
Eu então tenho que começar por falar sobre o que estamos vendo aqui.
Então, isso não é H-1 H1 e nós vamos mudar isso eventualmente.
Nós não queremos que seja um sólido h porque há duas coisas dentro deste H-1, ele
precisa ser como o jogador 1 jogador de 2 pontos para marcar, mas precisamos selecionar isso separadamente disso.
Então, queremos uma maneira de dividir este H1 em pedaços menores.
Então, veremos como podemos fazer isso em apenas um pouco.
Então, este é um parágrafo ao qual você está jogando.
E vamos apenas jogar as sete para começar.
Ou vamos fazer cinco.
Eu acho que como teve.
E então temos uma entrada aqui.
Este é o tipo de entrada igual a número.
Então, o tipo de entrada é igual a número e é tudo o que precisamos.
E então temos o nosso primeiro botão.
Player 1 ou segundo botão player 2.
E nosso último reset de botão.
Então, se atualizarmos esta página e agora abrimos nossa própria página que criamos.
Vamos dar uma olhada.
Eles parecem praticamente os mesmos.
Amplie um pouco sobre este que parece exatamente certo.
Claro que nada acontece quando clicamos em qualquer coisa.
Então, entre agora em nosso javascript.
Então eu vou criar um novo arquivo que eu vou chamar de pontuador J. S. e como sempre faço
ou adicione meu alerta aqui conectado.
os marcadores ou ht m l e incluo meu script e eu vou fazer isso no fundo aqui para começar.
Então eu vou para
Então o tipo de script chama a fonte javascript é igual a pontuação.
Sim, assim.
Agora, se atualizarmos.
Esta é a minha versão da página que me informa alerta de javascript.
Tudo bem.
Então, temos o nosso e-mail configurado.
Parece ótimo.
O que precisamos fazer agora é obter algum código de javascript que realmente adicione algumas funcionalidades.
E, como sempre, precisamos começar selecionando os diferentes elementos.
Então, vamos começar selecionando os botões e vamos apenas fazer o jogador um e dois ou
dois botões e o primeiro recurso em que nos concentraremos é quando clicamos em um desses botões,
o escore deve incrementar aqui.
Então, tudo o que precisamos fazer é começar selecionando esse botão de jogador e, se olharmos, é apenas um
botão, podemos querer adicionar ID, então chamaremos isso e faremos aqui, vamos adicionar um para P2 e então podemos também adicione um para a
reinicialização que acabaremos de chamar de reinicialização.
Então temos três idéias agora.
Portanto, é muito mais fácil selecionar.
Vamos chamá-lo de VIP, um botão é igual ao seletor de consulta de documentos.
Ou podemos obter um elemento por ID.
Eu vou misturá-los aqui, então o primeiro fará com o seletor de consulta P1 e depois P2.
O botão será o ponto do documento e nós obteremos o elemento por identificação e não precisamos da Octa Thorpe mais.
Então, isso nos dá os dois botões.
configurar o nosso primeiro ouvinte quando clicarmos neste primeiro botão, alertaremos ou cancelaremos o registro de algo.
E vamos apenas
Então, queremos escrever o botão P1 e adicionar o ouvinte de eventos no clique e, em seguida, adicionamos nossa função aqui.
E dentro dessa função, nós apenas vamos alertar o alerta clicado e é isso.
Então, se você atualizar nossa página e tentar novamente clicar em ótimo que nos diz que selecionamos corretamente e adicionamos nosso
ouvinte para o evento Click corretamente.
O Player 2 não faz nada porque apenas adicionamos isso ao botão do jogador 1.
Então, agora vamos falar sobre como isso realmente funcionará.
precisamos ter alguma variável que seja chamada de pontuação do Jogador 1 ou algo que acompanhe quantos pontos.
Quando eu clicar aqui,
O jogador um e eu clicamos nele deve adicionar uma para a pontuação do jogador 1 e, em seguida, a última parte está atualizando
isso aqui para refletir a pontuação do jogador 1.
Então, eu vou fazer uma variável, vamos apenas chamar uma pontuação de 1 e configurá-la para zero para começar.
E então, tudo o que eu quero fazer é quando clicamos, vamos começar, mas sempre adicionando uma na pontuação do jogador 1.
Então, essa será apenas a pontuação mais mais.
Bem desse jeito.
E nós atualizamos e não vimos nada porque provavelmente devemos cancelar esse registro.
Ele ganhou o primeiro título em vez de alertar.
Torna-se muito irritante muito rápido se atualizarmos agora e abrir o console e a pontuação do jogador McCook 1 e ver como
ele vai.
Um dois três quatro cinco e vai continuar.
Então, há alguns problemas.
Um deles não mostramos a pontuação aqui e dois diz que estamos jogando para cinco.
E isso não é, obviamente, o caso, porque estamos apenas incrementando o mesmo que desejamos.
Portanto, precisamos ter alguma lógica que diga se é maior do que cinco jogos ou algo assim.
Mas vamos começar por descobrir como podemos atualizar este H1.
Então, o que podemos fazer é selecionar o H-1 para começar.
Então, vamos chamar isso de longe.
H1 é igual ao documento que consulta o seletor H-1 assim.
E, então, dentro daqui, vamos apenas dizer que o conteúdo de texto H-1 dot equivale a uma pontuação exatamente assim.
Então, vamos levar isso e mudar o conteúdo do texto para ser qualquer que seja a pontuação é que
estávamos sem logar.
aqui bem esse tipo de trabalhos, mas você pode ver que superamos completamente o que estava dentro de cada um.
E se eu marcar
Queremos manter os dois e os outros pontos.
Nós só queremos mudar esse número.
Então, há uma maneira de fazer isso usando algum h extra para um homem que torna sua vida muito
mais fácil se voltarmos ao nosso marcador, mas cada vez que vamos introduzir um elemento span.
E a forma como o espaço irá funcionar é que ele só irá envolver o número da pontuação.
Então, o que isso significa é que podemos agora se eu inspecionar isso.
Nada parece que isso mude e esse é o ponto de uma extensão.
É apenas um dia não intrusivo se você quiser, é apenas uma maneira de embrulhar algo com alguma tag
que você pode usar mais tarde ou estilo de forma diferente ou selecione com javascript o que
é exatamente o que faremos se buscarmos H-1, mas aqui estamos agora tenha um intervalo especial envolvendo esse número.
Então, se nós selecionarmos essa extensão e mudarmos essa extensão, somente nós teremos o tó e nosso espaçamento corretamente
e a outra pontuação.
Então, queremos selecionar esse período e voltar a fazer apenas uma identificação aqui.
Então espere e chamaremos essa exibição P1 assim.
E agora precisamos ir ao nosso scorekeeper J S e mudar algumas coisas.
Portanto, não precisamos mais selecionar o H-1 para se livrar disso.
Nós vamos selecionar um visor igual a documento obter e vamos fazer o seletor de consulta apenas para a variedade novamente
Seletor de consulta.
E nós chamamos essa exibição P1 para que isso apenas nos dê a extensão e se nós queremos verificar se isso
estava funcionando.
Por que não fazemos um registro de vault do concerto aqui.
Won display apenas para ver quando carregamos a atualização da página, deve imprimir OK.
Selecionou nossa espada corretamente.
ESTÁ BEM.
Então, agora, o que queremos fazer e livrar-se disso, é adicionar um à pontuação.
Nós podemos nos livrar de nossos outros contras. Mas faça o login, em vez de alterar o conteúdo do texto no H-1 inteiro.
Nós só queremos mudá-lo no nosso monitor P1, que é esse pequeno espaço aqui.
E se atualizarmos Agora vamos lá.
Então, nós conseguimos que o player 1 de atualização do player 1 ainda não faça nada, mas nós temos esse
recurso funcionando.
Então, façamos o mesmo para o jogador 2.
Então, eu vou voltar adicionar um outro espaço em torno de nossa identificação de intervalo zero igual a exibir e, em seguida, mover para
zero no meio.
Nós atualizamos que nada deve parecer diferente, mas agora temos dois intervalos.
Então, você pode ver, então, vamos voltar ao nosso marcador J us e vamos adicionar duas novas variáveis.
Portanto, precisamos exibir span para que o jogador precise selecioná-lo com esse ID.
Vou usar o seletor de consulta novamente.
E então precisamos de uma variável para o jogador de pontuação para o seu, não queremos que eles sejam apenas o mesmo resultado.
Obviamente, precisamos de duas maneiras separadas de rastrear seus valores.
Então, a primeira coisa que eu quero fazer é testar que nosso player para o botão está selecionado corretamente.
Então, eu vou fazer um jogador de registro do vault do concerto para clicar e ver o que ele imprime.
E se atualizarmos e olhamos para os contras. Você pode ver algo errado.
Nós selecionamos o botão do jogador um botão não o botão do jogador dois.
Então, algo está errado com nosso seletor.
Você pode ver aqui que estamos selecionando elemento pelo id P1, que é o mesmo que o que tínhamos aqui.
Portanto, precisamos selecionar P2 em vez disso.
Ok, então agora que isso é lido se atualizarmos, obtemos o botão ID P2 o que é excelente.
Agora vamos adicionar nosso ouvinte.
Então Pete to button que o ouvinte do evento do anúncio clique e eu sempre gosto de começar
apenas por imprimir algo ou alertar algo que um log P2 clique exatamente como essa atualização.
E nós conseguimos o P2 clicar no nosso jogador ainda funciona e P2 está executando algum código.
Agora, precisamos colocar o código certo lá dentro.
Se olharmos o que fizemos para o botão do jogador 1, precisamos de um jogador para marcar um incremento
variável para começar.
Até agora P2 pontuação.
E isso também deve começar em zero.
E então, vamos apenas vir aqui e simplesmente mudar isso para ser P2 mais para nós e então precisamos
atualizá-lo na tela que ainda não selecionamos.
Então, também precisamos selecionar esse período.
Lembre-se do espaço aqui ID da tela P2.
Então, vamos fazer isso.
Ela vai copiar essa linha e mudá-la para exibir o visor P2 do Duckery selector de documentos
e então vamos mudar a exibição para o conteúdo do texto para ser igual ao jogador para marcar.
Então vamos dar uma olhada.
Clique no player 1 que ainda funciona.
E o jogador 2 que funciona também.
ESTÁ BEM.
Então, não há fim para o nosso jogo agora.
Isso continuaria indo para sempre.
Então, precisamos trabalhar em adicionar essa funcionalidade.
como vamos fazer isso é com uma variável que acompanhará o estado do nosso jogo.
E a maneira
Então nosso jogo tem dois estados.
O primeiro é o estado normal agora onde eu posso clicar onde eu posso jogar o jogo.
E o segundo estado seria o que poderíamos chamar de jogo sobre onde alguém tem um.
Portanto, precisamos de dois estados e podemos usar um booleano para modelar isso apenas o verdadeiro ou o falso.
E eu vou chamar o jogo até agora.
Game over e isso começa isso falso porque o jogo acabou.
Não é verdade no início do jogo.
E então, o que faremos é que vamos atualizar o jogo para ser verdadeiro ou falso, dependendo de se alguém ganha.
Então, se alguém chegar ao jogo cinco agora deve ser verdadeiro e isso deve significar que não podemos mais
atualizar a pontuação e que devemos acertar a reiniciar e reiniciar, então, tornar o jogo falso novamente
e começar tudo.
Então, deixe-me mostrar o que quero dizer.
A primeira coisa que queremos fazer é adicionar outra variável.
Eu vou chamar isso de pontuação vencedora.
E isso só vai ser igual a 5.
Então, essa variável é o que vamos comparar o jogador 1 e o jogador com o marcador 2.
Então, vamos verificar se uma nota de jogador 1 atingiu a pontuação vencedora se ele ou ela tiver.
Então, precisamos dizer que o jogo é verdadeiro.
Então, a lógica será assim.
Vai ter uma declaração if e só vai parecer se o jogo ainda não foi alcançado ainda.
Então, se não estiver no jogo, então vamos deixar você adicionar à pontuação exatamente assim.
Quando eu executo isso agora, você não notará nada diferente.
Isso funcionará exatamente da mesma maneira para o jogador 1 e isso é porque o jogo acabou é sempre falso.
Nunca muda.
Então, quando mudamos isso para ser verdade.
Bem, quando há um jogo acabado.
E quando isso acontece é quando os usuários marcam, então, quando o jogador 1 é igual ao resultado vencedor.
Então, depois de adicionar uma para a pontuação do jogador 1, só verificaremos se vamos fazer uma pontuação tripla igual a pontuação
vencedora.
Então, se eles forem iguais, vamos começar apenas dizendo Contador log.
Fim de jogo.
Bem desse jeito.
E se atualizamos e revisamos nosso Cônsul e tentei mudar isso até agora, isso não é verdade, então
isso nunca acontece.
Desta vez, eu adicionei um jogador, uma pontuação vai para cinco.
Estamos verificando se a pontuação do jogador 1 é igual à pontuação vencedora e nós conseguimos o jogo por aqui.
Então, em vez de simplesmente cancelar o jogo de bloqueio, queremos mudar esse estado ou agora.
O jogo é verdadeiro.
eu vou mostrar-lhe se eu atualizar isso nos impedirá de adicionar mais à pontuação porque o jogo acabado é verdadeiro.
Então, o que isso fará por nós,
Esta pequena verificação aparece.
Verifica.
Ainda está terminado.
E se é um jogo, nenhum desses códigos é executado.
Então vamos tentar isso.
Chego às cinco e estou preso.
Não posso mais aumentar isso.
No entanto, posso ir ao jogador 2 e aumentar esse resultado porque nossa lógica é apenas para o jogador 1.
Queremos ir até este jogador para cancelar o ouvinte de eventos e adicionar a mesma lógica.
Então, se não é jogo, então vamos deixar você incrementar a pontuação e atualizar a exibição e então também
precisamos verificar se o novo jogador para marcar é igual à pontuação vencedora, então é o jogo acabado.
Game over é verdade, o que significa que o usuário nem o usuário nem o jogador um ou o jogador
dois podem continuar aumentando a pontuação.
Então, vamos verificar se isso funciona atualizar.
OK, podemos chegar até aqui e acabamos.
O jogador 2 não funciona ou podemos chegar até cinco aqui e terminamos.
E o jogador 1 também não funciona.