MemoryMatch - HouseJs

Um jogo da memória temático da Comunidade HouseJs, desenvolvido para promover o engajamento e diversão entre os membros da comunidade.

🎮 Sobre o Jogo

MemoryMatch é um jogo da memória com temática da HouseJs, uma comunidade voltada para desenvolvedores júnior na área de tecnologia. O jogo apresenta cards com tecnologias e valores da comunidade, oferecendo uma experiência interativa e educativa.

🎯 Objetivo

O jogador deve encontrar todos os pares de cards em até 2 minutos. O jogo começa com 15 segundos para memorizar a posição dos cards antes que sejam virados.

🃏 Cards do Jogo

Tecnologias

• JavaScript
• TypeScript
• HTML
• CSS
• Java (card especial com humor interno da comunidade)

Valores da Comunidade

• Acolhimento
• Colaboração
• Dedicação
• Parceria

Atividades da Comunidade

• Aulões
• Girls (grupo feminino)
• Podcast
• Cafézin (com texto especial)

Card Especial

• Logo da Comunidade HouseJs

Total: 14 pares (28 cards) organizados em grade 7x4

🎮 Como Jogar

1. Menu Principal: Escolha entre "Iniciar Jogo" ou "Placar"
2. Nome do Jogador: Digite seu nome (máximo 20 caracteres) para começar
3. Fase de Memorização: Você tem 15 segundos para memorizar a posição dos cards
4. Jogo: Clique nos cards para virá-los e encontre os pares
5. Objetivo: Encontre todos os 14 pares em até 2 minutos
6. Pontuação: Sua pontuação é baseada no tempo restante quando completar o jogo

🏆 Sistema de Pontuação

• O placar classifica os jogadores pelo tempo restante
• Quanto mais tempo sobrar, melhor a colocação
• Os top 10 jogadores ficam salvos no placar local com seus nomes
• As pontuações são armazenadas no navegador (localStorage)
• Cada entrada no placar mostra: nome do jogador, tempo restante, data e hora

🚀 Tecnologias Utilizadas

• HTML5: Estrutura do jogo
• CSS3: Estilização e animações
• JavaScript ES6+: Lógica do jogo
• Tailwind CSS: Framework CSS para estilização
• LocalStorage: Armazenamento local do placar

🎨 Características Técnicas

Animações

• Transições suaves ao virar os cards (CSS 3D transforms)
• Animações de entrada dos cards
• Efeitos visuais para matches encontrados
• Animação de alerta no timer quando o tempo está acabando

Responsividade

• Layout adaptável para diferentes tamanhos de tela
• Grid responsivo que se ajusta em dispositivos móveis
• Interface otimizada para touch em dispositivos móveis

Easter Eggs

• Card especial do Java com referência interna à organizadora Rosana
• Logo personalizada da comunidade HouseJs

📱 Compatibilidade

• Navegadores modernos (Chrome, Firefox, Safari, Edge)
• Dispositivos desktop e mobile
• Touch screen support

🎯 Funcionalidades

• Menu principal interativo
• Modal para captura do nome do jogador
• Sistema de cronômetro com contagem regressiva
• Fase de memorização de 15 segundos
• Detecção automática de matches
• Sistema de pontuação por tempo restante
• Placar local com top 10 jogadores e seus nomes
• Modal de fim de jogo com resultado
• Opção de jogar novamente
• Interface responsiva
• Animações suaves
• Cards especiais temáticos
• Validação de entrada de nome do jogador

🔧 Como Executar

1. Clone ou baixe os arquivos do projeto
2. Abra o arquivo index.html em um navegador web
3. Não é necessário servidor - o jogo roda completamente no cliente

📁 Estrutura de Arquivos

memorymatch/
├── index.html      # Estrutura principal do jogo
├── styles.css      # Estilos e animações customizadas
├── game.js         # Lógica completa do jogo
└── README.md       # Documentação do projeto

💡 Futuras Melhorias

• Diferentes níveis de dificuldade
• Modo multiplayer local
• Mais temas visuais
• Sistema de conquistas
• Compartilhamento de pontuações
• Sons e efeitos sonoros
• Modo escuro/claro

👥 Sobre a HouseJs

A HouseJs é uma comunidade voltada para desenvolvedores junior, focada em:

• Acolhimento de novos desenvolvedores
• Ambiente colaborativo e cooperativo
• Crescimento profissional conjunto
• Networking e troca de experiências

---

Desenvolvido com ❤️ para a Comunidade HouseJs