Code source de jeu de rythme : charts, timing et ajout de morceaux

Le code source d'un jeu de rythme, ce sont en réalité deux choses : le code qui juge le timing, et les données qui disent quand arrive chaque note. Les acheteurs veulent presque toujours modifier la seconde, car ce sont les nouveaux morceaux qui rendent un jeu de rythme vraiment le leur. Riffvolt, notre template de jeu de rythme rock à quatre couloirs, garde la liste des morceaux dans un seul fichier manifest et chaque chart de notes dans son propre fichier : ajouter un morceau devient un travail sur les données, avec une checklist claire.

Ce guide parcourt le pack : ce que propose le jeu, où se trouvent le timing et le score, comment ajouter un morceau, refaire le build et l'héberger, ce que permet la licence et ce que cette édition laisse de côté. Les noms de fichiers viennent du guide de l'acheteur fourni avec le jeu.

Un point à garder en tête dès le départ : contrairement à certains de nos templates, Riffvolt demande un rebuild après une modification du source ou l'ajout de morceaux. Pour héberger le dossier du jeu fourni, un simple hébergement statique suffit.

Ce que propose ce code source de jeu de rythme

Riffvolt est un jeu de rythme rock à quatre couloirs, complet, pour le navigateur. Les joueurs frappent les notes en rythme, tiennent les notes longues jusqu'au bout, les font vibrer avec le whammy et remplissent une jauge ROCK qui déclenche l'overdrive, un jeu de lumières qui ne rapporte aucun point et s'arrête à la première erreur. La précision du timing construit le score et le combo.

• 12 morceaux complets, chacun avec des charts Easy, Normal et Hard, plus Rock God, qui s'ouvre après la tournée : 48 charts de notes au total.
• Une tournée dans quatre salles (Garage, The road, Festival et Arena), trois morceaux chacune. Les étoiles des deux premiers ouvrent le rappel, et terminer le rappel ouvre la salle suivante, avec des scènes d'histoire et des récompenses cosmétiques comme des traînées et des cadres.
• Partie libre : n'importe quel morceau à n'importe quelle difficulté, avec des records personnels enregistrés morceau par morceau dans le navigateur.
• Commandes : D, F, J et K par défaut, toucher les couloirs sur écran tactile, ou une manette. Les touches se configurent dans les Réglages.
• Confort : calibrage audio du décalage, utile avec un casque Bluetooth, mouvements réduits et un mode photosensible qui adoucit les flashs et les éclairs.
• Interface en 14 langues.

Voir la fiche de Riffvolt, la démo et les manuels

Comment les fichiers sont organisés

Le téléchargement contient game/ (les fichiers à déployer), source/ (le projet TypeScript), documentation/ (des manuels illustrés en anglais et en portugais) et licenses/ (les mentions de tiers). Dans source/, la séparation entre données des morceaux et logique de jeu est nette.

• public/manifest.json : le catalogue des morceaux, avec la durée, la version audio et les chemins des charts de chacun.
• public/charts/ : les 48 charts de notes.
• public/audio/ : les enregistrements des morceaux.
• src/core/chartValidate.ts : schéma des charts et validation du timing.
• src/core/judge.ts : le jugement du timing.
• src/core/scoring.ts : les règles de score et de combo.
• src/game/campaign.ts : la progression de la tournée.
• src/game/session.ts : le cycle de vie d'un morceau et le calcul du résultat.
• src/i18n/locales.ts : les 14 dictionnaires de l'interface.
• src/net/localRecords.js : les records personnels locaux.
• src/ui/style.css : interface et mise en page responsive.

Comme le jugement et le score sont dans des fichiers séparés, vous pouvez rendre les fenêtres de timing plus strictes ou plus tolérantes sans toucher au calcul des points, et inversement. C'est la séparation à rechercher dans tout code de jeu de rythme.

Ajouter votre propre morceau, étape par étape

C'est la première question des acheteurs de jeux de rythme. Le pack n'a pas d'éditeur de charts : les charts s'écrivent sous forme de données, et le manuel liste exactement ce qu'il faut dans chaque fichier.

1. Placez l'enregistrement dans public/audio/. N'utilisez que de l'audio dont vous détenez les droits pour votre produit final.
2. Créez un chart par difficulté prise en charge dans public/charts/. Chaque chart demande les songId, difficulty, audioVersion et offset correspondants et les notes dans l'ordre.
3. Ajoutez le morceau à public/manifest.json avec un id unique, la durée, le BPM, le thème, l'audioVersion et les chemins des charts.
4. Vérifiez chaque chart avec le validateur de chartValidate.ts.
5. Jouez le morceau en entier à chaque difficulté pour confirmer la synchronisation. Le validateur contrôle la structure et les règles de timing, pas le ressenti d'une note.
6. Refaites le build, puis envoyez le nouveau build.

Si vous voulez une bande-son entièrement nouvelle plutôt qu'un morceau de plus, planifiez le travail par chart : 12 morceaux sur quatre difficultés, cela fait 48 charts, et chacun mérite une partie complète avant la sortie.

Refaire le build et les autres modifications

Node.js 24 LTS est recommandé. Dans source/, lancez npm ci, puis npm run typecheck et npm run build, et publiez uniquement le contenu de dist/. npm run preview sert le build local pour vérification. N'envoyez pas node_modules/. Vite utilise une base relative, le build fonctionne donc dans un sous-dossier. Le runtime livré est formaté pour être lu ; le manuel demande de garder minify:false et cssMinify:false lors d'un rebuild, pour que la personne suivante puisse encore le lire.

1. Marque : couleurs et mise en page dans src/ui/style.css, plus votre logo. La marque blanche est autorisée, votre marque peut donc remplacer la nôtre.
2. Textes : src/i18n/locales.ts, pour les langues que vous publiez.
3. Tournée : l'ordre des salles et ce qui débloque quoi, dans campaign.ts.
4. Difficulté : fenêtres de timing dans judge.ts, puis règles de score et de combo dans scoring.ts.
5. Morceaux : en dernier, car chaque nouveau chart demande une partie complète.

Faites une sauvegarde avant de modifier, changez une fonction à la fois, et après chaque changement testez le menu, un morceau, la pause, l'écran de résultats et un rechargement. Gardez stables les id des objets et les clés de sauvegarde pour que les joueurs existants conservent leurs records.

L'héberger ou l'intégrer dans un portail

Envoyez le contenu de game/ dans un dossier de votre hébergement HTTP(S), gardez les chemins relatifs et ouvrez l'adresse. Ni PHP, ni base de données, ni compte ne sont nécessaires. N'ouvrez pas index.html via file:// ; pour un test local, lancez python -m http.server 8765 dans game/.

• Navigateur requis : JavaScript, modules ES, Canvas 2D et Web Audio.
• Les navigateurs ne débloquent le son qu'après le premier toucher ou clic : un premier écran silencieux est normal.
• Dans une iframe, autorisez le plein écran et la lecture automatique.
• Servez les .js avec un type MIME JavaScript, jamais en text/plain.
• Tous les assets, polices et bibliothèques d'exécution sont dans le build. Aucun CDN obligatoire, mais ce n'est pas une application installable hors ligne.

Les sauvegardes appartiennent à l'origine du navigateur : déplacer le jeu sur un autre domaine fait repartir les joueurs de zéro. Cette édition utilise ses propres clés de sauvegarde, distinctes de celles des éditions de notre portail. Les projets d'applications natives ne sont pas inclus ; une sortie sur les stores est un travail à part.

Ce que l'édition n'inclut pas

Riffvolt est l'édition navigateur locale. Elle n'a ni salons en ligne ni multijoueur, ni classement en ligne ou leaderboard partagé, ni SDK ou compte publicitaire, ni éditeur de charts, ni applications natives, ni hébergement. Records personnels et progression de la tournée restent dans le navigateur du joueur.

Si un jeu musical a sa place dans votre catalogue, deux autres de nos templates fondés sur le timing peuvent l'accompagner.

Pinloop : un jeu d'arcade de timing à un bouton avec 30 cibles

Ricopop : un jeu d'arcade à ricochets avec 50 niveaux

Licence et prix

Riffvolt est affiché à $49. Jusqu'au 30 novembre 2026, la promotion Black Friday retire 15 %, soit $41.65, et acheter deux templates ou plus dans une même commande ajoute une remise groupée de 5 % à 20 %. La licence est perpétuelle et non exclusive, pour un seul produit final, le vôtre ou celui d'un client. Vous pouvez modifier le code, les graphismes et l'audio, remplacer notre marque par la vôtre et proposer le jeu gratuitement ou avec publicité. Les morceaux inclus s'utilisent dans le cadre de ce produit final ; vous ne pouvez pas revendre le template, son code ou ses assets seuls. Six mois de support sont inclus, ou douze avec l'extension ; nouveaux morceaux, intégrations et hébergement font l'objet d'un devis séparé.

Lire les conditions complètes de licence

Questions fréquentes

Puis-je ajouter mes propres morceaux au code source du jeu de rythme ?

Oui. Ajoutez l'audio, un chart par difficulté et une entrée dans public/manifest.json, validez les charts, jouez-les en entier, puis refaites le build. Aucun éditeur de charts n'est inclus.

Ai-je besoin de Node.js pour utiliser Riffvolt ?

Pas pour héberger le dossier du jeu fourni. Node.js 24 LTS n'est recommandé que pour refaire le build après avoir modifié le TypeScript ou ajouté des morceaux.

Fonctionne-t-il avec les écrans tactiles et les manettes ?

Oui. Les joueurs peuvent toucher les couloirs ou utiliser une manette, et les commandes se règlent dans les Réglages. Les performances dépendent de l'appareil : testez ceux que vous visez.

Et les casques Bluetooth, la latence ?

Les Réglages comprennent un calibrage audio qui fixe le décalage audio et aide avec les casques Bluetooth.

Y a-t-il un classement en ligne ?

Non. Les records personnels sont enregistrés par morceau et par difficulté dans le navigateur du joueur. Il n'y a ni adversaires distants ni classements partagés.

À qui s'adresse ce template

Riffvolt convient à un portail ou un site qui veut un jeu musical dans son catalogue, à un studio qui livre un jeu de rythme à la marque d'un client, et à un développeur qui veut lire comment un jeu en Canvas 2D et Web Audio juge le timing en TypeScript. Il convient moins si vous avez besoin d'un éditeur de charts visuel pour des non-développeurs ou de compétition en ligne : les deux relèvent du sur-mesure.

Jouer à la démo de Riffvolt et acheter la licence

Nouveaux morceaux ou version à votre marque ? Demandez un devis