BeatMap es un juego de ritmo por círculos moderno, dinámico y totalmente responsivo diseñado para ejecutarse directamente en el navegador. Fusiona la precisión táctil de los juegos de ritmo clásicos con una potente suite de análisis de frecuencias de audio que permite generar mapas de ritmo jugables e instantáneos a partir de cualquier archivo MP3 o importar canciones en formato .osu.
- 🎧 Generación Inteligente de Ritmo desde MP3: Carga cualquier archivo de audio y el algoritmo detectará automáticamente el BPM, los transitorios de bajos y la intensidad musical para crear un patrón de notas sincronizado.
- 📂 Soporte para Formato
.osu: Importa mapas de la comunidad de osu! de forma directa y juega con configuraciones exactas de aproximación (AR), tamaño de círculo (CS) y dificultad (OD). - ⚡ Motor Gráfico en Canvas 2D: Renderizado ultra rápido a 60/120 FPS con rastro de cursor, animaciones de contracción de círculos de aproximación (Approach Circles) y retroalimentación de impactos visuales.
- 🎮 Canciones Precargadas: Incluye una selección por defecto equilibrada en todas las dificultades (Fácil, Normal, Difícil, Experto) con portadas personalizadas listas para jugar.
- 📊 Sistema de Puntuación y Resultados: Evaluación precisa en tiempo real de combo máximo, precisión porcentual, desglose de notas (300 / 100 / 50 / Fallos) y calificación por grado (S, A, B, C, D) con efectos de celebración.
- ✨ Estética Neón Cyberpunk: Interfaz de usuario pulida con efectos de brillo ambiental, desenfoque esmerilado (Backdrop Blur), transiciones fluidas con GSAP y personalización de controles.
- Framework & Core: React 19, TypeScript, Vite
- Estilos & Diseño: Tailwind CSS v4, Lucide React
- Animaciones & Efectos: GSAP (GreenSock), Canvas-Confetti
- Motor de Audio: Web Audio API nativo con AudioContext decodificado de baja latencia
- Linter de Alta Velocidad: Oxlint
Sigue estos pasos para clonar y ejecutar el proyecto localmente en tu computadora:
Asegúrate de tener instalados:
- Node.js (versión 18 o superior recomendada, v20+)
- Gestor de paquetes: pnpm (recomendado),
npmoyarn
git clone https://github.com/tu-usuario/beatmap.git
cd beatmap# Con pnpm (recomendado)
pnpm install
# O con npm
npm install# Con pnpm
pnpm run dev
# O con npm
npm run devAbre tu navegador en la URL indicada por la terminal (usualmente http://localhost:5173).
# Compilar TypeScript y empaquetar con Vite
pnpm run build
# Previsualizar el build de producción localmente
pnpm run preview- Golpear Círculos: Teclas
ZyX(o el Clic Izquierdo del Ratón). - Pausar / Reanudar: Barra espaciadora (
ESPACIO) o teclaEscape. - Las teclas de golpe
K1yK2se pueden reconfigurar directamente desde el panel de ajustes en el menú principal.



