Diversão com o Javascript! Crie um jogo de memória

1. Boas-vindas ao curso!: Olá, bem-vindo a esta aula. Se você é um iniciante em desenvolvimento web e só queria começar e criar alguns projetos divertidos. Então esta é a aula para você. A ideia por trás desta série é mostrar o que podemos fazer quando combinados em HTML, CSS e JavaScript. Não vou usar nenhum modelo e em bibliotecas, clichês ou frameworks. Em vez disso, vamos construir nossos projetos completamente do zero usando essas três tecnologias. O projeto para esta aula é um jogo de memória. E a ideia é que temos uma grade de quadrados. O link de jogo clica em um par de quadrados para revelar as cores e tenta encontrar uma correspondência. Se eles obtiverem uma correspondência incorreta, os quadrados mais uma vez se esconderão. O jogador deve tentar lembrar o que cada um premia para a próxima tentativa. As cores também são aleatórias, então elas estão em um local diferente para cada jogo. Este jogo será construído completamente do zero. Começaremos construindo a estrutura HTML. Antes eu não tinha estilo e também o layout com CSS, junto com animações mais leves quando há uma correspondência e também quando não há muito. A maior parte do nosso tempo será gasto escrevendo JavaScript, incluindo a geração de quadrados com cores aleatórias, lidando com partidas e sem correspondências, empacotando a pontuação subjacente ao final do jogo. E muito mais. Abordaremos muitos dos fundamentos do JavaScript que você precisa conhecer, como variáveis, funções, trabalhar com o DOM, eventos, condicionais e muito mais. Então, obrigado por conferir esta aula e nos vemos na primeira aula. 2. O que é necessário para este curso: Bem, eu vou para o lixo a qualquer momento ao entrar e construir nosso projeto. Pouco antes de fazermos isso, há algumas coisas que precisamos seguir em frente. Em primeiro lugar, precisamos de um navegador da web e você pode usar qualquer navegador da web de sua preferência, e o que você está usando o Google Chrome, mas você pode usar o Firefox Safari ou qualquer um de nós, bem como isso, você também precisará de um editor de texto. Eu estarei usando o Visual Studio Code, que está disponível no código dot Visual Studio.com. Depois de fazer o download e abri-lo, você verá uma janela de inicialização exatamente como fazemos à esquerda, mas você não pode usar nenhum outro editor, se preferir. Então, vamos agora para a primeira lição. Começaremos criando nosso projeto. 3. Compartilhe seu trabalho em Skillshare!: Ao fazer qualquer curso, é muito importante não adquirir o hábito de 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 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 depois. Isso realmente lhe dará uma boa chance de praticar o que aprendeu fora da aula. Além disso, lembre-se de compartilhar seu projeto também 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. 4. Configuração de projeto e HTML: Esta é a versão final do jogo que agora vamos para o Build. Isso ajudará você a visualizar exatamente o que vamos criar. A ideia desse jogo de memória é bem simples. Temos uma sequência de quadrados sem cor de fundo. Para cada um deles tem uma cor oculta anexada a ele. Então, quando clicarmos em qualquer um deles, ele revelará a cor. E a ideia é criar um par correspondente. Assim que o fizermos, nossa pontuação é aumentada. Pequenos efeitos de animação e essas duas cores permanecerão na tela. Em seguida, continuamos clicando nos quadrados adicionais e tentamos continuar até que todas as partidas estejam sendo criadas. Então, para fazer isso, como sempre, irá pular para a área de trabalho e criar uma nova pasta. Vou chamar isso de jogo da memória. Vamos arrastar isso para o código do Visual Studio. Ok, e a partir daqui, precisamos criar nossos arquivos habituais para começar, começaremos com a página de índice. Então, vamos pular para nossa barra lateral. Clique no ícone do novo arquivo ou use Comando ou Controle N. Para criar nossa página HTML de índice. Usamos o comando de atalho embutido, que é HTML dois pontos cinco, que configurará todo o clichê que precisamos para o nosso índice, esse é o título do jogo da memória? E para isso, o conteúdo HTML é bem simples. Tudo o que vamos adicionar se olharmos para a versão final, é um título no topo, criaremos um elemento que não está visível no momento, que manterá a pontuação, adicionaremos um botão que não podemos atualmente ver. Isso será para jogar novamente. controle com JavaScript está colocando só aparecerá depois que todas as partidas forem criadas, permitindo que o usuário reinicie o jogo. Também teremos nossa área de grade, que será uma lista não ordenada, e cada um de nossos quadrados será um item da lista. Muito simples em termos de HTML. Então, vamos pular para a seção do corpo. Vamos começar com um título de nível um, que será o texto do jogo da memória a p elements. E isso é lembrar para nossa pontuação, e vamos definir isso para um valor inicial de 0, colocando uma identificação única de crânio. E usaremos isso para pegar essa seção do curso dentro do JavaScript. Vamos usá-lo para mostrar e ocultar essa seção quando for necessário. E também para aumentar a pontuação cada vez que o usuário tiver uma correspondência. Conforme mencionado, também precisaremos um botão e isso é para jogar novamente. Também esconderemos isso até que o jogo termine. E então, se eu fosse quadrados, criarei uma lista não ordenada. No próximo vídeo, criaremos essa lista não ordenada para ser como uma grade. Então, por enquanto, ele estará vazio porque criamos cada um de nossos quadrados usando JavaScript e também nos dá um ID exclusivo de quadrados. Salve isso e, em seguida, vamos abrir isso dentro do navegador. Portanto, nossas opções são ir para a pasta do jogo da memória e clicar duas vezes na página de índice para abri-la. Ou usando o Visual Studio, também podemos clicar com o botão direito do mouse na guia, copiar o caminho e colá-lo no navegador. Claro, isso não parece ótimo no momento. Precisamos criar nosso estilo no próximo vídeo. E vamos nos preparar para isso criando nosso novo arquivo para mantê-lo. Então, quando você arquiva, este é o estilo dot css. E, claro, também precisamos um arquivo JavaScript para controlar nosso jogo. Então, crie um novo arquivo também dentro daqui. Este é o script dot js. Voltaremos a isso em uma data posterior, mas, por enquanto, vamos pular para nossa página de índice, descer a barra lateral e criar um link para nossos dois arquivos. Então, primeiro de tudo, na cabeça, criaremos nosso link para nossas folhas de estilo. E como isso está dentro da mesma pasta ao lado do nosso índice, podemos simplesmente referenciar pelo título styles.css. E então, na parte inferior da seção do corpo, logo abaixo da lista não ordenada, crie um link para o nosso script. A fonte é apenas o nome do arquivo script.js. Vamos verificar se isso está funcionando com um alerta. Em qualquer texto dentro daqui. Salve nosso arquivo e atualize o navegador. E nosso arquivo JavaScript está vinculado corretamente. Podemos remover isso. Salve todos os nossos arquivos e agora passaremos para a próxima seção, onde criaremos nossos estilos para deixar nosso jogo muito mais bonito. 5. Estilização com CSS: Agora é sua vez de desligar nossas folhas de estilo, que foram criadas no vídeo anterior. E a ideia é fazer com que isso pareça mais com a versão final. E é claro que você pode adaptá-lo ao seu próprio estilo para o que eu vou enlouquecer demais. Vamos apenas criar alguns estilos e cores básicos para torná-lo um pouco mais atraente. Então, para começar, entraremos em nossa folha de estilo e focaremos na seção do corpo. E começaremos com a família de fontes. Então, novamente, você pode configurar todas as cores e as fontes e tamanhos de sua preferência. Portanto, selecione qualquer uma das famílias de fontes que você gostaria de usar. Para verificar se isso está vinculado corretamente dentro do nosso índice. Salve e atualize o navegador, e você verá uma alteração em nosso texto. Ok, a seguir, vamos definir o corpo para ter o tipo de exibição flexível. E isso nos permitirá definir a direção flexível para ser coluna. Isso fará com que todo o nosso conteúdo seja vertical, empilhados uns sobre os outros layouts. Então teremos o título, teremos a caveira, que atualmente está invisível, o botão que está atualmente invisível, seguido por nossa lista não ordenada. A tela. Use o Flexbox. Por padrão, a direção flexível será em uma linha, então tudo aparecerá da esquerda para a direita na página. E podemos mudar isso definindo a direção de flexão padrão como coluna. Coloque tudo no centro, como o texto e a partitura. Podemos definir os itens de linha no centro. Ao usar a direção flexível da coluna. Isso empurrará tudo para o meio do navegador, o plano de fundo. O plano de fundo. Eu vou escolher, vamos fazer uso de um gradiente linear, que vai levar em três cores diferentes. Com gradiente linear, podemos definir a primeira seção de nossos gradientes para ser o valor de qualquer ângulo que quisermos que apareça. Assim, podemos mudar a cor do canto superior esquerdo para o canto inferior direito, da esquerda para a direita, de cima para baixo ou qualquer outro ângulo que você queira, eu quero ir para 90 graus e depois separados por uma vírgula, colocando três cores diferentes. Então, o primeiro, essa será a cor inicial à esquerda, que é um valor RGB de 2015149. Então, isso vai começar logo no começo. Então, vamos colocar isso em 0 por cento. Vamos criar um pouco mais de espaço para que possamos ver isso na página. Ok? Então, temos nosso primeiro parâmetro, eu vou segundo um, e depois outra vírgula logo após o 0 por cento. O segundo valor RGB. Abra os suportes. Este é 118248 para liberar 0. E depois disso, logo após esse colchete azul, colocando a porcentagem que é 50, começará nessa cor. 50 por cento dos gradientes terão essa cor e, em seguida, separados por vírgula, nosso terceiro e último valor. Novamente, um valor RGB, que será vermelho, valor de 70, verde e azul, 249. Essa é a cor final. Então, isso vai ser na extrema direita. Então, vamos colocar isso em 100%. Atualize a página. Começaremos com 0, que é nossa cor mais escura. Temos nossa cor do meio. Então, em 100%, mudamos para esse terceiro valor, logo após nossa cor de fundo, que será aplicada ao texto. E isso será novamente, um valor RGB, colocará em um valor de 2073, depois 63 para o azul. Além disso, apenas como preferência pessoal, vou definir algum espaço entre cada uma dessas letras com um valor de dois pixels, apenas para deixar o texto um pouco mais espalhado. Ok, então depois disso, vou deixar o rumo do nível um como está. E podemos ir até a seção de pontuação e também o botão da nossa página de índice. Temos nossa pontuação, que tem a ideia de pontuação. Então temos nosso botão logo abaixo. Folhas de estilo. Pegue a pontuação usando o hash, já que este é um id, aumentará o tamanho da fonte para dois rems. O peso da fonte deve ser um pouco mais escuro. Então isso pode ser ousado. Em seguida, alguma margem na parte superior e inferior. Então, um rem na parte superior e inferior. E deixaremos como margem 0 à esquerda e à direita. Em seguida, temos o botão, que nunca parece bom por padrão. Então, vamos segmentar isso com o seletor de botão. E os botões não herdam automaticamente a família de fontes que foi definida a partir do corpo. Assim, podemos copiar essa mesma família de fontes. Lugares em. Isso mudará o texto do botão. Ok, então o que eu quero fazer aqui é remover a borda padrão. Vamos adicionar alguns cantos arredondados. E também definiremos um pouco de preenchimento para torná-lo um pouco maior. E também é bom mudar o cursor dele para ser um ponteiro. Então, vamos começar com os cantos arredondados usando o raio da borda de cinco pixels. Remova essa borda preta padrão. Definindo isso como nenhum. Ok, ele precisa de um pouco mais de espaçamento, o que podemos adicionar preenchimento. Lembre-se de que o preenchimento adiciona o espaço no interior do elemento. Então, se eu adicionar dois valores, o preenchimento, o primeiro valor de 0,5 rems, vamos aplicá-lo na parte superior e inferior. E o segundo valor será aplicado à esquerda e à direita. O tamanho da fonte a ser aplicado ao texto de uma RAM. Algum espaçamento entre letras de um pixel e altere o cursor para um ponteiro. Portanto, essas duas últimas propriedades espaçarão o texto e também nos fornecerão esse ponteiro manual sempre que o usuário passar o mouse sobre esse botão. Então, de volta à nossa página de índice. A próxima coisa que temos, o estilo é nossa lista não ordenada. Como podemos ver, não temos nenhum dos nossos quadrados dentro da lista não ordenada para trabalhar. Então, começaremos adicionando alguns itens de lista vazia apenas para simular como isso ficará quando adicionarmos esses itens com JavaScript. Então, colocando um item da lista e você pode duplicá-lo quantas vezes quiser. Atualmente, sempre vejo se esses pontos irão para nossas folhas de estilo e começaremos a trabalhar com nossa lista não ordenada. Em primeiro lugar, de repente, o tipo de exibição para ser uma grade. A grade nos permitirá definir nossos quadrados exatamente como vemos nesta versão final. Então, vamos definir quantas linhas e quantas colunas queremos, e também o tamanho de cada um desses quadrados. Fazemos isso definindo primeiro as colunas do modelo de grade e podemos definir quantos valores quisermos dentro daqui. Por exemplo, se adicionarmos 100 pixels e 200 pixels, isso nos dará duas colunas, a primeira ou 100 pixels, e depois a segunda de 200 pixels. Mas como vamos criar quatro quadrados diferentes, que são de tamanho igual, podemos usar a função de repetição. A função de repetição incluirá duas coisas. O primeiro é o número de colunas separadas por uma vírgula. O segundo valor é o tamanho de cada um. Então, 100 pixels. E se copiarmos e colarmos isso, podemos mudar isso para linhas de modelo de grade. Isso para fechar. Também queremos quatro linhas ou 200 pixels de altura. Isso efetivamente nos dá uma grade de quatro por quatro, deixando-nos com 16 espaços individuais. E veremos isso mais claramente muito em breve quando entrarmos no item da lista, a lacuna em torno de cada um dos dez pixels. Também removerei o valor de preenchimento padrão definindo-o como igual a 0. E, em seguida, vá para o item da lista, item da lista. Precisamos mover esses pontos. Esses marcadores são definidos definindo o estilo de lista como igual a nenhum. Isso acaba com isso. Vamos definir uma fronteira. E a espessura da borda tornará isso bem fino. Então, 0,5 pixels, uma cor de linha sólida. A cor da linha. Usamos um valor RGB de 2036, o que nos dá nossa primeira linha. E já que temos apenas quatro itens da lista, é só ocupar os primeiros quatro espaços. Vamos em frente e duplicar esses quatro itens. Faça oito. Agora temos espaço para oito itens diferentes e eles agora aparecerão no segundo lançamento. Bom, então para quebrar os cantos de cada um desses quadrados, podemos colocar em algum raio de borda de dez pixels. E também defina o cursor para ser um ponteiro. Já que queremos que o usuário possa clicar em cada um deles. Bom. Então, esse é o nosso estilo básico por enquanto. Voltaremos a isso mais tarde e adicionaremos algumas animações. Configurará duas animações diferentes. E a primeira será se o usuário receber o palpite correto, eu sou um se eles também entenderem errado. 6. Como selecionar cores aleatórias: Ok, então agora temos nossa página de índice com nossa marcação, temos nossa folha de estilo, e é assim que nosso jogo está parecendo atualmente. Também temos nosso script, que está vazio no momento e temos um link na parte inferior da nossa página de índice. Portanto, o objetivo deste vídeo é criar uma matriz que conterá todas as cores que você deseja usar para todos os nossos 16 quadrados que formarão 16 quadrados. Então, precisamos de oito pares de cores para criar um lote. Por exemplo, temos uma matriz com dois vermelhos, dois amarelos, dois azuis e assim por diante. O segundo objetivo é criar uma função que selecione aleatoriamente uma dessas cores, atribua essa cor a um quadrado específico e, em seguida, essa cor será removida da matriz. Portanto, não temos duplicatas. Então, primeiro de tudo, o primeiro passo é criar uma matriz chamada cores e começar oito pares de cores dentro daqui. Então, entrando em nossos scripts, crie nosso array chamado colors. E cada um deles será uma corda. Assim, você pode alterar essas cores para que sejam diferentes , você também pode alterá-las para uma cor RGB, mas eu quero usar uma cor hexágono como uma string. Portanto, há apenas valores CSS, então isso começa com o hash. E o primeiro valor que escolhi é 3333. Separado por uma vírgula duplicará este. Então, temos um par porque queremos fazer 16 cores, mas haverá oito cores diferentes para fazer pares. Depois disso, a segunda cor, novamente, uma cor hexadecimal, será dupla vontade F9 para D. E depois duplicar esta. A terceira cor, isso vai ser um 0, C-C duplo F uma vírgula, e duplicar esta. O próximo. Duplo F, duplo seis. Duplica a próxima dupla F4, D para duplicar. Em seguida, dobre F em a, em uma vírgula, copie e cole. Opa, não se esqueça das cinzas no início de cada uma delas. E o próximo será todos os d's. Então, 60 dias. Depois disso, teremos 000099. Duplicatas. Deve ser tudo o que precisamos. Temos nosso primeiro par, 2345678 pares lá. Isso nos dá 16 cores diferentes para cada um dos nossos quadrados. Em seguida, logo após isso, criaremos uma função. E o trabalho dessa função é selecionar uma cor aleatória dessa matriz e, em seguida, removê-la. Então começa, vamos apenas criar nosso corpo de função chamado Selecionar cor. E para selecionar aleatoriamente um dos nossos 16 valores da matriz, podemos criar um número aleatório contendo 16 opções. Então, usamos a função map, gera um número aleatório. E poderíamos, se quiséssemos multiplicar isso por 16, ou em vez disso, eu apenas usaria a matriz colors e selecionaria a propriedade length. Então, cores, a terra. E se decidirmos mudar isso no futuro, isso irá automaticamente pegar isso. Lembre-se de que Math.random nos dá um número aleatório entre 010 incluído, mas o valor de um não está. Ele vai até 0,999, por exemplo. E o que precisamos fazer é obter alguns números inteiros para que possamos arredondar isso. Vamos cortar do lugar toda essa pasta de acesso Math.floor em nosso número aleatório. Isso vai arredondar isso. Portanto, isso nos dará um número entre 015, resultando em 16 opções. Armazene isso dentro de uma variável ou constante chamada aleatória. Vou apenas fazer um comentário. Então isso é de 0 a 15. E agora podemos usar esse número aleatório para selecionar qualquer uma de nossas cores na matriz de cores. Então, selecione as cores. E, assim como em qualquer outro array, podemos passar um número de índice para selecionar uma cor específica. Mas vamos passar nosso valor aleatório para nos dar uma seleção aleatória. Isso dentro de uma constante chamada selected. Depois que cada um desses valores aleatórios for selecionado, podemos removê-lo de nossa matriz de cores de emenda de pontos de cores. método Splice removerá qualquer um dos nossos valores. Então, primeiro de tudo, o número do índice, com o qual vamos começar. Então, se começarmos daqui, podemos até remover o valor único ou podemos mover todos os valores logo depois. Portanto, a posição inicial é nosso número aleatório para nossa posição no índice. E como só queremos remover um único valor no momento o, colocar um valor de um para remover apenas esse valor único. Depois disso, retorne, nosso valor selecionado. Então, podemos testar isso chamando nossa função logo abaixo. Então eu chamei pelo nome. Chamaremos isso duas vezes para que possamos ver quantos desses valores foram removidos. Também colocado em um registro de console para nossa matriz de cores. Vá para o navegador e abra ferramentas do desenvolvedor com o botão direito do mouse e inspecione. Pule para o console. Atualizar. E podemos ver que temos uma matriz contendo 14 valores. Lembre-se de que nosso array original contém esses 16 valores. Em seguida, executamos nossa função duas vezes. E em cada chamada de função, ele removeu um único valor de uma posição aleatória. Portanto, no momento em que ele chega ao log do console, duas posições foram removidas. Vamos copiar e colar. Isso agora deve resultar em 13 valores. E removendo um cada vez que selecionamos. Isso significa que ficaremos com valores únicos. Também vai fazer mais um teste, vai cortar fora do lugar. Uma de nossas chamadas de função colocada dentro do log do console. Basta remover o ponto e vírgula. E cada vez que atualizamos agora, devemos ver um de nossos valores de matriz selecionados aleatoriamente. Boa alma com nosso valor aleatório de nossa matriz agora selecionado. Em seguida, podemos usar essa cor aleatória dentro de um loop para criar os 16 quadrados que precisamos exibir para o nosso jogo. 7. Como criar a grade de praças: Bem-vindo à próxima parte. O objetivo deste vídeo é criar um loop que será executado 16 vezes. Isso, em combinação com o CSS que você já tem em nossa folha de estilo, será usado para criar nossa grade de quadrados, que precisamos de 16 quadrados, que são quatro linhas do Foursquare. Além disso, cada um de nossos quadrados precisa um atributo personalizado para armazenar a cor que deveria ser. Lembre-se, temos todos os nossos valores hexagonais aqui. Não queremos que isso se aplique à cor de fundo de nossos quadrados, porque obviamente isso tornaria o jogo inútil porque o usuário poderá clicar nas cores que ele pode ver. Queremos ser capazes de esconder isso. Então, para fazer isso, removeremos a cor de fundo e também os armazenaremos como atributos para sabermos qual dos nossos quadrados podemos combinar. Opa, enquanto estamos aqui, também vamos adicionar a hashtag, essas duas cores. Então, se você ainda não fez isso, vamos começar indo para o nosso index.html e podemos mover todos os itens da lista vazia que criamos apenas para ver como ficaria com o estilo. Portanto, remova todos os itens da lista e, em seguida, volte para o nosso script. Começaremos selecionando nossa lista não ordenada em nossa página de índice, que tem o ID dos quadrados. O topo. Crie uma constante para mantê-los no contêiner chamado quadrados. Usamos QuerySelector. Então, seletor de consulta de ponto de documento. Passando como string, que é o hash, já que este é um ID e o nome dos quadrados. Acabei de criar um pouco mais de espaço para que possamos ver tudo isso em uma linha. E então criaremos uma variável armazenada em uma constante chamada número de quadrados. Queremos 16 quadrados. E então outra variável chamada I, que será igual a um valor inicial de 0. E usaremos isso para o loop while, que estamos prestes a configurar. Ok, então desça até o final e sopre nossa função de seleção de cores, que vamos usar em combinação com nosso loop. Faremos uso de um loop while. Isso será executado enquanto eu for menor que a variável chamada número de quadrados. Portanto, lembre-se de que o I é atualmente igual a 0 e o número de quadrados é 16. Então, efetivamente, isso começará executando e diremos, enquanto o número 0 é menor que 16, execute o código dentro. E antes que eu esqueça, vamos executar o I plus, plus. Isso vai aumentar o valor de I em cada loop. Para começar, 0 é menor que 16. Portanto, o código interno será executado, aumentará I para ser igual a 11 ainda é menor que 16. Portanto, o código continuará rodando 16 vezes. Mas que código precisamos executar aqui dentro? Bem, já que temos em nossa página de índice e lista não ordenada, e parece que selecionamos nossa lista não ordenada. Bem no topo. Vamos criar uma lista de itens para colocar dentro. E esses são exatamente como os itens da lista que adicionamos aqui. Então, é criá-los com JavaScript. Usamos elementos de criação de ponto de documento, passando o nome da tag de LI para criar um item de lista e, em seguida, armazenamos isso dentro de uma constante chamada quadrado. Ok, agora temos o contêiner e também precisamos de uma cor aleatória. Para isso, temos nossa função acima chamada Selecionar cor. E isso retornará um valor selecionado do nosso array. Armazene isso dentro de uma constante chamada color, que é igual ao valor de retorno de nossa função chamada select color. Também podemos remover ou comentar esse código abaixo. E verificaremos se tudo está funcionando adicionando essas cores aos nossos quadrados. Então acesse r ao quadrado, que é o item da lista. Podemos definir o fundo do estilo para ser igual a uma cor aleatória. Ok, então agora temos nosso item de lista que estamos criando. Agora podemos adicionar isso ao nosso contêiner de quadrados. Pode fazer isso acessando um pen child. Então acesse o contêiner ou o contêiner dos quadrados dourados dos pais. O método append child para adicionar nosso novo item da lista, que é a variável chamada Square. Atualizar. Isso agora cria eu tinha 16 itens da lista e definimos a cor de fundo para ser igual a o valores aleatórios. Lembro-me disso, já que estamos removendo cada um desses valores aleatórios depois, só vemos duas de cada uma dessas cores. Bom. Então, temos esses quadrados que queremos, mas não queremos ver a cor de fundo assim. Vamos comentar isso e, em vez disso, acessaremos cada um de nossos quadrados. Definirá o atributo, que será igual a um atributo personalizado chamado cor do traço de dados. O valor será igual à nossa cor. Essa informação extra ou esse atributo será adicionado a cada um de nossos quadrados. Então, podemos ver isso se entrarmos nas ferramentas do desenvolvedor, clicar com o botão direito do mouse e inspecionar elementos, pular para a seção do corpo, abrir a lista não ordenada. E veremos que cada um dos itens da nossa lista que criamos tem esses atributos personalizados com a cor do hexágono. 8. Ouvindo cliques: Agora, que tal 16 quadrados na tela? Agora vamos adicionar um ouvinte de evento a cada um desses quadrados, que acionará uma função quando clicado, o jogo será jogado em pares. Então, quando clicarmos em dois quadrados, vamos comparar as cores de cada um. Isso precisamos armazenar a cor de ambos os quadrados clicados e, em seguida, rastrear se é o primeiro ou o segundo quadrado selecionado. Os telefones comparam os dois somente se for o segundo clique. Então, se tivermos dois quadrados selecionados, compararemos as cores de ambos. Então, para começar, vamos pular para um pouco abaixo do nosso loop while. O que vamos fazer é selecionar todos os nossos quadrados que estão armazenados nos itens da lista. Então pegue todos esses, consultaria seletor todos os loops sobre eles e, em seguida, adicione um ouvinte de evento. Então, vi isso dentro de uma constante chamada quadrados , então fará uso do ponto do documento, seletor de consulta. Todos selecionarão todos os itens da nossa lista. Isso conterá uma referência aos nossos 16 quadrados de itens da lista. Então, abaixo, isso fará uso de um loop for, of para percorrer cada um de nossos quadrados e adicionar um ouvinte de evento. Então, um loop for, of começa como um loop for. Dentro daqui você dirá const square of squares. Isso significa que faremos um loop sobre todos os nossos quadrados, que são nossos 16 itens da lista. E então podemos acessar cada um individualmente com essa variável quadrada. Então, acesse nossos pontos quadrados, adicione ouvinte de eventos que deseja ouvir um clique em cada um deles, que executará uma função personalizada chamada quadrado clicado. Ok, então, pouco antes de criarmos essa função quadrada clicada, vamos subir até o topo e adicionar mais algumas variáveis para armazenar as informações de que precisamos. A informação que precisamos é dos dois chutados em quadrados. Então, ele vai começar a jogar. Clicaremos no primeiro e depois no segundo. Eu instalo isso dentro de duas variáveis. Então, vamos à estaca zero. Separado por vírgula também criará uma variável chamada quadrado para. Eles não precisam de nenhum valor inicial. E também como só queremos clicar em dois quadrados por vez, vamos acompanhar isso com uma variável chamada contagem de cliques, que será igual a 0. Igual a 0. Clicaremos no primeiro quadrado. Isso será aumentado para aquecer. Clique no segundo, isso será aumentado para dois. Vamos verificar se tanto. E então redefiniremos isso de volta para 0, impedindo o usuário de clicar em um terceiro quadrado. Ok, então de volta à nossa função que precisamos criar, que é chamada de quadrado clicado. Vamos configurar isso, mas logo abaixo. Conforme mencionado, para cada um desses cliques, precisamos aumentar nossa variável de contagem de cliques. Gostaríamos de plus plus. Portanto, essa variável de clique será muito útil porque precisamos saber se é o primeiro ou o segundo quadrado com o qual estamos lidando. O primeiro clique definirá nossa variável quadrada. E no segundo clique, definiremos nosso quadrado dois. Ele manterá todas as informações do item da nossa lista que foram criadas, incluindo o atributo que contém a cor. Mas pouco antes de fazermos isso, como descobrimos em qual quadrado foi clicado? Uma maneira de fazer isso, que você pode ter visto no passado, é passar as informações do evento para a função. E podemos acessar isso com alvos de ponto E. Ou outra forma é acessar algo chamado Isso. Veremos o valor disso. Se passarmos isso para um console, registre, salve e atualize. Vá para as ferramentas do desenvolvedor para o console. Ok, então clique em qualquer um dos nossos quadrados. Podemos ver um item da lista ou clicar em um segundo quadrado, nosso segundo item da lista. Ambos apontam para atributos de dados diferentes. Portanto, a palavra-chave this, pode ser algo complexo em JavaScript, significa coisas diferentes em contextos diferentes. Mas, para o nosso caso de uso, podemos ver que ele registra o valor do item da lista em que clicamos. Então, podemos usar isso para definir nossas variáveis. Podemos fazer isso com um operador condicional JavaScript. O operador condicional, muitas vezes referido como ternário, fará uma pergunta, dirá, a contagem de cliques é igual a um? Faça uma pergunta se é igual a um ou se deseja fazer é definir a variável quadrada um para ser igual a isso. Ou se não, se isso for igual a dois, definiremos quadrado para ser igual a isso, definindo nossas duas variáveis. E não se preocupe, se você economizar no código do Visual Studio, adicionará automaticamente esses colchetes. Isso está completamente bem. Ok, então para testar isso, podemos colocar em um log do console o valor do quadrado um e, em seguida, quadrado para atualizar e abrir o console. Clique no primeiro. ver, já que clicamos apenas em uma, a primeira variável quadrada é definida e a segunda ainda está indefinida. Clique em qualquer um dos quadrados, obterá o valor de dois itens diferentes da lista. Como sabemos, todos os nossos quadrados são atualmente apenas um contorno. Precisarei revelar a cor de fundo quando cada um deles for clicado, informar ao usuário qual cor realmente era, para que ele não se lembre dela na próxima vez. Então, para fazer isso, passaremos uma declaração if, removeremos o log do console. E diremos se a contagem de cliques for igual a um, então o primeiro quadrado foi selecionado. O que faremos é pegar nossa primeira variável quadrada. Vamos definir o plano de fundo do ponto de estilo. Lembre-se de que isso é exatamente o que fizemos como uma medida temporária dentro do nosso loop while para definir as cores. Vamos definir isso igual à estaca zero. Vamos pegar nossos atributos, que definimos aqui, onde ele obtém atributos. Os atributos que você deseja selecionar são esse personalizado chamado cor de dados. Passe isso como uma corda. Caso contrário, isso é igual aos nossos segundos cliques ou passá-lo em instruções l. Copie essa linha de código. Eu não quero fazer aqui é mudar isso para ser igual à raiz quadrada dois. Então, apenas para recapitular ou clicar primeiro em qualquer um dos nossos quadrados, estamos executando, nossa função aumentará o contador de cliques para ser igual a um. Se isso for igual a um. Ou defina o quadrado um para ser igual ao item da lista clicado. Caso contrário, é o segundo clique onde definiremos o quadrado. Novamente, verificando se a contagem é igual a um. O primeiro quadrado está sendo clicado. Alteraremos a cor de fundo para ser igual ao atributo de cor de dados, que é armazenado dentro do item da lista. Se for o segundo clique, definiremos isso igual ao quadrado de duas cores. Então, ambos serão revelados em nosso jogo. Vamos tentar isso. Atualizar. Clique na cor. E a estaca zero tem seu plano de fundo definido para ser igual aos nossos atributos. A segunda, ambas as cores agora estão definidas corretamente. Você notará tudo o que podemos continuar clicando no resto das cores, mesmo que só queiramos lidar com isso duas de cada vez. Mas isso é algo com o qual lidaremos no futuro. Em seguida, lidaremos com o que fazer se as cores forem muito ou se forem diferentes. 9. Verificando uma correspondência: Como o título deste vídeo sugere, o objetivo agora é esperar até que dois quadrados sejam selecionados. E então podemos verificar se eles combinam I, II, ambos têm os mesmos atributos de cor. Isso descerá para a função clicada r ao quadrado. E dentro dessa função, a seção L será executada se dois quadrados forem selecionados. Então, eu clico em count é igual a dois, então o código else será executado. Então, este é o lugar para verificar se há uma correspondência e podemos adicionar o código diretamente aqui. Em vez disso, vou criar uma função separada. Portanto, essa função será chamada de correspondência de cheque, que agora criará. Então vá logo abaixo da nossa função de clique quadrado e crie essa função. Verifique a correspondência. Então, como podemos realmente verificar se ambos são iguais? Bem, a maneira de fazer isso é acessar o quadrado um e o quadrado exatamente como fizemos acima. Usaremos o método get attribute para cobrir o valor de cada uma das cores. Podemos então verificar se eles são iguais e armazená-los dentro de uma variável. Assim como fizemos aqui. X é nossa variável chamada na estaca zero, obterá os atributos, que é chamado de cor de dados. E vamos verificar se isso é igual a esse mesmo usando o quadrado dois. Então, isso vai comparar os dois atributos e isso retornará um valor booleano de true ou false, que podemos armazenar dentro de uma variável chamada match. Em seguida, o valor da correspondência determinará qual das próximas funções executaremos. Então, vamos criar duas novas funções. O primeiro, se não houver muito, então este será, se houver uma correspondência. Para determinar qual deles será executado, podemos colocar em uma instrução if. Aqui dentro, verificaremos se não há muito, o que será executado se for igual a falso, então executaremos nossa função de correspondência e saberemos que muito mais executará nossa segunda função. E, de fato, chamaremos isso de mudanças. Um é muito. Portanto, apenas uma dessas funções será executada de uma só vez. E voltaremos à maior parte desse conteúdo nos próximos vídeos. Mas, por enquanto, o que esses dois precisam é redefinir para a contagem de cliques. Uma vez que ambos são executados apenas se estivermos no segundo clique. Então isso significa que temos dois quadrados selecionados. Então, precisamos redefinir o contador de cliques, voltar para 0. Então, vamos primeiro fazer isso. A contagem de cliques é igual a 0 e o mesmo é uma correspondência. Agora, tudo o que faremos dentro dessas duas funções é colocar em um log do console para verificar se isso está funcionando. O primeiro sem correspondência. O segundo é uma partida. Ok, vamos testar isso. Atualize a página no console. Em primeiro lugar, clicaremos em quaisquer dois quadrados. Podemos ver claramente por causa da cor deles e não por uma combinação. E a função correta foi executada. Então, vamos tentar criar uma correspondência. Esse ainda não é muito. Mas se clicar em nossos dois greens, este vai ser uma partida. 10. Como lidar com uma partida: No momento, podemos clicar em qualquer número de quadrados e as cores são reveladas. Precisamos limitar isso para trabalhar apenas com dois quadrados por vez. Portanto, não vemos o que temos atualmente. Anteriormente, criamos duas funções, que são lidar com a correspondência e as condições de correspondência de notas. Tudo o que fazemos é aumentar o contador de cliques em cada um e fazer um log do console para fins de teste. Tudo o que fazer agora é estender essas funções para lidar com esses resultados, começando com a função de correspondência de notas. Então, se não há muito o que fazer, por exemplo, apenas aqui é que queremos selecionar dois de nossos quadrados e, em seguida, se eles não forem muito, precisamos virá-los de volta para ocultar efetivamente o cores de fundo. Então, para fazer isso, logo acima da nossa contagem de cliques, o que faremos é acessar nossos dois quadrados. Solte a propriedade style, onde definiremos o fundo para ser igual a uma string vazia. Faremos o mesmo para o número quadrado para salvar isso, e vamos tentar isso. Não sabíamos muito. Então clique em qualquer um desses. E podemos ver que assim que você não tem uma correspondência, esta é, então tudo bem. Não temos uma partida como essa. O segundo desaparece tão rápido que não conseguimos ver de que cor era. Agora, isso não é bom para o nosso jogo porque a ideia é que queremos que os usuários possam clicar nessas cores. Não me lembro qual era qual. Então, para desacelerar as coisas, o que podemos fazer antes da chamada não é uma função de correspondência. Podemos envolver essa chamada de função com um tempo limite. Vamos cortar isso. Coloque em um setTimeout JavaScript, que executará uma função. Essa função separada por vírgula será executada após um determinado período de tempo. Então, isso é em milissegundos. Então, 500 milissegundos é meio segundo. E então, dentro do corpo da função, cole de volta em nossa chamada de função. Recarregue o navegador e vamos experimentar isso. Vamos para o pagador que não corresponde. Podemos ver que ambas as cores são reveladas e, em seguida, elas esperam 2,5 antes de serem removidas. Isso dá ao jogador a chance de lembrar qual cor foi selecionada para que ele possa usá-la no futuro. Então, podemos começar a comparar nosso próximo par de quadrados. O que vamos fazer logo acima do contador de cliques é também redefinir a estaca zero. Redefina a variável para ser uma string ou melhor, uma string vazia. E faremos o mesmo para a estaca dois. Nos deu uma tela em branco para trabalhar em nossa próxima tentativa. Então, isso é tudo o que precisamos para nossa função sem correspondência. Então, até a função é muita que será executada se duas cores forem iguais. Então, o que vamos fazer se houver uma correspondência que já definimos na cor de fundo. Então, vamos remover essa borda que já temos e também remover o ouvinte de eventos para que não interfira com o resto do jogo. Logo acima da contagem de cliques. Pegue o quadrado. A propriedade style. Bem, vamos definir a fronteira para ser igual a não. Copie e cole isso. Faça o mesmo quadrado para. Em seguida, removeremos o ouvinte de eventos para que não possamos mais clicar com o botão direito do mouse nesses quadrados, o que interferirá no resto do jogo. Quadrado um. Desta vez, chamaremos remover ouvinte de eventos. E isso precisa ter os mesmos parâmetros de uma das primeiras configurações, esse ouvinte de eventos. Portanto, se formos até a seção de ouvinte de eventos, que está aqui, precisamos passá-la exatamente nos mesmos parâmetros. Portanto, isso inclui o tipo de ouvinte de evento que atualmente é clique e também a função a ser chamada. Vou colar isso. Copie e cole o quadrado dois. Agora vamos tentar resolvê-lo encontrando um laranja muito azul escuro. Temos duas laranjas. Então, vamos clicar neste formulário, temos uma correspondência. Eles permanecem no jogo e podemos ver se olharmos de perto, não temos essa borda ao redor de cada um. Vamos clicar em um desses quadrados revelados. Agora, clique em um segundo. Como o ouvinte do evento foi removido do primeiro, ainda precisamos clicar em outro quadrado para formar um par. Então, as coisas estão começando a funcionar como deveriam agora, mas há alguns pequenos problemas que precisamos resolver. Um deles está lidando com clicar duas vezes no mesmo quadrado. Se fôssemos fazer isso e clicar no mesmo quadrado duas vezes, assim como fizemos aqui. Podemos ver que o tabuleiro foi removido e isso é considerado uma correspondência pois obviamente ambos têm o mesmo atributo de cor de dados. Para consertar isso, vamos até a nossa praça. Então, isso é executado toda vez que eu clico em qualquer um dos nossos quadrados na grade, podemos pular para nossa função e adicionar uma instrução if. E esta declaração if primeiro vai verificar se o quadrado é igual a isso. Então, o que isso significa é que, se já clicamos em um quadrado, isso será igual à estaca zero. E então, quando clicamos em um segundo quadrado, novamente, se eu clicar no mesmo, isso será igual ao quadrado alfa. Se for esse o caso. Em seguida, retornaremos dessa função antes de executar qualquer outro código. Outro problema é que também podemos clicar rapidamente em Mais de dois quadrados. Então pulando clique em 123. E antes que o 2.5º atraso seja concluído, clique em Mais de dois quadrados. Então, para isso, faremos algo muito semelhante que retornará dessa função se algo for verdadeiro. Mas desta vez faremos isso logo abaixo da nossa contagem de cliques. Fazemos isso porque, se tivermos atualmente dois quadrados clicados, a carta clicada será igual a dois. Portanto, podemos colocar em uma instrução if, que vai verificar se a contagem de cliques é maior que o valor de dois, então retornaremos novamente, alterando a disfunção. Vamos testar isso. Atualize quando clicar no mesmo quadrado várias vezes e isso não terá nenhum efeito. Podemos clicar rapidamente em Mais de dois quadrados. Mais de dois cliques são ignorados. 11. Acompanhe a pontuação e o fim do jogo: O objetivo agora para este vídeo será acompanhar a partitura e usar esses elementos p, que criamos em um vídeo anterior. Vamos atualizar isso sempre que tivermos uma partida, também a ocultaremos quando não tivermos nenhuma pontuação atual. Além disso, uma vez que o jogo termina e todos os quadrados são combinados com uma alça, isso e permite que o usuário reinicie o jogo para começar de novo. Então, para começar de novo em nosso roteiro, o que vamos fazer é criar uma nova variável para acompanhar a pontuação. Vou usar as aulas. Podemos atualizar isso e inicialmente definiremos a pontuação para ser igual a 0. Como mencionado, não queremos que isso seja mostrado como 0 antes do início do jogo. Assim, podemos ocultar isso acessando o documento. Seletor de consulta. Lembre-se, isso é p elementos que exibe a pontuação, tem essa ideia de pontuação. Então, podemos pegar isso como uma corda. Defina a visibilidade do ponto de estilo igual a oculta. Então, a razão pela qual vamos alternar a visibilidade em vez do tipo de exibição é porque também queremos manter esse espaço dentro do nosso código. Se definirmos a exibição como nenhuma, isso removerá esse elemento do navegador e exibirá todos os jogos que estão no topo. E também, quando restabelecemos isso para exibir a pontuação, isso empurraria todo o jogo para baixo e faria com que parecesse muito nervoso. Ok, então agora precisamos atualizar a variável de pontuação e também restabelecê-la. Temos nossa primeira partida. Então vá até a função match, que está aqui. Stefan deve chamar o score plus plus aumenta pelo valor de um. Usaremos o seletor de consulta de ponto de documento para pegar nossos elementos Scott e definiremos o texto interno para ser igual à nossa pontuação. Isso também é copiar e colar essa linha. Pegue todos os elementos p mais uma vez. Desta vez, definiremos a visibilidade do ponto de estilo para ser igual a visível. Isso substituirá a propriedade oculta que definimos no topo. Então, vamos salvar isso e experimentar isso. Inicialmente, quando recarregamos o jogo pela primeira vez, a pontuação foi removida porque definimos a visibilidade como sendo igual a oculta. Agora, quando nos refrescarmos, vamos tentar conseguir muito. Eu tenho dois rosas. Eu vou marcar agora está atualizado. Em seguida, criaremos uma nova função que verificará se o jogo terminou. E isso significa que todos os pares foram combinados. Então, para esta nova função, que é chamada de jogo de verificação encerrado, e executaremos essa função cada vez que tivermos um par correspondente. Então, precisamos saber exatamente o que faz com que nosso jogo termine. Então esse será o nosso número de quadrados, que é definido como 16. E então divida isso por dois. Já que estamos igualando esses prejuízos. Salve isso dentro de uma variável ou constante chamada target. Portanto, esse resultado é efetivamente oito. Em seguida, precisamos criar uma segunda constante, que será um valor booleano chamado GameOver. Podemos usar o operador condicional JavaScript. Então, verificaremos se a pontuação é igual ou acima da meta. Faça a pergunta. Se isso for verdade, o GameOver será igual a true. Então, basicamente, se a pontuação for igual a oito, retornará verdadeiro. Caso contrário, salvaremos o valor de false. Podemos então executar uma instrução if para verificar se o game over é igual a true e, em seguida, executar algum código dentro. Então, dentro disso, se a declaração quiser fazer é reiniciar um jogo exibindo esse botão de jogar novamente. Atualmente, ainda não o escondemos. Então, voltaremos a isso em apenas um momento. Agora, o que faremos é executar nossa função dentro da função de correspondência de verificação. Então verifique muito. Isso é executado toda vez que teremos um par de quadrados selecionados. E só queremos verificar isso se tivermos uma correspondência. Então, logo após verificarmos se há uma correspondência, executaremos essa função. Então, como mencionado, se isso for verdade, isso acionará nosso botão Reproduzir novamente. Então, primeiro precisamos esconder isso antes do final do jogo. Vamos pular até o topo. Pegue isso, instale dentro de uma constante chamada botão Reproduzir de novo. Vou pegar isso com o seletor de consulta de pontos de documentos, string. Se formos para nossa página de índice, podemos ver que não há classes ou IDs. Então, podemos pegar isso simplesmente pelo nome da tag do botão. Acessará esta variável, definirá a visibilidade do ponto de estilo igual a a1. Isso significa que, assim que atualizamos a página, não vemos o botão. Assim que o jogo terminar, precisamos fazer o oposto disso, definindo a visibilidade como igual a visível. Mas pouco antes de fazermos isso, também acessaremos nosso botão Reproduzir. Adicionaremos um ouvinte de eventos, que será listado agora por um clique e executaremos uma função chamada play again. Ok, então agora para terminar as coisas, o que vamos fazer é definir nosso botão para ficar igual ao visível quando o jogo terminar. E também criará essa função play again. Vamos começar com a visibilidade. Volte para nossa função de verificação de fim de jogo. Então, se o jogo acabar, se isso for igual a true, acessará o botão play again e fará o oposto, definindo a visibilidade do ponto de estilo para ser igual a visível. Então, finalmente, vamos mover esse código comentado e criar nossa função que é executada toda vez que eu clicar no botão. Adicionamos o ouvinte de eventos para isso e chamamos isso de jogo novamente. O código para isso será bem simples. Tudo o que vamos fazer é recarregar a página selecionando o local do ponto da janela e chamando o método de recarga. Salve isso e atualize a página. Então, o que precisamos fazer agora é completar o jogo combinando todos esses quadrados. O cinza, verde, azul claro . Lá vamos nós. Então, assim que o jogo terminar com o botão NCD play again, clique aqui. Isso chama o método de recarga e, em seguida, reinicia o jogo. 12. Animações: Para finalizar o projeto, agora podemos adicionar alguns efeitos de animação. Haverá uma animação de vibração se a correspondência estiver incorreta. E para uma correspondência correta, adicionaremos um efeito pop. Então, para isso, vamos à nossa folha de estilo e podemos adicionar nossas animações dentro dela. Então, na parte inferior, o que vamos fazer é primeiro configurar duas classes diferentes, que podemos inserir com JavaScript. A primeira é se a partida estiver incorreta, quero fazer com que esses dois quadrados se agitem um pouco. Então, para isso, adicionaremos um efeito de animação. Vamos chamar isso de sacudida. E vamos configurar isso em apenas um segundo. Eu farei isso acontecer em 0,1 segundo. Então, será um shake muito rápido, e então os quadrados voltarão ao normal. Se a correspondência estiver correta. Faremos um efeito pop. Assim como acima. Criaremos nossa animação que será chamada de POP, vai deixar isso um pouco mais longo. Isso será mais de 2,5. Portanto, tanto para a forma quanto para esse pop, precisamos configurar os quadros-chave. Então, fazemos isso com adicionar quadros-chave. Estou passando o nome de shake. Então, dentro desses quadros-chave, o que fazemos é configurar os vários estágios da animação. Então, podemos configurar isso do começo ao fim, ou também podemos adicionar diferentes estágios à medida que avançamos. Por exemplo, a 0%, a animação pode estar em um determinado estado, depois vinte e cinco por cento, cinquenta 75% por cento e, finalmente, 100 por cento. Portanto, se você não usou esses quadros-chave antes, tudo o que precisamos fazer dentro dessas chaves é adicionar qualquer uma de nossas propriedades CSS. E podemos mudar esses estados diferentes. Então, por exemplo, talvez possamos dizer que alguma cor é uma cor dentro daqui. Basta dizer cor vermelha. E então, com vinte e cinco por cento, poderíamos mudar isso para a cor azul. E isso funciona para qualquer uma das nossas propriedades CSS. Mas para o nosso caso fazer o efeito de vibração ou quer fazer é usar a rotação, que vai girar os elementos uma certa quantidade de graus. Então, para fazer isso, ele configura uma transformação chamada Rotate. E já que este é o começo, vamos definir isso como 0 graus. Vamos copiar esta seção. Cole isso em vinte e cinco por cento. Para esses três graus negativos, metade do caminho 50 por cento restabelecerá isso de volta ao meio. Isso girará negativo e depois voltará para o centro. Três quartos do caminho, adicionaremos isso como um valor positivo de graus livres. E então, no final, vamos restabelecer o quadrado. Então, tudo isso vai acontecer muito rápido, já que definimos isso para acontecer ao longo de 0,1 segundos. Então, giraremos rapidamente para a esquerda e para a direita e, em seguida, colocaremos um quadrado de volta no centro a 0 graus. O próximo, o efeito pop. Faremos uma coisa parecida. Precisamos configurar os quadros-chave com a regra de quadros-chave. Este foi chamado de pop. Então 0%. Para este, ele não precisa de tantos estágios. Tudo o que vamos fazer é aumentar a escala dos elementos para torná-los um pouco maiores e, em seguida, dimensioná-los de volta ao tamanho normal. Então, precisamos de três estágios, o começo, o meio e também o fim. Então, se isso também fizer uso de transformação, este usará escala. Então, quando usamos escala, o valor de um é tamanho irregular do elemento. Portanto, essa é efetivamente a posição inicial. Vamos copiar isso. E queremos fazer disso um efeito bem sutil. Podemos fazer isso duas vezes o tamanho de três vezes o tamanho ou qualquer coisa que você queira. Mas tudo o que vou fazer é fazer um pouco de pop sutil, que tornará o elemento um pouco maior e depois reintegrado de volta ao seu tamanho normal. O valor que eu quero escolher é 1,06. Então, no final da transformação, isso volta ao tamanho normal. Tudo isso acontecerá ao longo do 2.5º. Então, de volta ao nosso roteiro. Primeiro, lide com se houver uma correspondência, adicionaremos a classe pop à função. Só para, Sim, E então tudo o que precisamos fazer aqui dentro é adicionar a classe de pop. Então, vamos adicionar isso. Logo após definirmos a variável do quadrado de acesso de visibilidade. A lista de turmas. Usamos a função add para adicionar nossa classe de pop, copiar e colar isso e, em seguida, alterá-lo para a raiz quadrada dois. Então, adicionarei a classe pop e também precisamos adicionar a classe shape. Então, para fazer isso, vamos para nossa função, onde verificamos a correspondência. Lembre-se de que aqui temos nossas duas seções. O primeiro é onde verificamos se não há correspondência. Se não houver muito. Pouco antes do tempo limite, podemos acessar nosso quadrado. Lista de classes pontuais. A adição de pontos adicionará o efeito de vibração. Duplique esse quadrado dois. Então, aqui nós adicionamos o efeito shake. Em seguida, esperamos 2,5, chamamos a função sem correspondência. E então, dentro da função match, podemos remover esses efeitos de vibração. Então vá até a função sem correspondência. Ok, isso está dentro da figura. Então, removemos a classe de forma porque os quadrados podem estar errados várias vezes. Portanto, adicionar e remover a classe acionará o efeito de vibração em cada tentativa. Então, vamos fazer essa estranha lista de classes quadradas de um ponto. Mas desta vez chamaremos a função de remoção. Jacque também fará o mesmo para a estaca dois. Isso agora deve ser adicionado e removido. Portanto, se essa classe foi adicionada e nunca removida, ela só será chamada uma vez. Então, por exemplo, se tivéssemos uma incorreta assim, próxima vez que tentássemos fazer a correspondência incorreta, não obteríamos o efeito de vibração. Ok, então certifique-se de que todos os arquivos estão salvos. Vamos atualizar a página e começaremos. Essa é uma correspondência incorreta. Assim, podemos ver que temos esse efeito de vibração, que é muito rápido e tem duração de 0,1 segundos. Vamos experimentar o efeito pop criando uma combinação. Verdes. Agora, quando temos uma correspondência, obtemos esse efeito pop que torna os elementos um pouco maiores e depois retorna ao tamanho normal. 13. Siga-me na Skillshare!: Um grande parabéns meu por chegar ao final desta aula. Espero que você realmente tenha gostado e ganhe algum conhecimento com isso. Se você gostou desta aula, não deixe 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 sobre novas aulas à medida que estiverem disponíveis. Então, obrigado mais uma vez, boa sorte, e espero vê-lo novamente em uma aula futura.