Wordles
Realizado durante el año 2020
Este proyecto es la presentación final que tuve que realizar para la carrera Backend de Coder House. Fue una oportunidad para volver a lo simple: ¿Puedo recrear la lógica y la fluidez del Wordle original sin instalar una sola dependencia?
El desafío no estaba en la complejidad de la arquitectura, sino en estudiar más a fondo los básico, como la manipulación directa del DOM.
1. La Grilla y la Escucha de Eventos
Lo primero fue resolver la interacción. Necesitaba capturar el teclado del usuario y reflejarlo en una matriz visual (la grilla de 5x6). En lugar de crear inputs individuales, opté por escuchar el evento global del teclado.
Esto mantiene el HTML limpio y me da control total sobre qué teclas permito (solo letras, Enter y Backspace):
// Escuchamos todo el teclado, pero filtramos la lógica
document.addEventListener("keydown", (e) => {
const key = e.key.toLowerCase();
if (key === 'enter') {
checkRow(); // Momento de validar
return;
}
if (key === 'backspace') {
deleteLetter(); // Borrar la última letra
return;
}
if (key.match(/^[a-z]$/)) {
addLetter(key); // Solo si es una letra válida
}
});
2. La Lógica de Validación
La parte más interesante fue escribir el algoritmo que decide los colores. No basta con saber si la letra existe en la palabra; hay que saber si está en la posición correcta o si ya fue contada (para evitar duplicados falsos).
Tuve que recorrer la palabra ingresada y compararla índice por índice con la solución oculta, asignando clases de CSS dinámicamente:
function checkRow() {
const guess = currentGuess.join('');
const solution = getSolution(); // Palabra oculta
rowTiles.forEach((tile, index) => {
const letter = guess[index];
if (letter === solution[index]) {
tile.classList.add('correct'); // Verde
} else if (solution.includes(letter)) {
tile.classList.add('present'); // Amarillo
} else {
tile.classList.add('absent'); // Gris
}
});
}
3. Feedback Visual con CSS Puro
Para que el juego no se sintiera estático, usé CSS moderno. La grilla está construida con CSS Grid, lo que facilita el centrado y la responsividad.
Las animaciones (como el giro de las letras al revelar el color) no necesitan JavaScript complejo, solo alternar clases y dejar que CSS haga el trabajo sucio con @keyframes:
.tile.flip {
animation: flip 0.5s ease forwards;
}
@keyframes flip {
0% { transform: rotateX(0); }
50% { transform: rotateX(90deg); }
100% { transform: rotateX(0); }
}
Resultado: Un juego funcional, liviano y rápido con fundamentos de HTML, CSS y JS.