
Tribble
Jeu web qui croise Tetris et bubble shooter
Jeu webaoût 2026TypeScriptCanvas 2DWeb AudioWebRTC (PeerJS)ViteVitest
Un lanceur en haut de l’écran tire des tétrominos vers une pile qui monte depuis le bas. On vide la grille en complétant des lignes, comme dans Tetris, ou en reliant trois blocs de même couleur, comme dans un bubble shooter. Duel en ligne ou contre une IA.
But du projet
Mélanger deux mécaniques de puzzle : on vise et on tire des pièces de Tetris vers le bas, avec rebonds sur les parois comme dans un bubble shooter, pour empêcher une pile montante d’atteindre le lanceur. La partie est perdue quand un bloc se pose dans la zone du lanceur.
Fonctionnalités
- Visée exacte : la ligne pointillée montre où la pièce va se poser, rebonds compris ; la pièce peut encore tourner en vol.
- Deux façons d’effacer : une ligne horizontale complète ou un groupe de trois blocs ou plus de même couleur. Les blocs au-dessus retombent et peuvent déclencher des réactions en chaîne à multiplicateur.
- Pile montante : une ligne de déchets arrive par le bas à intervalle régulier, de plus en plus vite avec le temps et le niveau.
- Quatre difficultés : Chill, Normal, Hard et Hardcore (blocs de pierre uniquement, plus de couleurs, pas de ligne de visée).
- Aléas en solo : Stonefall (couleurs neutralisées, seules les lignes comptent), Reinforced (blocs à casser deux fois), Giants (pentominos géants) et Rush (montée deux fois plus rapide).
- Versus en ligne par lien d’invitation : effacer des cases libère des bulles de pouvoir à attraper, qui donnent des malus à envoyer à l’adversaire (lignes de déchets, accélération, brouillard, couleurs mélangées, commandes inversées, rotation bloquée).
- Versus contre l’IA en trois niveaux (Rookie, Skilled, Merciless), avec les mêmes règles.
- Sauvegarde automatique de la partie en cours, sons et six musiques génératives synthétisés en WebAudio, jeu installable et jouable hors ligne.
Fonctionnement
- Simulation séparée de l’affichage :
src/core/contient la grille (11 colonnes sur 20 lignes), les pièces et les règles, sans dépendance au DOM, ce qui permet de les tester avec Vitest. Le rendu (src/render/), les effets, l’audio et les menus sont dans des modules distincts ;src/types.tsfixe les contrats entre eux. - Cycle d’un tir : visée, vol en ligne droite avec rebonds, verrouillage sur la grille, puis résolution par étapes (effacements, gravité bloc par bloc, chaînes avec multiplicateur doublé à chaque étape, plafonné à ×32).
- Pièces : les sept tétrominos, chacun formé de deux paires de couleurs, tirés par un générateur « 7-bag » à graine fixe, si bien que les deux joueurs d’un versus reçoivent la même suite.
- Réseau : PeerJS (serveur public) assure la mise en relation WebRTC ; chaque joueur simule sa propre grille et voit celle de l’adversaire en miniature.
- IA : le bot se présente comme un pair réseau ordinaire, donc le mode versus fonctionne sans cas particulier. Il évalue des angles de tir avec le même calcul de trajectoire que la ligne de visée, puis note le résultat (cases effacées, trous, hauteur, danger près de la zone du lanceur).
Capture d’écran
Jouer
Le jeu se joue dans le navigateur : lp177.github.io/Tribble. Pour un versus, il suffit de créer un salon et de partager le lien d’invitation.
En local :
npm install
npm run dev # serveur de développement
npm test # tests unitaires de la simulation
npm run build # vérification des types et build dans docs/Contrôles
| Action | Par défaut |
|---|---|
| Viser | souris, ou ← → (A D) |
| Tirer | clic ou Espace |
| Tourner la pièce | clic droit, ↑ ou X (sens horaire), Z (sens inverse) |
| Envoyer un malus (versus) | C |
| Pause | Échap |
Les touches sont modifiables dans les réglages. Un versus ne peut pas être mis en pause : Échap y propose l’abandon, à confirmer par un second appui.
