Diversão com o Javascript: crie um jogo de adivinhar o número!

1. Boas-vindas ao curso!: Ei, bem-vindo a esta aula. Se você é um iniciante de desenvolvimento web e quer apenas entrar e construir alguns projetos divertidos, você veio ao lugar certo. A idéia por trás dessas séries é mostrar o que você pode fazer com HTML, CSS e JavaScript regulares. Não vamos usar nenhuma estrutura, nenhuma placa, bibliotecas ou modelos, em vez disso, vamos construir tudo completamente do zero, passo a passo, para mostrar como essas três tecnologias Todos trabalham juntos. O projeto desta turma vai ser um palpite do jogo de números. Um computador irá gerar um número aleatório entre um e 100, e então podemos selecionar se queremos tentar adivinhar isso em cinco ou 10 tentativas. Quando selecionamos uma dessas opções, esta [inaudível] nossa visão de jogo onde podemos adicionar qualquer palpite nesta entrada que irá substituir um valor como 50 dentro daqui. Vemos que nosso palpite é muito alto. Isso agora significa que, como nosso palpite é muito alto, o número correto está agora na faixa atual de 1-50. Podemos então adicionar um segundo palpite. Isso também é muito alto, então isso agora significa que nosso alcance está entre um e 25. Vamos para cinco, é muito baixo, 12, e vamos começar a diminuir este intervalo entre 12-25. À medida que estamos fazendo essas suposições, também estamos registrando o número, as tentativas anteriores, bem como as suposições anteriores para que possamos acompanhar as coisas à medida que avançamos. Temos agora mais seis tentativas para acertar isto. Vamos para 20, 22, e nesta ocasião, o palpite correto foi 23. Você vê que temos isso correto em oito tentativas. Temos então a opção de iniciar um novo jogo que nos levará de volta à tela inicial. Este jogo é construído completamente a partir do zero. Usamos HTML regular para construir toda a interface do usuário. Depois disso, aproveitamos o CSS para estilo, posicionamento e layout. Em seguida, introduzimos JavaScript para tornar o nosso jogo totalmente interativo. Nós lidamos com todas as funcionalidades com JavaScript regular. Precisamos capturar a entrada do usuário. Precisamos gerar um número aleatório entre um e 100, e então comparar isso com o palpite do usuário. Precisamos registrar todas as tentativas anteriores. Precisamos adicionar configurações de dificuldade. Precisamos lidar com o que fazer quando o jogo terminar e também atualizar o controle deslizante de alcance também, embora o usuário possa reduzi-lo após cada um de seus palpites. Então é isso que vamos construir. Estou animada para te ensinar esta. Vamos saltar para a primeira lição. 2. Compartilhe seu trabalho em Skillshare!: Ao fazer qualquer curso, é muito importante não adquirir o hábito de acompanhar apenas para acompanhar apenas para marcar outra palestra. Reserve um tempo para processar cada lição, revisar o código que você escreve e pensar em como você mesmo pode abordar essas soluções. Com isso em mente, esta aula é baseada em projetos e isso lhe dá a oportunidade de realmente criar algo pessoal e único. Você não precisa se perder e se afastar da aula e pode até mesmo dar um passo atrás depois de terminar a aula e voltar e fazer algumas mudanças no projeto depois. Isso realmente lhe dará uma boa chance de praticar o que aprendeu fora da aula. Lembre-se também de compartilhar seu projeto aqui no Skillshare e só vou dar uma olhada, mas também inspirará outros estudantes. Para obter mais informações sobre o projeto da turma, acesse a guia Projeto e Recursos, onde você pode não apenas fazer o upload do seu projeto, mas também ver outros projetos de classe. Com isso em mente, estou ansioso para ver o que você cria e carrega aqui no Skillshare. 3. Criando a interface do usuário: Bem-vindos ao início deste novo jogo e desta nova secção. Esta é uma primeira olhada no que vamos construir. É um jogo de números aleatórios, onde o usuário vai gerar um número aleatório entre 1-100, e, em seguida, quer em 10 tentativas ou cinco tentativas, qualquer que o usuário escolher. Teremos então a chance de adivinhar qual número o computador gerou. Então 1-100 é uma gama bastante ampla, então durante o jogo, nós também recebemos algumas dicas, nos avise se estamos muito altos ou muito baixos. Nosso palpite de 50 é muito alto, significa que nosso alcance atual está agora em 0-50, e o número está em algum lugar nesta seção. Também vemos o número de tentativas anteriores na parte inferior e também fazemos um registro das suposições anteriores para que o usuário saiba quais elas selecionaram no passado. Vamos para 20, 10 e 1. Agora, o nosso número está entre 1 e 10. Vamos para 5, 2, e agora temos isso em seis tentativas. O número era dois. Então temos a opção de selecionar um novo jogo e começar de novo com o modo fácil ou difícil. Como sempre, vamos começar criando a interface do usuário com HTML. Vamos criar esta seção aqui, que é um wrapper, e então dentro, vamos criar duas seções. O primeiro será o wrapper para tudo o que vemos na tela inicial aqui, incluindo o texto e também os dois botões. A segunda seção será a área de jogo que você vê aqui. Vamos começar de novo na área de trabalho criando uma nova pasta do projeto. Queremos chamar este “Adivinhe um Número”. Em seguida, arraste isto no editor de texto para abrir isto. Podemos criar um novo arquivo clicando neste ícone apenas aqui, ou usar Command ou Control N para criar um novo arquivo, que vai ser o index.html. Vamos adicionar alguma estrutura HTML a este documento. Vou usar o comando Emmet, que é HTML:5. O título do documento de adivinhar um jogo de números. Em seguida, no corpo, vamos criar nossa seção principal, que é o wrapper tanto para a nossa tela inicial quanto para a área de jogo. Vamos criar nossa div, que será a tela de boas-vindas. Vamos dar a este um ID da tela de boas-vindas, e também logo após isso, vamos criar nossa segunda seção. Este terá um ID da área de jogo. Vamos começar na primeira seção, que é a tela de boas-vindas, e esta é a seção que você vê aqui. Começaremos no topo com um título. Vamos adicionar isto dentro da nossa primeira div. O texto é, adivinhe o número aleatório. Então vamos adicionar uma tag break, apenas para colocar a próxima linha logo abaixo, então entre um e 100. Então, logo depois disso, eu vou criar uma seção que vai ter o título da dificuldade e também os dois botões. O primeiro vai ter o texto de selecionar dificuldade configuração dentro do elemento P. Seguido por uma div que vai ser o wrapper para ambos os nossos botões. Dentro disso no CSS, vamos dar a isso uma classe, que é igual a button-wrapper, e então dentro podemos colocar nossos dois botões. O botão superior é para a nossa configuração fácil. Podemos adicionar o texto de fácil e também 10 tentativas. Seguido por um segundo botão, e este é para o modo difícil, e este é cinco tentativas. Vamos abrir isso no navegador e ver como isso parece. Vamos copiar o caminho para o nosso índice e, em seguida, colar isso em uma nova guia. Uma tela inicial bem simples. Nós apenas temos nosso texto e nossos botões, e então nós vamos para a nossa área de jogo logo abaixo. Se clicarmos em qualquer um desses botões, então somos levados para a nossa área de jogo, que vamos começar a construir agora. Mas no topo, vamos começar com o texto do seu palpite. Mas se você se lembrar da demo no início, nós também temos um botão no topo, que vai ser escondido durante o jogo. Isso vai nos permitir começar um novo jogo quando o jogo terminar. O primeiro elemento que teremos dentro de nossa área de jogo será um botão, e mostraremos e esconderemos isso dentro de nosso JavaScript. Vamos criar um ID do novo botão de jogo. Este botão tinha o texto do novo jogo. Depois disso, vamos adicionar uma seção que vai ser o wrapper para o texto na parte superior do seu palpite e também a entrada. Um título de nível 3 com o texto do seu palpite. Este título de nível 3 também será substituído durante o jogo para que o usuário saiba se seu palpite era muito alto ou muito baixo. Para fazer isso, também podemos adicionar um ID, que possamos marcar isso com JavaScript, e o ID que eu vou dar isso é saída de texto. Seguido por nossa entrada logo abaixo, com o tipo de número. O ID que vai ser igual à caixa de entrada, que vamos usar mais tarde para pegar a entrada do usuário. Então, como nosso jogo é entre um e 100, vamos adicionar os atributos min e max. Assim, o mínimo de um e o valor máximo é 100. Vamos dar uma olhada. Mas agora isso também vai estar na mesma página, já que não usamos JavaScript para mostrar e ocultar nenhuma dessas seções ainda, mas isso é completamente bom por enquanto. De volta à nossa área de jogo, e logo após a seção aqui, vamos passar para a nossa seção de alcance. Temos o texto do alcance atual. Em seguida, atualizaremos nossa seção apenas aqui como o usuário adiciona suposições e, em seguida, também uma seção para a barra de progresso. Vamos envolver isso em uma nova seção, e o elemento P do intervalo atual, seguido por um elemento span que vai ser para o nosso texto, que é atualmente 1-100. Este texto também é atualizado durante o jogo para que possamos adicionar um ID a este intervalo. Podemos alterar isso com JavaScript, e o ID que eu vou procurar é saída de intervalo. Depois disso, vamos criar nossa área de alcance. Agora, isso vai ser criado usando uma div como um wrapper, e então aninhado dentro, vamos criar três seções. Vamos adicionar algumas suposições aqui dentro. Então vamos para 50 e 90. Vamos ter esta seção verde no meio, que é o intervalo atual, que o usuário está no meio. Atualmente, nosso número está entre 50 e 90, então queremos ter essa seção de espaço aqui. Então ambos os lados teremos uma seção alta e baixa para preencher o resto do espaço. Esta div aqui é para o nosso invólucro e vamos dar a isto uma identificação de alcance. Em seguida, aninhado dentro, vamos criar três elementos de extensão separados. O primeiro será para nossa seção baixa, e vamos duplicar isso mais duas vezes. A do meio é nossa seção verde e chamaremos esse espaço, e no final, isso é alto. Esta será a nossa primeira secção vermelha à esquerda, a secção verde no meio, e depois a secção vermelha à direita. Nossa seção final bem no fundo vai ser para nossas estatísticas. Isso vai registrar nosso número anterior de tentativas e também as suposições anteriores. A primeira desta seção vai ser estatísticas, e então aninhado dentro, isso terá duas divs. A primeira div vai ser para o número de tentativas anteriores e vamos dar a isso uma classe de informações, com o texto do número de tentativas anteriores. Vamos então ter uma extensão logo depois e isso vai ser para este número que vemos aqui. Por enquanto, vamos apenas adicionar um valor de zero e, em seguida, vamos atualizar isso em JavaScript mais tarde selecionando o ID de tentativas. A seção abaixo vai ser praticamente a mesma, então podemos copiar esta seção div, colar isso em. Isso também tem a mesma classe de informações, por isso tem CSS consistente. Mas desta vez, o texto é suas suposições anteriores. O ID também será suposições e, em seguida, exibir um traço dentro do navegador. Vamos verificar isso recarregando, e isso deixa todo o nosso conteúdo HTML no lugar, pronto para o nosso estilo no próximo vídeo. 4. Estilizando com CSS: Agora vamos começar a trabalhar criando nossas folhas de estilo dentro da barra lateral. Um novo arquivo ao lado do nosso index.html, que vamos chamar de styles.css. Feche isso. Nós também podemos vincular isso em nosso índice dentro de nossa seção principal. Crie um link com o href de styles.css. Vamos começar com o HTML dentro da nossa folha de estilos. Dentro daqui vamos introduzir nosso tamanho de fonte. Eu vou definir o meu para ser 10 pixels, e também um padrão em peso, e eu vou usar 300. Pouco antes de criarmos o resto de nossos estilos para este projeto, vou apresentar algo que pode economizar um pouco de tempo. Bem, este vai ser um plugin chamado Live Server, e isso vai nos salvar atualizar o navegador cada vez que fizermos qualquer alteração. Podemos fazer alterações em nosso código, salvar o arquivo, e isso será atualizado instantaneamente. Isto é completamente opcional. Você não precisa instalar este plugin, e se você estiver usando um editor de texto diferente, você pode não ter o mesmo disponível. Para introduzir isso, precisamos ir para a barra lateral. Se você estiver usando um Código do Visual Studio, clique em “Extensões” e, em seguida, use a Pesquisa na parte superior. Nós damos uma pesquisa para o Live Server, e então dentro aqui você pode ter várias opções. O que estou usando atualmente é este aqui, e então você precisará instalar e habilitar. Uma vez habilitado, você deve ver um botão abaixo na parte inferior que diz Ir ao Vivo. Você pode então clicar sobre isso para iniciar o Live Server, e isso abrirá isso dentro do navegador. Se você não vir este ícone na parte inferior, você pode ir para View, Command Palette e, em seguida, fazer uma pesquisa pelo Live Server, onde teremos as opções para abrir isso com nosso Live Server. Isso é completamente opcional e você pode continuar com a mesma maneira que temos usado anteriormente. Mas agora, se entrarmos no nosso próximo [inaudível], que é o corpo, vou definir algumas propriedades aqui dentro. Vamos definir a largura do nosso corpo para 90 por cento da viewport. Podemos centralizar isto com margem zero auto. Então eu vou definir um fundo que será um gradiente radial. Vamos usar isso para misturar entre duas cores diferentes. Isso vai se misturar em um movimento circular do centro até o final da página. O gradiente radial vai levar em dois valores. O primeiro, eu vou usar 343e63, e então separado por uma vírgula o segundo vai ser 2a3352. Dê um salvamento e veremos instantaneamente as mudanças dentro do navegador. Depois disso, vamos para a nossa seção principal que é o wrapper para todo o nosso jogo. Podemos criar um wrapper que vai definir o alinhamento do texto para estar no centro, uma cor de fundo f8f1e9, uma borda que vai embrulhar o nosso jogo à esquerda, a parte inferior, e também à direita. Primeiro de tudo, precisamos definir a cor da borda e também definir isso para ser uma linha sólida. Podemos então definir isso para ir em três lados diferentes. Nossa fronteira vai ser uma linha sólida, e nossa cor, que vai ser igual a ef7b54. Se salvarmos isso, atualmente, vemos que a borda é colocada em todos os quatro lados. Para selecionar isso em vários lados, podemos usar a propriedade border-width e , em seguida, digite a largura que queremos a borda em quatro lados diferentes. O primeiro é o topo. Queremos zero no topo, oito pixels à direita, oito pixels na parte inferior, e também para a esquerda também. Vamos tornar esta seção um pouco mais alta com a altura mínima de 80 por cento da altura da viewport. Também podemos arredondar essas bordas na parte inferior esquerda e direita com o nosso raio de fronteira. O canto superior esquerdo no canto superior direito é zero, depois três rems no canto inferior direito, e também no canto inferior esquerdo. Além disso, um rem de preenchimento para dar-lhe algum espaçamento dentro da seção. O valor texto-cor que vou usar será 1f2933. Então esta é a nossa seção principal e agora vamos segmentar alguns dos elementos que estão aninhados dentro. Começando no topo da nossa tela de boas-vindas, temos este título de nível 2. Então também podemos selecionar nossos elementos de texto também. Primeiro de tudo, vamos para o nosso h2. Podemos definir o tamanho da fonte para ser um pouco maior, então 2.2 rems. Além disso, podemos criar algum espaçamento na parte superior e inferior. Eu vou dar isso um pouco de espaçamento na parte superior e inferior, e então zero na esquerda e direita, em seguida, nosso texto que está dentro dos elementos p. Também podemos aumentar o tamanho da fonte para 1,8 rems. Ficando com esta seção de tela de boas-vindas, em seguida, temos esta área de botão que tem uma classe de wrapper button-. Atualmente, esses dois botões são colocados lado a lado, que possamos alterar isso definindo o tipo de exibição para ser flexível, a direção flexível para ser coluna. Em seguida, podemos segmentar os botões individuais com o elemento botão. Eu tenho que mover a borda padrão sem nenhuma. Também podemos definir o cursor para ser um ponteiro uma vez que você usar um cursor sobre este botão. Em seguida, a cor de fundo para os nossos botões. Vamos para um valor hexadecimal. Esta vai ser uma cor verde com a sombra de 83e1d0. Algum preenchimento no interior do botão de duas rems. Então vamos aplicar um raio de fronteira na parte superior do nosso primeiro botão, e depois a parte inferior do nosso segundo botão. Isto vai dar-nos este efeito arredondado que vemos nos botões apenas aqui. Por enquanto, vamos apontar o primeiro botão dentro deste seletor. Podemos definir o raio da fronteira no topo. Então, um rem no canto superior esquerdo, um rem no canto superior direito, e então zero no fundo. Atualmente, isso se aplica a todos os nossos botões. Agora podemos substituir isso selecionando o último filho. Last-child vai segmentar o último de todos os tipos de botões, que está dentro deste wrapper. Se tivéssemos um terceiro botão, isso teria como alvo o terceiro botão, se tivéssemos um quarto botão, que teria como alvo o quarto, e assim por diante. Nós só temos nossos dois botões, então a última criança vai se candidatar a este botão duro aqui. Podemos substituir o fundo, e eu vou fazer uso da mesma cor vermelha que temos para esta borda. Também usaremos a mesma cor vermelha para nosso controle deslizante de alcance durante o jogo. Isso significa que agora estamos usando uma mesma cor várias vezes. Poderíamos ir em frente e incluir a mesma cor, mas também podemos usar algo que é chamado de variáveis CSS também conhecidas como propriedades personalizadas. Assim como quando usando JavaScript, podemos usar propriedades personalizadas CSS para criar uma variável e usar isso várias vezes dentro de todos os arquivos. Da maneira que podemos fazer isso, se formos para o topo, eu vou criar uma seção que vai conter todas as nossas variáveis. A primeira coisa que vou fazer é mirar na raiz. Isso vai nos permitir criar nossas variáveis que podemos usar em toda a nossa página. A forma como criamos uma variável dentro do CSS é usando os traços duplos. Em seguida, usamos um nome de variável, como verde, e então podemos selecionar nosso valor. O valor verde que estamos usando atualmente é este aqui apenas para nossos botões. Podemos copiar isto, colar isto e adicionar um ponto-e-vírgula. Também podemos declarar nossa cor vermelha, que vamos reutilizar, que tem um valor de ef7b54. Em seguida, também podemos definir a cor para o nosso fundo, então traço, fundo traço, e esta vai ser a cor para toda a seção principal. A seção principal, se rolarmos para baixo, há um que está aqui, podemos pegar isso e definir isso como uma variável. Se quiséssemos, também poderíamos definir as cores para nossos gradientes radiais. Vamos copiar estes, gradient-1 e também o gradiente-2. Agora temos nossas variáveis declaradas no topo. Como podemos agora usá-los em nosso projeto? Nós os usamos no lugar de nossas cores, então vamos remover esses primeiro gradiente radial. Em seguida, definimos estes dentro de uma função var e , em seguida, declaramos o nome que demos logo acima. Este foi gradient-1 e, em seguida, o segundo valor vai ser gradient-2. Novamente, dentro da nossa função var. Salve isso, e agora nosso gradiente, agora sendo reintegrado. Até a seção principal, podemos substituir nosso plano de fundo também com nossa variável. Você faz fronteira. Também temos isso armazenado dentro de uma variável, e este é de cor vermelha. Ele ainda funciona bem dentro do navegador. Agora, se deslocarmos para baixo até nossos botões, temos a variável verde, então traço, traço verde. A cor de fundo para o nosso último filho ou nosso segundo botão vai ser a variável vermelha, que também definimos logo acima. O raio limite para isto também vai ser diferente. Podemos substituir isso com o raio da borda, definindo o topo para ser zero e zero, e, em seguida, o canto inferior direito, e também o inferior esquerdo para ser igual a 1rem. Nós também temos o novo botão do jogo aqui, mas vamos esconder isso com JavaScript muito em breve. Agora, para a seção do jogo, vamos para o nosso título de nível três, que é o texto do seu palpite. Isso também será substituído mais tarde para ser uma mensagem para o usuário. Tudo o que vamos fazer para o nosso nível três é definir o tamanho da fonte para 2rems. Em seguida, temos o nosso número de entrada. Esta é a única entrada que teremos na tela, então não precisamos ser mais específicos sobre a seleção do tipo. Tudo o que vamos fazer é definir a borda para ser um pixel. Uma linha sólida, que vai ser cinza claro. Vamos fazer com que ele se misture com o resto do plano de fundo definindo isso para ser transparente. As margens dão algum espaço fora dos nossos elementos de 2rems na parte superior e inferior e, em seguida, zero na esquerda e direita. Preenchimento para algum espaçamento interno de 1rem, esta é a parte superior e inferior e, em seguida, zero à esquerda e à direita. Sua largura, 16rems. Em seguida, também podemos definir o alinhamento de texto para estar no centro. Este será o texto que o usuário insere dentro deste campo. Isso vai empurrar isso para o centro de nossos elementos. Abaixo disso temos nossa seção de alcance, que é o invólucro, na parte inferior aqui, que contém nossos três vãos. Nós não vamos fazer muito com esses elementos span no CSS. Vamos deixá-los até a seção JavaScript mais tarde, mas por enquanto, porém, podemos definir a seção de intervalo para ter uma certa altura e também a cor de fundo. Isto era uma identificação. O tipo de exibição será o flexbox. Estes aparecerão em toda a página em uma linha por padrão. O fundo, para começar, esta será uma cor verde cheia. Podemos fazer uso da nossa variável verde. Uma altura de 50 pixels, um valor de preenchimento de zero e, em seguida, também alguma margem. Eu só vou definir a margem para ser zero na parte superior e direita, 4rems na parte inferior, e zero na esquerda. Isto é apenas para nos dar alguma margem inferior. É essa base da seção inicial logo abaixo. Em seguida, vamos fazer o texto de 1-100 um pouco maior. Esta seção tem o ID, que vai ser saída de intervalo. O tamanho da fonte, 1.6rems, e isso é tudo o que precisamos fazer atualmente para esta seção de intervalo. Faremos o resto em nosso JavaScript. Abaixo disso, temos nossa seção de estatísticas e esta tem a classe de estatísticas. Isto é para o nosso invólucro. Tudo o que vamos fazer aqui dentro é definir o alinhamento de texto para ser à esquerda, e então nós podemos cuidar de nossas duas seções dentro. Dentro do nosso índice ou html, demos a ambas as seções uma classe de informação. Isto é para que possamos usar a flexbox CSS, assim como na versão final, onde colocaremos ambos os itens um ao lado do outro. Vamos adicionar algum espaçamento no meio e certificar-nos de que eles estão alinhados em toda a página. Nossa informação, o tipo de exibição de flex. Podemos então usar justify conteúdo para adicionar o espaço entre. Atualmente, estes não estão alinhados corretamente em toda a página. Vemos que isso é um pouco mais alto. Para corrigir isso, alinharemos nossos itens no eixo transversal no centro. Tanto este valor de zero como também o traço estavam contidos dentro desses elementos span. Para corrigir isso, podemos marcar nossa seção de informações e, em seguida, qualquer extensão que está dentro. O tamanho da fonte, vamos para 1.6rems. Estamos quase terminando o nosso estilo para este projeto. Pouco antes de terminarmos, vamos apontar este botão aqui, que só vai aparecer no final do jogo. Este tem o ID do novo botão de jogo. Tudo o que vamos fazer é redefinir o raio limite para zero. Então, finalmente, podemos adicionar uma consulta de mídia para os tamanhos maiores. Nossa mídia, a largura mínima da tela de 800 pixels. A única coisa que vou fazer aqui é restringir a largura do corpo quando isso ficar maior. Nas telas maiores, eu só vou definir a largura máxima para 60 por cento da largura da janela de exibição, só para que ela não pareça muito sobrecarregada. A seção do corpo, podemos definir a largura para ser 60vw. É isso agora para o nosso estilo. Você pode, claro, mudar as coisas se quiser. Em seguida, vamos passar para a nossa seção JavaScript e começar a lidar com a funcionalidade do nosso jogo. 5. Começando nosso jogo: Agora é hora de adicionar nosso JavaScript ao nosso projeto. No nosso editor de texto, vamos criar um novo arquivo na raiz do nosso projeto, chamado de “script.js”. Podemos ir para nossa página de índice e vincular isso na parte inferior, logo acima da tag de fechamento do corpo. Então o script e a fonte serão iguais ao nosso “script.js”. A primeira coisa que queremos fazer quando o jogo for carregado é gerar um número aleatório, que está entre um e 100. Podemos acionar uma função assim que o navegador carrega esses documentos adicionando um manipulador de eventos onload para a tag body. Assim que a página for carregada, podemos acionar uma função e eu vou chamar isso de “init”. Isso está efetivamente inicializando nosso jogo assim que o navegador é carregado. Ao longo do nosso script.js, agora podemos criar uma variável para armazenar esse valor dentro. Vou chamar isso de “ComputerGuess”. Eu declarei isso fora de uma função, então ele está disponível para uso em qualquer outra função. Se fôssemos declarar isso dentro de uma função, esta variável seria escopo para essa função particular. Significa que não podemos acessá-lo em nenhuma outra parte do nosso programa. Vamos criar nossa função, que vai ser nossa função init. Isso não leva em nenhum parâmetro. Então precisamos definir o nosso ComputerGuess para ser igual ao nosso número aleatório. Podemos fazer isso selecionando o Math.Random, que selecionará um número entre zero e um. Queremos que isto seja entre um e 100. Portanto, podemos multiplicar isso por 100. Isso agora nos deixará com um número aleatório, que começa com um zero, até 99. No entanto, queremos que isto se situe entre um e 100, que possamos somar um no final. Também precisamos que isso seja arredondado, para que possamos arredondar isso com Math.Floor. Vamos colocar isso no lugar e podemos fazer uso do método Math.Floor e, em seguida, passar em nosso número. Isto irá arredondar para baixo cada um dos nossos números para que tenhamos um número entre um e 100. Vamos testar se isso está funcionando. Podemos registrar o ComputerGuess e isso deve carregar cada vez que o navegador começa. Temos um erro. Então, inits, precisamos ter certeza que isso está escrito corretamente. Agora, cada vez que recarregamos o navegador, temos um número aleatório. Podemos ver isso dentro do console. Este é um bom começo para o nosso projeto. A próxima coisa que precisamos fazer é mostrar e ocultar alguns elementos na tela. Quando esta página carregar pela primeira vez, não precisamos ver o novo botão do jogo, ele só vai estar lá no final do nosso jogo. Então vamos remover isso. Selecione nosso documento pelo ID, e o ID que queremos selecionar é o “NewGameButton”, que podemos ver aqui. Vou mover isso definindo a propriedade estilo CSS de exibição para ser igual a um valor de string de “none”. Então nosso botão agora é removido assim que o jogo carregar e também queremos remover esta área de jogo. Então vamos duplicar isso. Mas desta vez o ID que queremos selecionar será igual a esta área de jogo. Você pode estar pensando, por que não apenas esconder a área de jogo, que também inclui o botão? Bem, isso é porque mais tarde no jogo, uma vez terminado, ainda precisamos manter esta área de jogo no lugar, mas vamos restabelecer o botão. O ID que você deseja selecionar é o “GameArea”, que agora nos deixa com a tela inicial. Bom, agora temos um número aleatório. Agora estamos escondendo a área de jogo. Em seguida, precisamos criar uma função para realmente iniciar o jogo. Isso vai envolver esconder essa tela de boas-vindas. Em seguida, mostrando a área de jogo que acabamos de remover, o que efetivamente nos dará duas telas. Para fazer isso, vamos criar uma função e queremos chamar isso de “StartGameView”. Uma vez que o jogo tenha começado, queremos remover ou ocultar esta área. Se voltarmos à nossa página de índice, esta área tem o ID de “WelcomScreen”. Então document.getElementByID. Queremos selecionar a tela de boas-vindas. Assim como um [inaudível] fazer uso da propriedade style de display e definir isso igual a “none”. Duplicar esta linha e a próxima coisa que precisamos fazer é restabelecer a área de jogo, que tivemos logo acima. Então, mudanças na área do jogo e para fazer isso aparecer na tela, precisamos alterar o tipo de exibição para ser “bloco”. Em seguida, precisamos de uma maneira de realmente chamar esta função uma vez que o jogo começa. Bem, a maneira como vamos fazer isso é usando nossos botões fáceis e duros. Por enquanto, ambos os botões, vamos simplesmente chamar a mesma função, mas vamos alterá-la mais tarde para que o usuário tenha apenas cinco ou 10 tentativas. Vamos criar nossas funções. Nossa primeira função será para o modo fácil. Então nossa segunda função será para o modo difícil. Tudo isso vai fazer é apenas chamar a nossa função “StartGameView”. Então, podemos adicioná-los em ambas as funções. Agora, para chamar essas funções, fazemos isso em nossa página de índice. Vamos para os nossos botões e vamos adicioná-lo no manipulador de eventos clique. Uma função que queremos chamar uma vez que o botão foi clicado é o modo fácil. O segundo botão vai acionar a função de modo rígido. Agora devemos ser capazes de jogar este jogo dentro do navegador. Vamos clicar em fácil. Isso agora esconde a tela de boas-vindas e mostra a área de jogo. Recarregue isso pelo botão rígido. Isso também nos leva para a seção do jogo 2. Agora, temos uma maneira de começar o nosso jogo. No próximo vídeo, vamos passar para capturar a entrada do usuário e também comparar isso com nosso número aleatório. 6. Capturando a entrada do usuário e comparando: Agora temos um número aleatório gerado e armazenado dentro do nosso ComputerGuess. Nós também vamos capturar a entrada do usuário, que eles adicionam neste campo numérico. Uma vez que vai ser várias escolhas, vamos armazenar isso dentro de uma matriz. Então vamos dizer deixe nossos UserGuesses ser igual a uma matriz vazia para começar, e então podemos rolar para baixo e criar uma função que vai comparar o palpite do usuário com o número aleatório. Esta função vai ser chamada CompareGuess. O ponto vai ser pegar a entrada do usuário desta caixa dentro da nossa página de índice. Essa entrada tem o ID de InputBox. Vamos pegar isso com “document.getElementById”. Em seguida, podemos selecionar o valor que o usuário insere. Assim como no início, também precisamos converter isso em um número, para que possamos cortar isso. Podemos usar a função de número e, em seguida, colar isso em. Finalmente, podemos armazenar isso dentro de uma constante chamada UserGuess. Agora temos esse palpite. A próxima coisa que queremos fazer é empurrar isso para nossa matriz de adivinhação de usuário. Vamos acessar nossa variável, e então podemos empurrar um novo valor para a nossa matriz. O novo valor é o nosso UserGuess. Para verificar isso está funcionando, também podemos exibir isso dentro de nossa interface de usuário em nosso index.html. Na parte inferior, temos esta seção de adivinhações, que vai produzir quaisquer suposições anteriores. Voltar à nossa função, vamos pegar este pelo ID e, em seguida, definir o innerHTML para ser igual a UserGuesses. Com isso agora capturado, a próxima coisa que precisamos fazer é chamar nossa função CompareGuess em nosso index.html. Vamos dar uma olhada para a nossa entrada, que é apenas aqui. Podemos chamar a nossa função cada vez que o usuário adiciona um número e , em seguida, pressione enter adicionando o manipulador de eventos onchange. O nome da função é CompareGuess. Para o navegador e podemos verificar se isso está funcionando. Inicia nosso jogo, adiciona os valores de 40, 89, e nossas suposições agora são exibidas na parte inferior. Há várias maneiras diferentes de adicionar um espaço entre cada um deles, mas uma maneira muito simples de fazer isso é passando para o nosso script. Podemos criar um espaço com uma string vazia, e adicionar isso ao nosso palpite. Agora, se adicionarmos um número aqui dentro, 45, 78, estes agora têm um espaço antes de cada número. Estamos agora em uma posição onde temos o número aleatório e também o usuário adivinha. Agora precisamos de uma maneira de comparar esses dois valores e verificar se eles estão certos. Vamos fazer isso na função CompareGuess. Vamos criar três resultados diferentes. O primeiro, vamos verificar se o palpite do usuário é maior do que o palpite do computador. Em seguida, adicionaremos uma segunda condição de “else if”, e isso verificará se o palpite do usuário é menor do que o palpite do computador. Finalmente, vamos adicionar uma seção “else”. É apenas para se o palpite do usuário for igual ao palpite do computador. Primeiro de tudo, vamos lidar com o usuário adivinhar ser muito alto. Agora, tudo o que vamos fazer é enviar uma mensagem para o usuário, então “document.getElementById”. Um ID que queremos pegar é a nossa saída de texto. Este é o nosso nível três, que vai substituir o texto do seu palpite. Para fazer isso, definimos o InnerHTML, e pode ser uma sequência de textos que diz: “Seu palpite é muito alto.” Precisamos também de limpar este formulário de entrada. Atualmente, quando adicionamos o valor dentro aqui e, em seguida, pressionamos enter, o valor ainda permanece dentro aqui. Então vamos voltar e adicionar isso dentro da seção “se”. Atualmente, temos a caixa de entrada apenas aqui. Então podemos pegar essa linha de código aqui, trazer isso, e podemos definir o valor para ser igual a uma string vazia. A próxima seção que é o “else if”, isso vai verificar se o palpite do usuário é muito baixo. Podemos fazer o mesmo dentro desta seção, nossa mensagem vai ser muito baixa. Finalmente, na seção “else”, também podemos adicionar isso em. Não precisamos redefinir o campo de entrada desde que o jogo acabou. Tudo o que precisamos fazer é definir uma mensagem que será “correta”. Agora podemos ir em frente e testar isso dentro do navegador. Mas antes disso, vamos pegar nosso ComputerGuess e agora podemos colocar isso dentro do console. Vamos fazer isso na função “init”, então vemos isso assim que nosso jogo for carregado. Temos o nosso computador adivinhar que está aqui. Vamos fazer um log de console com esse valor. Para o navegador, agora podemos clicar com o botão direito do mouse e “Inspecionar” para abrir o console. Agora temos um valor de 83. Vamos clicar em fácil. Se descermos, digamos 10. Opa, diz que está correto, então vamos ver o que fizemos. De volta à nossa função. Então, quando o UserGuess é maior do que o ComputerGuess, UserGuess, este é um ComputerGuess. Vamos tentar isto mais uma vez. Temos um valor de 25. Então vamos descer, vamos dizer 10. Seu palpite é muito baixo. Agora vamos para 50. Seu palpite é muito alto. Vamos tentar 25, e recebemos a mensagem do correto. Agora comparamos com sucesso o palpite do usuário com o número aleatório. 7. Registrando tentativas anteriores: Vamos agora passar para registrar o número de tentativas de usuários. Agora a razão pela qual estamos fazendo isso é porque temos um modo fácil e difícil para começar nosso jogo. Uma vez que o usuário atinge cinco tentativas ou 10, é assim que sabemos que o jogo acabou. Também podemos registrar esse número de tentativas aqui, para que você também possa ver o quão longe você está no jogo. Para fazer isso, vamos criar uma variável na parte superior de nosso script chamá-lo de tentativas, e inicialmente definir isso como zero. Depois disso, precisaremos aumentar esse valor um cada vez que o usuário inseriu algo no campo de entrada. Para baixo para a nossa função CompareGuess, vá para definir isso apenas para nossas declarações if. Precisamos incrementar esta variável tentativas por um cada um alguns o usuário fez um palpite. Podemos fazer isso com tentações++, e isso irá incrementar o valor atual em um. Atualmente este é o valor zero e para cada palpite irá para um e, em seguida, dois e assim por diante. Então precisamos atualizar o DOM, que é nossa seção aqui. Se formos para a nossa página de índice e, em seguida, rolar para baixo, precisamos atualizar a extensão com o ID de tentativas. Vamos pegar isso pelo ID e, em seguida, definir o HTML interno para ser igual à nossa variável que é tentativas. Ok, vamos tentar, se formos para o modo fácil para começar, temos 10 tentativas para isso, então podemos adicionar qualquer número aqui dentro. Isso é aumentado com cada palpite. Vamos nos certificar de que o jogador não pode ultrapassar o número máximo de tentativas muito em breve. Mas, por enquanto, vamos simplesmente atualizar a mensagem para o usuário. Dentro da seção de outros aqui, é quando eles acertam o palpite. Também podemos adicionar a esta seção e deixar o usuário saber quantas tentativas ele conseguiu corrigir em. Podemos dizer que você conseguiu e, em seguida, adicionar nossa variável de tentativas, e, em seguida, também adicionar ao final uma seqüência de tentativas. Por exemplo, isso diria que você conseguiu em quatro tentativas e assim por diante. Vamos dar uma chance, vamos tentar a configuração fácil e ver se conseguimos obter está correto, então estamos muito altos, 30, 10, 20, 15, 12, e lá vamos nós. O número correto era 14 e temos isso na oitava tentativa. Bom. Com isso agora tudo funcionando. Vamos agora para adicionar nossas configurações de dificuldade no próximo vídeo. 8. Adicionando configurações de dificuldade: Em nossos botões fáceis e duros. Agora vamos restringir o número de suposições que o usuário pode fazer para ser 10 ou cinco. Primeiro de tudo, vamos até o topo do nosso script, e vamos criar uma variável para nos iniciar. Eu vou chamar isso de MaxGuesses, e isso vai ser inicialmente não definido para nenhum valor particular. É simplesmente porque queremos que isso seja definido como cinco ou 10 dependendo de qual botão o usuário pressionará. Podemos fazer este quando começamos a função de modo fácil ou difícil. O modo fácil, vamos definir as suposições máximas para ser igual a 10, e, em seguida, no modo difícil, vamos definir isso para ser cinco. Agora temos toda a informação de que precisamos. Temos esta variável tentativas apenas aqui, que é o número de tentativas que o jogador teve. Nós também temos a variável máxima. Agora podemos compará-los para verificar se o usuário pode continuar, ou se o jogo acabou. Vamos fazer isto. Vamos para a nossa função onde eu vou colocar a mensagem para o usuário. Este é CompareGuess, e nós só queremos ir em frente e executar esta seção se o número de tentativas for menor que o número máximo de suposições. Vamos colocar tudo isso no lugar, e criamos uma nova instrução if, que vai verificar se as tentativas são menores que o número de todos os MaxGuesses. Dentro das chaves, agora podemos colar na seção. Esta seção se só será executada se eles não tiverem atingido o número máximo de suposições. Se atingiram o máximo, esta é, portanto, a última tentativa. Para lidar com isso, podemos criar uma seção mais logo após isso. Esta seção é a última tentativa, então esta pode ser a 10ª tentativa ou a quinta tentativa no modo rígido. Mesmo que esta seja a última tentativa, ainda queremos decidir se os jogadores acertaram o número ou não. Podemos fazer isso agarrando esta mesma seção como acima, e podemos apenas alterar as mensagens. Certifique-se de pegar tudo dentro da seção if, então o else, else if, na seção if. Vamos copiar isto. Adicione isso em nossa nova seção de outros. Uma vez que este é o último passo, se o palpite do usuário é muito alto, vamos mudar esta mensagem que é exibida. Nós vamos dizer que você perdeu. Você pode então adicionar uma tag break para adicionar isso à próxima linha, o texto do número foi, então deixamos o computador adivinhar variável no final para que o usuário saiba qual era o número. Não precisamos redefinir a caixa de entrada, pois este é o último palpite. Nós também podemos remover isso da seção else if e, em seguida, mudar a mensagem dentro de aqui também. Esta seção se for quando o usuário adivinhar é muito baixo, significa que eles também perderam o jogo. Podemos pegar exatamente a mesma mensagem de cima, e depois substituir esta aqui dentro. A terceira condição é quando o jogador tem o número correto, para que possamos deixar esta mensagem como está. Vamos dar um julgamento a isto. Vamos para o modo difícil para começar. Temos cinco tentativas. Cinquenta, muito baixo, 80, muito alto , 87, 85, e perdemos o jogo em cinco tentativas. Reinicie e volte para o modo fácil. Vamos tentar isso, muito alto. Assim que chegarmos a 10 tentativas, este jogo também acaba. Isso agora perde com um modo totalmente funcional fácil e difícil. 9. Cuidando do final do jogo: Há algumas coisas que precisamos fazer para lidar com o fim do jogo. Quando vemos o fim da tela do jogo e assim como fazemos mais à direita. Também queremos reintroduzir o nosso NewGameButton. Este é um sobre o nosso índice html. Este aqui, que vai basicamente atualizar o navegador, para possamos então selecionar o nosso modo de jogo. Nós também vamos garantir que, quando o jogo terminar, o jogo não pode mais adicionar nenhum valor a este campo de entrada. Se continuarmos entrando aqui, ainda podemos inserir valores, e eles ainda são registrados como nossas tentativas anteriores, e também empurrados para a matriz. Para fazer isso, vamos para o nosso script e criar uma função final do jogo. Por cima, logo abaixo de nossas variáveis é onde eu quero criar as minhas. O nome da função GameEnded. Passo 1 será reintroduzir o nosso NewGameButton. Index, este é o ID de NewGameButton. Podemos fazer isso redefinindo o tipo de exibição. Logo abaixo, definimos este newGameButton para ser o tipo de exibição de nenhum. Vamos copiar esta linha e adicionar isso em nossa função GameEnded. Tudo o que precisamos fazer é mudar o tipo de exibição para estar em linha. Logo depois disso, nós também vamos adicionar um novo atributo para este campo de entrada, então este é um apenas aqui. Vamos definir isso para ser somente leitura assim que o jogo terminar, que o usuário não possa mais inserir novos valores. O primeiro passo é pegar esses elementos e o ID, pelo qual vamos pegar isso. Aqui está a nossa InputBox. Podemos ver isso na nossa página de índice. Esta é a nossa entrada e o ID de InputBox e para adicionar um novo atributo aos nossos elementos, podemos usar um método chamado setAttributes. A primeira coisa que precisamos inserir é o nome do atributo, que é somente leitura. Vou definir isso como um valor de somente leitura. Agora precisamos chamar a função final do jogo assim que terminarmos o jogo. Role para baixo até nossa função CompareGuess, que é apenas aqui, e nosso jogo é efetivamente terminado em qualquer uma dessas seções onde chamamos correto ou você perde. Começando do topo, a primeira seção correta ou você perde é esta aqui. Podemos então chamar a nossa função GameEnded. Vamos copiar isto e continuar a descer. Nós também temos seção VOCÊ PERDER aqui, o que significa que o jogo acabou. Também podemos chamar a nossa função, temos uma seção VOCÊ PERDE. O jogo acabou, e finalmente, temos uma seção correta na parte inferior onde podemos chamar a mesma função. Para o navegador, e vamos checar isso. Vamos para o modo Difícil, e vamos inserir rapidamente qualquer valor usado para terminar nosso jogo. Perdemos, vemos o novo botão do jogo, e agora não podemos mais ter novos valores em nosso campo de entrada. No entanto, agora se tentarmos clicar no botão novo jogo, não vemos nada acontecer dentro do navegador. Tudo o que vamos fazer com este botão é habilitá-lo para recarregar o navegador, que vai nos levar de volta para a tela inicial. Mais em nosso index.html, podemos adicionar manipulador de eventos onclick a este botão. Na tag de abertura onclick. Vou definir isso para uma nova função chamada NewGame. De volta ao nosso guião. Vamos adicionar isso apenas no GameEnded. Este era NewGame, e a maneira como podemos recarregar o navegador dentro do nosso código é selecionando o window.location e, em seguida, chamar um método chamado reload. Vamos verificar se isto está a funcionar e acabar com o nosso jogo. Em quaisquer valores aleatórios dentro daqui, agora vemos a tela final. Clique no NewGame, e agora o levamos para a tela inicial. 10. Criando a seção de intervalos: Em nossa página de índice ou HTML, criamos esta seção de intervalo no início. Agora, isso vai atualizar você e novamente para mostrar ao jogador, o intervalo de números que eles deixaram para escolher. Vamos fazer isso atualizando essas três seções. Vamos usar JavaScript para definir o CSS, como a margem, e também a cor de fundo, arquivo de script O2O e agora podemos configurar isso. A primeira coisa que quero fazer sobre o topo é definir duas novas variáveis. Estas variáveis vão ser o baixo e também o alto, e estas vão ser atualizadas durante o jogo. Quando começamos nosso jogo, o valor baixo é um, e o valor mais alto é 100. Vamos definir esses padrões para cima, alto de 100. É uma alça, toda essa funcionalidade, vamos criar uma nova função, e isso vai ser chamado UpdateRange. Para atualizar nosso controle deslizante de alcance, precisamos acessar todas essas três seções. Vamos cortar estes primeiro pelo ID, então getElementByID. O primeiro foi baixo, e assim está dentro de uma constante chamada LowValue. Podemos julgar isso mais duas vezes, e a segunda é o espaço. Este é o espaço entre os valores altos e baixos. O terceiro é alto. Eu chamo isso de HighValue. Tanto este LowValue quanto o HighValue serão as áreas vermelhas que podemos ver se entrarmos no jogo. Esta será a seção baixa à esquerda, e então atualizaremos a seção mais alta à direita. Este espaço no meio é a área que o usuário ainda tem que escolher, e esta vai ser uma seção verde. Para fazer isso dentro de nosso script, vamos atualizar esses valores CSS da flexbox, e também a cor de fundo. Para criar um espaço para a seção baixa no lado esquerdo, precisamos levar em conta o valor de baixo, e podemos usar isso como uma porcentagem para definir o valor flex. Lembre-se, ao usar a flexbox, se todas essas três seções tivessem um valor igual de um, todas elas tentariam ocupar uma quantidade igual de espaço. No entanto, esta seção não vai ser igual, uma vez que vai ser baseada em nossas variáveis. Vamos começar com nossa variável lowValue, podemos definir a propriedade style ou flex, e isso vai ser igual à nossa variável baixa, e como isso é CSS, nós também precisamos adicionar uma string no final, que é o símbolo percentual. Isso também seria o mesmo para quaisquer sobrevalores também, como um pixel. Nós também vamos dar a este LowValue uma cor de fundo também. Defina o estilo de fundo escuro para ser igual à nossa cor de fundo, que será ef7b54. Nós vamos fazer uma coisa bem semelhante para nossas próximas duas seções, então vamos copiar essas duas seções de estilo. Vou colar isto logo abaixo do nosso espaço, e também a parte alta. A seção espacial vai ser tudo no meio. Para obter esse valor, vamos acessar a variável alta, e tirar o baixo que vai nos dar o espaço entre nós. O fundo vai ser a nossa cor verde que é o valor de 83e1d0. O final é este valor de alto para baixo na parte inferior. Agora, não podemos simplesmente produzir o valor de alta. Agora, isso é porque se dermos uma olhada em nossa barra de progresso, se o palpite alto dos usuários, por exemplo, é 70. Se adicionarmos isso como um valor de 70, isso criará uma seção vermelha todo o caminho da esquerda, direita para 70 por cento. No entanto, já temos as seções baixas e o espaço entre eles, então, se isso fosse um valor de 70, tudo o que queremos fazer é criar uma seção vermelha para os 30 por cento restantes logo no final. A maneira como podemos fazer isso é tirar isso de um 100, e isso nos dará o espaço restante para preencher a seção vermelha logo no final. Nós já temos essa cor vermelha definida de antes, então agora podemos salvar isso e, em seguida, chamar essa função cada vez que o usuário faz um palpite. Nossa função é UpdateRange. Podemos chamar isso depois de cada palpite para baixo em nossa função CompareGuess. Este é o nosso CompareGuess, então vamos selecionar o aberto entre parênteses, e vamos chamar isso logo após isso fechar. Se eu agora salvar este arquivo e nos der uma tentativa, que são valores dentro daqui, você vê que nada está funcionando corretamente ainda. Isso ocorre porque estamos contando com as variáveis altas e baixas no topo, mas ainda não atualizamos isso com o palpite do usuário. Podemos atualizar esses dois valores, volta para baixo em nossa função CompareGuess. A primeira seção se, aqui nós check-in se o palpite do usuário é muito alto. Portanto, podemos atualizar nossa variável alta com o valor do palpite do usuário. Abaixo disso, dentro de nossa seção if else, isso é quando o palpite do usuário é muito baixo. Portanto, podemos atualizar nossa variável baixa para ser igual ao palpite de nossos usuários. Vamos salvar esse arquivo e tentar isso no navegador. Adicione quaisquer valores dentro daqui, e ainda não vemos uma atualização, então vamos verificar isso. Obtemos a seção alta se o palpite do usuário é muito alto. Se for muito baixo, obtemos na seção baixa. Vamos para a nossa função. Metade da nossa variável, UpdateRange. Podemos ver a partir do editor de texto que nosso espaço, e também as variáveis HighValue não estão sendo usadas, então vamos mudá-lo para ser espaço, e também o mesmo logo abaixo. Estes dois devem ser de alto valor, e eu acho que esta é uma das desvantagens de copiar e colar, então vamos salvar isso, e dar uma chance no navegador. Adicione quaisquer valores aqui dentro, então 10, e os primeiros 10 por cento são agora nossa seção baixa, vamos tentar em um alto valor de 90. Este preenche os últimos 10 por cento, dando-nos o intervalo entre eles. Vamos para 50, isso agora fecha. Isto está praticamente tudo funcionando corretamente, mas há um pequeno problema. Atualmente, nosso valor mais alto é 90, mas se adicionarmos um HighValue como 99, vemos nosso alcance agora aumenta. Quando adicionamos um valor mais alto, não queremos que o nosso alcance aumente, queremos continuar com o máximo anterior, que era 90. Pode parecer um pouco confuso, mas só queremos atualizar a variável alta se for menor do que a alta anterior. Voltar para a nossa função de comparação, quando definimos o nosso alto, vamos criar um if save, que vai verificar se o nosso usuário adivinhar é menor do que o máximo anterior. Se for, vamos então definir nossa variável. Isso irá parar qualquer caso como antes quando nossa alta anterior foi 90, e então o usuário adivinhou foi 99, e uma declaração se como esta vai parar essa coisa de acontecer. A mesma coisa acontecerá se voltarmos para a seção baixa, se você tiver um mínimo de 50, isso agora nos dá nosso alcance de um a 50, vamos para o nosso 30, 10. Agora, nossa seção baixa está entre 1 e 10. Se fôssemos adicionar um valor mais baixo, como cinco, novamente, o mesmo problema acontece, isso vai mais amplo enquanto queremos que esta permaneça exatamente a mesma. Logo abaixo onde atualizamos nossa seção baixa, também podemos adicionar uma declaração condicional. Nós só queremos que esta variável seja atualizada se a adivinhação do usuário for maior do que a baixa atual. Vamos fazer um teste a isto. Vamos para um 10 como 90. Agora, vamos para a seção baixa se fizermos isso mais baixo como cinco, esta seção vermelha fica exatamente onde está. Vamos tentar ir mais alto, então 95, e tudo isso agora parece funcionar corretamente. Nossa seção de chuva está quase pronto e a próxima coisa a fazer é também atualizar o texto dentro do meio. Esta é a nossa gama atual de um a 100. Também queremos atualizar isso durante o jogo. Nós também vamos empurrar isso para a esquerda ou para a direita para estar acima de nossa seção verde. O lugar que vamos fazer isso está de volta dentro de nossa função de alcance de atualização. Desloque-se para cima. Podemos então selecionar esta seção que é enrolado dentro do span com o ID de saída de intervalo. O primeiro passo é pegar isso. Teríamos elemento por ID. Vamos armazenar isso dentro de uma constante chamada saída de intervalo. Queremos agora pegar este intervalo de saída e, em seguida, atualizar o HTML para ser os novos valores atualizados. Vamos usar o tick de volta para que possamos criar uma string template, que nos permitirá inserir algumas variáveis em nossa saída. A primeira variável que adicionamos dentro do símbolo $ e as chaves. Este é um valor de baixo, que você define logo acima, o traço, adicionar um símbolo $ e, em seguida, podemos inserir nossa variável alta dentro das chaves. Em seguida, vamos fazer com que esta seção se mova para a esquerda ou para a direita, para estar logo acima da nossa seção verde. A forma como podemos fazer isso é definindo a margem à esquerda e também à direita. A margem à esquerda vai ser a mesma nossa seção baixa e a margem à direita vai ser igual à nossa seção alta e apenas certifique-se que isso está no texto. Isso irá definir isso como um valor de texto do nosso elemento. Novamente, vamos selecionar a nossa saída de intervalo e vamos começar com a propriedade de estilo que vai ser margin-left. Ao definir qualquer propriedade style usando JavaScript, não usamos quaisquer traços como faríamos com CSS. Em vez disso, definimos isso como CamelCase, então a primeira palavra de margem é toda minúscula e , em seguida, cada palavra logo após isso começa com uma letra maiúscula. Tal como mencionei, vamos definir isto para ser exactamente o mesmo que o nosso baixo valor. Vamos então definir a nossa margem à direita. Assim como acima vamos definir o estilo, mas desta vez a margem à direita e isso é o mesmo que o nosso valor flexível, então copie isso e vamos testar isso. Então 10, 90, isso é igual, então nosso texto está agora no meio. Vamos tentar 50 e 70, 85, e toda vez que atualizamos nosso alcance, isso agora é empurrado logo acima da nossa seção verde. Bom. Esta é a seção de alcance agora concluída e o toque final que eu vou fazer para este projeto é também fazer esta seção número flash. A maneira que podemos fazer isso é adicionar uma animação ao nosso intervalo de saída e, em seguida, definir isso dentro do nosso CSS. Isto vai ser razoavelmente simples. Tudo o que vamos fazer é adicionar uma nova classe e podemos definir esta propriedade usando uma lista de classes. Lista de classes tem um método chamado add, que nos permitirá adicionar uma nova classe, que vamos chamar flash. Podemos então usar isso em nosso styles.css. Fora de nossa consulta imediata, assim como com qualquer classe, direcionamos isso com o ponto e, em seguida, dentro daqui podemos configurar nossa animação. Nossa animação vai fazer uso da regra de quadros-chave, que possamos definir nossos quadros-chave e isso vai nos permitir definir exatamente quais propriedades CSS queremos adicionar ou remover como cada estágio de nossa animação. O nome da animação vai ser igual a flash e, em seguida, dentro daqui podemos definir exatamente ambas as regras CSS. Queremos aplicar em porcentagens diferentes, então em zero por cento, que é o início, podemos definir a opacidade como um valor de um e um valor de um não é transparente, isso é totalmente opaco. É exatamente como o elemento se destina a olhar. No entanto, a 50% ou a meio desta animação, vamos reduzir essa opacidade para ser igual a 0,5. Zero seria totalmente transparente ou totalmente transparente. Então este é um valor intermediário. Em seguida, no final de nossa animação, podemos definir o valor de 100 por cento para ser de volta para um valor de um. Agora temos esse nome de animação de flash, agora podemos definir isso. Eu também vou definir esta animação para ser ao longo de uma duração de um segundo e também definir isso como infinito para que nossa animação continue rodando dentro do navegador. Vamos salvar isso e tentar isso ou modo fácil e se ele iniciar novamente, a classe é agora adicionado e podemos ver que nossa animação agora entrou em vigor. Parabéns, você chegou ao fim deste projeto e eu vou vê-lo no próximo. 11. Siga-me na Skillshare!: Meus parabéns por ter chegado ao fim desta aula. Espero que tenha gostado e ganhe algum conhecimento com isso. Se você gostou desta aula, certifique-se de conferir o resto das minhas aulas aqui no SkillShare, e também me siga para quaisquer atualizações, e também para ser informado de quaisquer novas aulas à medida que estiverem disponíveis. Obrigado mais uma vez, boa sorte. Espero que te veja de novo em uma aula futura.