Jogo da Memória (Memory Game) 🧠

Teste por este link: ❗ ❗

https://diogolcarvalho.github.io/projeto-jogo-da-memoria/

Explicação JS ⌨️

Há aqui um array que contém objetos. Esses objetos estão com os nomes e com o caminho que estão as imagens dentro dos arquivos do projeto. Todos estão duplicados, devido ao funcionamento do jogo.

Temos um for que é executado de acordo com o tamanho do array cardArray. A cada vez que o loop é executado, é criada uma tag imagem, que vai ter como atributo uma imagem padrão - que possui um fundo rosa - e também um id específico. Ao final todas essas imagens criadas serão colocadas dentro da div com id cards, que é a própria variável divCards. E quando o usuário clicar em uma das imagens é executada a função virarCard.

A variável cardId contém o valor do id do card que o usuário digitou. Essa variável serve de parâmetro para o cardArray - que contém todos os cards disponíveis - que é colocada em um outro array com a função push, só que neste array é colocado apenas o nome. O array cardEscolhidoId, como o próprio nome diz tem apenas o id do card. O elemento selecionado terá a url mudada de acordo com o caminho que está no cardArray.

Quando o usuário clicar na imagem, é adicionada uma animação ao abrir e ele não pode clicar no mesmo card novamente.

A função virarCard só pode ser executada duas vezes seguidas. Porque depois disso é executada a função verificarCard, que verifica os dois cards escolhidos, para ver se eles combinam ou não.

A variável cards possui todas as tags de imagens. As variáveis opçãoUm e OpçãoDois tem os valores dos id 's dos cards selecionados. Com isso um if é executado, se os dois cards selecionados pelo usuário forem iguais, aplique uma class que possui uma animação e coloque o cardEscolhido em cardsCombinados, que vai ser útil no final do jogo.

Caso contrário, é claro, o usuário errou . Então, como no acerto é aplicado um class com uma animação, só que desta vez uma animação de erro. Dois setTimeout são executados, com um tempo de 500 milésimos, removendo a class que foi acabada de ser colocada e restaurando a tag imagem com a url inicial.

Para acabar vários valores, arrays e estilos são resetados ou removidos. Há um if ao final, para quando o usuário acertar todos os cards. O parâmetro de parada do if é pela igualdade do tamanho do array cardCombinados e o array cardArray dividido por 2, pois, como mencionado anteriormente, este array tem elementos duplicados.

Se o if for executado, essa tela aparece:

E se o usuário apertar no botão, a página reinicia e o jogo recomeça.

Detalhes a mencionar ❗

Como os cards estão organizados está diretamente ligado ao tamanho da imagem. A div container tem o width e o height exatamente calculado de acordo com o tamanho das imagens e o padding da div. Se mais cards forem colocados, é preciso mudar o width e o height da div container.

Obrigado pela atenção ❗

• Criado por Diogo Lima Carvalho.