Un tunnel néon, des cubes qui foncent sur vous, et pour volant votre propre tête : penchez-la vers une épaule et tout le tube tourne autour de vous.
Vue d’ensemble
Head Tube est un jeu d’esquive dans un tube à douze pans. Votre cube reste en bas de l’écran pendant que le tunnel défile et que des obstacles surgissent du fond. Pour les éviter, on fait tourner le tube : à la souris, au doigt, au clavier ou, c’est tout l’intérêt, à la tête. La webcam suit la ligne de vos yeux, et il suffit de pencher la tête comme on tournerait un volant pour glisser d’un couloir à l’autre.
Le jeu est une adaptation de Cube Runner (game5.com.de). Il en reprend le principe et le rythme : huit phases de trente secondes, chacune avec son type d’obstacle, trois vies, puis une nouvelle boucle un peu plus rapide. L’habillage, le son et le pilotage à la tête sont propres à cette version.
Fonctionnalités
- Pilotage à la tête : pencher la tête vers l’épaule droite fait tourner à droite, plus on penche, plus ça tourne vite. La position neutre se cale pendant le décompte, une jauge et la ligne des yeux dans le médaillon webcam montrent ce que le jeu voit.
- Souris, doigt ou clavier : comme dans l’original, plus le pointeur s’éloigne du centre de l’écran, plus le tube tourne vite. Les flèches gauche et droite marchent dans tous les modes.
- Huit phases : cubes colorés qui éclairent leur couloir, rouges rapides, pierres qui sortent de la paroi, barres orange qui traversent tout le tube, rangées en spirale, grand mélange et barrières qui ferment la moitié du tunnel.
- Boucles de plus en plus rapides : après la huitième phase, tout recommence un cran plus vite. Trois vies, et le record est gardé d’une visite à l’autre.
- Pause automatique : si votre visage sort du cadre, la partie se fige et reprend d’elle-même quand vous revenez.
- Son discret : un bourdon grave qui accompagne la course, un souffle quand un cube vous frôle, un choc sourd à l’impact.
- Plein écran en un clic ou avec la touche F.
Sous le capot
Le joueur ne bouge jamais : c’est le tube entier, avec tout ce qu’il contient, qui tourne autour de lui. Le tunnel est un seul cylindre à douze faces dont un shader dessine la grille qui défile, le brouillard et les traînées colorées qui annoncent l’arrivée d’un cube dans un couloir. Les collisions sont calculées en angle plutôt qu’en volumes : écart angulaire pour un cube, distance à l’axe pour une barre, demi-plan pour une barrière.
Côté caméra, un modèle de visage tourne dans un processus séparé pour ne pas ralentir le rendu. Le jeu n’en garde que trois points, les coins extérieurs des yeux et le nez : l’angle de la ligne des yeux donne l’inclinaison de la tête, lissée, avec une petite zone morte autour du neutre pour qu’on puisse rester droit sans dériver.
Contrôles
| Touche / geste | Action |
|---|---|
| Pencher la tête | Tourne à gauche ou à droite (mode tête) |
| Souris, doigt | Tourne, plus vite loin du centre |
| ← → | Tourne (tous les modes) |
| ↑ ↓ | Sensibilité de la tête |
| C | Recale la position neutre de la tête |
| Espace, P, Échap | Pause / reprise |
| M | Son |
| F | Plein écran |
Stack technique
- Vanilla JS en modules, aucun build
- Three.js : tube en shader GLSL, effet de lueur (bloom) en post-traitement
- MediaPipe Face Landmarker dans un Web Worker : suivi du visage sans ralentir le jeu
- Web Audio : sons entièrement synthétisés, aucun fichier audio
- Fullscreen API et localStorage pour le record et les réglages
Cas d’usage
Une partie rapide entre deux tâches, un défi de record entre amis devant le même écran, ou une petite séance d’assouplissement de la nuque qui ne dit pas son nom. Le mode tête en fait aussi une démonstration ludique du suivi de visage dans le navigateur, sans rien installer.
Le seul jeu où l’on perd parce qu’on a hoché la tête au mauvais moment.
