Código fuente de juego de ritmo: charts de notas, timing y canciones nuevas

Un código fuente de juego de ritmo son en realidad dos cosas: el código que juzga el timing y los datos que dicen cuándo llega cada nota. Quien compra casi siempre quiere cambiar lo segundo, porque las canciones nuevas son lo que hace suyo un juego de ritmo. Riffvolt, nuestra plantilla de rock de cuatro carriles, guarda la lista de canciones en un solo manifiesto y cada chart de notas en su propio archivo, así que agregar una canción es trabajo de datos con una lista clara.

Esta guía recorre el paquete: qué incluye el juego, dónde viven el timing y la puntuación, cómo agregar una canción, cómo compilar y publicar, qué permite la licencia y qué no incluye la edición. Los nombres de archivo vienen del manual que acompaña al juego.

Un dato para tener presente desde el inicio: a diferencia de algunas de nuestras plantillas, Riffvolt requiere compilar después de cambiar el código o agregar canciones. Publicar la carpeta del juego tal como viene solo pide un hosting estático.

Qué incluye este código fuente de juego de ritmo

Riffvolt es un juego de ritmo de rock terminado, de cuatro carriles, para el navegador. El jugador acierta las notas a tiempo, sostiene las notas largas hasta el final, las dobla con la palanca whammy y llena el medidor ROCK, que activa el overdrive, un show de luces que no suma puntos y termina con cualquier fallo. La precisión del timing arma la puntuación y el combo.

• 12 canciones completas, cada una con charts Fácil, Normal y Difícil, más Rock God, que se abre al terminar la gira: 48 charts en total.
• Una gira por cuatro escenarios (Garage, The road, Festival y Arena), tres canciones en cada uno. Las estrellas de las dos primeras abren el encore, y terminar el encore abre el siguiente escenario, con escenas de historia y recompensas visuales como estelas y marcos.
• Modo libre: cualquier canción en cualquier dificultad, con récords personales guardados canción por canción en el navegador.
• Controles: D, F, J y K por defecto, tocar los carriles en pantalla táctil o un control de videojuegos. Las teclas se configuran en Ajustes.
• Comodidad: calibración del desfase de audio, útil con audífonos Bluetooth, movimiento reducido y un modo fotosensible que suaviza destellos y rayos.
• Interfaz en 14 idiomas.

Ver la ficha de Riffvolt, con demo y manuales

Cómo están organizados los archivos

La descarga trae game/ (los archivos para publicar), source/ (el proyecto TypeScript), documentation/ (manuales ilustrados en inglés y portugués) y licenses/ (avisos de terceros). Dentro de source/, la separación entre datos de canciones y lógica del juego es limpia.

• public/manifest.json: el catálogo de canciones, con duración, versión del audio y rutas de los charts.
• public/charts/: los 48 charts de notas.
• public/audio/: las grabaciones de las canciones.
• src/core/chartValidate.ts: formato de los charts y validación del timing.
• src/core/judge.ts: juicio del timing.
• src/core/scoring.ts: reglas de puntuación y combo.
• src/game/campaign.ts: progreso de la gira.
• src/game/session.ts: el ciclo de una canción y el cálculo del resultado.
• src/i18n/locales.ts: los diccionarios de los 14 idiomas.
• src/net/localRecords.js: récords personales locales.
• src/ui/style.css: interfaz y diseño adaptable.

Como el juicio y la puntuación están en archivos separados, puedes hacer la ventana de acierto más estricta o más amable sin tocar cómo se suman los puntos, y al revés. Esa separación es la que conviene buscar en cualquier código de juego de ritmo.

Agregar una canción propia, paso a paso

Es lo primero que pregunta quien compra un juego de ritmo. El paquete no incluye editor de charts, así que los charts se escriben como datos, y el manual indica exactamente qué necesita cada archivo.

1. Pon la grabación en public/audio/. Usa solo audio que tengas derecho a usar en tu producto final.
2. Crea un chart por dificultad en public/charts/. Cada chart necesita el songId correspondiente, la dificultad, audioVersion, offset y las notas en orden.
3. Agrega la canción a public/manifest.json con un id único, duración, BPM, tema, audioVersion y las rutas de los charts.
4. Revisa cada chart con el validador de chartValidate.ts.
5. Juega la canción completa en todas las dificultades para confirmar la sincronía. El validador revisa estructura y reglas de timing, no si la nota cae donde el oído la espera.
6. Compila y sube la versión nueva.

Si buscas una banda sonora completamente nueva y no solo una canción extra, planea por chart: 12 canciones en cuatro dificultades son 48 charts, y cada uno merece jugarse de principio a fin antes del lanzamiento.

Compilar y qué más cambiar

Se recomienda Node.js 24 LTS. Dentro de source/, ejecuta npm ci, luego npm run typecheck y npm run build, y publica solo el contenido de dist/. npm run preview sirve la compilación local para revisarla. No subas node_modules/. Vite usa una base relativa, así que la compilación funciona en una subcarpeta. El código entregado está formateado para leerse; el manual pide conservar minify:false y cssMinify:false al compilar, para que la siguiente persona también pueda leerlo.

1. Marca: colores y diseño en src/ui/style.css, más tu logo. Se permite marca blanca, así que tu marca puede ir en lugar de la nuestra.
2. Textos: src/i18n/locales.ts, en los idiomas que vayas a publicar.
3. Gira: orden de los escenarios y qué desbloquea qué, en campaign.ts.
4. Dificultad: ventanas de acierto en judge.ts y luego puntuación y combo en scoring.ts.
5. Canciones: al final, porque cada chart nuevo exige jugarse completo.

Respalda antes de editar, cambia una cosa a la vez y prueba menú, una canción, pausa, pantalla de resultado y recarga después de cada cambio. Conserva los ids y las claves de guardado para que los jugadores no pierdan sus récords.

Publicarlo o incrustarlo en un portal

Sube el contenido de game/ a una carpeta de tu hosting HTTP(S), conserva las rutas relativas y abre la dirección. No hace falta PHP, base de datos ni cuenta. No abras index.html por file://; para probar en tu computadora, ejecuta python -m http.server 8765 dentro de game/.

• El navegador necesita JavaScript, módulos ES, Canvas 2D y Web Audio.
• Los navegadores liberan el audio solo después del primer toque o clic, así que una primera pantalla en silencio es normal.
• En un iframe, permite pantalla completa y reproducción automática.
• Sirve .js con tipo MIME de JavaScript, nunca como text/plain.
• Todos los archivos de ejecución, fuentes y bibliotecas están dentro de la compilación. No depende de un CDN, pero no es una app instalable sin conexión.

Lo guardado pertenece al origen del navegador, así que mover el juego a otro dominio hace que el jugador empiece de cero. Esta edición usa claves de guardado propias, separadas de las versiones de nuestro portal. Los proyectos de app nativa no están incluidos; publicar en una tienda es un trabajo aparte.

Lo que la edición no incluye

Riffvolt es la edición local para navegador. No tiene salas en línea ni multijugador, ranking en línea ni tabla compartida, SDK ni cuenta de anuncios, editor de charts, apps nativas ni hosting. Los récords personales y el progreso de la gira se quedan en el navegador del jugador.

Si un juego de música encaja en tu catálogo, otras dos plantillas nuestras basadas en timing pueden ir a su lado.

Pinloop: arcade de timing con un botón y 30 objetivos

Ricopop: arcade de rebotes con 50 niveles

Licencia y precio

Riffvolt tiene un precio de lista de 49 USD. Hasta el 30 de noviembre de 2026, la promoción de Black Friday descuenta 15%, así que cuesta 41.65 USD, y comprar dos o más plantillas en el mismo pedido suma entre 5% y 20% de descuento por paquete. La licencia es perpetua y no exclusiva, para un producto final, tuyo o de un cliente. Puedes cambiar código, arte y audio, poner tu marca en lugar de la nuestra y ofrecer el juego gratis o con anuncios. Usa las canciones incluidas como parte de ese producto final; no se permite revender la plantilla, su código ni sus archivos por separado. Incluye seis meses de soporte, o doce con la extensión; canciones nuevas, integraciones y hosting se cotizan aparte.

Leer los términos completos de la licencia

Preguntas frecuentes sobre el código de Riffvolt

¿Puedo agregar mis propias canciones al código fuente del juego de ritmo?

Sí. Agrega el audio, un chart por dificultad y una entrada en public/manifest.json, valida los charts, juégalos completos y compila. No se incluye editor de charts.

¿Necesito Node.js para usar Riffvolt?

No para publicar la carpeta del juego tal como viene. Node.js 24 LTS solo se recomienda para compilar después de cambiar el TypeScript o agregar canciones.

¿Funciona con pantallas táctiles y controles?

Sí. Se pueden tocar los carriles o usar un control, configurado en Ajustes. El rendimiento depende del equipo, así que prueba en los que quieres atender.

¿Y los audífonos Bluetooth con retraso?

Ajustes incluye una calibración de audio que fija el desfase y ayuda con audífonos Bluetooth.

¿Tiene ranking en línea?

No. Los récords personales se guardan por canción y dificultad en el navegador del jugador. No hay rivales remotos ni rankings compartidos.

Para quién vale la compra

Riffvolt sirve a un portal o sitio que quiere un juego de música en su catálogo, a un estudio que entrega un juego de ritmo con la marca de un cliente y a quien quiere leer cómo un juego en Canvas 2D y Web Audio juzga el timing en TypeScript. Sirve menos si necesitas un editor visual de charts para gente que no programa o competencia en línea; ambos son trabajo a medida.

Jugar la demo de Riffvolt y comprar la licencia

¿Canciones nuevas o una versión con tu marca? Pide una cotización