Uma implementação em desenvolvimento do jogo Termo (versão em português do Wordle) com suporte a múltiplos modos de jogo. Desenvolvido com HTML5, CSS3 e JavaScript vanilla (ES6+).
Termo Clone é um jogo de adivinhação de palavras inspirado no viral Wordle/Termo, onde:
- O jogador tem 6 tentativas para adivinhar uma palavra de 5 letras
- Cada letra recebe feedback visual:
- 🟩 Verde: letra correta na posição correta
- 🟨 Amarelo: letra correta em posição errada
- ⬜ Cinza: letra não está na palavra
- O teclado visual se atualiza com o feedback a cada tentativa
- Suporte a entrada por teclado físico ou cliques no teclado virtual
- Grid 5x6 para 6 tentativas com 5 letras cada
- Seleção visual de quadrado ativo (clique ou setas)
- Entrada de letras via teclado físico ou virtual
- Validação de palavras contra banco de dados (words.json)
- Algoritmo inteligente de comparação de palavras
- Detecta letras repetidas corretamente
- Prioritiza letras verdes sobre amarelas
- Gerencia "estoque" de letras para evitar falsas positivas
- Feedback visual com animações (flip cascata, shake)
- Atualização dinâmica do teclado com cores
- Detecção de vitória/derrota
- Grid duplo: 2 grids 5x7 lado a lado
- Lógica de bloqueio de linhas quando jogador vence
- Entrada simultânea em ambas as linhas
- Teclado visual com feedback bi-cromático (split colors)
- Menu de conclusão/compartilhamento
- Grid 4 vezes maior (matriz de palavras)
- Mecânica de "snake" para selecionar palavras adjacentes
- Validação de sequências
- Navegador moderno com suporte a:
- ES6+ (async/await, arrow functions)
- Fetch API
- DOM Manipulation
git clone https://github.com/NicolasSG/termo-clone.git
cd termo-cloneAbra o arquivo index.html no navegador ou use uma extensão como Live Server:
# Com Live Server no VS Code
# Clique direito em index.html > "Open with Live Server"O jogo carrega palavras de um arquivo words.json que deve estar na raiz do projeto:
[
"ABACA",
"ABADE",
...
]- A-Z: Digitar letras
- Enter: Confirmar palavra
- Backspace: Deletar letra
- Clique nas letras do teclado virtual: Digitar
- Clique nos quadrados da grid: Mudar quadrado ativo
termo-clone/
├── index.html # Estrutura semântica + templates
├── style.css # Estilos (CSS Grid, Flexbox, animações)
├── script.js # Lógica do jogo (ES6+)
├── words.json # Banco de palavras
└── assets/ # Ícones e imagens
Usa <template> tags para renderizar diferentes modos de jogo sem duplicação de código:
const template = document.querySelector("#termo__template");
container.appendChild(template.content.cloneNode(true));Listeners centralizados na grid e teclado para melhor performance:
keyboard.addEventListener("click", (e) => {
if (e.target.classList.contains("kbd__backspace")) {
removeLetter();
}
// ...
});Implementação robusta que evita falsos positivos com letras repetidas:
function compareWords(secret, guess) {
// 1. Conta frequência de letras na palavra secreta
// 2. Marca letras verdes e remove do "estoque"
// 3. Marca letras amarelas apenas se houver "estoque" disponível
// 4. Retorna array com cores para cada posição
}Carregamento dinâmico de dados e animações:
async function revealSequence(squares, colors) {
for (let i = 0; i < squares.length; i++) {
squares[i].classList.add(`grid__letter-color_${colors[i]}`);
await sleep(200); // Efeito cascata
}
}- Flip cascata: Rotação em 3D das letras (200ms stagger)
- Shake: Vibração quando palavra inválida
- Fade in: Cores do teclado aparecem suavemente
[ ] Estrutura de grid 4x4 com mini-grids internos
[ ] Mecânica de movimento tipo "snake"
[ ] Validação de adjacência (horizontal, vertical, diagonal)
[ ] Renderização dinâmica com template
[ ] Lógica de vitória (todas as 16 mini-palavras)
[ ] Armazenar dados no localStorage
[ ] Rastrear:
[ ] Total de jogos
[ ] Jogos ganhos
[ ] Taxa de vitória
[ ] Distribuição (tentativa 1, 2, 3... 6)
[ ] Sequência de vitórias
[ ] Mostrar modal com gráficos
[ ] Compartilhamento de resultado (emoji)
[ ] Modal de ajustes
[ ] Tema claro/escuro
[ ] Dificuldade (palavras fáceis vs. desafio)
[ ] Idioma (português vs. inglês)
[ ] Resetar estatísticas
[ ] Som on/off
[ ] Modal de "Como Jogar"
[ ] Feedback sonoro
[ ] Animação de vitória confetti
[ ] Compartilhamento em redes sociais
[ ] Versão mobile otimizada
[ ] Dark mode
O código detecta o modo de jogo e adapta a lógica automaticamente:
if (gameType === "termo") {
// Usa activeRow único
} else if (gameType === "dueto") {
// Usa activeRow2 (array com 2 linhas)
}As cores são aplicadas ao teclado com prioridade:
- 🟩 Verde = 3
- 🟨 Amarelo = 2
- ⬜ Cinza = 1
Exemplo: Se uma letra foi amarela, clicar na palavra anterior que ela é verde não anula o amarelo.
Cada tecla do Dueto pode ter 2 cores diferentes (uma para cada jogador):
element.style.setProperty("--first_dueto_color", resolvedColor1);
element.style.setProperty("--second_dueto_color", resolvedColor2);- Validação de entrada case-insensitive na busca de palavras
- Cursor responsivo em mobile
- Suporte a acentos/caracteres especiais (AÇÃO, AÇÚCAR, etc.)
- Otimização de performance para 10k+ palavras
- Animações com
requestAnimationFrame
O projeto é mobile-first, mas ainda está em desenvolvimento para otimizações finais:
- ✅ Grid adapta para telas pequenas
⚠️ Teclado virtual precisa de ajustes de espaço⚠️ Modo Dueto pode ficar cramped em mobile
- Wordle Original - Inspiração
- Termo (versão PT) - Referência local
- MDN - Fetch API
- MDN - Template Element
- CSS Tricks - Grid
Durante este projeto, aprendi:
- Algoritmos de comparação robustos - Lidar com letras repetidas sem falsas positivas
- Gerenciamento de estado complexo - Manter sincronização entre grid, teclado e lógica
- Template elements - Reutilizar HTML dinamicamente sem innerHTML
- CSS animations - Efeitos visuais com timing e cascata
- Async JavaScript - Fetch de dados e delays de animação
- Event delegation - Performance otimizada para múltiplos elementos
Este projeto é de código aberto para fins educacionais. Sinta-se livre para clonar, modificar e aprender!
Sugestões e melhorias são bem-vindas! Abra uma issue ou faça um pull request.
Status: 🟡 Em Desenvolvimento
Versão: 0.2.0 (Termo + Dueto funcionais)
Próximas Features: Quarteto, Estatísticas, Configurações
Última atualização: Abril 2026