🎃 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, aplicação de animações CSS e adição de efeitos sonoros para proporcionar uma experiência de usuário envolvente. Também me dediquei a tornar o jogo responsivo para diferentes dispositivos. 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.
• Efeitos sonoros para tornar o jogo mais imersivo.
• Música de fundo com opção para ativar ou desativar.
• Responsividade para funcionar em diferentes dispositivos.
• 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.
• Botão de Controle de Música: Permite ativar ou desativar a música de fundo.
• 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 e media queries para centralizar e organizar os elementos em diferentes tamanhos de tela.
• 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.
• Responsividade: Ajustei o layout e os elementos para que o jogo funcione bem em desktops, tablets e dispositivos móveis.

3. JavaScript

O JavaScript controla toda a lógica do jogo:

• Embaralhamento de Cartas: Implementei o algoritmo de 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.
• Efeitos Sonoros: Adicionei sons ao virar cartas, encontrar pares e errar.
• Música de Fundo: Implementei uma música ambiente que pode ser controlada pelo jogador.

🔄 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:

• Começamos com uma lista de emojis.
• Percorremos a lista de trás para frente.
• Para cada posição, selecionamos um elemento aleatório que ainda não foi embaralhado.
• 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:

• Seleção do Contêiner: Selecionei o elemento <div> onde as cartas seriam inseridas.
• Iteração sobre os Emojis: Iterei sobre o array de emojis embaralhados.
• Criação das Cartas:
• 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:

• Verificação: Checo se menos de duas cartas estão abertas e se a carta não está já aberta ou correspondida.
• Ação: Viro a carta para revelar o emoji.
• Atualização de Estado: Adiciono a carta a um array que rastreia as cartas abertas.
• Som: Reproduzo um som de virar carta para melhorar a imersão.

Verificação de Pares

Após duas cartas serem abertas:

• Desabilitar Cliques: Desativo cliques adicionais para evitar conflitos.
• Comparação: Verifico se os emojis correspondem.
• Correspondência Correta:
• Ação: Marco as cartas como correspondidas.
• Som: Reproduzo um som de correspondência.
• Atualização: Removo os eventos de clique dessas cartas.
• Correspondência Incorreta:
• Animação: Aplico a animação de shake como feedback.
• Som: Reproduzo um som de erro.
• Reversão: Viro as cartas de volta após a animação.
• Reabilitar Cliques: Reativo os cliques nas cartas.

Detecção de Vitória

Após cada tentativa bem-sucedida, verifico se todas as cartas foram correspondidas. Se sim:

• Notificação: Aciono a função que exibe o toast de vitória.
• Música de Fundo: A música continua ou pode ser controlada pelo jogador.

💅 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.
• Transições Suaves: As transições permitem que a mudança ocorra de forma suave.

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.

🔊 Implementação de Efeitos Sonoros e Música de Fundo

Para tornar o jogo mais imersivo, adicionei efeitos sonoros e uma música de fundo.

Criação Dinâmica de Elementos de Áudio

• JavaScript: Usei o objeto Audio() para criar elementos de áudio dinamicamente.
• Sons Implementados:
• Virar Carta: Som reproduzido ao virar uma carta.
• Correspondência Correta: Som de sucesso ao encontrar um par.
• Correspondência Incorreta: Som de erro ao não encontrar um par.
• Música de Fundo: Música ambiente tocada durante o jogo.

Controle de Reprodução

• Início Automático: A música de fundo tenta iniciar ao carregar a página.
• Políticas de Autoplay: Alguns navegadores podem bloquear a reprodução automática; portanto, também permito que o jogador ative a música manualmente.
• Botão de Controle de Música:
• Localização: Posicionado no canto superior esquerdo.
• Funcionalidade: Permite pausar ou reproduzir a música de fundo.
• Ícone Dinâmico: O ícone muda entre 🔊 e 🔇 conforme o estado da música.

Integração com Eventos do Jogo

• Sincronização: Os sons são reproduzidos nos momentos exatos das ações correspondentes.
• Controle de Volume: Ajustei o volume dos sons para uma experiência agradável.

📱 Tornando o Jogo Responsivo

Para garantir que o jogo seja acessível e agradável em diferentes dispositivos, implementei responsividade no design.

Uso de Unidades Flexíveis e Media Queries

• Layout Flexível: Utilize flexbox para organizar os elementos de forma adaptável.
• Unidades Relativas: Substituí unidades fixas (px) por relativas (%, em, rem).
• Media Queries: Ajustei estilos para diferentes larguras de tela.

Ajustes Específicos por Dispositivo

• Desktops:
• Cartas exibidas em 4 colunas.
• Tamanho máximo definido para as cartas.
• Tablets:
• Redução do tamanho das fontes e cartas para caber na tela.
• Smartphones:
• Mantive as 4 colunas de cartas.
• Ajustei o espaçamento e tamanho das cartas para caber na tela menor.
• Elementos e textos dimensionados para facilitar a interação.

Testes de Responsividade

• Testes em Diferentes Dispositivos: Usei ferramentas de desenvolvedor e dispositivos reais para garantir que o jogo se adapte corretamente.
• Ajustes Finais: Refinamentos no CSS para melhorar a experiência do usuário em cada tamanho de tela.

⚙️ Sincronização entre JavaScript, CSS e Áudio

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

• Tempos Precisos: Usei setTimeout para corresponder aos tempos das animações e sons.
• 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.
• Controle de Áudio: Certifiquei-me de que os sons não se sobreponham indevidamente, reiniciando o tempo dos áudios quando necessário.

🧪 Testes e Aprendizados

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

• Testes Manuais: Joguei várias vezes em diferentes dispositivos para verificar diferentes cenários.
• Depuração: Usei o console do navegador para identificar e corrigir erros.
• Otimizações: Ajustei tempos, animações e volumes para uma experiência fluida.
• Feedback de Usuários: Compartilhei o jogo com amigos e familiares para obter opiniões e melhorar o design.

📝 Conclusão

Desenvolver este jogo foi uma experiência enriquecedora que consolidou meu entendimento sobre manipulação do DOM, algoritmos eficientes, animações em CSS, efeitos sonoros e design responsivo. Acredito que a combinação desses elementos resultou em um jogo envolvente e divertido. 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