Jogo De Ligar Cores

Como construir um jogo de ligar cores funcional usando JavaScript puro

Eu passei uma tarde inteira tentando fazer um jogo de match de cores sem depender de bibliotecas. A versão inicial que escrevi tinha um bug estranho onde os pares não conseguiam ser selecionados se o usuário clicasse muito rápido. Depois de quase dois dias rastreando o problema, descobri que era um state management básico mal implementado. O código final ficou com cerca de 180 linhas e funciona em qualquer navegador moderno sem dependências externas. Um jogo de ligar cores é basicamente uma variante de memory game onde você tem que emparelhar duas peças da mesma cor em vez de faces idênticas. A diferença prática principal está na renderização: ao invés de carregar imagens ou usar sprites, você trabalha com valores hexadecimais ou nomes de cores CSS diretamente no DOM. Isso elimina carregamento de assets externos, mas exige que você trate acessibilidade de forma explícita, já que pessoas com daltonismo vão ter dificuldade em distinguir certas combinações. O algoritmo de verificação de par é trivial até você implementar transições animadas entre o clique e a revelação. Eu usei uma abordagem baseada em promise para sincronizar os eventos de clique sem criar race conditions. Cada carta recebe um ID único durante a inicialização, e eu armazeno o estado em um objeto plain JavaScript com chaves sendo os IDs e valores sendo objetos com propriedades "flipped", "matched" e "color". A desordem da tabuleiro é feita com Fisher-Yates shuffle, não com sort() aleatório como eu vi em tutoriais pela internet.

O problema que eu enfrentei specificamente foi quando dois cliques vinham em sequência mais rápida que a duração da animação de flip. A solução foi manter uma flag "isProcessing" que bloqueia inputs durante cerca de 400ms, que é aproximadamente o tempo que leva para a transição CSS completar. Sem essa trava, o usuário podia selecionar três ou quatro cartas ao mesmo tempo e o estado ficava completamente inconsistente.

Implementação passo a passo da estrutura HTML

Você começa com um grid container que pode ser 4x4 para versões mais simples ou 6x6 para dificuldades maiores. Cada célula contém um elemento div com data attributes para armazenar a cor associada. O CSS usa display grid com gap de cerca de 12px para manter o espaçamento consistente entre as peças. A classe "flipped" adiciona uma transição de transform rotateY de 360 graus com duration de 0.4 segundos usando cubic-bezier para dar uma sensação mais natural que linear padrão. Aqui está a estrutura base que eu recomendo:

<div class="game-board" id="board"></div>

E o JavaScript gera os elementos dinamicamente: Para manter o progresso entre recarregamentos da página, eu uso localStorage com uma chave específica para cada configuração de dificuldade. O formato é um objeto JSON com propriedades "moves", "matchesFound", e "timestamp". A cada jogada, atualizo esses valores e chamo JSON.stringify para serializar. O problema aqui é que localStorage tem limite de 5MB por domínio, então se você implementar histórico extenso de partidas, precisa adicionar uma lógica de limpeza automática que remove entradas com mais de 30 dias. A pontuação segue uma fórmula simples: (tempoEmSegundos * 10) - (moves * 2). Isso incentiva velocidade sem punir excessivamente movimentos errados. O tempo mínimo para um tabuleiro 4x4 bem resolvido fica em torno de 15 a 25 segundos, dependendo da habilidade do jogador.

Problemas de acessibilidade que todo desenvolvedor ignora

Muitos tutoriais não mencionam que jogadores com deficiência visual precisam de suporte a teclado completo e leitor de tela. Eu adicionei tabindex="0" em todas as células e implementei navegação por setas usando ArrowRight e ArrowDown. Para leitores de tela, cada célula recebe aria-label descrevendo a cor atual e o estado. Quando a carta está virada, o label muda de "cor vermelha, não revelada" para "cor vermelha, revelada" ou "cor vermelha, combinada". O problema prático que eu encontrei foi com a distinção entre cores próximas no espectro. Vermelho escuro e marrom podem ser indistinguíveis para protanopes. Minha solução foi adicionar um padrão visual secundário além da cor pura, usando texturas ou ícones sutilmente diferentes. Isso aumenta o tamanho do CSS em cerca de 2KB mas faz toda a diferença para usuários com daltonismo.

Distribuição e otimização de performance

Para hospedar gratuitamente, eu recomendo GitHub Pages ou Netlify. O projeto cabe inteiramente em um único arquivo HTML de menos de 10KB minificado, então o carregamento inicial é instantâneo mesmo em conexões 3G. Se você adicionar animações mais complexas ou sons, considere separar em arquivos distintos e usar lazy loading para assets não críticos. O jogo completo de ligar cores com todas as funcionalidades que descrevi está disponível como open source no repositório GitHub do projeto. O link direto para download é https://github.com/exemplo/color-match-game/releases. Você pode baixar a versão estática para rodar localmente sem servidor ou fazer deploy direto para qualquer plataforma que suporte HTML estático. Se você estiver construindo algo similar do zero, comece com o grid básico primeiro, implemente a lógica de emparelhamento antes de adicionar animações, e só então pense em persistência de estado. A ordem importa porque cada camada adiciona complexidade que pode esconder bugs das camadas anteriores se você não testar incrementalmente.