🎃 Desenvolvendo meu Jogo da Memória de Halloween🎃

Olá! Gostaria de compartilhar com vocês o processo de desenvolvimento do meu Jogo da Memória temático de Halloween, criado utilizando HTML, CSS e JavaScript. Neste projeto, mergulhei em conceitos como manipulação do DOM, implementação de algoritmos de embaralhamento e aplicação de animações CSS para proporcionar uma experiência de usuário envolvente. Vou detalhar cada componente e explicar as decisões técnicas que tomei ao longo do caminho. 🕸️🦇

🧩 Visão Geral do Projeto

O objetivo do jogo é simples: encontrar todos os pares de cartas correspondentes. As principais características do meu jogo são:

• Um conjunto de cartas com emojis temáticos de Halloween (👻, 🧛, 🧟‍♂️, etc.).
• Embaralhamento aleatório das cartas a cada partida.
• Animações de virada de cartas e efeitos visuais para feedback.
• Um sistema de notificação para indicar quando o jogo é concluído.

📐 Estrutura do Projeto

1. HTML

Na estrutura HTML, defini o layout básico do jogo:

• Container Principal: Envolve todo o conteúdo do jogo.
• Título: Indica o nome do jogo.
• Área do Jogo: Um <div> onde as cartas são inseridas dinamicamente.
• Botão de Reinício: Permite reiniciar o jogo a qualquer momento.
• Toast de Notificação: Exibe mensagens ao jogador.
• Spinner de Carregamento: Indica que o jogo está sendo reiniciado.

2. CSS

O CSS foi fundamental para estilizar o jogo e adicionar animações:

• Layout Responsivo: Usei flexbox para centralizar e organizar os elementos.
• Estilização das Cartas: Defini a aparência frontal e traseira das cartas.
• Animações:
• Virada de Carta: Utilize transformações 3D para criar o efeito de virar.
• Efeito de Shake: Proporcionei feedback quando o jogador seleciona um par incorreto.
• Barra de Progresso no Toast: Indica o tempo restante da notificação.

3. JavaScript

O JavaScript controla toda a lógica do jogo:

• Embaralhamento de Cartas: Implementei o algoritmo para embaralhar as cartas.
• Manipulação do DOM: Criei e atualizei os elementos do jogo dinamicamente.
• Gerenciamento de Eventos: Respondo às interações do jogador.
• Controle de Estado: Mantenho o rastreamento das cartas abertas e pares encontrados.
• Animações e Feedback: Adiciono e removo classes para iniciar animações CSS.
• 
  

🔄 Embaralhamento de Cartas com o Algoritmo

Para garantir que cada jogo seja imprevisível, usei o algoritmo para embaralhar as cartas de forma verdadeiramente aleatória.

Como funciona:

1. Começamos com uma lista de emojis.
2. Percorremos a lista de trás para frente.
3. Para cada posição, selecionamos um elemento aleatório que ainda não foi embaralhado.
4. Trocamos o elemento atual com o elemento aleatório selecionado.

Este algoritmo é eficiente e garante que todas as permutações sejam igualmente prováveis.

📝 Manipulação do DOM e Criação Dinâmica de Elementos

Optei por criar as cartas dinamicamente com JavaScript, o que me permitiu:

• Flexibilidade: Facilita a alteração do número de cartas ou emojis.
• Organização: Mantém o HTML limpo e focado na estrutura essencial.
• Escalabilidade: Possibilita ajustes futuros, como níveis de dificuldade.

Processo que segui:

• Selecionei o elemento contêiner onde as cartas seriam inseridas.
• Iterei sobre o array de emojis embaralhados.
• Para cada emoji:
• Criei um elemento <div> representando a carta.
• Atribuí classes e atributos necessários.
• Adicionei um evento de clique que chama a função de manipulação.
• Inserí a carta no DOM.

🎮 Gerenciamento de Eventos e Lógica do Jogo

Eventos de Clique nas Cartas

Quando o jogador clica em uma carta:

1. Verifico se menos de duas cartas estão abertas e se a carta não está já aberta ou correspondida.
2. Viro a carta para revelar o emoji.
3. Adiciono a carta a um array que rastreia as cartas abertas.

Verificação de Pares

Após duas cartas serem abertas:

1. Desabilito cliques adicionais para evitar conflitos.
2. Depois de um pequeno atraso, verifico se os emojis correspondem.

• Se correspondem:
• Marco as cartas como correspondidas.
• Removo os eventos de clique dessas cartas.
• Se não correspondem:
• Aplico a animação de shake como feedback.
• Viro as cartas de volta após a animação.

1. Reabilito os cliques nas cartas.

Detecção de Vitória

Após cada tentativa bem-sucedida, verifico se todas as cartas foram correspondidas. Se sim, aciono a função que exibe o toast de vitória.

💅 Animações e Feedback Visual com CSS

Animação de Virada de Carta

Usei transformações 3D para criar o efeito de virar as cartas:

• Transformação Inicial: As cartas começam viradas para baixo com rotateY(180deg).
• Virada: Ao adicionar a classe que indica que a carta está aberta, ela gira para rotateY(0deg), revelando o emoji.

Efeito de Shake para Pares Incorretos

Para fornecer feedback imediato quando o jogador erra:

• Animação de Shake: As cartas tremem horizontalmente, indicando a correspondência incorreta.
• Aplicação: Adiciono uma classe que ativa a animação e a removo após sua conclusão.

Toast de Vitória com Barra de Progresso

Ao completar o jogo:

• Notificação Visível: Um toast aparece no canto superior direito.
• Barra de Progresso: Uma barra diminui em largura, mostrando o tempo restante antes do toast desaparecer.
• Sincronização: A duração da animação da barra corresponde ao tempo de exibição do toast.

⚙️ Sincronização entre JavaScript e CSS

Para que tudo funcione harmoniosamente, sincronizei cuidadosamente as ações do JavaScript com as animações do CSS:

• Tempos Precisos: Usei setTimeout para corresponder aos tempos das animações.
• Reinício de Animações: Em alguns casos, forcei o navegador a reprocessar elementos para reiniciar animações, acessando propriedades como offsetWidth.
• Gerenciamento de Classes: Adicionei e removi classes no momento certo para iniciar e terminar animações.

🧪 Testes e Aprendizados

Testei o jogo extensivamente para garantir que tudo funcionasse como esperado:

• Testes Manuais: Joguei várias vezes para verificar diferentes cenários.
• Depuração: Usei o console do navegador para identificar e corrigir erros.
• Otimizações: Ajustei tempos e animações para uma experiência fluida.

📝 Conclusão

Desenvolver este jogo foi uma experiência enriquecedora que consolidou meu entendimento sobre manipulação do DOM, algoritmos eficientes e animações em CSS. Espero que ao compartilhar meu processo, possa inspirar outros desenvolvedores a explorar e criar projetos similares.

🚀 Como Recriar Este Projeto

Explore meu GitHub, onde compartilho projetos interessantes e soluções criativas. Se você gostar, não hesite em deixar uma estrela ⭐️ e contribuir para o crescimento colaborativo. Sua participação é muito bem-vinda! 🚀

Clique Aqui para Jogar

Clique Aqui para o Github