Code source de jeu de mini-golf : trous, physique et parcours 3D

Un code source de jeu de mini-golf se juge sur une seule tâche : ajouter un trou. L'acheteur qui veut un parcours à sa marque, un niveau saisonnier ou le logo d'un client sur le green ouvre d'abord les fichiers de niveaux, et si un trou est enfoui dans le code du moteur, le projet cale. Dans Puttide, notre template de mini-golf 3D, chaque parcours a son propre fichier de trous en JavaScript pur, et le manuel explique comment en ajouter un.

Ce guide suit le pack dans l'ordre où un développeur le découvre : les dossiers, les bibliothèques, les fichiers de parcours, l'ordre des modifications, l'hébergement et la licence. Les noms de fichiers viennent du guide de l'acheteur fourni avec le jeu.

La réponse courte pour les pressés : Puttide est du JavaScript formaté, avec Three.js pour l'affichage et Rapier pour la physique de la balle, tous deux inclus. Pas d'étape de build, pas de CDN et pas de code serveur.

Ce que contient le code source du mini-golf

Puttide est un jeu complet de 30 trous répartis sur cinq parcours insulaires : Sunlit Ruins, Lantern Pier, Frost Peaks, Cloud Garden et Volcano Forge, six trous chacun. Rampes, portails, bumpers et moulins à vent transforment les trous en petits casse-têtes. Chaque trou rapporte trois étoiles (le terminer, faire le par ou mieux, trouver la pièce cachée), et des médailles de bronze, d'argent et d'or récompensent les meilleures parties.

En plus des parcours, on trouve un défi quotidien avec une variante (vent, green glacé, balle lourde, bandes rebondissantes, course aux pièces ou chasse au birdie), un Locker où les pièces achètent des balles, des traînées et d'autres éléments cosmétiques, et des parties de deux à quatre joueurs à tour de rôle sur un même appareil. L'interface existe en 14 langues.

• game/ : le build prêt à mettre en ligne, le seul dossier à publier.
• source/ : le même jeu en édition développeur, avec un README et un package.json.
• documentation/ : un guide illustré en anglais et en portugais.
• THIRD-PARTY-LICENSES/ : les textes de licence des bibliothèques et des polices.
• Version 1.1.0, mise à jour le 22 octobre 2026.

Voir la fiche de Puttide : démo, manuel et prix

Three.js, Rapier et le reste de la stack

La balle est simulée par Rapier 3D 0.21.0, qui tourne en WebAssembly, et la scène est dessinée avec Three.js r186. Les deux se trouvent dans lib/three/ et lib/rapier/ avec leurs fichiers de licence, et index.html contient une import map qui y renvoie le jeu. Le manuel précise que le comportement des bibliothèques n'a pas été modifié : elles sont seulement formatées pour être lisibles.

C'est important pour deux raisons. D'abord, rien n'est chargé depuis un CDN : un portail ou un client avec une politique de sécurité stricte n'a besoin que de votre hébergement. Ensuite, mettre à jour une bibliothèque est une étape manuelle et volontaire : source/package.json indique les versions exactes, vous copiez les nouveaux modules dans le dossier lib/ correspondant et vous gardez les chemins de l'import map.

• Three.js r186 : licence MIT.
• Rapier 3D compat 0.21.0, WebAssembly intégré : licence Apache-2.0.
• Polices web Rubik et Fredoka : SIL Open Font License 1.1.
• Deux musiques : music/menu.mp3 et music/play-1.mp3.

Où se trouvent les trous, les pièces et les textes

Les chemins sont identiques dans source/ et game/. Les données des parcours sont découpées par île, ce qui garde chaque fichier assez court pour être lu d'une traite.

• src/course/courses.js : ordre des parcours et conditions de déblocage.
• src/course/holes.js : les trous de Sunlit Ruins, avec géométrie, par et obstacles.
• src/course/pier.js, ice.js, lava.js et sky.js : les trous des quatre autres parcours.
• src/sim/constants.js : le réglage de la physique.
• src/game/economy.js : balles, traînées et tenues, avec leurs prix.
• src/ui/i18n.js et ses fichiers associés : les dictionnaires des 14 langues, noms des trous et astuces compris.
• src/game/localRecords.js : les records des parcours, enregistrés dans le navigateur.
• src/audio/audio.js : les effets et l'association des musiques, dans probeTracks.
• css/style.css : couleurs de l'interface, polices et styles responsive.

Ajouter un trou, étape par étape

C'est la modification que font la plupart des acheteurs, et le manuel la décrit en quelques lignes. Nous l'avons détaillée dans l'ordre que nous suivrions nous-mêmes.

1. Choisissez le fichier du parcours auquel appartient le nouveau trou, par exemple lava.js pour Volcano Forge.
2. Dupliquez la définition d'un trou existant proche de ce que vous voulez.
3. Donnez-lui un id unique. Réutiliser un id embrouille la progression sauvegardée.
4. Réglez le par, la position du départ et celle du trou, puis déplacez ou remplacez les obstacles.
5. Ajoutez le trou à son parcours dans courses.js.
6. Ajoutez son nom et son astuce dans les dictionnaires, pour chaque langue que vous publiez.
7. Jouez-le : testez les collisions, le retour après une sortie de terrain et les trois étoiles, pièce cachée comprise.

Modifiez dans source/, copiez les fichiers changés aux mêmes chemins dans game/ et servez le dossier en HTTP pour tester. Le package.json a un script serve, sinon lancez python -m http.server 8765. Node.js est facultatif et ne sert que si vous voulez que npm gère les versions des bibliothèques.

Les autres modifications, dans un ordre logique

1. Marque et couleurs : logo, couleurs et polices dans css/style.css. La marque blanche est autorisée, votre marque peut donc remplacer la nôtre.
2. Prix du Locker : economy.js. Des cosmétiques moins chers rendent un site grand public plus accueillant ; plus chers, ils font durer une longue campagne.
3. Textes : formulations et astuces dans les fichiers i18n.
4. Musique : les deux morceaux inclus peuvent être remplacés par des enregistrements dont vous détenez la licence. Copiez le fichier et mettez à jour l'association explicite dans audio.js (probeTracks) ; la musique des scènes se rabat sur le morceau de jeu.
5. Physique : constants.js, en dernier et par petites touches, car chaque trou a été réglé sur les valeurs actuelles.

Pour un projet voisin, avec la même approche en JavaScript pur et sans aucune bibliothèque 3D, notre template de billard est construit de la même façon.

Velvet Pool : billard 8-ball en JavaScript pur et WebGL2

Sunset Rally : tennis de table 3D avec une campagne de neuf matchs

Hébergement, types MIME et applications natives

Envoyez tout le contenu de game/ dans un dossier comme public_html/puttide/, gardez les sous-dossiers et ouvrez l'adresse en HTTPS. Ni npm, ni PHP, ni base de données, ni compte ne sont nécessaires sur le serveur. Ouvrir index.html depuis le disque ne fonctionne pas, car les navigateurs bloquent les modules en file://.

Puttide a une particularité d'hébergement qu'un jeu 2D n'a pas : la physique tourne en WebAssembly. Votre serveur doit envoyer les fichiers .js avec un type MIME JavaScript et les .wasm en application/wasm. Un hébergeur mal configuré affiche un écran vide ou une erreur de module : vérifiez-le dès le premier jour.

• Navigateur requis : JavaScript, modules ES, WebAssembly et WebGL2.
• Dans l'iframe d'un portail, autorisez le plein écran et la lecture automatique.
• Sur écran tactile : glisser pour viser et putter, deux doigts pour tourner la caméra, pincer pour zoomer.
• Ce n'est pas une application installable hors ligne : chaque nouveau chargement passe par votre hébergement.

Les projets d'applications natives ne sont pas inclus. Si vous visez une sortie sur les stores, prévoyez le budget du wrapper et des tests sur de vrais téléphones, car un jeu 3D avec physique est plus lourd qu'un jeu de cartes sur les appareils anciens.

Ce qui n'est pas inclus, et la licence

C'est l'édition navigateur locale : pas de multijoueur ni de salons en ligne, pas de classement en ligne, pas de comptes cloud, pas de SDK publicitaire, pas d'applications natives et pas d'hébergement. Les records, la progression quotidienne et les parties sur un même appareil restent dans le navigateur du joueur, et aucun score n'est envoyé. Les sauvegardes appartiennent à l'origine du navigateur : changer de domaine fait repartir les joueurs de zéro.

Puttide est affiché à $39 ; jusqu'au 30 novembre 2026, la promotion Black Friday le fait passer à $33.15, 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 le renommer, modifier son code, ses graphismes et son audio, et proposer le jeu gratuitement ou avec publicité, mais pas revendre le template ou son code seuls. Le support dure six mois, ou douze avec l'extension ; trous sur mesure, intégrations et hébergement font l'objet d'un devis.

Conditions complètes de licence, de support et de remboursement

Questions fréquentes

Le code source du mini-golf est-il en TypeScript ?

Non. Puttide est du JavaScript pur et formaté dans source/src et game/src, sans fichiers minifiés ou regroupés de notre part.

Puis-je ajouter mes propres trous ou parcours ?

Oui. Dupliquez un trou dans le fichier du parcours, donnez-lui un id unique, réglez par, départ et trou, ajoutez-le à courses.js et indiquez son nom et son astuce dans les fichiers de langue.

Three.js est-il chargé depuis un CDN ?

Non. Three.js, Rapier, les polices et la musique sont tous dans game/ : le jeu n'a besoin que de votre hébergement.

Pourquoi mon hébergeur affiche-t-il un écran vide ?

En général, à cause des types MIME. Servez les .js en JavaScript et les .wasm en application/wasm, ouvrez le jeu en HTTP(S) et vérifiez que WebGL2 est activé.

Peut-on jouer entre amis ?

Oui, de deux à quatre joueurs à tour de rôle sur le même appareil. Le jeu en ligne ne fait pas partie de cette édition.

Est-ce la bonne base de mini-golf pour vous ?

Puttide convient à un portail familial ou sportif, à une agence qui crée un parcours à la marque d'un client, et à un développeur qui veut voir comment Three.js et Rapier fonctionnent ensemble dans un code lisible. Il convient moins à un projet qui exige des parties en ligne ou un classement partagé dès le premier jour.

Jouez un parcours complet dans la démo sur un téléphone, puis lisez la section du manuel sur l'ajout d'un trou. Si elle vous semble représenter un après-midi de travail, le reste du jeu est déjà fait.

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