PortalBreakout

Un casse-briques avec une règle inversée : il y a deux raquettes, une orange en bas et une bleue en haut, et ce sont des portails. Une balle qui tombe dans le portail du bas ressort en tombant depuis celui du haut ; une balle qui monte dans celui du haut ressort en montant depuis celui du bas. Il faut garder les deux bords et casser toutes les briques.

• 150 niveaux inspirés des grands classiques du casse-briques, avec des briques à résistance variable, indestructibles, explosives ou porteuses de bonus.
• Solo : un joueur pilote les deux portails (clavier, souris ou écran tactile partagé), avec une aide optionnelle qui fait suivre le portail du haut.
• Coopération en ligne : un salon, un code ou un lien à partager, un portail chacun. En fin de partie, « Change map » garde les deux joueurs dans le salon.
• Mode versus contre un ami (en ligne ou sur le même ordinateur) ou contre l’IA (quatre difficultés) : trois vies chacun, la balle accélère avec le temps, la dernière brique rapporte une vie.
• Sept bonus : multiballe, lasers, boule de feu, raquette collante, raquette élargie, ralentissement, vie supplémentaire.
• Sons et musique générés en direct en WebAudio : six morceaux génératifs dont le tempo suit l’action.
• Installable et jouable hors ligne (hors multijoueur) ; menus entièrement utilisables au clavier et à la manette, prise en compte de prefers-reduced-motion.

Modules ES sans framework dans src/, empaquetés par Vite dans docs/, servi par GitHub Pages.

• Physique des portails (engine.js) : la balle sort du portail opposé au même décalage par rapport au centre, et ce décalage modifie sa vitesse horizontale : viser avec le bord de la raquette donne de l’effet. Chaque téléportation accélère la balle de 4 %, jusqu’à une vitesse maximale.
• Niveaux (levels.js) : chaque niveau est une grille de 14 lignes de 13 caractères, un caractère par type de brique.
• Réseau (net.js) : PeerJS sert uniquement à la mise en relation, les échanges de jeu passent en pair à pair. L’hôte fait autorité sur la physique et diffuse l’état 30 fois par seconde ; l’invité envoie ses entrées 40 fois par seconde. L’invité extrapole la balle selon la latence mesurée.
• Relais TURN : pour les réseaux qui bloquent les connexions directes (NAT symétrique, réseaux mobiles), le jeu récupère des identifiants TURN temporaires sur https://lp177.fr/ice. Le dossier server/turn/ fournit la pile correspondante : coturn et un petit service Node qui génère ces identifiants (HMAC, durée limitée).
• IA : quatre profils de vitesse et de précision ; le plus difficile simule la trajectoire de la balle à l’avance, rebonds sur les briques compris.

Le jeu se joue dans le navigateur : lp177.github.io/PortalBreakout. Pour jouer à deux, l’un crée un salon et envoie le lien, l’autre clique dessus.

En local :

npm install
npm run dev      # serveur de développement
npm run build    # régénère docs/

Pour héberger son propre relais TURN (podman en priorité, compatible docker) :

cd server/turn
./start.sh       # crée .env, génère le secret, démarre coturn et le service /ice

L’adresse du service se règle dans ICE_ENDPOINT (src/js/constants.js), puis il faut reconstruire le jeu.

En solo, un seul joueur utilise les deux jeux de touches. La souris déplace le portail orange et le clic gauche lance la balle ; sur écran tactile, on fait glisser le doigt sur la moitié basse ou haute du terrain. Deux manettes sont reconnues et toutes les touches sont modifiables dans les options.

Le concept vient de breakPortal (février 2015), un prototype en Lua où deux portails se renvoyaient déjà la balle, mais sans briques destructibles ni fin de partie. PortalBreakout, commencé en août 2026, en est la version aboutie pour le navigateur.