Code source de jeu de tri de couleurs : quoi modifier en premier
Mochi Monsters comme exemple concret : les règles, les fichiers, l'unique fichier de configuration et les modifications qui demandent une recompilation.
Acheter le code source d'un jeu de tri de couleurs a du sens quand vous voulez un jeu façon water sort sur votre site sans écrire vous-même les règles de déplacement, le générateur de niveaux et le système de sauvegarde. Mochi Monsters est ce genre de pack : 60 niveaux répartis sur trois mondes, un mode Endless, du TypeScript lisible et un dossier de jeu prêt à héberger, pour $39 au prix catalogue.
Water sort, ball sort et Mochi Monsters reposent sur la même règle : on ne peut déplacer que vers un contenant vide ou sur un élément du dessus identique. Ce qui distingue un modèle d'un autre, c'est tout ce qui entoure cette règle. Ce guide parcourt le pack dans l'ordre où un acheteur le découvre, et se termine par les modifications faisables en cinq minutes et celles qui demandent un développeur.
La règle de tri, et les deux variantes qui s'y ajoutent
Le joueur touche un nid, puis un autre. Le groupe d'amis en gelée du dessus ne saute que si le nid d'arrivée est vide ou si son ami du dessus est de la même espèce. Un plateau est résolu quand chaque nid ne contient plus qu'une espèce. Indice, Annuler et Recommencer sont intégrés.
Deux mécaniques évitent que les 60 niveaux donnent l'impression d'un seul niveau répété. Un couvercle-coquillage ferme un nid et s'ouvre quand on remplit ce nid avec l'espèce indiquée sur le couvercle ; Annuler peut le refermer. Les nids de marée liés échangent leur place quand l'un d'eux se vide, ce qui change le plateau en plein milieu du plan du joueur.
Pour un acheteur, elles comptent parce qu'elles sont déjà écrites et testées. Ajouter ce type de variante à un jeu de tri basique prend presque toujours plus de temps que prévu, surtout à cause des cas limites autour d'Annuler.
Jouer à la démo de Mochi Monsters
Ce que contient le code source du jeu de tri de couleurs
- 60 niveaux de campagne dans Sugar Meadow, Bubble Beach et Mushroom Village, 20 par monde.
- Un mode Endless généré à partir d'une graine, débloqué après le niveau 20.
- Un album de collection, un jardin interactif et six chapeaux à acheter avec les Sugar Drops gagnées en jouant.
- Commandes tactiles et souris, sauvegardes locales et une option de réduction des animations.
- Un dossier game/ prêt à héberger, le code source JavaScript et TypeScript lisible, la configuration, les tests et les mentions de licence.
- Un guide illustré hors ligne en 14 langues, avec des captures d'écran en anglais.
L'interface existe en 14 langues : anglais, portugais, espagnol, français, allemand, italien, néerlandais, polonais, turc, russe, indonésien, japonais, coréen et chinois simplifié. Le guide s'affiche automatiquement dans la langue du lecteur.
La pile technique : TypeScript et JavaScript sur Canvas 2D, avec Web Audio. Les fichiers sont en HTML, CSS, JavaScript, JSON, TypeScript, WebP, PNG et MP3.
Comment le projet est organisé
Voyez le pack comme trois couches, chacune demandant un effort différent.
Couche 1 : le jeu hébergé
Le dossier game/ est complet. Mettez son contenu sur un hébergement statique HTTP(S) et le jeu tourne. Aucune compilation ici.
Couche 2 : le fichier de configuration
mochi.config.js se trouve à côté d'index.html. Il définit le titre dans le navigateur, le logo, la langue de départ et la clé de sauvegarde. Modifiez une valeur, envoyez le fichier, rechargez la page. Toujours pas de compilation.
Couche 3 : le code source TypeScript
Règles, graphismes, niveaux et prix des chapeaux se trouvent dans le code source. Les changer veut dire modifier le TypeScript et recompiler avec npm, ce qui demande Node.js 22.13 ou plus récent. Le code source inclut des outils de génération de niveaux et 52 tests automatisés couvrant règles, niveaux, sauvegarde et traductions.
Quoi modifier en premier dans un modèle de jeu de tri de couleurs
Voici l'ordre que nous conseillons, des modifications sans compilation jusqu'au travail de développeur.
- Titre et logo dans mochi.config.js, pour que l'onglet du navigateur et l'écran d'accueil portent votre marque.
- Langue de départ dans le même fichier, si la plupart de vos joueurs ne parlent pas anglais.
- Clé de sauvegarde : fixez-la une fois avant le lancement, puis n'y touchez plus. La changer sur un site en ligne fait perdre leur progression aux joueurs.
- Graphismes et couleurs des amis en gelée, si vous avez besoin d'un reskin complet. C'est du travail sur le code source.
- Prix des chapeaux et économie des récompenses, également dans le code source.
- Nouveaux niveaux, avec les outils de génération, puis les tests.
Pour beaucoup de sites, les trois premières étapes suffisent. Un reskin complet, en revanche, implique de remplacer chaque créature, chaque nid et chaque décor dans trois mondes, et c'est là que part l'essentiel du temps. Faites une estimation honnête avant de promettre une date à un client.
La marque blanche est autorisée : votre nom et votre logo, ou ceux de votre client, peuvent remplacer les nôtres partout dans le jeu.
L'héberger, l'intégrer et aller plus loin
Mettez le contenu de game/ sur n'importe quel hébergement statique HTTP(S), dans un sous-dossier si vous le souhaitez. Pour jouer, il ne faut ni base de données, ni PHP, ni service Node.js. Ouvrir les fichiers depuis le disque avec file:// ne fonctionne pas : testez depuis un serveur web local ou réel.
Le jeu fonctionne dans les versions actuelles de Chrome, Edge, Firefox et Safari sur ordinateur, tablette ou téléphone. La progression est conservée dans le stockage local du navigateur, sans synchronisation entre appareils. Ce n'est pas une application installable hors ligne : les joueurs le chargent depuis votre adresse web.
Le pack ne contient pas de projet d'application native. Si vous le voulez sur un store, relié au SDK d'un portail ou installé sur votre serveur, nous chiffrons ce travail projet par projet.
Demander un devis pour un reskin, l'hébergement ou une version app
Ce que Mochi Monsters ne contient pas
L'édition n'a ni comptes en ligne, ni sauvegardes dans le cloud, ni classements mondiaux, ni achats en argent réel, ni SDK publicitaire. Projets d'applications natives, hébergement et développement sur mesure ne sont pas inclus. Il n'y a pas de campagne jouable au-delà des trois mondes : c'est le mode Endless qui fait durer le jeu ensuite.
Si vous comptez afficher de la publicité, la licence autorise la monétisation publicitaire de votre produit final, mais brancher une régie publicitaire reste un travail de votre côté ou une prestation que nous chiffrons.
Licence et prix en un paragraphe
Un achat donne une licence perpétuelle et non exclusive pour utiliser l'édition dans un seul produit final, le vôtre ou celui d'un client. Les joueurs peuvent jouer gratuitement ou via une monétisation publicitaire. Vous pouvez modifier le code, les graphismes et l'audio dans ce produit, mais vous ne pouvez pas revendre ni partager séparément le modèle, son code source ou ses ressources, que ce soit sous forme de kit ou dans un autre produit destiné aux développeurs. Le support dure 6 mois, ou 12 avec l'extension au moment du paiement, et couvre l'installation et l'utilisation des fichiers ainsi que la correction des défauts reproductibles ; la licence ne prend pas fin avec le support. Le prix catalogue est de $39 ; jusqu'au 30 novembre 2026, une promotion Black Friday retire 15 % sur chaque modèle, Mochi Monsters coûte donc $33,15, et à partir du 1er décembre les prix reviennent au tarif catalogue.
Questions fréquentes
Mochi Monsters est-il un jeu de type water sort ?
Il utilise la même règle de base : un groupe ne peut aller que dans un nid vide ou sur un ami identique. Au lieu de liquide dans des tubes, les joueurs trient des créatures en gelée dans des nids, avec en plus les couvercles-coquillages et les nids de marée.
Dois-je compiler le jeu avant de le mettre en ligne ?
Non. Mettez le contenu de game/ sur un hébergement HTTP(S). Le développement sur le code source est facultatif.
Que puis-je modifier sans recompiler ?
Le titre dans le navigateur, le logo, la langue de départ et la clé de sauvegarde, tous dans mochi.config.js. Règles, graphismes, niveaux et prix des chapeaux demandent le code source TypeScript et une recompilation avec npm.
Puis-je ajouter des mondes ou des niveaux ?
L'édition compte 60 niveaux répartis sur trois mondes. En ajouter implique de modifier le code source avec les outils de génération de niveaux fournis. Les campagnes supplémentaires ne font pas partie du pack.
Où la progression des joueurs est-elle enregistrée ?
Dans le stockage local du navigateur utilisé. La synchronisation dans le cloud n'est pas incluse.
Est-ce que ça fonctionne sur téléphone ?
Oui. Le jeu tourne dans les navigateurs mobiles actuels avec des commandes tactiles, et sur ordinateur avec une souris.
À qui s'adresse un jeu de tri de couleurs, et quoi regarder d'autre
Un jeu de tri de couleurs convient aux portails casual, aux sites familiaux et aux marques qui veulent un jeu calme avec des parties courtes. Il se lit bien sur téléphone, et sa règle tient en une phrase.
Si vous voulez un puzzle qui demande plus d'anticipation, Beep Out est un puzzle de parking en 3D avec 30 niveaux et des passagers à associer, à $35 au prix catalogue. Si votre public aime les chiffres, Tenguin est un puzzle d'association de nombres où l'on forme des paires de nombres égaux ou de deux nombres qui font dix, à $39 au prix catalogue.
Voir Beep Out, le puzzle de parking en 3D