Cosmic Crush
Juego match-3 en el navegador
Juego match-3 tipo Candy Crush desarrollado completamente en el navegador. 30 niveles con cascadas, combos, power-ups y rendering a 60fps en Canvas.
El problema
Quería experimentar con rendering de alto rendimiento en Canvas 2D, animaciones fluidas y arquitectura de estado compleja en un proyecto divertido y autocontenido — sin backend, sin APIs, puro frontend.
La solución
Cosmic Crush es un juego match-3 completo que corre 100% en el navegador. El jugador intercambia piezas adyacentes para formar filas o columnas de 3+ del mismo color, generando cascadas, combos y power-ups.
Mecánicas del juego
- Tablero 8×8 (nivel 30: 9×9), 5-6 colores por nivel
- Matches horizontales/verticales de 3+, detección de formas L/T
- Cascadas con multiplicador de combo (×1.5 por cascada)
- Power-ups: Striped (4 en línea → elimina fila/columna), Wrapped (L/T → explosión 3×3), Color Bomb (5+ → elimina todo un color)
- Validación de movimientos: solo swaps que generen match; reshuffle automático si no hay movimientos
- Sistema de estrellas: 1★ = completar, 2★ = 30%+ movimientos restantes, 3★ = 60%+ restantes
- Hints tras 4 segundos de inactividad
Stack técnico
- UI: React 19 + TypeScript
- Build: Vite
- Estilos: Tailwind CSS 4
- Animaciones: Framer Motion 12 + Canvas API custom
- Estado: Zustand 5 (3 stores: game, progress, theme)
- Efectos: canvas-confetti + partículas custom
- Testing: Vitest
- Backend: Ninguno — 100% client-side, localStorage
Arquitectura
Separación clara: lógica de juego (pura, testeable) → renderizado Canvas → componentes React → estado Zustand. Rendering a 60fps, responsive mobile + desktop, interfaz en español.
Características visuales
6 temas intercambiables: Clásico (esferas glossy), Frutas, Caritas, Animales, Comida y Deportes. Progreso persistente con localStorage (estrellas, mejores puntajes, niveles desbloqueados).