Un jeu de Motus jouable avec la chatroom Twitch

Après avoir expérimenté plusieurs overlays interactifs pour OBS, je me suis demandé :

Comment transformer une scène d’attente en un Motus contrôlé par le chat Twitch ?

L’idée était de recréer le principe de Motus dans un overlay HTML affiché dans une Source Navigateur OBS, où les spectateurs jouent ensemble en proposant des mots directement depuis le chat.

Comment fonctionne le motus ?

L’ensemble du projet est volontairement autonome et tient dans quelques fichiers faciles à personnaliser :

• un fichier HTML à charger dans OBS dans une simple source Navigateur
• un fichier words.txt contenant la liste des mots
• un fichier motus.ini permettant de configurer la partie

Depuis ce fichier de configuration, il est possible de modifier :

• le nombre maximal de tentatives (par défaut : 6)
• la durée d’une manche (par défaut : 3mins)
• le temps d’attente entre deux propositions (par défaut : 10s)
• la chatroom Twitch à surveiller

Dans la chatroom, il suffit de proposer un mot avec la commande !motus, et le jeu évalue case par case la validité de chaque lettre du mot.

• 🟩 (vert) bonne lettre, à la bonne position
• 🟨 (orange) bonne lettre, mais mal placée
• 🟥 (rouge) lettre absente du mot

Lorsqu’un mot est trouvé, une nouvelle manche démarre automatiquement avec un mot choisi au hasard. Si personne ne trouve la réponse dans le temps imparti ou après le nombre maximal de tentatives, le mot est révélé puis remplacé par un nouveau.

Le développement du motus

Globalement, la création s’est faite en deux temps, la logique du jeu puis la gestion de la connexion à la chatroom Twitch.

Créer la grille de jeu

Comme souvent sur ce type de projet, la partie visuelle a été relativement rapide. Le véritable défi était de reproduire plus ou moins fidèlement les règles de Motus tout en permettant à plusieurs dizaines de personnes de jouer simultanément.

J’ai commencé par développer une grille de jeu entièrement en HTML et CSS, capable de générer dynamiquement les lignes, les cases et leurs couleurs.

Toute la logique est ensuite pilotée en JavaScript.

Le projet repose notamment sur plusieurs mécanismes :

• lecture du fichier de configuration au démarrage ;
• sélection aléatoire d’un mot dans la liste ;
• génération automatique de la grille ;
• connexion au chat Twitch via TMI.js ;
• analyse des commandes !motus ;
• comparaison lettre par lettre avec le mot recherché ;
• calcul des couleurs selon les règles de Motus ;
• lancement automatique d’une nouvelle manche.

La comparaison des lettres a probablement été la partie la plus complexe. Il fallait gérer correctement les lettres présentes plusieurs fois dans un même mot, les accents et les différentes longueurs de mots tout en restant fidèle aux règles du jeu.

Après plusieurs essais, j’ai également choisi de dévoiler systématiquement la première lettre. Sans cette aide, les parties devenaient souvent trop longues pour une scène d’attente de stream.

Le choix des mots

La qualité des parties dépend énormément de la liste de mots.

J’ai donc constitué une liste répondant à quelques règles simples :

• uniquement des mots courants
• aucune expression composée
• aucun nom propre
• conservation des accents
• des mots compris entre 7 et 12 lettres

L’ensemble reste néanmoins entièrement personnalisable : il suffit de modifier le fichier words.txt pour créer son propre dictionnaire ou proposer des thèmes spécifiques.

Connexion avec le chat Twitch

Comme pour plusieurs de mes autres expérimentations sur des overlays Twitch interactifs, j’utilise la librairie Javascript TMI.js afin de récupérer les messages de la chatroom en temps réel.

Un script surveille en permanence la chatroom renseignée au préalable dans le fichier de configuration.

Le but est de trier chaque message et de ne prendre en compte que ceux qui commencent par la commande !motus

J’ai volontairement ajouté un délai de 10 secondes entre deux propositions de jeu.

Je me suis rapidement rendu compte que sans cette limitation, tout le monde joue en même temps mais personne n’a le temps d’analyser les indices affichés et le jeu devient vite frustrant.

Ce petit “cooldown” permet de laisser un temps de réflexion commun.

Quelques pistes d’amelioration

Le prototype a été utilisé comme scène d’attente interactive lors de plusieurs festivals de podcast et s’est montré suffisamment robuste pour être utilisé en conditions réelles.

Il reste encore de place pour rendre l’expérience meilleure :

• créer plusieurs thèmes graphiques facilement interchangeables
• améliorer la gestion des files d’attente et du spam
• conserver un tableau des scores entre les parties
• proposer plusieurs dictionnaires thématiques
• imaginer un véritable mode versus entre deux équipes

Au-delà de Motus, cette expérimentation m’a surtout permis de construire une base réutilisable pour d’autres jeux pilotés par le chat Twitch, comme un pendu, des mots mêlés ou d’autres jeux collaboratifs.