On veut organiser une soirée autour du jeu du demi cercle en ligne, mais la version officielle ne couvre pas toutes nos envies : thèmes personnalisés, règles maison, interface en français avec nos propres catégories. Créer sa propre version web du jeu du demi cercle demande quelques choix techniques précis, un peu de code, et surtout une bonne compréhension de la mécanique de jeu avant de toucher au clavier.
Architecture technique pour un jeu du demi cercle multijoueur
Le piège classique quand on code un jeu social en ligne, c’est de vouloir tout faire transiter par le même canal. Pour un jeu du demi cercle en ligne, on a deux flux très différents à gérer : l’état logique (position du curseur sur le cadran, scores, tour en cours) et, si on le souhaite, la communication vocale entre joueurs.
Le pattern le plus adapté repose sur WebSockets pour l’état de jeu et WebRTC pour l’audio/vidéo. Les WebSockets utilisent TCP, ce qui garantit que chaque mise à jour du curseur arrive dans l’ordre et sans perte. WebRTC, lui, passe par UDP et tolère quelques pertes de paquets, parfait pour la voix en temps réel.
On parle souvent de latence « zéro » pour les jeux en ligne, mais c’est un leurre. L’approche réaliste consiste à se fixer un budget de latence global entre 200 et 500 ms, réparti entre le transport réseau, l’encodage, le décodage et un buffer de gigue. Pour un jeu social au tour par tour comme le demi cercle, ce budget est largement confortable.
Choix du framework et stack serveur pour créer le jeu
On n’a pas besoin d’un moteur 3D ni d’un framework lourd. Un jeu du demi cercle en ligne se résume à un cadran semi-circulaire interactif, un système de salons (rooms) et un chat ou de la voix. Voici les briques à assembler :
- Un serveur Node.js ou Flask (Python) avec la bibliothèque Socket.IO pour gérer les WebSockets. Flask convient si on est plus à l’aise en Python, Node.js offre un écosystème plus riche côté temps réel.
- Un front-end en HTML/CSS/JavaScript natif ou avec un framework léger comme Svelte. Le cadran se dessine très bien en SVG ou avec l’élément Canvas.
- Un système de rooms côté serveur : chaque partie génère un code unique, les joueurs rejoignent en saisissant ce code. Socket.IO gère nativement les rooms.
- Pour la persistance légère (configuration de la partie, pile de cartes d’indices), IndexedDB côté client et un simple fichier JSON côté serveur suffisent. Pas besoin de base de données relationnelle pour un prototype.
L’avantage de cette stack, c’est qu’un joueur dont la connexion fluctue peut revenir dans la partie. En mettant en cache la configuration de la room et l’état courant via un service worker, on évite de perdre la progression.
Dessiner le cadran du demi cercle en SVG
Le cadran est le cœur visuel du jeu. On dessine un arc de cercle (path SVG avec un attribut d) et on superpose une aiguille rotative contrôlée par l’utilisateur. En pratique, ça donne un élément SVG de type path pour l’arc, un line ou un rect transformé par rotation pour l’aiguille, et des zones colorées pour le gradient du spectre.
La zone cible (celle que seul le médium voit) est un arc plus petit, positionné aléatoirement. On génère un angle de départ et un angle de fin côté serveur, puis on l’envoie uniquement au joueur désigné comme médium via un message WebSocket privé.
Rendre l’aiguille interactive
On capte les événements souris ou tactile sur le SVG, on calcule l’angle par rapport au centre du demi cercle avec Math.atan2, et on clamp la valeur entre 0° et 180°. Chaque déplacement de l’aiguille est envoyé au serveur, qui le redistribue aux autres joueurs en mode compétitif, ou qui attend la validation collective en mode coopératif.
Un point de vigilance : le calcul d’angle doit tenir compte de l’offset du SVG dans la page. Sans cette correction, l’aiguille « saute » quand la fenêtre est redimensionnée. On récupère les coordonnées locales avec getBoundingClientRect() avant chaque calcul.
Système de scoring et gestion des manches
Le scoring du jeu du demi cercle repose sur la proximité entre le placement de l’aiguille et la zone cible. On doit coder deux modes distincts.
En mode coopératif, une seule aiguille est placée par consensus du groupe. Le score est commun : quatre points si l’aiguille tombe au centre de la cible, trois points en périphérie proche, deux aux bords. L’objectif est de battre son propre record d’une session à l’autre.
En mode compétitif, chaque joueur place sa propre aiguille sans voir celles des autres. Le médium marque la moyenne des scores de ceux qui l’ont bien suivi, ce qui décourage les indices trop obscurs visant un seul initié. La manche se termine quand tous les joueurs ont validé leur position.
Personnaliser les catégories d’indices
C’est là que créer sa propre version prend tout son intérêt. On stocke les catégories (spectres de type « froid à chaud », « pas du tout à complètement », « mainstream à underground ») dans un fichier JSON. Chaque spectre est défini par ses deux extrêmes et, optionnellement, un thème associé.
- On peut ajouter des catégories métier (pour un team building : « risqué à sûr pour un projet client »).
- Des catégories pop culture (« film oubliable à chef-d’œuvre »).
- Des catégories absurdes pour les soirées entre amis (« acceptable en réunion à motif de licenciement »).
Le maître du jeu sélectionne les catégories actives avant le lancement de la partie. Le serveur pioche ensuite un spectre aléatoire dans le pool actif à chaque manche.
Déploiement et hébergement d’un jeu en ligne léger
Un serveur Node.js avec Socket.IO tourne confortablement sur une instance d’entrée de gamme chez n’importe quel hébergeur cloud. Pour un usage entre amis (moins d’une dizaine de joueurs simultanés), un plan gratuit de type Render ou Fly.io fait le travail.
Si on veut rendre le jeu accessible sans installation, on sert le front-end en statique et le serveur WebSocket sur le même port. Les joueurs n’ont qu’à ouvrir une URL et saisir un code de room pour rejoindre la partie depuis leur téléphone ou leur ordinateur.
Les retours varient sur la stabilité des hébergeurs gratuits sous charge, mais pour des sessions ponctuelles entre amis, c’est un compromis raisonnable. Si la latence devient gênante en mode vocal, on coupe le WebRTC et on bascule sur un appel Discord en parallèle, solution pragmatique qui fonctionne très bien.
Avec ces briques en place, on obtient un jeu du demi cercle en ligne personnalisé, jouable sur navigateur, sans compte à créer ni application à télécharger. Le plus chronophage n’est pas le code serveur ni le cadran SVG, mais la rédaction d’une bonne banque de spectres : c’est elle qui fait la qualité des parties.
