🔢 Adivina el Número (Minijuego Estilo Mastermind)

¡Bienvenido a Adivina el Número! Un minijuego interactivo de lógica y deducción desarrollado para la web. Como aspirante a desarrollador, he creado este proyecto para mi portfolio, demostrando mis habilidades y buenas prácticas en la manipulación del DOM, programación en JavaScript, y diseño UI/UX.

---

🎮 Reglas del Juego

El objetivo es descubrir una combinación secreta generada por la computadora.

1. La Combinación Secreta: La computadora genera un número de 4 dígitos únicos (del 0 al 9).
2. Intentos Disponibles: Tienes un máximo de 5 intentos para adivinar la combinación exacta.
3. Pistas de Colores: En cada turno, ingresas 4 números y el juego te dará pistas visuales a través de un código de color para cada casilla:
   • 🟩 Verde (Correcto): El número es correcto y está en la posición exacta.
   • 🟨 Amarillo-Anaranjado (Parcial): El número forma parte de la combinación secreta, pero su posición es incorrecta.
   • 🟥 Rojo (Incorrecto): El número no forma parte de la combinación secreta en absoluto.
4. Victoria/Derrota: Ganas si logras acertar los 4 números en su posición exacta antes de que se agoten tus intentos. De lo contrario, se revelará la solución y podrás volver a intentarlo.

---

🛠️ Tecnologías y Herramientas Utilizadas

Este proyecto ha sido construido desde cero (Vanilla), empleando exclusivamente tecnologías fundamentales de la web para asegurar el máximo rendimiento y control sobre el código, sin depender de librerías ni frameworks pesados de terceros:

• HTML5:
  • Marcado estructurado y semántico.
  • Implementación de atributos precisos (por ej., inputmode="numeric", maxlength y autocomplete="off") para mejorar la accesibilidad y UX en pantallas táctiles y teclados móviles.
• CSS3 (Vanilla):
  • Diseño moderno usando el estilo visual Glassmorphism (efecto de cristal esmerilado).
  • Uso intensivo de Flexbox para la alineación y distribución del contenido de forma fluida.
  • Diseño 100% Responsive, que se adapta sin problemas a escritorios, tablets y móviles a través de Media Queries.
  • Animaciones y transiciones suaves personalizadas con @keyframes (botones flotantes, modals en pop-up y fondos dinámicos).
• JavaScript (ES6+):
  • Manipulación directa y eficiente del DOM (getElementById, createElement, appendChild, manipulación de classList).
  • Gestión compleja del estado del juego (conteo de rondas, almacenamiento temporal en arrays, reinicio limpio del estado de la interfaz).
  • Creación de funciones de utilidad modularizadas (generación de un array con números aleatorios únicos).
  • Manejo sofisticado de Eventos (addEventListener):
    • Control inteligente del foco del teclado (salto automático al siguiente input al teclear, retorno al anterior al usar Backspace).
    • Captura de la tecla Enter y validación preventiva contra caracteres no numéricos.

---

✨ Características Destacadas

• Código Limpio y Modular: Mantenibilidad y legibilidad priorizadas en el código base, separando claramente responsabilidades de maquetación de la lógica matemática.
• UX (Experiencia de Usuario) Intuitiva: El enfoque y la navegación mediante teclado a través de los pequeños inputs brindan una experiencia "frictionless". Ventanas modales limpias capturan los resultados del juego impidiendo la sobrecarga visual.
• Detección de Errores Preventiva: Lógica anti-vacíos en el envío del formulario, que dirige automáticamente el foco del usuario de vuelta a la primera ranura vacía en vez de arrojar un error y frustrarlo.

---

🚀 Instalación y Despliegue

Puedes jugar una Demo en Vivo de este proyecto pulsando aquí (Añadir URL del despliegue en GitHub Pages, Vercel o Netlify).

Si por el contrario deseas ejecutarlo de forma local en tu máquina:

1. Clona el repositorio a tu equipo:

   git clone https://github.com/carlosmorenodev/minijuego-numeros.git

2. Accede al directorio recién creado:

   cd minijuego-numeros

3. Puesto que es un proyecto estático sin dependencias, no requieres ejecutar comandos de instalación con npm. Simplemente puedes:
   • Abrir el archivo index.html directamente haciendo doble clic.
   • O bien utilizar una extensión de tu editor de código favorita como Live Server (en VSCode) para previsualizarlo.

---

👨‍💻 Sobre el Autor

Soy Carlos Moreno, un desarrollador enfocado en la creación de interfaces interactivas, funcionales y con un código altamente mantenible. Me apasiona seguir aprendiendo y crear soluciones valiosas en la web día a día.

¡Estoy abierto a nuevas oportunidades laborales! Puedes revisar mi portfolio completo, conectar conmigo en LinkedIn, o enviarme un correo directamente a través de los enlaces a continuación:

"El código es como el humor. Cuando tienes que explicarlo, es que es malo." – Cory House