Diversão com Javascript: crie um jogo de correspondência de números!

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ós não vamos usar quaisquer frameworks, qualquer bolerplate, quaisquer bibliotecas ou quaisquer modelos. Em vez disso, vamos construir tudo completamente do zero, passo a passo para mostrar como essas tecnologias gratuitas funcionam juntas. Este projeto em particular vai ser um jogo numérico. As regras são muito simples. Se clicarmos no botão play, somos então apresentados com uma série de imagens, e então o usuário precisa decidir se o número de itens na imagem é o mesmo que a pergunta sobre a esquerda. Se acharmos que isso é verdade, clicamos no tick, Se acreditamos que isso seja incorreto, clicamos na cruz e nossa pontuação é ajustada dependendo da resposta correta. Temos um certo número de imagens que são todas únicas. Além disso, podemos alterar a duração do tempo entre cada uma dessas imagens também. No final do jogo também teremos a oportunidade de começar um novo jogo e também ver nossa pontuação total. Como acontece com todos os outros projetos, criamos a interface do usuário usando HTML, e então usamos nosso CSS para o estilo e também o layout também. Trabalharemos com matrizes de objetos, trabalhando com atrasos de tempo, funções, trabalhando com o DOM. Definindo aleatoriamente a fonte do elemento de imagem, gerando e exibindo em números aleatórios, comparando números, trabalhando com timeouts, atualizando a pontuação do usuário e também alguns pequenos toques agradáveis, como algumas fade, animações também. Este é um grande projeto, se você é um iniciante e um novato em HTML, CSS e JavaScript, e espero que você esteja interessado neste curso. Vejo-te na 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 terminar 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 muito e se desviar 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 na aula. Lembre-se também de compartilhar seu projeto aqui no Skillshare, e não 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: Para este próximo projeto, que é o jogo numérico, vamos contar com o uso de muitas imagens. Você pode usar suas próprias imagens para este curso, mas eu também forneci uma pasta Imagens se você quiser usar as mesmas que eu. Se você passar para o github e ir para o repositório para este curso, que é fun-javascript projects.com. Em seguida, você será levado para uma página onde você pode baixar o código completo, que incluirá todos os projetos e também essas soluções etapas e também quaisquer ativos. A partir daqui podemos baixar os arquivos zip, obter o pacote completo. Então, uma vez baixado, se entrarmos no jogo numérico, você verá uma pasta de imagens. Haverá também as soluções frias para cada vídeo também. Este vai ser o jogo que vamos criar. É uma interface de usuário bastante simples, temos apenas duas seções. Temos uma seção de boas-vindas, onde vamos clicar no botão play e começar. Toda a idéia deste projeto é que vamos percorrer um número de imagens, então teremos uma certa quantidade de itens em cada uma dessas imagens, como dois cartões ou velas de oitavo aniversário. Em seguida, o usuário precisa decidir se o número à esquerda é o mesmo vários itens como na imagem. Por exemplo, temos duas pimentas, então isso seria correto. Nós clicamos no tique-taque. São sete pincéis de pintura , então isso será errado, vou clicar no X. A escala de tempo para cada uma dessas imagens também será definida dentro do projeto. Isto é completamente ajustável. Se você quiser que o jogo seja mais difícil, podemos reduzir o tempo para baixo, e também podemos aumentá-lo para tornar o jogo mais simples. O jogo é efetivamente sobrecarregar, percorremos todas as imagens. No nosso caso, fornecemos 20 imagens na pasta Imagens. Uma vez que passar por 20 destes, vai então obter uma tela no final que diz ao usuário quantos eles têm correto. Para a área de trabalho e vamos criar uma nova pasta do projeto. O nome deste vai coincidir com o número. Arraste isto para o editor de texto. Podemos começar com um novo arquivo, que vai ser o index.HTML. Mais uma vez, precisamos da nossa estrutura HTML e eu vou usar o comando emmet embutido, que é HTML5, e depois adicionar um título de documento, que é correspondência de números. Vamos clicar com o botão direito do mouse e copiar o caminho e colar isso em uma nova guia do navegador. Vamos trabalhar dentro da seção do corpo. Isso vai conter uma seção principal, que vai ser o wrapper principal para todo o conteúdo. Nós também vamos fazer uso disso dentro do JavaScript para que possamos dar a este um ID exclusivo. Quero ir para a área de jogo. Esta secção principal consistirá em duas áreas principais. Vamos ter a seção inicial, que fica à esquerda, e à direita, teremos a área da imagem. Isso entra em duas divs separadas. O primeiro é para o lado esquerdo. A aula começa. A segunda div vai ser para a área de imagem para a classe de área de imagem. Estes são os nossos dois wrappers principais para a nossa área de jogo, e vamos começar no lado esquerdo, que são estas estatísticas. Dando uma olhada na versão final aqui, nós vamos ter uma pontuação que vai ser atualizado dinamicamente como o usuário recebe estes certo ou errado. Vamos então ter um número que vai ser gerado aleatoriamente, o nome da imagem, e então nossos dois botões. Também como uma nota lateral, quando chegarmos a isso mais tarde. O número que é gerado apenas aqui. Isto vai ser a quantidade exata de itens na imagem, ou vai ser um maior, um menor. Isto é para tornar o jogo um pouco mais desafiador. Por exemplo, não queremos ver 10 itens na tela. Em seguida, um número de um é comparado com, vez que isso faria o jogo muito simples. Na área inicial, vamos abrir essa div. Vou começar no topo com um título de nível 3. Este post o texto da pontuação. A pontuação do usuário será algo como 2 sobre 20. Mas essas duas áreas serão dinâmicas. O primeiro podemos criar um elemento span. Vamos dar-lhe uma identificação, que vai ser a nossa pontuação atual. Logo após a barra, isso pode ser uma seção dinâmica 2. Um segundo elementos de extensão. Isso vai ter o ID, que vai ser igual ao total disponível. Esta vai ser a quantidade total de pontos que está disponível, que é o mesmo número de imagens que vamos ter. Também podemos adicionar alguns valores de espaço reservado apenas para tornar isso mais visível. Vamos para dois e 20. É assim que parece dentro do navegador. A próxima coisa a fazer é passar para a nossa próxima seção. Se clicarmos em “PLAY" este será o número de itens na imagem seguido pelos dois botões. Vamos fazer isso sob o título de nível 3. O texto vai ter a classe de itens. Isto é para que possamos adicionar algum estilo dentro do CSS. Mais uma vez, isso vai ser duas seções dinâmicas. Vamos ter o número gerado aleatoriamente, que é o número de itens um maior ou um menor. Vamos fazer isso dentro de um span com o ID do número. Podemos adicionar um valor detentor lugar aqui dentro. Em seguida, uma segunda extensão com o ID, que é igual ao nome do item. Um valor de espaço reservado dentro daqui, então estas serão as imagens então vamos para seis patos e um espaço no meio. Em seguida, logo após o elemento p, podemos adicionar uma nova seção div, que vai ser o wrapper para nossos dois botões. A classe que vai ser usado no CSS, isso vai ser igual a muitos botões. Então nosso primeiro botão, o primeiro símbolo que vamos usar ou o primeiro caractere vai ser o tic, que vai ser usado como uma pequena entidade de hedge com o código dos “munds”, o hash 10003 seguido pelo ponto-e-vírgula. O segundo botão, que vai ser atravessado, e este vai ser um código de entidade HTML, que é o e comercial, o áspero 10007, e o ponto-e-vírgula. O próximo estágio é adicionar a área da imagem, que será o lado direito. Atualmente, quando estamos apenas começando o HTML isso pode parecer um pouco confuso porque precisamos criar duas seções. Precisamos criar esta tela de boas-vindas, e também precisamos criar a seção de imagem uma vez que o jogo está em jogo. Usamos JavaScript para mostrar e ocultar essas duas seções. Vamos começar se descermos para a nossa segunda div logo após as estatísticas, que é a área da imagem, começarem a trabalhar com a nossa tela de boas-vindas no início. No topo, vamos adicionar um cabeçalho de nível 3, que vai ter o ID da mensagem. Isso vai ser cabeçalho de nível 3 vazio, e vamos usar JavaScript mais tarde para adicionar uma mensagem, que vai dizer a chamada de mesa do usuário. Esta seção também estará disponível apenas no final do jogo. Em seguida, uma seção div, e este vai ser o wrapper para a nossa tela inicial. Aqui dentro, este será apenas todo o conteúdo que vemos no início. Esconderemos isto e começaremos o jogo. Para manter isso único, podemos adicionar um ID que é igual à tela inicial, e o conteúdo para começar será um cabeçalho de nível 1. Este é o texto que veremos bem no topo. Observe também como a correspondência do número da palavra também é enfatizada. Essa é a nossa descida. Em seguida, podemos envolver o número de correspondência nos elementos m. A próxima seção também é enfatizar. Podemos dizer que as regras são simples. Novamente dentro dos elementos m. Então todo o resto do texto vai estar nos elementos p. As próximas duas linhas serão prefixadas com uma entidade HTML para esta pequena seta. Isso vai ter o código da entidade que é igual ao e comercial, o áspero 96, 54, e então o ponto-e-vírgula, seguido pelo texto, todos os polegares acertados para cima. Se o número de itens corresponder ao número exibido. Depois disso, um segundo p elementos, vamos usar novamente o mesmo código de entidade HTML como acima. Agora podemos descer, no texto é polegares para baixo se não coincidir. A terceira, que é a última linha de texto é que você tem um certo número de segundos para decidir. Esse número também será dinâmico, então podemos alterar isso no JavaScript. Precisamos envolver este número em um período que vai ter o ID da configuração de tempo. No elemento p que você tem, em seguida, criar um elemento span com este ID. Você pode adicionar o número aqui dentro, se quiser, seguido de segundos para decidir. Vamos ver como ele fica dentro do navegador. Tudo isso parece bem, ele só nos ajuda com o CSS mais tarde. Nós também vamos adicionar uma classe cada uma dessas linhas de texto. Esta vai ser uma classe de espaçamento onde nós vamos adicionar algum espaçamento na parte superior e inferior. Vamos passar para nossas linhas de texto, e vamos começar com a primeira linha abaixo do título. Vou dar-nos uma classe, que é espaço traço y, vez que isto é responsável por adicionar algum espaço e no eixo y. Copie isso e cole isso nos elementos p logo abaixo. Isso nos dará algum espaço consistente quando adicionarmos nosso estilo. Depois disso, também temos um botão play na parte inferior. Armazenado nesta seção div, um botão com o ID do botão play, texto para jogar. Este é agora todo o conteúdo que precisamos para toda essa tela de boas-vindas. A próxima coisa que precisamos fazer é adicionar uma imagem de espaço reservado, que será para efetivamente a próxima tela. Ele vai dar uma olhada na versão final apenas aqui. Tudo o que precisamos fazer aqui é girar ou percorrer qualquer uma dessas imagens. Tudo o que precisamos, e este é apenas um espaço reservado, vá por baixo do botão e, em seguida, fora de nossa seção de tela de início. Uma nova div, que vai ser o wrapper para esta imagem com o ID do recipiente de imagem. Vamos criar uma imagem dinamicamente usando JavaScript. Mas, por enquanto, podemos adicionar uma imagem de espaço reservado apenas para que possamos ver como tudo parece quando chegamos a adicionar nosso CSS. Primeiro de tudo, podemos ir para a pasta de imagens e, em seguida, barra e o nome de qualquer uma de nossas imagens. Eu quero ir para os macaroons. Podemos deixar o texto alternativo por enquanto, uma vez que isto vai ser removido muito em breve. Em seguida, precisamos realmente adicionar essas imagens em nossa pasta do projeto. Podemos usar as mesmas imagens que eu usei neste curso, ou você pode baixar as suas próprias imagens. Vou colá-los em nossos projetos de correspondência numérica. Isto deve deixar-nos agora com uma imagem. Parece um pouco confuso, já que essas duas seções serão trocadas. Também precisamos adicionar algum estilo CSS, o que vamos fazer no próximo vídeo. 4. Estilizando com CSS: Agora estamos de volta com o nosso projeto e neste momento vamos aplicar algum estilo CSS para melhorar a aparência deste projeto. Para fazer isso como se fôssemos criar uma folha de estilo dentro do diretório do nosso projeto. Novo arquivo, e este é o styles.css. Podemos vincular isso dentro da seção principal ou página de índice com o nosso link. Isso está no mesmo nível da nossa página de índice. Este é simplesmente o nome de styles.css. Podemos ir até nossas folhas de estilo e começar criando a raiz um tamanho dentro do nosso seletor HTML. Vamos começar com o tamanho da fonte raiz, e eu estou indo para um 10 pixels, e também uma cor que se aplicará a todos os textos em nosso projeto e vamos substituí-lo usar pode seletor. A cor para ir vai ser 212560. Eu estou indo pode verificar isso é trabalho em por recarregar o navegador, e isso é tudo agora feito efeito. Agora vamos passar para a área de jogo, que era o wrapper principal, e este é o wrapper para ambos seção de estatísticas vie e também ImageArea. Isso não era identificação, então usamos o duro. Agora vamos fazer aqui é definir algum estilo de fonte e também o tamanho. Então, 1.6rems, algum preenchimento. Vamos para o preenchimento no topo do 3rems. Isso só nos dará algum espaçamento no topo da página aqui. A maioria do nosso estilo será dividida em duas seções. Tenha a seção Stat, que é toda a informação no topo aqui. Temos a pontuação, o número de itens na imagem, e também o tick e os botões cruzados, e depois abaixo, que será toda esta seção aqui. Esta vai ser a área da imagem. Primeiro de tudo, vamos direcionar ambas as seções e podemos definir a altura mínima para a tela pequena. Esta é a classe de área de imagem, e também o mesmo para estatísticas. A altura mínima, eu vou para 30 vh, que é 30 por cento dos navegadores viewport visível. Isto vai tornar as nossas secções um pouco mais altas. Não importa muito no momento porque você terá muito conteúdo na tela, mas mais tarde em JavaScript, quando alternarmos entre esta seção e a imagem, haverá menos conteúdo no tela. Para a área da imagem, eu vou aplicar um gradiente como uma cor de fundo, assim como a versão final. Esta vai ser a seção oval à direita ou na tela pequena. Esta será a seção na parte inferior. Movendo-se para baixo a ImageArea, podemos fazer isso definindo um fundo como um gradiente linear. A primeira cor que eu vou selecionar 859ede. Para o segundo valor, eu vou para 6965de. Vamos verificar se isto é trabalho. Isso é bom e isso nos dá esse gradiente linear direto do tom mais claro para mais escuro. Mas vou definir um primeiro valor opcional de 70 graus seguido de uma vírgula. Isso vai compensar nossos gradientes estar em toda a página a 70 graus. Em seguida, o raio da borda, que se aplicará tanto à parte inferior esquerda quanto à parte inferior direita na visualização móvel. Para isso, podemos aplicar os quatro valores e estes vão no sentido horário a partir do canto superior esquerdo. Cima esquerda de zero, o canto superior direito de zero também e, em seguida, tanto o canto inferior direito e também os valores inferiores esquerdo de 3rem. Estes já entraram em vigor na parte inferior da nossa secção. Só para ver isto mais claramente, podemos remover temporariamente a nossa imagem. Vamos comentar isso. É assim que o jogo ficará antes que o usuário clique no botão Reproduzir. Voltando às nossas folhas de estilo e ainda dentro da ImageArea, vamos fazer uso do tipo de exibição flexível, que nos permitirá posicionar todo esse texto no centro. Primeiro de tudo, vamos definir a direção flexível para ser coluna. Todo o nosso conteúdo é empilhado verticalmente, e então podemos usar o conteúdo justify, os espaços no centro. Uma vez que este é o nosso eixo principal de cima para baixo, justificar conteúdo irá enviar para este verticalmente, vemos que temos algum espaço desigual na parte superior e inferior. Isso ocorre por causa de alguns padrões do navegador no cabeçalho de nível 1. Vamos dar uma olhada em consertar isso muito em breve. Apenas para terminar esta área de imagem, vamos adicionar algum preenchimento ao redor com o valor de 3rems. Este espaço desigual na parte superior e inferior é por causa deste cabeçalho apenas aqui dentro da nossa página de índice. Se formos para esta seção aqui, isso está dentro do título de nível 1. Vamos entrar nas ferramentas de desenvolvedor e podemos ver isso com mais detalhes. Clique na seta aqui e, em seguida, se passarmos o mouse sobre o nosso cabeçalho nível um, podemos ver pela seção laranja que temos alguma margem padrão que é aplicada tanto para o topo quanto para a parte inferior do nosso cabeçalho. Agora, a margem na parte inferior deste título é boa porque isso fornece algum espaçamento para nossas texturas abaixo. No entanto, para manter as coisas mais centrais em nosso contêiner, vamos remover a margem padrão do topo. Vamos passar para nossas folhas de estilo e agora podemos remover os padrões do navegador. Primeiro de tudo, nosso título de nível 1. Podemos fazer isso redefinindo a margem no topo 0, e também vamos dar a isso um novo tamanho de fonte de 2.4rems. Ainda podemos ver que há mais espaçamento no topo do que no fundo. Bem, se voltarmos à nossa página de índice, isto é porque ainda dentro desta área de imagem, temos um cabeçalho de nível 3 com o ID da mensagem. Isso será usado mais tarde para aplicar uma mensagem ao usuário quando o jogo for concluído. Mas, por enquanto, isso ainda está ocupando algum espaço dentro da cúpula. Podemos fazer exatamente o mesmo. Podemos remover a margem padrão do navegador no topo, redefinir isso, e apenas para mais tarde, também podemos definir o tamanho da fonte para ser um valor de 2rems. Isso agora deixa nosso espaço mais consistente. Esta seção está praticamente completa, agora podemos passar para estas seções transversais. Já direcionamos a direção de nível 3. Vamos subir. A pontuação também está dentro do título de nível 3 que você acabou de cuidar. Agora vamos passar para os nossos elementos P com a classe de itens. Isso vai deixar o usuário saber o número para comparar. Tudo o que vamos fazer é fazer isso se destacar um pouco mais, definindo o tamanho da fonte para ser 2rems. A classe de itens e lá vamos nós. Movendo-se para baixo também temos estes dois botões aqui, e também o botão na parte inferior também. Primeiro de tudo, vamos direcionar nosso seletor de botões, e podemos adicionar alguns estilos de base, começando com a largura do botão e um valor de 8rems. Podemos remover quaisquer bordas padrão que tinham sido aplicadas pelo navegador. Mas ainda queremos que isso tenha alguns cantos arredondados. Podemos fazer isso com um raio de fronteira, algum espaçamento para tornar o botão um pouco mais acolchoado por dentro. Então, um valor de preenchimento de 1 rem. Então também precisamos fazer essas cores diferentes e também remover a cor de fundo. Se dermos uma olhada no momento que temos este botão de cor cinza claro um dois fazer esses botões apenas basicamente um contorno como vemos na versão final. Podemos fazer isso removendo o fundo, definindo isso para ser uma cor de transparente. Para esta seção de imagem, isso permitirá que a cor de fundo azul brilhe, e também o mesmo para a seção oval de estatísticas à esquerda. Podemos então aplicar esta cor da borda ou este contorno, a cada um dos nossos botões. Dentro do seletor de botões, podemos remover o fundo definindo isso para ser transparente. Depois, a nossa fronteira. Isto vai ter dois pixels de largura, uma linha sólida, e então a cor que eu vou usar vai ser a1e0e4. Finalmente, podemos mudar o cursor do mouse para ser um ponteiro quando passamos o mouse sobre qualquer um desses botões. Tudo o que precisamos fazer é definir o cursor como um ponteiro, e isso mudará o mouse à medida que você passar o mouse. Apenas para terminar esses botões fora, nós vamos ter certeza de que o botão cruz tem a cor de fundo vermelho. Assim como vemos aqui, temos uma cor diferente para o carrapato e também para a cruz. Uma maneira de fazer isso é mirando o segundo botão. Dentro da nossa página de índice, aqui, temos dois botões que são agrupados lado a lado, e como estes são lado a lado, podemos selecionar o primeiro ou o segundo filho. Mais abaixo, nós também temos o nosso botão que está na seção de imagem apenas aqui. Como isso está em uma seção diferente em vez de lado a lado, o enésimo filho não afetará isso. Veremos isso mais claro se formos para nossas folhas de estilo, podemos apontar nosso botão e, em seguida, dois pontos. Podemos, então, atingir o enésimo filho. Vamos adicionar um valor de dois, já que estamos direcionando o segundo botão. Vamos mudar a fronteira. Nós ainda queremos que isso seja dois pixels e uma linha sólida. Mas desta vez, queremos usar uma cor diferente, e eu vou procurar um valor RGB. Primeiro de tudo, vermelho, um valor de 241, 152 para o verde e 152 para o azul. Uma vez que esses botões estão agora lado a lado no DOM, isso vai direcionar o segundo botão. Se mudarmos isto para um, este terá como alvo o primeiro, número 3, e isto não afecta o nosso terceiro botão já que este botão é completamente independente e não está lado a lado com estes dois aqui. Vamos restabelecer isto, queremos que este seja o segundo botão. Agora, vamos passar para nossas estatísticas que foi o invólucro para esta seção superior. Esta é a área aqui. Vamos definir a cor de fundo e também aplicar uma borda em torno dos cantos superior esquerdo e superior direito e, em seguida, também centralizar todo esse conteúdo no meio desta seção. Pouco antes de adicionarmos algum estilo CSS a esta seção, queremos cortar todo o conteúdo dentro das estatísticas, e adicionar uma segunda div aninhada dentro. Esta div vai ter um ID do conteúdo de estatísticas. Em seguida, podemos colar em todo o conteúdo apenas dentro. Agora, há algumas razões pelas quais fizemos isso. Primeiro de tudo, o que vamos fazer é definir esta seção stat para ser um contêiner flexível. Ou seja, podemos empurrar todo esse conteúdo de estatísticas para o centro. Em segundo lugar, usando JavaScript mais tarde, também vamos ocultar esses conteúdos quando o jogo não estiver em execução. Voltar às nossas folhas de estilo, podemos segmentar a seção de estatísticas e, em seguida , centralizar todo o conteúdo abaixo do botão. Primeiro de tudo, uma cor de fundo, e vamos para um valor de fumaça branca. A borda, isso vai ser dois pixels, uma cor sólida, e um valor de 859ede. Esta borda também deve ser arredondada no canto superior esquerdo e no canto superior direito. Podemos fazer isso com o raio da fronteira. Primeiro de tudo, o valor superior esquerdo de três rems, o canto superior direito de três rems também. Então queremos zero no fundo. Em seguida, podemos definir o tipo de exibição de flex. Isso agora vai nos permitir centralizar nossa nova div no meio desta seção. Ao usar a flexbox, a direção flex padrão vai ser linha que está em toda a página, e podemos centralizar através deste eixo usando justify conteúdo e definindo o valor para ser centro. Ao lado de cuidar do alinhamento no eixo transversal ou na seção vertical, podemos fazer isso definindo itens de alinhamento. Em seguida, o estofamento. Três rems na parte superior e inferior, e zero na esquerda e na direita. Em seguida, podemos definir a linha de texto para estar no centro de nossa seção. Estamos quase acabando para este celular para styling. A próxima coisa que vou fazer é voltar para a nossa página de índice. Se você se lembrar, quando definimos todo esse conteúdo, também adicionamos uma classe de espaço-y. Adicionamos isso a cada uma de nossas linhas de texto dentro da tela de estatísticas. Fizemos isso para que possamos adicionar algum espaço neste eixo y. Podemos fazer isso definindo alguma margem na parte superior e inferior. Espaço-y, a margem irá adicionar dois valores. O primeiro é três rems na parte superior e inferior, e zero na esquerda e na direita. Bom. Isto agora está olhando como queremos. Agora, se voltarmos à nossa página de índice, podemos começar a trabalhar com esta seção de imagem. Para fazer isso, precisamos descomentar nossa imagem de mais cedo, e também podemos comentar nossa tela de estatísticas. Isto irá simular a aparência do nosso jogo uma vez que o jogo tenha começado. Vamos direcionar o elemento de imagem, então IMG. Em primeiro lugar, a largura de 100 por cento, e também, vamos arredondar os cantos com o raio da borda. Nosso jogo agora parece como queremos na visualização móvel, mas agora, quando esticamos o navegador para uma tela mais ampla, queremos alternar nossas duas seções exatamente como vemos aqui na versão final. Para fazer isso, vamos adicionar uma consulta de mídia dentro de nossa folha de estilos. Na mídia, todas as telas, e também a largura mínima de 600 pixels. Todos esses estilos de cima serão padrões e aplicados desde o início, e então todas essas regras de estilo dentro desta consulta de mídia só serão aplicadas quando a tela atingir 600 pixels e acima. A maneira que vamos fazer isso é usando este flexbox e alterando a direção flexível dessas duas seções para ser linha. Podemos fazer isso dentro dos elementos pai que é a área de jogo. Primeiro de tudo, precisamos definir o tipo de exibição para ser flexível, ea direção flex padrão é linha, então não precisamos adicionar isso em. Em seguida, a área da imagem, e também as estatísticas. Para essas duas áreas logo acima, definimos a altura mínima para 30 por cento da altura da viewport. Já que temos mais espaço disponível na tela, vou mudar isso para 50%. Dentro desta área de imagem que está à direita, queremos que isto sobreponha a seção stat que está à esquerda. Assim como a versão final aqui, vemos que a seção correta está se sobrepondo um pouco. Agora, a maneira que podemos fazer isso é usando uma transformação CSS chamada translate. Traduzir vai mover nossa seção através do eixo x ou y. Vamos dar uma olhada em como isso funciona em nosso CSS, primeiro direcionando a área da imagem. Primeiro de tudo, o raio de fronteira de três rems. Você pode ver cantos arredondados em todos os quatro lados, e então podemos definir a transformação CSS. Vemos que há muitos tipos diferentes de transformação que podemos usar. Há coisas como escala para aumentar ou reduzir o tamanho de nossos elementos. Nós também podemos girar nossos elementos. Mas o que nos interessa é traduzir. Dentro daqui, podemos definir Alpha, queremos mover nossos elementos no eixo x e y. O primeiro é o eixo x que está na página da esquerda para a direita, então 50 pixels. Em seguida, o eixo y que é de cima para baixo, 500 pixels. Isso agora é empurrado nossos elementos por 50 pixels e também para baixo por 500 pixels. Só estamos interessados em mover nosso elemento para a esquerda, então só estamos interessados no eixo x. Vamos apenas usar um desses valores, e em vez disso, podemos usar um valor negativo. Isso seria três rems. Isso agora puxa nossa seção de imagem para a esquerda por três rems para que ela se sobreponha ligeiramente à seção stat. Agora, vamos apontar para a seção de estatísticas. Primeiro de tudo, fazemos algum espaçamento, podemos usar a propriedade flex e um valor de um. Se, em seguida, definir o valor dentro da área da imagem para ser dois, nossa área de imagem tentará assumir o dobro do espaço disponível como nossa seção stat. Para esta área, também precisamos ajustar o raio da borda, então temos isso no canto superior esquerdo e no canto inferior esquerdo também. O raio da borda, três rems no canto superior esquerdo, zero, zero, e três rems no canto inferior esquerdo também. A última coisa que vamos fazer dentro desta consulta de mídia é levar em conta esta tradução. Passamos sobre esta seção de imagem para a esquerda por três rems. Ou seja, agora temos algum espaçamento desigual à esquerda e também à direita. Para compensar isso, adicionaremos três rems de margem no lado esquerdo. Isso deve cuidar do nosso espaçamento do lado de fora do jogo, mas também precisamos cuidar do espaçamento dentro da seção stat. Podemos fazer isso adicionando três rems de preenchimento no lado direito. Este é agora para o estilo para este projeto. Em seguida, vamos introduzir alguns JavaScript gerando algumas imagens aleatórias. 5. Gerando imagens aleatórias: Uma única imagem na nossa tela, tal como vemos aqui, não será boa para o nosso projeto. Então o que vamos fazer em vez disso é selecionar uma imagem aleatória de uma matriz, e a maneira como vamos fazer isso é com JavaScript, possamos ir para a nossa pasta do projeto, criar um novo arquivo, e este será o script.js, que, em seguida, precisamos vincular em nosso índice. Logo acima da tag body de fechamento, crie o script com a fonte, e isso é simplesmente script.js. Vamos testar. Isso está ligando dentro do script com um alerta simples, e vamos apenas dizer, qualquer mensagem dentro daqui tão alto. Se recarregarmos o navegador, devemos ver a mensagem, se isso for vinculado com sucesso. Agora vamos mover isto. Agora a próxima coisa que precisamos fazer é criar uma matriz que vai incluir o nome da imagem e também o número de itens. Isso também precisa corresponder a todas as imagens dentro desta pasta. Para economizar um pouco de tempo, se passarmos para o GitHub e usarmos o mesmo link que usamos anteriormente. Dentro do jogo de correspondência numérica, dê uma olhada no arquivo chamado array.js. Então dentro daqui precisamos copiar o conteúdo desta matriz. Vou pegar todos esses itens, certificando-se de pegar os colchetes na parte superior e inferior, colar isso em nossos scripts, e todos esses nomes correspondem às mesmas imagens que estão dentro da pasta. Portanto, esteja ciente se você usou suas próprias imagens, você precisará alterar o nome da imagem para corresponder a cada uma delas. Você também precisará alterar o número de itens também. Por exemplo, usamos bananas.jpg como seis bananas, e isso é definido nas linhas abaixo. Uma vez que este é um array, podemos selecionar cada um desses objetos dentro aqui pelo número do índice. O número do índice é a posição dentro da matriz, modo que o primeiro item é a posição 0. Esta é a posição 1, posição 2, e é assim que vamos selecionar uma imagem para exibir em nosso projeto. Então, na parte inferior e logo após a nossa matriz, podemos selecionar cada uma dessas imagens aleatoriamente. Precisamos gerar um número aleatório. Vamos começar isso dentro de uma constante chamá-lo número aleatório, e podemos usar uma função matemática JavaScript, chamá-lo aleatório. Então matemática. Aleatória. Isto irá gerar um número aleatório entre 0 e um. Zero está incluído, mas o número 1 não está. Isso passará para 0,999, por exemplo. Podemos registrar isso dentro do console para verificar nossa saída. Logout nossa constante em nosso projeto, e podemos recarregar, clicar com o botão direito e inspecionar. Cada vez que recarregamos, obtemos um número aleatório diferente. Dentro desta matriz temos 20 imagens separadas. A maneira como podemos verificar quantos itens está dentro de uma matriz é selecionando o nome da matriz, que é imagens e, em seguida, você diz propriedade que é comprimento. Se recarregarmos isso, vemos agora que temos os 20 itens dentro de nossa matriz, então podemos agora usar isso para multiplicar nosso número aleatório. Vamos tentar isso dentro do console e atualizar. Isso agora nos dará 20 opções diferentes. Então o nosso número vai começar com um 0 direito para 19. Também podemos executar isso se cortarmos esta seção, podemos usar uma função JavaScript diferente chamada math.floor, e isso vai arredondar para baixo para o número inteiro mais próximo. Vamos tentar isto na consola. Agora ficamos com um número aleatório entre 0 e 19, o que nos dá 20 opções diferentes. A maneira que agora podemos usar esse número aleatório, se removermos o log do console é selecionando nossa matriz de imagens, e podemos selecionar qualquer uma dessas imagens pelo número de índice. Número 2 como mencionamos antes, deve ser 0,1, e 2. Isso selecionaria os blocos. Mas em vez de codificar esse valor, podemos digitar o número aleatório. Depois disso, podemos usar a notação de pontos para selecionar o nome da imagem ou o número de itens. Queremos o nome da imagem e também podemos armazenar isso dentro de uma constante chamada nome de imagem aleatória. Vamos tentar registrar isso no console. Pegue isso e cole isso, selecionando aleatoriamente um de nossos nomes de imagem. Então agora sabemos que isso está funcionando, agora podemos usar isso para definir nossa fonte de imagem. Primeiro de tudo, vamos criar um elemento de imagem, armazenar isso dentro da constante de imagem, e podemos criar um elemento com document.createElements. O tipo de elemento que queremos criar é uma imagem que é IMG. Em seguida, podemos pegar nossa variável de imagem e definir os atributos de origem, e esta fonte de imagem precisa apontar para a nossa pasta de imagens. Então, podemos definir isso como uma string de modelo com os ticks traseiros. Isso nos permitirá inserir nosso nome de imagem aleatória como uma variável. Nossa pasta de imagens, barra. Assim como anteriormente usamos o símbolo $ e as chaves para inserir nossa variável. Isso agora nos deixa com um elemento de imagem criado, e a próxima coisa que precisamos fazer, se formos para a página de índice é adicionar isso dentro do nosso contêiner de imagem. Então, logo acima vamos criar uma constante chamada recipiente de imagem, e vamos selecionar isso com document.getElementById, o Id do recipiente de imagem. Agora temos esta referência podemos selecionar o nosso recipiente de imagem e, em seguida, AppendChild. Os elementos filho que queremos acrescentar é esta imagem logo acima. Devemos agora ser capazes de salvar isso e ver isso em nosso projeto. Então, cada vez que agora carregar vemos uma imagem que está sendo exibida dentro do navegador, e isso está sendo selecionado aleatoriamente de nossa matriz. Ainda vemos essa imagem logo acima porque isso é para substituir em nosso index.html. Agora podemos remover este elemento e agora, se atualizarmos o navegador, vemos apenas uma única imagem aleatória. Este é um passo importante, mas não queremos atualizar o navegador para obter uma nova imagem a cada vez. Então, no próximo vídeo, vamos dar uma olhada em como podemos fazer isso com um temporizador. 6. Trabalhando com temporizadores: Nosso projeto está agora em uma fase onde ele irá gerar uma imagem aleatória diferente cada vez que recarregar o navegador. Claro, essa não é a maneira que queremos que nosso aplicativo funcione. Queremos chamar uma imagem aleatória após um certo atraso de tempo. A maneira como vamos fazer isso é pegando nosso código que gera a imagem aleatória. Vamos colocar isso dentro de uma função, e então chamar essa função após um certo atraso de tempo. Vamos criar uma nova função logo acima disso. Vou criar esta função usando uma sintaxe ligeiramente diferente do projeto anterior. Vamos criar o que é chamado de função de seta ES6. Uma função de seta é basicamente uma sintaxe diferente das funções regulares que usamos anteriormente. Há também algumas diferenças técnicas também entre as duas sintaxes de função. Embora não vamos estar cobrindo estes dentro deste curso, esta função vai conter toda a sintaxe apenas aqui. A maneira como escrevemos uma função de seta ES6, vamos armazenar um nome de função chamado gerar dentro de uma constante, e então vamos definir isso igual à nossa função. Definimos a função de seta assim como esta e, em seguida, as chaves. Dentro desses colchetes aqui, assim como quando olhamos para as funções irregulares nos projetos anteriores, também podemos passar argumentos aqui dentro. Por exemplo, se tivéssemos um valor, poderíamos passá-lo assim e, em seguida, acessar nosso valor dentro da função. Mas tudo o que queremos fazer é pegar essas linhas de código, e depois colá-las. Agora temos essa função que podemos chamar agora, e queremos chamar essa função após um certo atraso de tempo. Vamos fazer isso logo abaixo, podemos criar uma segunda função que eu vou chamar um temporizador. A maneira como podemos executar algum código dentro de um JavaScript é aproveitando setInterval. SetInterval é uma função que leva em dois argumentos. O primeiro é o código que você deseja executar. Já temos o código disponível dentro desta função de geração. Podemos passar em gerar como o primeiro argumento. Então o segundo é um atraso de tempo. Este atraso de tempo é em milissegundos, um segundo será igual a 1.000, dois segundos serão 2.000, e assim por diante. A maneira como podemos chamar essa função é usando o botão Play. Se voltarmos para a nossa página de índice, temos o botão Reproduzir dentro desta seção comentada. Vamos restabelecer isso. Então podemos chamar isso do nosso botão Play. Vamos fazer isso com um clique, então vamos definir o clique on igual ao nosso temporizador. Para o navegador, vamos recarregar isso e clicar no botão “Play”. Após nosso atraso de dois segundos, vemos que uma nova imagem foi gerada aleatoriamente e colocada no final de nossa div. Só para recapitular, quando clicamos em “Play”, chamamos nossa função de temporizador. Esta função temporizador será executado a cada dois segundos, e, em seguida, chamar a nossa função de gerar que gera uma nova imagem aleatória. Como acabamos de ver, isso não é ideal porque queremos substituir a imagem existente em vez de adicionar isso ao final do nosso contêiner de imagem. Uma das maneiras que podemos corrigir isso é adicionar uma instrução if e verificar se uma imagem já existe antes de irmos em frente e adicionar uma nova. Pouco antes de adicionar esta imagem, podemos criar uma declaração if, isso vai verificar se o nosso recipiente de imagem. Lembre-se, este contêiner de imagem era o wrapper apenas aqui que vai conter todas as nossas imagens dentro. Se o nosso recipiente de imagem e, em seguida, podemos dizery.haschildNodes. Este é um método que vai verificar se o nosso recipiente de imagem contém quaisquer elementos filho. Atualmente, não é porque está vazio, há nada entre a nossa div. Mas se houver uma imagem lá no lugar, vamos executar algum código que irá remover isso. Primeiro de tudo, vamos selecionar o nosso recipiente de imagem e, em seguida, podemos chamar um método chamado removeChild. A maneira como podemos selecionar qual elemento filho queremos remover é usando um método chamado firstElementChild. Chamamos isso em nosso contêiner, então nosso ImageContainer e, em seguida, selecione o FirstElementChild. Vimos aqui que, se o nosso ImageContainer tiver algo aninhado dentro, iremos então remover isso, e o item que queremos remover é o primeiro elemento dentro. O primeiro elemento será sempre a nossa imagem, já que não há mais nada dentro da nossa div. Vamos salvar isso e dar uma chance, clique em “Play”. Agora, só vemos uma imagem de cada vez. A próxima questão que precisamos lidar, se você notar quando clicarmos em “Jogar”, há um atraso de tempo antes que nossa primeira imagem apareça. Este atraso de tempo são os dois segundos que definimos aqui. Isso causará como um pequeno problema porque queremos iniciar o jogo assim que o usuário clicou em “Jogar”. A maneira como podemos corrigir isso é chamando nossa função de geração assim que o jogo começa, e então, assim que isso estiver em execução, podemos confiar em nosso timer para continuar com o resto das imagens. Vamos criar uma nova constante logo abaixo que vai lidar com isso. Esta vai ser uma função chamada “play”. Mais uma vez, vamos configurar a nossa função de seta. Vamos então chamar essa função de jogo assim que o jogo começar. Em vez de nosso temporizador, vamos mudar isso para jogar. Assim que o jogo começar, vamos chamar a nossa função de geração. Isso será chamado uma vez, então chamaremos nossa função temporizador. Vamos tentar isto. Assim que clicarmos em “Play” dentro do navegador, devemos ver nossa primeira imagem que fazemos. Depois do nosso atraso de tempo, o resto das imagens começa a gerar. A próxima coisa a resolver é acabar com o nosso jogo. Se reduzirmos nosso temporizador para um número muito pequeno, digamos 300 milissegundos, em seguida, clique em “Play”, isso irá percorrer todas as nossas 20 imagens, mas ele vai continuar e não sabe quando parar. Vemos aqui que passamos por 20 imagens, mas o jogo continua a ser executado. Uma das maneiras de corrigir isso é reduzindo o número de imagens ou removendo uma imagem após uma ter sido gerada. Atualmente, geramos um número aleatório. Ou seja, nosso número aleatório pode gerar 20 imagens diferentes uma vez que esta função tenha sido executada. Se, em seguida, removermos uma imagem da nossa matriz, isso nos deixará com 19 opções, e 18, e 17, e assim por diante. A maneira como podemos remover uma imagem é selecionando nossa matriz de imagens. Podemos usar um método de splice JavaScript que vai remover um valor de nossa matriz. Splice vai levar em dois valores separados. O primeiro que você passar será a imagem que queremos remover. Se quisermos remover a primeira imagem, esta seria a posição 0, posição 1, e assim por diante. Já sabemos com qual imagem estamos lidando porque temos isso armazenado dentro do número aleatório. Vamos passar isto. Em seguida, o segundo valor é o número de itens que você deseja remover. Só vamos remover um valor. Vamos deixar isto como um só. Apenas para recapitular, estamos selecionando aleatoriamente qualquer uma de nossas imagens da matriz. Estamos então empurrando isso para o DOM e exibindo isso dentro de nosso projeto, e então, finalmente, vamos remover essa imagem de nosso array para que ela possa ser selecionada mais de uma vez. Isso agora significa que se voltarmos para o navegador e iniciarmos nosso jogo, agora só veremos 20 imagens aparecendo no navegador. Vamos tentar isto. Lá vamos nós. O jogo agora pára porque não temos mais imagens para percorrer. Isso agora significa que nossa matriz de imagens agora é reduzida a zero, e agora temos uma maneira de terminar o jogo. Mas uma coisa que temos de fazer é também parar o nosso tempo às duas. No momento, esse tempo de intervalo definido não tem como saber quando deve parar. Portanto, precisamos dizer um intervalo definido para parar manualmente para que ele não continue a usar os recursos do navegador. Tínhamos um intervalo definido aqui dentro. A maneira de pararmos isso é chamando um intervalo claro. Eu também vou armazenar isso dentro de uma função chamada StopTimer. Tudo que esta função vai fazer é chamar a nossa função de intervalo claro. Em seguida, ele passa em uma referência ao nosso temporizador dentro do intervalo claro. Podemos fazer isso passando o intervalo definido para uma variável. Vamos chamar essa variável TimerRef. Em seguida, podemos definir TimerRef para ser igual ao nosso intervalo definido. Agora, vamos ter esta referência. Agora podemos passar isso para intervalo claro para que ele saiba que tempo onde precisamos limpar. A razão pela qual declaramos esta variável fora de uma função em vez dentro é porque podemos então acessar isso em qualquer uma das funções. Se declararmos nossa variável dentro desta função, só poderíamos acessá-la dentro deste temporizador o que causará um erro quando tentarmos referenciá-lo em nosso intervalo claro. Vamos mover isto para fora. Agora, precisamos chamar nossa função StopTimer no final do nosso jogo. Nosso jogo termina uma vez que não temos mais imagens no array, porque estamos removendo-as em cada geração. Dentro da nossa função de geração, podemos verificar se o comprimento do ponto de nossas imagens é igual a zero. Podemos então chamar nossa função StopTimer, e também usar a palavra-chave de retorno, significa que isso irá sair para nossa função e o código abaixo não será mais executado. Vamos salvar isso e testar isso no navegador, podemos clicar em “Play”, e agora deve percorrer 20 de nossas imagens, e então parar o temporizador. Bom. Com isso agora no lugar, passaremos para o próximo vídeo onde cuidaremos de gerar um número para exibir ao usuário. 7. Gerando um número para comparar: Vamos agora criar o nosso número aleatório que vai ser exibido para o jogador, que eles possam comparar o número de itens dentro da imagem. Este número vai ser uma das três coisas. Vai ser se a quantidade correta de itens que é exibido na imagem for um maior ou um menor, que é assim que o jogo é um pouco mais desafiador, e vamos fazer isso em nossa função de geração. No momento, nossa função de geração está começando a ficar bastante lotada. Podemos terceirizar todo o código que é responsável por definir nossa imagem. Isso está pegando nosso contêiner de imagem todo o caminho até AppendChild. Vamos limpar isso, deixando em nossa união. Vou substituir isto por uma função. A função que eu vou dar a isso um nome de SetimaGesrc, e então criar isso logo acima do topo. Aqui dentro podemos colar o conteúdo de uma citação da nossa função de gerar, mas para que esta função funcione também precisamos receber o nome da imagem aleatória. De volta à nossa função de geração, temos o nosso nome de imagem aleatória aqui. Podemos copiar isso como este para a nossa função e, em seguida, se recebermos isso como um argumento, isso agora está disponível dentro desta função para usar. Antes de irmos mais longe, vamos salvar nosso código e tentar isso no navegador, e tudo ainda funciona como esperado. Agora podemos passar a gerar esse número aleatório. Vamos descer para a nossa função de geração. Logo abaixo onde definimos a fonte da imagem, também podemos criar uma nova função que será responsável por criar esse número. Vamos chamar isso de gerar mais ou menos. Tudo que esta função vai fazer é retornar um valor de positivo ou negativo. Podemos então usar este número para adicioná-lo a um número real para torná-lo mais desafiador. Vamos criar isso logo acima dentro de uma função, então gere mais ou menos. Isto só precisa de um igual logo depois aqui. Para que esta função retorne um valor positivo ou um negativo, precisamos gerar duas opções aleatórias. A maneira como podemos fazer isso exatamente como nós olhamos anteriormente é usar math.random. Para nos dar duas opções separadas ou dois valores, podemos multiplicar isso por dois e, em seguida, embrulhar isso dentro de math.floor. Lembrem-se de Math.floor irá analisar o nosso número aleatório. Isso retornará um valor de zero ou um. Vimos isso dentro de uma constante que vou chamar de número zero para um. Agora queremos retornar um valor desta função. Como acabamos de mencionar o número zero para um será um zero ou um um. A maneira como podemos converter isso para um positivo ou negativo é fazer uso do operador ternário JavaScript. Podemos selecionar nossa constante de números zero para um, e podemos dizer se isso é igual a zero, agora queremos fornecer uma opção. O operador ternário JavaScript nos permitirá fornecer duas opções se o valor é verdadeiro ou falso. Funciona como uma declaração if else. Se essa expressão aqui for verdadeira, então se isso for igual a zero após o ponto de interrogação, vamos retornar um valor de negativo. Em seguida, adicionar dois pontos e fornecer opção se isso vai ser falso. Se isso for falso, vamos adicionar mais um, e retornar isso de volta da nossa função. Como isso é gerado aleatoriamente, teremos uma chance de 50/50, mas essa função retornará negativa ou positiva. Agora podemos rolar para baixo e armazenar esse valor de retorno dentro de uma constante. Digamos mais ou menos e defina isso para o valor de retorno. Agora temos esse número positivo ou negativo. Agora também precisamos pegar o valor real dos itens que cada imagem contém. A maneira que podemos fazer isso se rolar para cima, é selecionar a propriedade chamada número de itens. Estamos fazendo algo muito semelhante nesta função onde pegamos o nome da imagem aleatória. Vamos dar uma olhada nisso. Aqui estamos pegando nosso nome de imagem de uma imagem aleatória. Vamos copiar esta linha aqui, colá-la e ao invés de pegar nosso nome de imagem aleatória, agora podemos pegar o número de itens, e também alterar esse nome constante para refletir isso, então número de itens. Isso agora nos deixa com todas as informações que precisamos para gerar nosso número de exibição exatamente como vemos aqui. Temos um valor negativo ou positivo, e também temos o número dois correto. Agora vamos usar esses dois valores para passar para a nossa função, que vai gerar este número de exibição, exibir nossa função, onde vamos passar em nossas duas constantes ou nossos dois valores de cima que é mais ou menos e número de itens. Role para cima e crie nossa função chamada gerar número de exibição. Desta vez, recebemos em dois valores e o primeiro é o número de itens e o segundo é mais ou menos. Dentro de nossa função queremos fazer uma de duas coisas. Queremos ou exibir o número real, ou alternativamente queremos exibir um número que é um maior ou um menor. Para escolher qual dessas opções esta função vai tomar, precisamos gerar um número aleatório. Assim como abaixo aqui vamos gerar dois números aleatórios, então entre zero ou um. Dentro de uma constante, vou chamar isso de divisão. Este número aleatório agora nos permitirá criar uma instrução if para verificar se este é zero ou um. Diremos que se a divisão for igual a zero, isso exibirá nosso número real. A maneira como podemos fazer isso dentro de nossa página de índice é encontrar nossos elementos qualquer que seja o valor armazenado dentro. Vemos esse valor apenas aqui para que possamos remover isso, e então podemos direcionar nosso elemento com o id do número. Fazemos isso com document.getelementbyid. Vou selecionar havia número e, em seguida, definir o innerHTML e definir isso para o nosso número de itens que é passado para a nossa função logo acima. Este é o nosso número correto, então agora podemos criar um número falso. Podemos dizer outra coisa. Isso será se a divisão for igual a um. Assim como acima, também vamos definir o document.getelementbyid, selecionar o nosso número e isso é igual ao nosso número real que é o número de itens. Em seguida, queremos adicionar um positivo ou um negativo a este, que é armazenado em um valor chamado mais ou menos. Vamos tentar isso no navegador. Se eu tiver que ser mais claro, se nós apenas desacelerar o jogo, então três segundos e recarregar, nós vemos o valor de um. Parece que temos um problema em algum lugar, então vamos voltar à nossa função. Temos um número aleatório entre zero e um. Se for zero, definiremos o valor numérico como nosso número de itens. Se não, vamos definir este para ser o nosso número de itens, seja positivo ou negativo. Isso parece estar bem, então vamos descer para gerar, exibir o número. Acho que só precisamos passar isso em uma ordem correta. Vamos tentar isso agora. Clique no jogo. Há seis pessoas dentro daqui e temos o valor de sete, é um maior. Este é o número correto de oito. Este é um mais alto. Só precisamos esperar por um mais baixo, sete, que é este aqui. Agora vemos o número correto de itens. Vemos um valor maior e também um valor menor também. Isso agora está funcionando, vamos agora passar para o próximo vídeo e vamos substituir o nome da imagem. 8. Definindo o nome da imagem: Quando o usuário está jogando no jogo, temos agora manipulado um caminho desta seção de exibição. Agora vinculamos a imagem ao número de itens. A próxima coisa que eu quero fazer é também exibir o nome da imagem, então, por exemplo, oito ovos, e o que muda para cada imagem. Se voltarmos para o nosso código no script.js, dentro da nossa função de geração, já temos acesso ao nosso nome de imagem aleatória, e armazenamos neste dentro desta constante. Aqui diz, corte em nossa matriz de imagens, como em nosso número aleatório, e, em seguida, selecione a nova propriedade nome da imagem como podemos ver apenas aqui. O que eu vou fazer agora, nós poderíamos, se ele usa nome de imagem aleatória para adicionar a funcionalidade para esta função de geração, mas em vez de manter as coisas mais separadas eu vou criar uma nova função. Vamos adicionar isso em nossa função de geração e vamos chamar este nome de imagem de um conjunto. Esta função vai levar em nosso nome de imagem aleatória, então vamos pegar isso e colar isso e podemos usar isso fora de nossa função de geração. Digamos colunas. O nome da função dos conjuntos, nome da imagem e isso está tomando em nossa variável de nome de imagem aleatória. Esta é uma função de seta. Antes de escrever nosso código nesta função, vamos fazer um log do console e verificar se estamos recebendo o nome da imagem aleatória. Abra o console, e nós “Clique no jogo” para ver os ovos dot jpg, porque dot jpg. O que queremos agora é pegar esse nome e exibir isso dentro de nossa interface de usuário. Antes de fazer isso, porém, precisamos cortar a extensão dot jpg do final desta imagem. A maneira que podemos fazer isso é usando um método JavaScript que é chamado Slice. Slice vai tomar uma string de texto e já temos um nome de imagem aleatória para a nossa string, e então vamos chamar este método fatia, e isso irá retornar uma nova string com uma determinada parte removida. Então, vamos remover nosso registro do console. Podemos acessar nosso nome de imagem aleatória chamado o método Slice. Slice vai levar em dois valores, que vai ser o início na imposição dos caracteres que você deseja remover. Se tivéssemos ovos dot jpg, queremos remover a palavra que é ovos, então vamos começar no primeiro caractere, que é a posição de zero, e então o segundo valor, que é opcional. Se deixássemos isso de fora, isso iria direto até o fim da nossa corda, mas em vez disso queremos voltar quatro lugares. A maneira como podemos fazer isso é obtendo todo o comprimento de nossa corda e depois voltar quatro lugares. Primeiro de tudo, podemos obter o comprimento total da string usando o nome da imagem aleatória, comprimento do ponto. Atualmente isso vai desde o início da letra E até o final da nossa string, que é a letra G. Queremos voltar quatro lugares, então vamos usar quatro negativos. Podemos verificar se isso é trabalho em uma lista de espectadores dentro de uma constante. Vamos chamar isso o nome da imagem, então este igual ao novo valor que é retornado do nosso método de emenda, e então podemos fazer um log de console com nosso novo nome de imagem. Volte para o console e inspecione. Clique no jogo. Agora vemos dot jpg foi removido de cada um de nossos nomes. Isso é bom e isso é tudo agora está funcionando. A próxima coisa que precisamos fazer é obter a interface do usuário dentro do nosso índice. Vamos ao nosso espaço reservado e remova isso. Em seguida, podemos direcionar a extensão com o ID do nome do item, então document.getElementById. O ID que era o nome do item, e então podemos dizer para o HTML interno, que é igual à nossa variável de nome da imagem. Logo depois disso eu também vou adicionar no final de uma string, que é um ponto de interrogação. Basta deixar o usuário saber que esta é uma pergunta, então isso vai dizer sete patos e, em seguida, um ponto de interrogação, para que o usuário saiba que esta é a resposta de uma pergunta. Vamos tentar isso dentro do navegador. Clique no jogo, veja dois carros, isso é bom, bananas, patos. Tudo isso agora está funcionando bem. Com isso agora resolvido, agora vamos passar para o próximo vídeo, onde vamos lidar com o palpite do usuário. 9. Verificando uma correspondência: O próximo passo dentro do nosso jogo é lidar com a funcionalidade se o usuário clicar no tick ou na cruz. Nós vamos fornecer duas funções que vai verificar se o palpite do usuário está correto ou incorreto e atualizar a pontuação. Para fazer isso dentro do nosso index.html, precisamos adicionar um manipulador de cliques aos nossos botões. Estes são os nossos dois botões dentro da área de jogo. Para o botão correto, vamos configurar uma função que é acionada com um manipulador de eventos onclick chamado match. Então logo abaixo disso, também faremos o mesmo, mas desta vez a função será chamada NoMatch, e vamos lidar com o que fazer se o usuário achar que sua escolha está incorreta. Vou à nossa transcrição, salvo este ficheiro, e antes de começarmos a trabalhar com a adição destas duas funções, vou criar algumas variáveis no topo. Precisamos armazenar o número correto de itens na imagem e também o número que é exibido. Isso é assim que vamos comparar ambos os valores para ver se a escolha do usuário estava correta. A primeira variável vai ser chamada currentiMageValue. Podemos definir isso para ser igual a um valor inicial de zero e, em seguida, atualizá-los uma vez que uma nova imagem foi gerada. Separado por vírgula, podemos criar uma segunda variável chamada DisplayNumber, e novamente, inicializar isso como um valor de zero. Assim como uma nota lateral rápida aqui, nós não estamos usando a palavra-chave let em ambas as ocorrências aqui porque nós separamos estes por uma vírgula, então isso é bom para fazer desta maneira. Adicione uma nova vírgula logo após o nosso número de exibição, e definimos uma variável para definir a pontuação atual que será inicializada como zero. Agora temos esses valores que realmente precisamos atualizar estes com os números corretos. Vamos começar com o nosso valor de imagem atual. A maneira que podemos pegar isso se descermos para a nossa função, que é gerar número de exibição, dentro daqui temos a variável chamada NumberOfItems. Portanto, podemos pegar esse número e definir nosso valor de imagem atual. Vamos fazer isso na parte inferior da nossa função. Podemos definir o nosso valor de imagem atual para ser igual ao nosso número de itens. Agora temos o nosso valor de imagem atual definido, que é o número correto de itens na imagem, mas agora precisamos também atualizar nosso número de exibição, que é o mesmo número que o usuário vê no jogo. Lembre-se, este é o número correto, que definimos dentro da seção if, ou um valor falso que é um maior ou menor, e vamos definir isso na seção else. Primeiro de tudo, dentro da seção se que era o número correto. Com isso, o nosso número de exibição para ser igual ao número de itens. Assim como acima, onde nós definimos isso para a interface do usuário. Logo abaixo desta seção dentro da seção else, estamos exibindo o número de itens, que é um maior ou um menor. Dentro desta seção também podemos definir nosso número de exibição para ser exatamente o mesmo que é o número de itens, e, em seguida, um maior ou um menor. Pouco antes de criarmos nossas funções que estão vinculadas aos nossos botões, vamos verificar nossas variáveis estão funcionando atualmente. Dentro da função de gerar, podemos fazer dois logs de console. O primeiro é o valor da imagem atual, que é o número correto de itens, então o segundo é o número de exibição, que é o número com o qual o usuário comparará. Dentro do console, clique com o botão direito do mouse em “Inspecionar” e, em seguida, clique em “Jogar”. Para começar, vemos o valor de zero, zero uma vez que ainda não geramos uma imagem, portanto temos uma correspondência correta, uma correspondência correta, nove e 10 estão incorretos, incorretos, incorretos e assim por diante. Agora temos esses dois valores para comparar. Vamos criar nossas duas funções para verificar se o usuário está correto ou incorreto. Vamos remover isso, e podemos criar nossas duas funções. O primeiro botão acionar uma função chamada match. A função match será responsável por verificar se o valor da imagem atual é igual ao nosso número de exibição. Se estiver, o usuário está correto e atualizaremos nossa pontuação. Podemos atualizar a pontuação usando um operador ternário JavaScript para que possamos verificar se o valor da imagem atual é igual ao número de exibição. Após o ponto de interrogação, isso significa que a seção é verdadeira. Queremos atualizar a pontuação com pontuação mais. Caso contrário, adicionamos dois pontos e a segunda condição. Queremos deduzir a pontuação pelo valor de um. Se o usuário tiver isso correto, a pontuação aumentará. Caso contrário, a pontuação diminuirá em um, dois. Em seguida, também podemos atualizar o DOM com document.getElementByID, e esta é a seção apenas aqui que queremos atualizar. Ao longo do nosso index.html, podemos atualizar esse período com o ID da pontuação atual, então vamos pegar isso. Também podemos remover o valor padrão neste final, e então podemos definir o innerHTML para ser igual à nossa variável de pontuação. Em seguida, temos o segundo botão que tem o nome da função chamado NoMatch. Isso vai ser bem parecido, então vamos copiar isso, colar isso logo abaixo. Isto vai ser chamado de NoMatch, e nós queremos praticamente fazer o inverso do que fizemos aqui. Queremos verificar se o usuário acredita que o valor da imagem atual não é igual ao número que está sendo exibido. Podemos fazer isso ao invés do triplo igual. Vamos usar o ponto de exclamação, e isso verificará se o valor atual da imagem não é igual ao nosso número de exibição. Se isso estiver correto, isso significa que o usuário tem esses direitos e atualizará a pontuação. Se eles estão errados, ele irá deduzir um ponto e, em seguida, atualizar o DOM. Vamos dar uma chance a isso. Podemos clicar em “Play”. Na verdade, vamos atualizar o temporizador para nos dar mais tempo, que possam jogar cinco segundos. Há seis documentos, então vamos clicar no carrapato. Isso está correto, e nós conseguimos uma pontuação. Doze lápis, esse é bom. Há sete bolos, mas se você clicar no x, veremos que uma pontuação foi deduzida. Bom. Agora este é o nosso trabalho e podemos atualizar a pontuação. No próximo vídeo, vamos voltar ao placar e exibi-lo para o usuário no final do jogo. 10. Cuidando do final do jogo: Ei, bem-vindo de volta. Agora vamos lidar com exatamente o que o usuário vê quando o jogo terminar. Atualmente, quando percorremos todas as nossas imagens e chegamos à última, estamos parando nosso temporizador e também, não estamos gerando mais imagens. Durante o jogo iniciado e jogo terminou condição, também precisamos mostrar e esconder vários elementos na tela, e também no final, precisamos exibir uma mensagem para o usuário com sua pontuação total. Primeiro de tudo, vamos começar a trabalhar dentro desta função de jogo e vamos começar escondendo alguns elementos que não queremos ver quando o jogo está em execução. Por exemplo, se clicarmos em “Jogar”, não queremos ver toda essa seção de Boas-vindas. Não precisamos ver o botão Play. Só precisamos ver a área de estatísticas e também a imagem. Isso ocorre porque dentro de nosso index.html, temos essa área de imagem, e uma vez que o jogo está em jogo, queremos apenas exibir este contêiner de imagem. Vamos esconder nossa área de mensagens. Vamos esconder nossa tela inicial. Nós também vamos ocultar o botão Play, já que o jogo já está em jogo. Vamos tirar tudo isso em nossa função de jogo. Esta função é chamada assim que o jogo começa, então este é um bom lugar para esconder todo o nosso conteúdo. Primeiro de tudo, vamos selecionar a área de mensagem com getElementByID. Vou usar JavaScript para definir o estilo e definir a propriedade display para ser igual a nenhum. Isso é exatamente o mesmo que adicionar o tipo de exibição em nossas folhas de estilo, mas isso está sendo adicionado dinamicamente com JavaScript. Também vamos copiar isto e colar isto em mais duas vezes. Podemos usar este segundo dentro da nossa página de índice para pegar nossa seção de tela inicial que contém todo o texto. Número 2 é a tela inicial. Então, finalmente, também precisamos remover o botão Play uma vez que o jogo tenha começado. Este é o botão ID do Reproduzir. Parece que tudo está funcionando. Depois de clicar em “Jogar”, não vemos mais todo o nosso texto na parte superior. Não vemos mais a tela inicial. Não vemos mais o botão Play. Também escondemos a área da mensagem para mais tarde. Isso é lidar com a condição quando o jogo é iniciado, e também precisamos lidar com o que acontece quando é o fim do jogo. Com isso, nós também vamos criar uma função personalizada que vamos chamar logo no final. Tão constante, e esta função vai ser chamada EndofGame, e esta seção também quer mostrar e esconder algumas áreas. Assim que chegarmos ao fim do jogo, queremos ter certeza de que nossa mensagem foi exibida porque vamos adicionar uma mensagem ao usuário com sua pontuação. Vamos copiar isso e colar na seção de mensagens. Para tornar isso visível na tela, vamos mudar o tipo de exibição para ser bloco. O segundo que vamos alterar será o nosso contentor de imagens. Isto porque uma vez terminado o jogo, queremos remover a última imagem da nossa tela e podemos fazer isso mantendo este tipo de exibição igual a nenhum. Uma vez que removemos essa imagem, queremos preencher nossa mensagem com a pontuação dos usuários. Se formos até o topo onde criamos nossas variáveis, temos a pontuação do usuário dentro desta variável. Precisamos também de criar uma segunda variável, que é o total de pontos disponíveis. Isto vai ser igual ao número de imagens dentro da nossa matriz. Podemos criar uma variável logo abaixo, separá-la por uma vírgula. Quero chamar isso de TotalAvailable. Defina isso igual ao comprimento de nossas imagens com images.length. Agora podemos usar essas duas variáveis para exibir uma mensagem para o usuário no final do nosso jogo. De volta à nossa função EndofGame, vamos pegar nossa área de mensagem com document.getElementByID, o ID da mensagem. Em seguida, podemos definir a mensagem com um InnerHTML e vamos definir isso igual a uma string de modelo. Estamos na parte de trás [inaudível] para que possamos incluir nossas duas variáveis. A mensagem que vou mostrar será : “Fim do jogo, sua pontuação foi.” Podemos então usar o símbolo $ e as chaves para produzir nossa variável/, e então fazemos uso de nossa variável total disponível, que acabamos de criar acima. Isso vai exibir nossa mensagem para o usuário. Vamos reduzir nosso temporizador. Vamos por 300 milissegundos e verificar se está tudo funcionando. Clique em “Jogar”. O placar realmente não importa. Chegamos ao fim do jogo e nada acontece. Isso ocorre porque criamos nossa função final do ganho, mas ainda não a chamamos. O lugar que queremos chamar essa função é olhar dentro de nossa função Gerar. Este é o mesmo local dentro da declaração if, onde verificamos se nossas images.length é igual a 0, e então paramos em nosso temporizador. Aqui dentro também é o mesmo lugar que chamamos de nossa função EndofGame. Vamos adicionar isso e, em seguida, percorrer nossas imagens. Nossa função EndofGame agora foi chamada. Removemos o contêiner de imagem e, em seguida, definimos a mensagem para o usuário com a pontuação total. Então isso é bom. Tudo isso está funcionando, mas o que queremos fazer agora? Bem, temos algumas opções. Podemos adicionar o botão Play de volta à tela, o que nos levará de volta ao início do jogo. Ou podemos simplesmente fazer algo como definir esta mensagem para ser três segundos e, em seguida, recarregar o navegador. Leve o usuário de volta para a tela inicial. A maneira como podemos fazer isso é usando um tempo limite. Aqui usamos o setInterval, que vai chamar uma função após um certo atraso de tempo. SetInterval também irá continuar repetindo isso até que lhe digamos o contrário. No entanto, aqui dentro, nós só queremos executar um código impressionante função apenas uma vez. Para fazer isso, podemos usar setTimeout. Aqui dentro, nós também vamos passar em uma função de seta. Aqui dentro, tudo o que queremos fazer é atualizar o navegador e a maneira como podemos fazer isso dentro do nosso código é usando location.reload. Isso é exatamente o mesmo que pressionar o botão Recarregar em nosso navegador, mas em vez disso, estamos fazendo isso após um atraso de tempo, que eu vou definir como três segundos. Vamos tentar isto. Clique em “Jogar”. Aí está a nossa pontuação, e depois de três segundos, devemos ver uma recarga. Enquanto estamos lidando com o fim da condição do jogo, também podemos ocultar esta seção de Estatísticas à esquerda. Vamos esconder isto no final do jogo e depois reintegrar isto assim que o jogo tiver começado. A maneira como podemos fazer isso é exatamente como fizemos acima com getElementByID, e o ID que queremos pegar. Se rolarmos um pouco para nossa seção inicial, lembre-se quando usamos esses CSS no início, cercamos todo esse conteúdo de texto dentro de uma div com o ID do conteúdo de estatísticas. Agora podemos usar isso para mostrar e ocultar essa área no script. Primeiro de tudo, vamos copiar e colar esta linha. Precisamos selecionar nosso StatsContent. Então, no final do jogo, vamos remover isso sem a exibição de nenhum. Podemos pegar isso e então veremos o jogo começar. Queremos restabelecer isso definindo isso para ser um tipo de exibição de bloco. Vamos percorrer nossas imagens e verificar se tudo isso está funcionando no navegador. Quando o jogo é iniciado, vemos que nossa seção está aparecendo. Então isso desaparece no final do jogo. Na verdade, provavelmente nem precisamos reintegrar isso quando o jogo começar, porque lembre-se, estamos atualizando o navegador, o que nos colocará imediatamente de volta no DOM. Vamos passar de bicicleta. Nossas estatísticas estão sendo exibidas. Eles são removidos novamente no final do jogo. Com isso agora resolvido, no próximo vídeo, vamos lidar com esses dois botões aqui, mas certifique-se de que o usuário só pode ter uma seleção cada vez que uma imagem é exibida. 11. Evitando várias seleções e atualizações de UI: Nosso jogo está quase terminado e agora só precisamos fazer alguns retoques finais. Uma das principais coisas que vamos fazer neste vídeo é garantir que o usuário só pode clicar em um desses botões de seleção uma vez por imagem. Atualmente, se iniciarmos um jogo, podemos clicar em qualquer um desses botões quantas vezes quisermos para cada imagem. Nós também queremos ter certeza de que esta seção de pontuação e os botões não estão disponíveis antes mesmo do jogo começar. Primeiro de tudo, vamos começar escondendo esta seção inicial em nosso script.js. Eu quero fazer isso logo abaixo de nossas variáveis, então sob o total disponível. Vamos pegar nossa seção de conteúdo de estatísticas, que é o wrapper apenas aqui que contém todas as nossas pontuações e botões. Document.getElementById, o nome do ID é StatsContent. Podemos então ocultar isso definindo a propriedade style de visibilidade para ser igual a oculto. Uma vez que isto já se foi, queremos restabelecer isto assim que o jogo começar. Vamos copiar isso e se formos para a nossa função de jogo, podemos adicionar isso aqui dentro, mas desta vez queremos que a visibilidade seja igual ao visível. Finalmente, no final do jogo também vamos manipular isso, para que possamos adicionar isso. Mais uma vez, configurando isso para ser escondido quando o jogo terminar. Vamos salvar isso e tentar isso no navegador, você pode jogar e agora nossas estatísticas estão mostrando [inaudível] o fim do jogo. Isso agora está sendo escondido pronto para o início do jogo. Em seguida, também podemos tornar esses dois valores dinâmicos. Atualmente não temos um valor para começar com nossa pontuação, e teremos esse valor codificado de 20 dentro do nosso index.html. Vamos remover isso, e agora podemos atualizá-los com o ID da pontuação atual, e também total disponível. Já temos esses valores. Se rolarmos para cima até nossas variáveis no topo, temos nossa pontuação e também o total disponível, então vamos adicioná-los aqui agora. Pegue os elementos pelo nosso ID, que é a pontuação atual. Em seguida, defina o innerHTML para ser igual à nossa variável de pontuação. Eu vou duplicar isso, e o próximo do total tinha o ID do total disponível. A variável é armazenada logo acima, e isso é apenas um aqui, então vamos puxar isso. Para o navegador, agora podemos testar isso se clicarmos no jogo. Todos os valores agora atualizados e ainda vemos o número dinâmico de imagens de 20. Se você se lembrar desde o início no HTML, também definimos a seção aqui. Vamos dizer quantos segundos o usuário tem que decidir. Isso vai apenas ficar embutido valor de três, que é sobre em nossa página de índice, nós também cercado esse valor dentro de um span com o ID de TimeSetting. Agora vamos remover isso, é um valor codificado, agora podemos definir isso como uma variável. No topo, eu vou criar uma constante, o nome do atraso de tempo que eu vou definir inicialmente para um valor de três segundos. Agora podemos usar esse atraso de tempo em dois lugares. Primeiro de tudo, vamos atualizar nosso DOM apenas aqui, e também podemos usar isso abaixo. Dentro da nossa função de temporizador, para que possamos substituir o nosso valor codificado por nossa variável. Podemos então atualizar o DOM. Então vamos duplicar esta linha e o ID que queremos segmentar é a configuração de tempo. Vamos salvar isso e verificar se isso está funcionando. Está funcionando, mas não parece exatamente como queremos, este é um valor de 3.000. Como isso é em milissegundos, então tudo o que precisamos fazer é dividir isso por 1.000, dando-nos o valor de três segundos. Vamos também verificar se o temporizador está funcionando e ver que temos três segundos entre cada imagem. Isso parece bem. A próxima coisa que precisamos corrigir é o fato de que eles estão usando um clique nesses botões, várias vezes para cada imagem. A maneira como vamos corrigir isso é criando uma variável chamada escolhida, e vamos definir isso para ser verdade quando um usuário clicar no botão. Vamos adicionar uma vírgula logo após isso, e então podemos adicionar uma nova variável chamada escolhida, e vamos definir isso para um valor inicial de false. Agora, se deslocarmos para baixo até as funções que são ativadas uma vez que o usuário clica nos botões, esta é a correspondência e nenhuma correspondência funções. Nós só queremos executar o código dentro daqui, se o valor escolhido for igual a false. Se cortarmos isto, quero escrever uma declaração de “se”. Podemos dizer que se não for escolhido, podemos então adicionar nossas chaves e executar o código dentro. Faria exatamente o mesmo para nossa função NoMatch logo abaixo, então corte isso, crie nossa instrução if e, em seguida, execute esse código dentro. Inicialmente, ambas as funções serão executadas se você clicar em um botão porque definimos nosso valor escolhido para ser falso. Portanto, qualquer uma dessas opções funcionará logo no início. Mas uma vez que o usuário tenha clicado em um desses, queremos reverter isso e definir nosso valor escolhido para ser igual a true. Faremos exatamente o mesmo em nossa função NoMatch. Uma vez que um usuário tenha feito qualquer seleção, escolhido será igual a true. Então queremos fazer isso falso novamente, que o usuário possa fazer uma nova opção, e a maneira que podemos fazer isso é backup em nossa função de geração. Digamos que escolhido seja igual a falso, então o valor de escolhido só será igual a falso quando o jogo começar ou quando gerarmos uma nova imagem. Isso significa que o usuário pode então fazer sua escolha porque isso será falso, e então vamos definir isso como verdadeiro, para que nenhuma outra escolha possa ser feita. Dê isso salvar ainda mais e vamos testar isso no navegador. Agora só podemos clicar em qualquer um desses botões uma vez para essa imagem, uma vez para esta imagem e tudo isso está funcionando bem. Esta é agora toda a funcionalidade agora cuidada para o nosso número muito jogo. Em seguida, vamos terminar este projeto adicionando um efeito de desvanecimento à nossa imagem. 12. Animações fade: Você termina este projeto, nós vamos fazer as transições entre cada uma de nossas imagens um pouco mais suaves. Atualmente, cada uma de nossas imagens é colocada dentro do DOM. Mas vamos tornar isso mais suave adicionando um efeito de desvanecimento. A maneira como podemos fazer isso é adicionando uma classe à nossa imagem. Uma vez que isso tenha sido gerado. Agora podemos passar para o nosso CSS e adicionar isso como uma animação. Se nos dirigirmos para a nossa função SetimaGesource, aqui dentro é onde geramos um novo elemento de imagem para exibir dentro do navegador. Podemos acessar nossa variável de imagem e eu vou fazer isso logo após definir a fonte. Podemos fazer isso selecionando a propriedade ClassList, que tem um método chamado add. Isso nos permitirá adicionar um novo nome de classe para nossos elementos de imagem e vamos para um nome de fade. Agora podemos usar isso em nossas folhas de estilo, então vá para o nosso Styles.css. Podemos adicionar isso em qualquer lugar dentro de nossas folhas de estilo, eu vou para um pouco acima da nossa consulta de mídia. Poderíamos começar a atingir o nosso elemento de desvanecimento. Mas antes de fazer isso, precisamos criar nossa animação e podemos fazer isso com a regra de quadros-chave. Então damos um nome à nossa animação e eu vou para desaparecer. Aqui dissemos, qual propriedade CSS queremos mudar ao longo desta animação. A partir disso, podemos usar de e para onde especificamos quais propriedades CSS queremos começar e, em seguida, quais queremos terminar com. Então, para criar um efeito de fade, vamos definir a propriedade CSS, da opacidade para ser igual a zero. Isso significa que isso é completamente transparente e não veremos nada na tela. No nosso caso, não veremos a imagem dentro do navegador. No final deste fade ou desta animação, queremos que a opacidade seja um valor de um. Isso significa que nossa imagem será completamente visível ou opaca quando nossa animação terminar. A forma como podemos usar isto está dentro da nossa aula de desvanecimento. Lembre-se fade é a classe que adicionamos ao nosso elemento de imagem e podemos adicionar nossos quadros-chave com o nome da animação. O nome da animação é fade. Este é o seu nome aqui e agora temos uma animação que vai da opacidade zero, para ser totalmente opaca ou totalmente visível na tela. Mas, no momento, isso provavelmente não vai criar nenhum efeito. Vamos verificar isto e recarregar. Não vemos nada diferente dentro do navegador. Isso ocorre porque isso está acontecendo praticamente de imediato e não há atraso de tempo entre o início e o fim de nossa animação. Para fazer isso, podemos definir a duração da animação e este é o número de segundos que queremos que isso aconteça. Queremos definir esta animação para acontecer ao longo de um segundo. Agora, se tentarmos no navegador e clicar em Reproduzir, vemos que cada imagem que é carregada tem uma animação, que é mais de um segundo. Isso apenas torna o jogo um pouco mais suave para o usuário final e, claro, você pode brincar com estes e fazer essas animações mais personalizadas e fazer este projeto seu próprio. Este é agora o fim do nosso jogo Number Match, espero que tenham gostado. Obrigado por assistir. 13. Siga-me na Skillshare!: Meus parabéns por ter chegado ao fim desta aula. Espero que tenha gostado e adquirido algum conhecimento com isso. Se você gostou desta aula, certifique-se de verificar o resto das minhas aulas aqui sobre compartilhamento de habilidades, e também me siga para quaisquer atualizações e também para ser informado de quaisquer novas aulas à medida que elas se tornarem disponíveis. Obrigado mais uma vez, boa sorte, e espero vê-lo novamente em uma aula futura.