Code source d’un jeu HTML5 : nous avons ouvert un vrai paquet
Un regard à l’intérieur de vrais paquets de la marketplace de Polar Games : dossiers, fichiers, étapes de build, licences et questions à poser avant de payer.
Le code source d’un jeu HTML5 peut désigner trois choses différentes : une version prête à envoyer en ligne, les fichiers de développement que vous modifiez, ou un projet qui ne s’ouvre que dans un éditeur particulier. Un modèle de jeu HTML5 avec code source de notre marketplace réunit les deux premières, sous forme de fichiers web simples, et ce guide ouvre de vrais paquets pour montrer à quoi cela ressemble.
Nous vendons ces modèles ; lisez donc ceci comme une visite de nos propres paquets, pas comme un panorama neutre du marché. Nous avons examiné plusieurs éditions, surtout Velvet Pool, Puttide et Sunset Rally, lu leurs manuels publics et les conditions de la boutique, et noté ce que contient la boîte, ce qu’il faut pour la faire fonctionner et ce qui n’y est pas. Chaque manuel est lié depuis la page de son article : vous pouvez donc vérifier chaque ligne avant de payer.
Ce que peut signifier « code source d’un jeu HTML5 »
Les vendeurs emploient l’expression code source avec légèreté. Trois questions permettent de savoir ce qui est réellement vendu.
Une version compilée, une source de développement, ou les deux ?
Une version compilée (build) est le jeu fini tel que le navigateur le charge : un index.html, des scripts, des images et des fichiers audio. Vous pouvez l’héberger tel quel. La source de développement est la version faite pour être modifiée, avec des fichiers répartis par fonction. Un paquet qui ne contient que la version compilée, vous pouvez l’envoyer en ligne mais pas le modifier confortablement. Un paquet qui ne contient que la source peut exiger des outils avant de fonctionner. Les éditions de ce guide mettent les deux dans un même ZIP : en général un dossier game/ à publier et un dossier source/ à modifier (dans Ricopop, game/ est lui-même la source).
Lisible ou minifié ?
La minification comprime les scripts en quelques lignes denses aux noms courts : cela se télécharge plus vite et se lit très mal. L’obscurcissement va plus loin et brouille volontairement les noms. Ni l’un ni l’autre ne gêne un site en ligne. Les deux gênent si vous avez acheté le code pour le modifier. Avant de payer, ouvrez un script de la démo en ligne dans les outils de développement de votre navigateur et voyez si vous pourriez le suivre.
Des fichiers simples ou un projet d’éditeur ?
Certains modèles arrivent sous forme de projet pour un éditeur de jeux précis, et vous ne pouvez les ouvrir que dans cet éditeur. D’autres sont des fichiers web simples que n’importe quel éditeur de code ouvre. Les éditions de ce guide sont du second type : HTML, CSS, JavaScript et JSON, avec TypeScript dans certaines.
Ce que contient un paquet Polar Games
Prenons Velvet Pool, notre édition de billard 8-ball. Son manuel décrit quatre dossiers dans le ZIP :
- game/ est l’édition prête à envoyer en ligne et le seul dossier que vous publiez.
- source/ est le même jeu en édition de développement modifiable, avec un README, un package.json et des tests.
- documentation/ contient le guide illustré et ses images.
- THIRD-PARTY-LICENSES/ contient les textes de licence des polices et un résumé README.txt.
Dans votre bibliothèque, le même paquet est proposé en deux téléchargements : le paquet complet (source et manuel) ou le jeu seul, prêt à héberger.
game/ et source/ partagent la même organisation. Pour Velvet Pool, le manuel dit de modifier les fichiers dans source/ et de copier ceux qui ont changé au même chemin dans game/. Rien n’est compilé entre les deux.
Dans Velvet Pool : la carte des fichiers
Une carte des fichiers est le moyen le moins coûteux de juger un code avant de l’acheter. Voici celle du manuel de Velvet Pool, avec des chemins relatifs à source/ ou à game/ :
- src/core/physics.js : simulation des billes, effet et réaction des bandes.
- src/core/rules.js : règles du 8-ball et décisions sur les fautes.
- src/core/ai.js : la façon dont l’ordinateur choisit un coup.
- src/game/controls.js : visée, puissance et effet saisis par le joueur.
- src/game/progress.js : succès, tapis, queues et décompte des points d’une partie.
- src/game/i18n.js : les textes en 14 langues.
- src/game/localRecords.js : l’historique local des scores.
- src/game/audio.js : effets sonores et lecture de la musique.
- css/style.css et css/fonts.css : thème, mise en page adaptative et déclarations de polices.
- assets/ : images, audio et polices, avec un sous-dossier logo/.
Remarquez la séparation. Les règles, la physique et l’ordinateur sont dans src/core. La saisie, les sauvegardes, les textes et le son sont dans src/game. Le manuel vous demande de changer une fonctionnalité à la fois, et cette organisation le rend réaliste : un réglage des bandes et une correction de traduction touchent des fichiers différents.
Le manuel précise aussi que le code de source/src et de game/src est du JavaScript simple et formaté, sans fichiers minifiés ni regroupés. Velvet Pool est en Vanilla JavaScript sur WebGL2 et n’utilise aucune bibliothèque de code, Three.js compris. Le journal des versions l’atteste : la version 1.0.1 a découpé en lignes lisibles de longues chaînes sur une seule ligne dans l’audio, les traductions et les shaders, sans changer le comportement.
Puttide : la même organisation, plus des bibliothèques
Puttide, notre édition de mini-golf en 3D, utilise les mêmes quatre dossiers et ajoute une chose : deux bibliothèques tierces dont le jeu a besoin. Three.js r186 (MIT) et Rapier 3D 0.21.0 (Apache-2.0) se trouvent dans lib/three/ et lib/rapier/, et l’import map de index.html indique au navigateur où les trouver. La FAQ de Puttide précise que rien n’est chargé depuis un CDN : le jeu n’a donc besoin que de votre propre hébergement. Le manuel ajoute que les fichiers des bibliothèques sont formatés pour pouvoir être lus, sans modification de comportement.
Sa carte des fichiers, toujours relative à source/ ou à game/ :
- src/course/courses.js : ordre des parcours et conditions de déblocage.
- src/course/holes.js : géométrie, par et obstacles du parcours Ruins. pier.js, ice.js, lava.js et sky.js contiennent les quatre autres.
- src/sim/constants.js : réglages de la physique.
- src/game/economy.js : définitions et prix des balles, traînées et tenues.
- src/ui/i18n.js et trois autres fichiers de dictionnaire : le texte des langues.
- css/style.css : couleurs de l’interface, polices et styles adaptatifs.
- fonts/ et music/ : les polices web avec leurs licences et deux morceaux de musique.
La recette du manuel pour un nouveau trou : dupliquer une définition dans le bon fichier de parcours, lui donner un id unique, fixer le par, les positions du départ et du trou, l’ajouter au parcours, puis ajouter son nom et son conseil aux dictionnaires de langues. Lisez une recette comme celle-là avant d’acheter. Si elle ressemble à un travail que vous pouvez faire, le paquet vous convient.
Quand la source exige une étape de build
« Pas d’étape de build » est vrai de certaines éditions et pas d’autres ; vérifiez donc l’édition, pas la boutique. Voici cinq des nôtres côte à côte, avec leurs prix de liste. Notre propre boutique affiche actuellement 10 % de remise sur le prix de liste, l’offre directe du studio sur chaque page d’article : Velvet Pool, par exemple, s’affiche à 35,10 $ au lieu de 39 $.
- Velvet Pool, prix de liste 39 $ : modules JavaScript simples sur WebGL2. Modifiez source/, copiez dans game/. Node.js 20+ seulement pour les tests optionnels.
- Puttide, 39 $ : modules JavaScript simples avec Three.js et Rapier dans lib/. Pas d’étape de build. Node.js est optionnel et ne sert qu’à gérer les versions des bibliothèques.
- Ricopop, 39 $ : HTML, CSS et modules JavaScript simples, et game/ est lui-même la source. Outils de développement optionnels (Node.js 20+) : un serveur local, un vérificateur de niveaux et des tests.
- Pinloop, 24 $ : TypeScript avec Vite. Le dossier game/ contient du JavaScript et du CSS lisibles. Node.js 22.12+ et npm uniquement pour modifier et reconstruire la source.
- Sunset Rally, 39 $ : TypeScript avec Three.js r184 et Vite. Le dossier game/ est déjà construit et non minifié. Node.js seulement si vous reconstruisez.
Pour Sunset Rally, le manuel recommande Node.js 24 LTS. Dans source/, vous lancez npm ci, npm run typecheck et npm run build, puis vous ne publiez que le contenu de dist/. Il vous demande aussi de laisser minify et cssMinify désactivés quand vous reconstruisez, car le code livré est formaté pour la lecture. Envoyez le résultat, jamais node_modules/.
L’héberger : ce que « statique » veut dire en pratique
Un hébergement statique signifie que votre hébergeur ne fait que servir des fichiers. Les manuels de Velvet Pool et de Puttide donnent toute l’installation en trois étapes :
- Extraire le ZIP.
- Envoyer tout le contenu de game/ dans un dossier de votre site, par exemple public_html/velvet-pool/, par FTP ou avec le gestionnaire de fichiers de votre hébergeur, en gardant les sous-dossiers.
- Ouvrir cette adresse dans un navigateur.
Ni npm, ni terminal, ni étape de build, ni PHP, ni base de données, ni compte. Ce qui fait trébucher, d’après ces mêmes manuels :
- Ne double-cliquez pas sur index.html. Les navigateurs bloquent les modules de jeu sur file://. Pour un test local, lancez python -m http.server 8765 dans game/ et ouvrez http://localhost:8765/.
- Votre serveur doit envoyer les fichiers .js avec un type MIME JavaScript et .wasm en application/wasm. Un mauvais type MIME se manifeste par une erreur de module refusé.
- Utilisez HTTPS pour un hébergement public.
- Les sauvegardes appartiennent à l’origine du navigateur (protocole, hôte et port). Déplacez le jeu vers un autre domaine et les joueurs repartent de zéro.
- Un nouveau chargement de page a toujours besoin de votre hébergeur : ce n’est donc pas une application hors ligne installable.
Où se trouvent le logo, les couleurs, les règles et les traductions
Chaque manuel a une section de personnalisation, et ce qu’elle couvre diffère d’une édition à l’autre. Voici ce que dit chacun.
Velvet Pool
- Logo et identité : remplacez les fichiers de assets/logo/ et ajustez les dimensions correspondantes dans le CSS.
- Styles de tapis et de queue : leurs définitions sont dans progress.js. Gardez les identifiants des objets stables pour que les cosmétiques enregistrés continuent de fonctionner.
- Comportement de l’ordinateur dans ai.js, physique dans physics.js. Après avoir changé les règles ou la physique, lancez les tests du 8-ball.
- Traductions : src/game/i18n.js, avec la liste des langues dans LANGS.
Puttide
- Couleurs et polices : css/style.css.
- Physique : src/sim/constants.js. Prix des cosmétiques : src/game/economy.js, en gardant les identifiants existants.
- Musique : copiez un fichier sous licence dans music/ et mettez à jour la correspondance des morceaux dans src/audio/audio.js.
- Trous, par et déblocages : les fichiers de parcours décrits plus haut.
Gridspark et Sunset Rally
Dans Gridspark, selon la FAQ de son article, le texte de l’interface se trouve dans src/locales.js, les constantes de règles et la palette dans src/config.js, et les règles du puzzle dans game.js, board.js, generator.js et shapes.js. Dans Sunset Rally, les parties de la campagne et les conditions d’étoiles sont dans Campaign.ts, les lieux dans Places.ts, la physique dans physics.ts et le décompte des points dans match.ts. Ses textes en anglais et en portugais sont dans src/i18n.ts, les 12 autres langues dans src/locales/.
Remarquez ce que les manuels omettent. Le manuel de Puttide couvre les couleurs, la physique, les trous, les prix et la musique, mais il n’a aucune étape pour remplacer le logo, et le manuel de Sunset Rally n’a pas de section dédiée à l’identité visuelle. Si l’identité visuelle est la première chose que vous changerez, demandez avant d’acheter.
Tests automatisés : ce qu’ils vérifient et ce qu’ils ne vérifient pas
Le dossier source/ de Velvet Pool inclut une suite de tests. Avec Node.js 20 ou plus récent, ouvrez un terminal dans source/ et lancez npm test, ce qui revient à node tests/run.js. Aucune installation de dépendances n’est nécessaire. D’après le manuel, la suite vérifie la physique, les règles du 8-ball, les parties contre l’ordinateur et la cohérence des clés de traduction, et elle ne remplace pas les tests dans les navigateurs et sur de vrais appareils.
Une vérification des clés de traduction est le genre de test dont a besoin un jeu en 14 langues : ajoutez une clé dans une langue, oubliez-en une autre, et personne ne le remarquera peut-être avant des semaines.
Toutes les éditions n’ont pas de tests. Le manuel de Puttide n’en décrit aucun, seulement des vérifications manuelles. Pinloop et Beep Out listent npm test parmi leurs commandes de développement, et les outils de développement de Ricopop incluent un vérificateur de niveaux.
Licence, mentions tierces et journal des versions
Selon les conditions de la boutique, chaque achat donne une licence perpétuelle et non exclusive pour utiliser l’édition dans un produit final, le vôtre ou celui d’un client. Vous pouvez modifier le code, les images et le son à l’intérieur, et les joueurs peuvent l’utiliser gratuitement ou via la publicité. Vous ne pouvez pas revendre, partager ni redistribuer le modèle, sa source ou ses ressources en tant que tels, sous forme de modèle, de kit ou de pack de ressources, ni à l’intérieur d’un autre produit destiné à des développeurs. La licence n’expire pas à la fin du support.
Les éléments tiers conservent leurs propres licences, et vous gardez leurs mentions avec votre produit. Dans Velvet Pool, cela veut dire deux polices, Manrope et Fraunces, sous SIL Open Font License 1.1, avec les textes dans THIRD-PARTY-LICENSES/ et à côté des polices. Dans Puttide, la liste ajoute Three.js (MIT), Rapier (Apache-2.0) et les polices Rubik et Fredoka (OFL 1.1).
Le journal des versions montre comment un paquet est entretenu. Velvet Pool 1.0.1 (18 octobre 2026) a découpé de longues chaînes en lignes lisibles et regroupé les mentions de licence dans un seul dossier à plat. La version 1.1.0 (22 octobre 2026) a porté l’interface à 14 langues. Ces entrées figurent sur la page de l’article. Les conditions disent que les mises à jour de la même édition apparaissent dans votre bibliothèque lorsqu’elles sont publiées, sans promesse de mises à jour pour une durée fixe.
Lire en une heure le code d’un jeu acheté
C’est un plan suggéré, pas une durée promise. Il suit l’organisation de Velvet Pool et n’utilise que ce que le paquet fournit.
- Minutes 0 à 10 : extrayez le ZIP, parcourez le README de source/ et la carte des fichiers du manuel. Ouvrez index.html et voyez quels scripts et feuilles de style il charge.
- Minutes 10 à 20 : lancez npm test dans source/ (Node.js 20+) pour obtenir une base verte.
- Minutes 20 à 35 : lisez src/core avant src/game. Commencez par rules.js, puis ai.js, puis physics.js. C’est le jeu lui-même. Les commandes, la progression, les textes et le son sont la tuyauterie autour.
- Minutes 35 à 40 : notez que les identifiants des objets et les clés de sauvegarde doivent rester stables, sinon les joueurs perdent leurs cosmétiques enregistrés.
- Minutes 40 à 55 : faites un petit changement, par exemple une définition de tapis dans progress.js. Copiez le fichier au même chemin dans game/, servez game/ avec python -m http.server 8765 et regardez le résultat. Ne l’ouvrez jamais via file://.
- Minutes 55 à 60 : relancez les tests.
Les modules ES nomment ce dont ils ont besoin dans leurs lignes d’import ; vous pouvez donc suivre la chaîne depuis le premier script que charge la page. C’est pourquoi une édition en fichiers simples peut se lire à ce rythme.
Questions à poser avant d’acheter du code source
- Puis-je lire le manuel et jouer à une démo avant de payer ? Pour nos éditions, les deux sont liés depuis la page de l’article.
- Y a-t-il une version prête à héberger et une source de développement séparée ?
- Le code est-il lisible ou minifié ? Ouvrez un script et regardez.
- Ai-je besoin de Node.js, de npm, de PHP ou d’une base de données, et dans quelles versions ?
- Le jeu charge-t-il quelque chose depuis un CDN ou un autre site ?
- Quelles bibliothèques tierces sont à l’intérieur, et sous quelles licences ?
- Dans combien de projets puis-je l’utiliser, et puis-je le redistribuer ?
- Combien de temps dure le support et que couvre-t-il ? Le nôtre dure 6 mois, ou 12 avec l’extension choisie au paiement, et couvre les questions sur l’installation et l’utilisation des fichiers ainsi que les défauts reproductibles.
- Qu’est-ce qui est laissé de côté ?
- Y a-t-il un journal des versions et une publication récente ?
- Quelle est la règle de remboursement ? La nôtre : les modèles sont des produits numériques ; nous remboursons donc seulement si vous n’avez pas encore téléchargé le modèle, ou s’il présente un défaut que nous ne pouvons pas corriger. Vous le demandez en écrivant au studio avec votre numéro de licence.
Ce que ces éditions n’incluent pas
Certaines éditions ajoutent des extras optionnels. Ricopop et Zabum incluent un classement PHP d’un seul fichier, désactivé par défaut. C’est un tableau de scores partagé et décontracté qui enregistre les scores dans un fichier, pas un classement infalsifiable, et pas du multijoueur en direct.
Le support couvre les questions sur l’installation et l’utilisation des fichiers fournis et la correction des défauts reproductibles du jeu fourni. C’est une frontière, et mieux vaut la connaître dès le premier jour.
FAQ
Quelle différence entre le dossier du jeu et le dossier de la source ?
game/ est la version que vous envoyez sur votre hébergement. source/ est l’édition de développement modifiable du même jeu. Dans Velvet Pool et Puttide, ils partagent la même organisation : un fichier modifié dans source/ est copié au même chemin dans game/. Dans les éditions TypeScript comme Sunset Rally, source/ est un projet que vous reconstruisez, et vous publiez la nouvelle sortie.
Ai-je besoin de npm ou de Node.js pour utiliser le jeu ?
Pas pour l’héberger. Node.js n’apparaît que pour les tests optionnels de Velvet Pool (20 ou plus récent) ou pour reconstruire des éditions TypeScript comme Sunset Rally (24 LTS recommandé) et Pinloop (22.12 ou plus récent).
Le code source est-il minifié ?
Pas dans les éditions traitées ici. Velvet Pool et Puttide sont du JavaScript simple et formaté, et la version 1.0.1 des deux a découpé en lignes lisibles de longues chaînes sur une seule ligne. Le code de Sunset Rally est livré formaté, minification désactivée.
Puis-je utiliser un seul achat pour plusieurs projets ou clients ?
La licence couvre un produit final, le vôtre ou celui d’un client. Un second produit est hors de son cadre.
Puis-je revendre ou partager le code source ?
Non : pas en tant que tel, pas sous forme de modèle, de kit ou de pack de ressources, et pas à l’intérieur d’un autre produit destiné à des développeurs. Vous pouvez modifier le code, les images et le son à l’intérieur de votre propre produit final.
Puis-je lire le manuel avant d’acheter ?
Oui. Chaque page d’article renvoie à son manuel et à une démo jouable de la même édition.
Ouvrez un paquet avant d’en acheter un
Choisissez une édition, ouvrez son manuel depuis la page de l’article, jouez à la démo et lisez la carte des fichiers au regard des questions ci-dessus. Si le manuel y répond, le paquet aussi. Sinon, écrivez au studio avant de payer.