r/design
Un jeu multijoueur codé en une semaine
Dans le cadre d'un workshop d'une semaine, notre groupe de 6 a été challengé de créer un jeu vibe codé fonctionnel : un écran partagé affiché sur un projecteur, dans lequel n'importe quel joueur peut rejoindre en temps réel depuis son téléphone en scannant un QR code.
L'inspiration : r/Place, l'expérience communautaire de Reddit où des millions d'utilisateurs collaborent ou s'opposent pixel par pixel sur un même canvas. Notre version : plus compacte, plus jouable en présentiel, avec une dimension d'équipe et de stratégie.
Code, design et mécanique de jeu
Vibe Coding avec Claude
J'ai co-développé le jeu en collaboration avec Claude AI — architecture WebSocket, logique serveur, synchronisation en temps réel entre tous les clients.
Design du système de jeu d'équipe
J'ai proposé et conçu la mécanique de coopétition : deux équipes qui s'affrontent sur le même canvas, avec création d'équipe, recrutement de joueurs et coordination collective.
Onboarding joueur
Conception d'un onboarding en 3 slides animées pour accompagner chaque nouveau joueur dans la compréhension du canvas, des pouvoirs et du jeu en équipe — sans friction.
Système de pouvoirs & templates
Définition et implémentation des pouvoirs (Bombe, Rafale, Accélération d'équipe, Remplacement couleur) et du système de templates partagés entre membres d'une même équipe.
Apprendre en 3 slides, sans lire de règles
Dès la première connexion, un onboarding animé guide le joueur à travers les 3 piliers du jeu. Chaque slide est auto-suffisante, visuelle et skippable pour ceux qui veulent plonger directement.
Un économie de jeu built-in
Chaque pixel posé rapporte 1 ✦. Accumuler de l'or permet d'acheter des pouvoirs individuels — ou de contribuer aux capacités collectives de son équipe si on est chef.
Bombe
Remplir un carré 5×5 pixels d'un coup. 20 ✦
Rafale
Poser 1 pixel/seconde pendant 30s. 40 ✦
Accélération (chef)
Cooldown 5s pour toute l'équipe pendant 2 min. 100 ◆
Remplacement (chef)
Remplacer une couleur dans une zone 10×10. 150 ◆
La coordination comme stratégie
Les joueurs peuvent créer ou rejoindre une équipe, choisir une couleur et un avatar. Le chef d'équipe peut uploader un template image visible en overlay sur le canvas — une référence visuelle pour que toute l'équipe travaille dans le même sens.
Le terrain de jeu collectif
L'écran projeté sert de référence commune : le canvas pixel en temps réel, un leaderboard joueurs/équipes, et le QR code de connexion toujours visible. Les pixels apparaissent instantanément à la pose — synchronisés par WebSocket sans rechargement.
" Coder un produit de A à Z en une semaine, c'est prendre des décisions UX à chaque ligne de code. "
- — Le vibe coding avec une IA permet d'aller vite, mais les choix de structure restent entièrement humains. J'ai appris à formuler des intentions précises plutôt que du code.
- — L'onboarding d'un jeu doit être tellement clair qu'un joueur peut comprendre les règles en 20 secondes, sans avoir à lire une ligne de texte.
- — Un bon système d'équipe crée de la coordination spontanée — pas besoin de le forcer si la mécanique est bien pensée en amont.