Le téléphone comme manette, la télé comme plateau : ce qu'on a appris avec ZapClash

ZapClash part d'une scène très ordinaire : des amis dans un salon, une télé, des téléphones dans toutes les poches. L'idée était de faire de ces téléphones des manettes, et de la télé un plateau de jeu partagé, sans que personne n'ait à installer quoi que ce soit. Voici ce que ça implique une fois qu'on ouvre le capot.

Zéro installation, vraiment

La règle qu'on s'est fixée dès le début : rejoindre une partie ne doit pas prendre plus de dix secondes. Un QR code sur la télé, on scanne, on tape son prénom, on joue. Pas de compte, pas de store, pas de mise à jour.

Ça impose de tout faire dans le navigateur. Le jeu est une application web progressive : elle se charge comme une page, se comporte comme une appli, et on peut l'épingler sur l'écran d'accueil si on y revient souvent. Le coût, c'est qu'on n'a pas accès à tout ce qu'une appli native offrirait. En pratique, on n'a rien regretté : le vibreur, le plein écran et le tactile suffisent largement à faire une manette.

Deux écrans, deux rythmes

La télé et les téléphones n'affichent pas la même chose, et c'est toute la richesse du format. La télé montre l'état partagé : la question, le chrono, les scores, ce que tout le monde doit voir en même temps. Chaque téléphone montre ce qui n'appartient qu'à son joueur : ses boutons, sa main, sa réponse avant qu'elle soit révélée.

Le piège classique, c'est la synchronisation. Si le chrono de la télé dit « 3 » et que celui du téléphone dit « 1 », le joueur se sent volé. On a donc une seule horloge de référence, côté serveur, et tous les écrans s'y calent. Les téléphones n'affichent jamais un temps qu'ils calculent eux-mêmes : ils affichent le temps que le serveur leur dit.

Le temps réel qui pardonne

Une soirée, c'est un Wi-Fi saturé, quelqu'un qui passe en 4G en allant chercher à boire, un téléphone qui se met en veille. Le canal temps réel, en WebSockets, doit encaisser tout ça.

Trois choix nous ont sauvés :

• L'état complet à chaque reconnexion. Quand un téléphone revient, il ne reçoit pas « ce qu'il a manqué », il reçoit « où on en est ». C'est plus simple, et ça se remet toujours d'aplomb.
• Les actions sont idempotentes. Appuyer deux fois sur « valider » parce que le réseau a hésité ne compte pas deux points.
• La télé est la source de vérité visuelle. Si un téléphone est en retard d'une demi-seconde, le joueur regarde la télé et comprend. On a conçu l'interface pour que lever les yeux soit toujours la bonne réaction.

Ce qu'on referait autrement

On a passé trop de temps au début sur des animations côté téléphone qui, dans une vraie soirée, personne ne regarde : les yeux sont sur la télé. À l'inverse, on avait sous-estimé l'importance du retour haptique : une petite vibration à la validation change complètement la sensation de « j'ai une manette dans la main ».

Et on a appris à faire des manches courtes. Une manche de trente secondes qu'on rejoue vingt fois vaut mieux qu'une partie de dix minutes qu'on finit poliment.

ZapClash est jouable sur zapclash.com. Prenez une télé, trois amis, et vos téléphones.