Case Studies5 min readAugust 1, 2026

Pickleball Breaker pour Sportkation : transformer un resort de pickleball en jeu d'arcade navigateur

Sportkation voulait mettre son resort de pickleball du delta du Mékong dans toutes les poches. Voici comment Code Crush a conçu et développé Pickleball Breaker — un jeu d'arcade WebGL gratuit avec deux courts, six power-ups et un classement mondial en direct, fluide même sur iPhone.

Code Crush Team

Gamification Agency

Pickleball Breaker — le court Mekong Night en plein rallye avec multiplicateur de combo, développé par Code Crush pour Sportkation

Le projet

Pickleball Breaker est le premier jeu d'arcade construit autour du pickleball — et il est jouable dès maintenant sur pickleball.sportkation.com. Nous l'avons conçu et développé pour Sportkation, une retraite pickleball dans le delta du Mékong au Vietnam, pour mettre leurs courts dans la poche de tout le monde.

Le concept : un jeu d'échanges façon Breakout — lobbez la balle par-dessus le filet, détruisez chaque cible de l'autre côté du court et gardez l'échange en vie tandis que le rythme s'accélère. Le tout tourne entièrement dans le navigateur — pas d'app store, pas de téléchargement, pas d'inscription — sur téléphone, tablette ou ordinateur. Un tap et vous êtes sur le court.

L'écran titre : deux courts, six power-ups, le top 10 mondial, et un gros bouton START MATCH.
L'écran titre : deux courts, six power-ups, le top 10 mondial, et un gros bouton START MATCH.

Le brief

La mission de Sportkation est de faire grandir le pickleball au Vietnam — mais tout le monde ne peut pas filer dans le delta du Mékong un mardi soir. Ils nous ont demandé :

Un jeu qui ressemble à leur lieu — les palmiers, les projecteurs, les nuits du delta — que tout le monde peut lancer instantanément depuis un lien, assez compétitif pour qu'on y revienne, et fluide sur les téléphones que les gens possèdent vraiment.

Trois contraintes dures en découlaient : zéro installation (chaque clic vers un app store perd la moitié de l'audience), mobile-first (leur audience est sur téléphone, et Safari iOS tue les pages trop lourdes), et un vrai classement (la fierté est la boucle de rétention).

Comment nous l'avons construit

De la 3D temps réel, zéro installation

Tout le jeu est rendu en direct avec WebGL (Three.js) — le court, les paddles, les tribunes, tout. C'est ce qui lui permet de tourner comme une app native tout en se propageant comme un lien dans un SMS, la même approche que dans nos campagnes de marque.

Un jumeau numérique du resort

Le jeu embarque deux courts. Stadium est l'arène classique sous les projecteurs. Mekong Night est la déclaration d'amour au resort : un court baigné de lumière, encadré de palmiers, d'un sala en chaume et de villas au bord de la rivière — des modèles 3D sur mesure, générés et optimisés spécialement pour ce projet, agencés pour refléter l'atmosphère du soir de la vraie retraite.

Mekong Night en plein rallye — multiplicateur de combo en cours, projecteurs allumés, palmiers balancés.
Mekong Night en plein rallye — multiplicateur de combo en cours, projecteurs allumés, palmiers balancés.

Le game feel, c'est le jeu

Un jeu d'échanges vit ou meurt sur la sensation d'un impact. Nous avons réglé le « juice » à la milliseconde : tremblement d'écran sur les smashes, flashs quand les cibles éclatent, multiplicateurs d'échange jusqu'à ×5, un compte à rebours 3-2-1 en apnée avant chaque service, et six power-ups (Defensive Wall, Multiball, Smash, Heavy Ball, Racket XL, Power Shot) qui tombent des cibles détruites et se combinent en records.

Un rallye au Stadium en cours — les cibles éclatent, le multiplicateur monte.
Un rallye au Stadium en cours — les cibles éclatent, le multiplicateur monte.

La performance comme fonctionnalité

Voici la partie qu'on ne voit pas sur les captures. Safari iOS impose un plafond strict de mémoire GPU — dépassez-le et le navigateur tue simplement l'onglet. Notre première version du resort rendait 5,5 millions de triangles (les palmiers, le sala et les villas sont des modèles denses, placés une douzaine de fois), avec ombres douces et framebuffer pleine résolution. Parfait sur desktop, crash instantané sur iPhone.

Nous avons donc réingéniéré le budget :

Décimation des meshes : les trois modèles lourds sont passés de ~500 000 triangles chacun à ~95 000 — de 5,5M à 1,2M au total, et de 47 Mo de téléchargements à 15 Mo — sans différence visible à distance de jeu.
Un palier qualité par appareil : les appareils tactiles ont un pixel ratio plafonné, un filtrage d'ombres allégé et une shadow map plus petite, tandis que le desktop garde le chemin pleine fidélité.
Une UI pensée pour le tactile : l'overlay défile correctement sur petits écrans, les boutons sont dimensionnés pour le doigt et centrés optiquement, et le paddle suit un glisser partout dans votre moitié de court.

Résultat : le même jeu est fluide sur un iPhone, pas seulement sur un PC de gaming.

Le mode portrait sur téléphone — le court se recadre pour jouer à un pouce.
Le mode portrait sur téléphone — le court se recadre pour jouer à un pouce.

Un classement aux enjeux réels

Les high scores ont plus de saveur quand ils sont officiels. Les joueurs peuvent se connecter avec Google (un échange de token sans état — pas de cookies, pas de comptes à gérer), et leur meilleur score est enregistré automatiquement sur un classement mondial. Le top 10 s'affiche directement sur l'écran de jeu, et le classement complet vit sur sportkation.com/game/leaderboard — une page que nous avons stylée pour coller au look arcade néon du jeu, jusqu'aux mêmes polices et panneaux de verre.

Le backend est de la vraie infrastructure de production : une API de scores sur le site principal, le jeu comme service cloud dédié, et la page de classement rendue côté serveur à chaque requête.

Le classement mondial, stylé comme le jeu.
Le classement mondial, stylé comme le jeu.

Pourquoi ça marche pour Sportkation

Le jeu est un point de contact de marque qui ne coûte rien à distribuer : un échange de soixante secondes dans le bus, un tournoi entre collègues à la pause déjeuner, une première approche du pickleball pour quelqu'un qui n'a jamais tenu un paddle. Chaque partage est une invitation au resort — et chaque score au classement est une raison de revenir demain.

C'est en ligne, gratuit, et ça n'attend que des challengers : jouez à Pickleball Breaker — puis lisez la version de Sportkation sur le blog Sportkation.

Conçu et développé par Code Crush pour Sportkation — gameplay, direction artistique 3D, ingénierie de performance mobile, backend du classement et déploiement cloud. Nouveaux courts et tournois saisonniers dans la feuille de route.

Tagged with

case studySportkationpickleballThree.jsWebGLbrowser gamearcade gameleaderboardmobile optimizationVietnam
Newsletter gratuite

Recevez des conseils sur la gamification chaque semaine

Rejoignez les responsables de marque et les marketeurs qui reçoivent nos meilleurs contenus sur les jeux de marque, les stratégies d'engagement et le marketing interactif — sans spam, désabonnement à tout moment.

Pas de spam. Désabonnement à tout moment. Nous respectons votre boîte mail.

Let's Build Something Your Audience Will Love

From branded games to immersive 3D experiences — we bring engagement to life.