Jeux de boxe : comment j’ai transformé la boxe dans le vide en Monster Punch

Je voulais que la boxe dans le vide devienne un jeu. Pas une vidéo d’entraînement qui tourne en fond. Pas un jeu de boxe où l’on matraque des boutons pendant que le personnage à l’écran fait tout le travail. Je voulais lancer un vrai coup de poing et voir quelque chose réagir.

Cette idée est devenue Monster Punch, l’un des jeux de boxe de SlayFit. Il tourne dans un navigateur, observe tes mouvements avec une webcam et transforme chaque coup en frappe sur un monstre volant. La version simple de l’idée tenait en une phrase. La rendre équitable a pris bien plus de temps.

Pourquoi j’ai créé un jeu de boxe pour le navigateur

J’aime les jeux de navigateur parce que la première décision est facile : tu ouvres un lien et tu joues. Pas de page d’app store, pas de téléchargement, pas de manette à régler entre la curiosité et le jeu.

C’était encore plus important ici. Un jeu de boxe en ligne doit permettre d’essayer l’idée avant de demander le moindre engagement. Monster Punch n’a besoin que d’une webcam et d’assez de place pour garder le haut du corps dans le cadre. Sans caméra, le mode démo montre le déroulement d’une manche avec des mouvements simulés.

La webcam ne voit pas un coup de poing

La première grande leçon, c’est qu’une webcam ne voit pas un coup de poing. Le modèle de pose me donne des points pour les épaules, les coudes et les poignets. C’est à moi de décider ce que ces points veulent dire.

Un poignet qui traverse l’écran peut être un coup. Ça peut aussi être quelqu’un qui arrange ses cheveux ou qui revient dans le cadre. Je détecte un coup quand le poignet s’éloigne assez de l’épaule et se déplace assez vite. Chaque bras a son propre court délai de récupération, pour qu’un seul mouvement ne compte pas plusieurs touches.

C’est ce qui sépare une démo technique d’un jeu. Une détection trop lâche rendait le score aléatoire. Une détection trop stricte faisait disparaître les coups bien nets. J’ai dû régler le seuil jusqu’à ce qu’un mouvement volontaire soit récompensé sans que le joueur ait à se battre contre la caméra.

Détecter le mouvement ne réglait que la moitié du problème

Mon premier réflexe a été d’accorder une touche dès que le système détectait un coup. Ça m’a paru faux tout de suite : on pouvait frapper dans le vide et abîmer quand même un monstre.

Le jeu garde désormais chaque poing détecté actif pendant une très courte fenêtre de frappe. Pendant cette fenêtre, le poing doit chevaucher le monstre à l’écran. Le monstre n’attend pas juste un événement de coup : le coup doit atterrir là où la cible se trouve vraiment.

Ce petit contrôle spatial a tout changé. Les joueurs se sont mis à viser. Un monstre qui arrive en haut à droite demandait un autre coup que celui qui passait près de l’épaule gauche. C’est devenu un vrai jeu de frappe, pas un compteur accroché à des mouvements de bras au hasard.

La parade demandait son propre geste clair

Je voulais que la défense soit aussi lisible que l’attaque. Lever les deux poignets au-dessus des épaules crée un bouclier. Tenir la pose un bref instant l’active, et baisser les bras y met fin.

Ce geste marche parce qu’il est assez simple à reconnaître et assez différent d’un coup pour éviter la confusion. Il donne aussi un bon rythme à la manche : frapper tout le temps n’est pas toujours la bonne réponse. Parfois, il faut lever les deux bras.

Comment j’ai fait compter chaque coup qui touche

Chaque coup qui touche fait grossir le combo et rapporte des points. Le combo reste actif sur une courte fenêtre, puis retombe à zéro si la touche suivante tarde trop. Les monstres plus costauds demandent plusieurs touches nettes : la précision compte donc sur toute une séquence, pas seulement sur le dernier coup.

Le jeu devient aussi plus chargé au fil de la manche. Les monstres apparaissent plus vite et se déplacent plus rapidement. Cela crée une courbe naturelle au sein d’une courte séance. Le début laisse au joueur le temps de comprendre les commandes. La fin demande des décisions plus rapides et des mouvements plus propres.

Tu peux choisir une manche d’une, deux, trois ou cinq minutes. Je voulais que Monster Punch serve aussi bien de petite pause que de plus long entraînement de boxe dans le vide. Le score, le meilleur combo et l’activité estimée donnent à chaque essai un résultat clair, et le classement offre aux compétiteurs quelque chose à viser.

Ce que la création de Monster Punch m’a appris

• Le retour immédiat compte : l’effet doit apparaître là où le poing atterrit, à l’instant où il atterrit.
• Le cadrage fait partie des commandes : les épaules, les coudes et les poignets doivent rester visibles pour un suivi fiable.
• Les gestes simples gagnent : une extension rapide veut dire coup, les deux bras levés veulent dire parade.
• La précision est plus agréable que la générosité : une cible ratée doit rester ratée.
• Les manches courtes donnent envie de réessayer : un score clair donne du sens à la rejouabilité.

La plus grande leçon, c’est que le suivi du mouvement disparaît quand il marche bien. Le joueur ne doit pas penser aux coordonnées du poignet ni aux fenêtres de collision. Il doit voir un monstre, lancer un coup et sentir que le jeu l’a compris.

Pour un regard plus approfondi sur ce qui se passe dans la tête pendant une manche, lis mon article appuyé sur la recherche à propos du temps de réaction, de l’attention visuelle et de la coordination œil-main dans Monster Punch.

Essaie le jeu de boxe en ligne

Joue à Monster Punch dans ton navigateur. Choisis la durée de la manche, place-toi pour que le haut de ton corps tienne dans la caméra et commence par quelques coups maîtrisés. Garde les deux bras levés quand tu as besoin du bouclier.

Gratuit · Rien à télécharger · Webcam ou mode démo · Manches d’une à cinq minutes.

Découvre d’autres jeux à webcam SlayFit ou lis comment j’ai créé Relic Hunter avec Three.js et des images d’IA.