Workshop · Game Design · Vibe Coding · 1 semaine
r/design
Créer un jeu social jouable sur téléphone avec un écran principal — codé en une semaine avec WebSocket et Claude AI.
Vibe Coding
Game Design
Contexte
Un jeu multijoueur codé en une semaine
Dans le cadre d'un workshop d'une semaine, notre groupe de 6 a créé 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 sur un même canvas. Notre version : plus compacte, jouable en présentiel, avec une dimension d'équipe et de stratégie.
Mon rôle
Code, design et mécanique de jeu
Contribution 01
Vibe Coding avec Claude
J'ai co-développé le jeu en collaboration avec Claude AI : architecture WebSocket, logique serveur et synchronisation en temps réel entre tous les clients, à partir d'une base prédéfinie pour le workshop.
Contribution 02
Onboarding joueur
Conception d'un onboarding en 3 slides animées pour accompagner rapidement chaque nouveau joueur dans la compréhension du canvas, des pouvoirs et du jeu en équipe avec le moins de frictions.
Contribution 03
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.
Contribution 04
Zone admin
Permet de modérer le jeu et les possibles dérives à l'aide d'un espace admin sécurisé.
Onboarding
Apprendre en 3 slides, sans lire de règles
Dès la première connexion, un onboarding animé guide le joueur à travers les 3 fonctionnalités du jeu. Chaque slide est auto-suffisante, visuelle et skippable pour ceux qui veulent plonger directement.
Pouvoirs & canvas
Une é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 l'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 ◆
Équipes & templates
Créer de la coordination en équipe
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.
Onglet équipe : profil, création, recherche
Écran partagé
Le terrain de jeu collectif
L'écran projeté sert d'affichage : 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 et sont synchronisés par WebSocket sans rechargement.
Écran projecteur : canvas · leaderboard · QR code
Apprentissages
Ce que ce projet m'a appris
Le vibe coding avec une IA permet d'aller vite, mais il faut une planification claire. J'ai appris à formuler des prompts précis pour économiser des tokens et obtenir des résultats cohérents.
L'onboarding d'un jeu doit être suffisamment clair pour qu'un joueur comprenne les règles en 10 secondes, sans lire une ligne de texte.
Un bon système d'équipe crée de la coordination spontanée, sans avoir besoin de la forcer si la mécanique est bien pensée.
IA