Code source de jeu de ping-pong : Sunset Rally fichier par fichier
Un jeu de ping-pong 3D pour navigateur, ouvert fichier par fichier : où se trouvent la physique, le score, la campagne et les décors, et quoi modifier en premier.
Si vous cherchez le code source d'un jeu de ping-pong à héberger et à modifier, Sunset Rally est un jeu de tennis de table 3D pour navigateur déjà terminé : une campagne de neuf matchs, trois adversaires contrôlés par l'ordinateur, un atelier et le projet TypeScript complet, au prix catalogue de $39. Le dossier du jeu est déjà compilé et non minifié : vous pouvez le mettre en ligne tout de suite et l'étudier plus tard.
Les jeux de sport sont plus difficiles à adapter qu'il n'y paraît, car le plaisir tient à la physique et aux contrôles, pas aux menus. Ce guide montre où se trouve chacun de ces éléments dans le projet Sunset Rally, ce que vous pouvez modifier sans risque et ce que cette édition ne comprend pas.
Comment se joue ce jeu de ping-pong
Les matchs se jouent en sept points contre un adversaire contrôlé par l'ordinateur. On déplace la raquette avec le pointeur ou en faisant glisser le doigt, et les frappes sont automatiques. Pousser vers le haut donne de la puissance, se déplacer sur le côté place la balle, tirer vers le bas joue un amorti, et une balle qui reste haute ne demande qu'à être smashée.
Une aide facultative, que l'on peut activer ou désactiver pendant le match, amène la raquette à la hauteur de la balle. Sur un site public, c'est important : même un joueur qui découvre le jeu sur son téléphone parvient à renvoyer la balle.
Trois adversaires ont chacun leur style : Capi le patient, Nori la joueuse et Miso le précis, chacun en mode Facile, Normal ou Difficile. En entraînement, un partenaire renvoie toutes les balles. Après le match, un ralenti rejoue le point décisif.
Jouer à la démo de Sunset Rally
Ce que contient le pack avec le code source du jeu de ping-pong
- Un dossier game/ prêt à héberger, déjà compilé et non minifié.
- Le code source TypeScript pour développeurs, avec sa configuration Vite et les ressources du jeu, dans source/.
- Des manuels illustrés en anglais et en portugais, avec de vraies captures d'écran.
- Les polices et fichiers audio fournis avec le jeu.
- Les mentions de licence des composants tiers et un journal des modifications.
La pile technique : TypeScript, Three.js r184, Vite et WebGL2. Les fichiers sont en HTML, CSS, JavaScript, TypeScript et JSON. 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é. Les manuels sont uniquement en anglais et en portugais.
Tout ce qui entoure les matchs fait aussi partie du pack : un Sunset Circuit de neuf matchs en trois étapes, trois décors (le jardin au coucher du soleil, le jardin des cerisiers et le café en bord de mer) le matin, l'après-midi, la nuit ou sous la pluie, et un atelier où les pièces gagnées achètent des couleurs de raquette, des revêtements, des formes, des manches, des bois, des bandes de chant, des autocollants ainsi que des styles de balle et de table.
Où se trouve chaque chose dans le code
Le manuel associe chaque partie du jeu à un fichier. Voici la liste à garder ouverte pendant que vous travaillez :
- Campaign.ts : les neuf matchs de la campagne et leurs objectifs d'étoiles.
- Places.ts : l'apparence de chaque décor.
- physics.ts : la physique de la balle et de la raquette.
- match.ts : le score et les règles du match.
- i18n.ts : les textes de l'interface en anglais et en portugais ; les autres langues sont dans le dossier locales.
- styles.css : le style des menus et des écrans.
Chaque match de la campagne rapporte jusqu'à trois étoiles : gagner, toucher trois coins et tenir un échange de dix frappes. Cela fait 27 étoiles, et terminer chaque décor donne droit à un prix de l'atelier. Comme les conditions d'étoiles se trouvent dans un seul fichier de campagne, vous pouvez rendre la campagne plus facile ou plus difficile sans fouiller le code.
Quoi modifier en premier dans un modèle de ping-pong
Nous conseillons cet ordre, du moins risqué au plus risqué.
- Les textes de l'interface et le nom du jeu, dans i18n.ts et le dossier locales.
- Les couleurs et les écrans, dans styles.css.
- Les styles de l'atelier pour les raquettes, les balles et les tables, pour que l'équipement porte votre marque.
- L'apparence des décors, dans Places.ts.
- Les matchs de la campagne et les objectifs d'étoiles, dans Campaign.ts.
- La physique et le score, dans physics.ts et match.ts, seulement si vous voulez des sensations de jeu différentes.
Le manuel ajoute trois règles à suivre. Ne changez pas les identifiants de déblocage, les identifiants d'objets ni les clés de sauvegarde, sinon les joueurs perdent ce qu'ils ont gagné. Faites une sauvegarde avant de commencer. Modifiez une fonctionnalité à la fois, pour savoir quel changement a provoqué quoi.
La marque blanche est autorisée : votre nom et votre logo, ou ceux de votre client, peuvent remplacer les nôtres.
Recompiler, héberger et intégrer
Pour jouer, rien n'est à compiler. Envoyez le contenu de game/ sur n'importe quel hébergement HTTP(S) qui sert des fichiers statiques, conservez les chemins relatifs et ouvrez l'adresse. Ni PHP, ni base de données, ni compte ne sont nécessaires.
Pour modifier le code source, il vous faut Node.js (la version 24 LTS est recommandée) et npm. Modifiez le TypeScript, recompilez avec Vite et remplacez le dossier game/ hébergé par le nouveau résultat.
Le navigateur doit prendre en charge JavaScript, les modules ES et WebGL2. Le tactile et la souris sont tous deux pris en charge, et les contrôles s'adaptent à la taille de l'écran. Les performances dépendent du navigateur et de l'appareil : testez sur les téléphones de vos joueurs.
- Envoyez game/ dans un dossier de test sur votre hébergement.
- Jouez un match sur un navigateur d'ordinateur et un autre sur téléphone.
- Faites vos modifications de textes et de style dans source/, puis recompilez.
- Remplacez tout le dossier de test, puis rejouez.
- Déplacez le jeu à son adresse définitive.
Ce que cette édition ne comprend pas
Cette édition se joue contre l'ordinateur : campagne, match libre et entraînement. Le multijoueur en ligne, les salons en ligne, les classements en ligne et les comptes cloud ne font pas partie du pack, et il n'y a pas de mode à deux joueurs. Aucun SDK ni compte publicitaire n'est inclus, pas plus que des applications natives ou l'hébergement.
La progression reste dans le navigateur du joueur : étoiles de campagne, résultats, statistiques, ralentis et objets de l'atelier. Aucun serveur ni compte n'est utilisé, il n'y a donc rien à maintenir après le lancement.
Si vous avez besoin d'un mode en ligne, d'un SDK de portail, d'une version pour les boutiques d'applications ou d'une installation sur votre serveur, c'est une prestation à part, chiffrée selon le projet.
Demander un devis pour un développement sur mesure
Licence, support et prix en un paragraphe
Un achat donne une licence perpétuelle et non exclusive pour un produit final, le vôtre ou celui d'un client, que les joueurs peuvent utiliser gratuitement ou avec une monétisation publicitaire. Vous pouvez modifier le code, les graphismes et l'audio au sein de ce produit, mais vous ne pouvez pas revendre ni partager le modèle, son code source ou ses ressources seuls. 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 personnalisation, l'hébergement et l'intégration d'un SDK ou d'un portail font l'objet d'un devis séparé. Le prix catalogue est de $39 ; jusqu'au 30 novembre 2026, une promotion Black Friday retire 15 % sur chaque modèle, Sunset Rally coûte donc $33.15, et à partir du 1er décembre les prix reviennent au tarif catalogue.
Questions fréquentes
Dois-je compiler quelque chose pour utiliser ce jeu de ping-pong ?
Non. Le dossier game/ est déjà compilé. Envoyez son contenu sur un hébergement web statique et ouvrez l'adresse. Node.js et npm ne servent que si vous modifiez le TypeScript et recompilez.
Y a-t-il un mode à deux joueurs ou en ligne ?
Non. Cette édition se joue contre l'ordinateur, en campagne, en match libre et en entraînement.
Puis-je modifier la campagne et les objectifs d'étoiles ?
Oui. Les matchs et les conditions d'étoiles sont dans Campaign.ts. Recompilez ensuite avec Node.js.
Puis-je changer le comportement de la balle ?
Oui. La physique est dans physics.ts et les règles de score dans match.ts. Changez une chose à la fois et testez contre chaque adversaire.
Est-ce que le jeu fonctionne sur téléphone ?
Oui, avec des contrôles tactiles qui s'adaptent à l'écran. WebGL2 est requis et les performances dépendent de l'appareil : testez sur les téléphones que vous visez.
Où la progression est-elle enregistrée ?
Dans le navigateur du joueur. Aucun serveur ni compte n'est utilisé.
D'autres modèles de sport à comparer
Si vous créez un espace sport sur votre site, deux autres modèles s'accordent bien avec Sunset Rally. Velvet Pool est un billard 8-ball avec adversaire contrôlé par l'ordinateur et mode deux joueurs en local, écrit en JavaScript pur avec WebGL2, au prix catalogue de $39. Puttide est un minigolf 3D de 30 trous, construit avec Three.js et Rapier, au prix catalogue de $39. Les deux ont une interface en 14 langues.
Sunset Rally convient aux portails et aux sites qui veulent un jeu de sport aux matchs courts, aux studios qui livrent un jeu à la marque d'un client, et aux développeurs qui cherchent un projet TypeScript et Three.js lisible pour apprendre ou l'enrichir. S'il vous faut deux joueurs sur le même appareil, Velvet Pool propose ce mode, Sunset Rally non.
Voir Velvet Pool, le jeu de billard 8-ball
Acheter deux modèles ou plus dans une même commande fait baisser le prix de chaque licence : 5 % de remise pour deux, 10 % pour trois, 15 % pour quatre et 20 % à partir de cinq.