🎮 BFS Game - Algoritmo de Búsqueda en Amplitud Interactivo

📖 Descripción

Una aplicación web interactiva para aprender el algoritmo BFS (Breadth-First Search) de manera visual y práctica. Los estudiantes pueden explorar paso a paso cómo funciona el algoritmo BFS en un grafo, con dos modos diferentes de aprendizaje.

🎯 Características

📚 Modo Estudio

• Navegación manual paso a paso
• Visualización del algoritmo BFS en tiempo real
• Pseudocódigo resaltado según el paso actual
• Control total sobre la velocidad de aprendizaje

🎮 Modo Juego

• Preguntas interactivas sobre el algoritmo
• Sistema de puntuación con medallas
• 13 preguntas diferentes sobre BFS
• Retroalimentación inmediata

🏆 Sistema de Medallas

• 🥇 Oro (90-100%): ¡Excelente! Dominas el algoritmo BFS
• 🥈 Plata (75-89%): ¡Muy bien! Buen conocimiento del BFS
• 🥉 Bronce (60-74%): ¡Bien! Sigue practicando el BFS
• 🏅 Participación (40-59%): Continúa estudiando el algoritmo
• 📚 Estudiante (0-39%): Te recomendamos revisar la teoría

🎨 Visualización

• Grafo interactivo con Cytoscape.js
• Nodos coloreados según su estado:
  • Gris: No visitado
  • Verde: Visitado
  • Rojo: Nodo actual siendo procesado
• Estado del algoritmo en tiempo real (cola, visitados, actual)

🚀 Demo en Vivo

URL: [Será actualizada después del deployment]

🛠️ Tecnologías Utilizadas

• React 19 - Framework de interfaz de usuario
• Vite - Herramienta de build y desarrollo
• Cytoscape.js - Visualización de grafos
• JavaScript ES6+ - Lógica de la aplicación

📚 Uso Educativo

Esta aplicación está diseñada para:

• Estudiantes que aprenden algoritmos de grafos
• Profesores que enseñan estructuras de datos
• Cualquier persona interesada en algoritmos BFS

📋 Conceptos que se Aprenden:

• Funcionamiento del algoritmo BFS
• Uso de colas (FIFO) en algoritmos
• Recorrido de grafos nivel por nivel
• Estados de nodos (visitado/no visitado)
• Complejidad temporal y espacial

👥 Audiencia

• Nivel: Estudiantes de ciencias de la computación
• Prerrequisitos: Conocimientos básicos de estructuras de datos
• Edad recomendada: 16+ años

🎓 Beneficios Educativos

1. Aprendizaje Visual: Ver el algoritmo en acción
2. Práctica Interactiva: Responder preguntas sobre cada paso
3. Autoevaluación: Sistema de medallas y puntuación
4. Ritmo Personal: Control sobre la velocidad de aprendizaje

📱 Compatibilidad

• ✅ Navegadores: Chrome, Firefox, Safari, Edge
• ✅ Dispositivos: Desktop, tablet, móvil
• ✅ Responsive: Se adapta a diferentes tamaños de pantalla

🔧 Instalación Local (Desarrollo)

# Clonar el repositorio
git clone [URL_DEL_REPOSITORIO]

# Instalar dependencias
npm install

# Ejecutar en modo desarrollo
npm run dev

# Construir para producción
npm run build

# Vista previa del build
npm run preview

📄 Licencia

Este proyecto es de uso educativo libre.

👨‍🏫 Autor

Desarrollado para fines educativos en el aprendizaje de algoritmos de grafos.

---

¡Explora, aprende y domina el algoritmo BFS de manera interactiva! 🚀