¿Te consideras un apasionado de los perros o te gusta poner a prueba tus conocimientos con juegos rápidos e interactivos? Hoy presentamos Adivina la Raza, una aplicación web ligera, moderna y 100% responsiva donde podrás poner a prueba tu agudeza visual identificando más de 100 razas y subrazas caninas de todo el mundo.
Esta plantilla no solo está pensada para divertir a los usuarios, sino que también es un excelente ejemplo práctico de cómo construir una web app completa con tecnologías nativas (Vanilla JS), sin necesidad de cargar pesados frameworks de terceros.
🎮 ¿Cómo funciona el juego?
La dinámica es sumamente intuitiva y adictiva, diseñada para partidas rápidas desde teléfonos móviles, tablets o computadoras:
Rondas y Tiempo: Cada partida consta de 10 imágenes aleatorias seleccionadas al azar. Tienes un límite de 15 segundos por fotografía.
Sistema de Puntuación Dinámico: No basta solo con acertar. El juego premia tu velocidad: entre más rápido selecciones la respuesta correcta, mayor será el bono de puntos extra que recibirás.
Contador de Rachas: Si encadenas varios aciertos consecutivos, acumularás una racha de victorias que pondrá a prueba tu precisión.
Traducción Automática al Español: Aunque las APIs internacionales suelen enviar datos únicamente en inglés, el juego cuenta con un diccionario interno que mapea e interpreta los nombres para mostrarlos correctamente en español (por ejemplo: "French Bulldog" pasa a "Bulldog Francés").
Persistencia de Récord Personal: Utiliza el almacenamiento local del navegador (
localStorage) para registrar tu puntuación máxima, permitiéndote competir contra ti mismo cada vez que vuelves a entrar.Web Share API Integrada: Al finalizar la partida, puedes compartir tu puntuación directamente a tus redes sociales o copiar tu resultado al portapapeles con un solo toque.
🌐 ¿De dónde provienen las fotos y los datos? (La API Dog CEO)
El núcleo visual y de datos de esta aplicación se alimenta de Dog CEO API (dog.ceo/api), la base de datos pública y gratuita de código abierto más grande dedicada al mundo canino en internet.
🔬 Detalles Técnicos de la Integración
Peticiones Asíncronas (
fetch/async-await): La aplicación consulta la API para obtener la lista global de razas (/breeds/list/all) y luego solicita una fotografía aleatoria específica para la raza seleccionada (/breed/{raza}/images/random).Optimización por Precarga (Pre-fetching): Para evitar pantallas en blanco o esperas molestas entre preguntas mientras carga la imagen desde internet, el código implementa un sistema de precarga inteligente: mientras el jugador responde la pregunta actual, la siguiente foto ya se está descargando en segundo plano.
Tolerancia a fallos de red: Incluye un sistema de reintentos (retries) y control de tiempos de espera (AbortController) para garantizar que, si la conexión falla o parpadea, la app intente reconectarse antes de mostrar un mensaje de error claro al usuario.
🛠️ Ficha Técnica del Código
| Característica | Detalle Técnico |
| Lenguaje Base | HTML5 Semántico + JavaScript (ES6+) |
| Estilos | CSS Variables (Custom Properties), Flexbox y CSS Grid |
| Diseño / Tema | Modo oscuro (Dark Forest) con gradiente radial y detalles en verde/amarillo neón |
| Fuentes e Iconos | Google Fonts (Outfit) y FontAwesome 6.5 |
| Almacenamiento | localStorage nativo del navegador |
| Compatibilidad | 100% Responsivo (Móviles, Tablets, PC y control por teclado) |
Descargar Aca
