Mace Duel Mobile : un prototype de duel 3D mobile à deux joueurs

Un duel conçu pour le navigateur, sur téléphone comme sur ordinateur

Mace Duel Mobile est présenté comme un projet de jeu de duel 3D en ligne à deux joueurs. L’objectif : permettre à deux personnes, depuis des appareils distincts, de s’affronter dans une salle privée avec des commandes adaptées aussi bien au tactile qu’au clavier et à la souris.

La pile technique annoncée est séparée en deux parties : TypeScript, Vite et Three.js pour le client ; Node.js, TypeScript et ws pour le serveur. Le choix d’une architecture client-serveur répond à un enjeu central pour un jeu compétitif : ne pas confier au navigateur le calcul final des dégâts, de la santé ou de la position des joueurs.

Le serveur reste l’arbitre de la partie

Le principe est simple : le client envoie les commandes — déplacement, orientation du regard, saut, sprint, attaque ou charge de vent — mais le serveur décide de ce qui se produit réellement. Il calcule notamment la physique, les impacts, les dégâts et l’issue de chaque manche.

La simulation est prévue à 30 Hz, soit 30 mises à jour par seconde. Elle comprend des salons isolés, un système de manches, une limite de temps, des scores, une revanche et des contrôles de validité sur les messages reçus.

Cette approche réduit les possibilités de triche les plus évidentes : un client ne peut pas simplement déclarer qu’il a infligé des dégâts ou qu’il se trouve à une coordonnée donnée. Le serveur conserve donc l’état de référence de la partie.

Masse, chute et charges de vent

Le combat repose sur plusieurs mécaniques :

• une attaque à la masse à courte portée ;
• des dégâts augmentés lors d’une frappe portée pendant une chute ;
• un effet de recul sur la cible ;
• des charges de vent, limitées puis régénérées avec le temps ;
• des projectiles de vent capables de repousser et soulever les joueurs à proximité.

Le code décrit aussi une courte protection au moment de l’apparition, un compte à rebours avant chaque manche et une victoire de match obtenue après trois manches gagnées.

Pour rendre les coups plus cohérents malgré la latence réseau, le serveur conserve un bref historique des positions. Lors d’une attaque, il peut examiner la position récente de la cible en tenant compte d’une partie du délai aller-retour, dans une limite de 150 ms. C’est une forme de compensation de latence destinée à éviter qu’un coup visuellement plausible soit rejeté uniquement à cause du réseau.

Des commandes tactiles qui laissent les doigts agir en même temps

Sur mobile, le projet prévoit un joystick virtuel à gauche pour le déplacement et une zone à droite pour diriger la caméra. Des boutons distincts servent au saut, au sprint, à l’attaque à la masse et à la charge de vent. Le format paysage est recommandé.

Le choix des événements pointeur et du multitouch est cohérent avec ce type d’interface : plusieurs doigts peuvent alors se déplacer et déclencher des actions simultanément, par exemple courir, orienter la caméra et attaquer. [web:1][web:15]

Les commandes clavier-souris restent disponibles pour les joueurs sur ordinateur.

Performances : limiter ce qui pèse sur le rendu

Côté affichage, Three.js est utilisé pour la scène 3D. Pour des éléments nombreux et répétitifs, comme le sol ou certains décors, InstancedMesh permet de regrouper le rendu d’objets partageant la même géométrie et le même matériau. 2

Les ombres constituent un autre réglage à surveiller, particulièrement sur les appareils mobiles. Three.js permet d’activer ou de désactiver les shadow maps ; elles sont désactivées par défaut et leur mise à jour peut également être contrôlée lorsque des ombres dynamiques ne sont pas nécessaires. 4

Déploiement : HTTPS et WebSocket sécurisé

Pour une mise en ligne publique, le projet recommande d’utiliser HTTPS accompagné de WSS, la version sécurisée de WebSocket. [web:24]

Derrière un proxy Nginx, le passage des en-têtes Upgrade et Connection doit être configuré explicitement pour que la connexion WebSocket puisse être établie. Une stratégie de délai d’expiration ou de heartbeat est également nécessaire afin de détecter les clients déconnectés. [web:16]

La bibliothèque ws s’appuie sur le modèle WebSocket bidirectionnel et répond automatiquement aux trames Ping par des trames Pong. [web:23][web:57]

Enfin, le projet privilégie Node.js 24 LTS pour un contexte de production, plutôt qu’une branche Current. [web:33][web:43]

Ce que montre ce prototype

L’intérêt de Mace Duel Mobile ne réside pas seulement dans son duel à la masse : il illustre les fondations d’un petit jeu compétitif web moderne. Le client privilégie la réactivité et l’affichage ; le serveur tranche les actions importantes ; le tactile est traité comme une interface à part entière, et non comme un simple ajout tardif.

Pour aller plus loin, les priorités seraient de compléter les tests réseau réels, renforcer la protection contre les abus, mesurer les performances sur une gamme variée de téléphones et ajouter une couche de production complète autour de l’authentification, de l’observabilité et de l’hébergement.