Como construí um glossário de jogos de cartas brasileiros com HTML e JavaScript puro

Se você já jogou Buraco, Tranca ou Truco, sabe que cada jogo tem um vocabulário próprio. Morto, canastra limpa, manilha, 3 preto… são termos que confundem até jogadores experientes.

No Jogos do Rei, a maior plataforma de jogos de cartas do Brasil, percebemos que nossos jogadores precisavam de uma referência clara e acessível. A solução: um glossário público, totalmente estático, hospedado no GitHub Pages, sem frameworks, sem build steps — só HTML, CSS e JavaScript vanilla.

O desafio

1. Precisão: o conteúdo tinha que refletir fielmente as regras oficiais de cada modalidade (Buraco Aberto, Buraco Fechado, STBL, Tranca, Truco).
2. Acessibilidade: o site precisava funcionar bem em qualquer dispositivo, inclusive para nosso público principal (jogadores 60+, muitos em desktop).
3. Manutenção simples: queríamos que qualquer pessoa da equipe pudesse editar os termos sem precisar de conhecimento técnico avançado.
4. SEO: o glossário deveria aparecer em buscas por termos como "o que é morto no buraco", "regras da tranca", "como jogar truco paulista".

A solução técnica

Optamos por uma stack minimalista:

• HTML5 semântico – cada termo é um <article> com <h3> e <p>, facilitando a indexação.
• CSS Grid/Flexbox – layout responsivo que se adapta de mobile a desktop sem media queries complexas.
• JavaScript vanilla – uma função de busca client-side de ~20 linhas que filtra os termos em tempo real.
• GitHub Pages – hospedagem gratuita, com deploy automático via git push.

Exemplo do código de busca

function filtrarTermos() {
  const q = document.getElementById('search').value.toLowerCase();
  const cards = document.querySelectorAll('.term-card');
  let found = 0;
  cards.forEach(card => {
    const text = (card.getAttribute('data-termo') + ' ' + card.innerText).toLowerCase();
    const match = !q || text.includes(q);
    card.style.display = match ? '' : 'none';
    if (match) found++;
  });
  document.getElementById('no-results').style.display = (found === 0 && q) ? 'block' : 'none';
}

Bônus: página comparativa

Além dos glossários individuais, criamos uma página comparativa que coloca lado a lado as cinco modalidades disponíveis na plataforma. A tabela mostra diferenças como:

• Número de cartas
• Presença de curingão
• Permissão de trincas
• Regra para bater (ganhar a rodada)
• Complexidade estratégica

Essa página é especialmente útil para jogadores que querem experimentar uma nova modalidade e precisam entender rapidamente o que muda.

Resultados

• Indexação rápida: o site apareceu nos resultados do Google em menos de 48 horas.
• Feedback positivo: jogadores elogiaram a clareza e a facilidade de consulta.
• Baixa manutenção: desde o lançamento, fizemos apenas duas pequenas correções (typos).

Lições aprendidas

1. Vanilla JS ainda é poderoso – para projetos de conteúdo estático, frameworks são overkill.
2. SEO orgânico ama HTML semântico – usar <table> para tabelas comparativas gerou rich snippets automaticamente.
3. Performance é feature – o site carrega em <1s mesmo em conexões lentas, porque não há nada além de arquivos estáticos.
4. Documentação é produto – um glossário bem feito reduz suporte (menos perguntas sobre regras) e engaja a comunidade.

O código está aberto

Todo o projeto está disponível no GitHub: jogosdorei/glossario-buraco. Sinta-se à vontade para usar como base para seus próprios glossários ou sites de referência.

E você? Já construiu algo similar?

Conta aí nos comentários se você já fez algum projeto de documentação técnica com stack minimalista. Quais foram os desafios e acertos?

Este artigo foi escrito pelo Ace, personagem do Jogos do Rei, plataforma com mais de 3 milhões de jogadores de cartas online no Brasil.