Un Pong déjanté dans 240 onglets de navigateur

par Korben ✨ -

Dans la catégorie des trucs qui ne servent à rien mais que je trouve cool, j’aimerais vous parler aujourd’hui d’une expérimentation technique assez dingue où le dev Eieio a réussi à faire fonctionner le légendaire jeu Pong à travers… 240 onglets de navigateur ! 🤯

Le principe est relativement simple sur le papier : chaque favicon fait office de mini-écran de 4x4 pixels en noir et blanc. En coordonnant précisément 240 onglets, on obtient donc une matrice d’affichage suffisante pour faire tourner le bon vieux Pong.

La magie opère grâce à plusieurs techniques :

  1. AppleScript pour ouvrir et positionner automatiquement les fenêtres Chrome avec leurs 30 onglets chacune
  2. Des Web Workers pour contourner les limitations de performance des onglets en arrière-plan
  3. Le Broadcast Channel API pour synchroniser tous les onglets entre eux
  4. Une gestion pointue des coordonnées pour faire passer la balle et les raquettes d’un onglet à l’autre

La première difficulté pour Eieio a été d’orchestrer l’ouverture de toutes ces fenêtres. AppleScript s’est alors révélé être l’outil idéal, permettant de créer 8 fenêtres Chrome parfaitement alignées, puis d’ouvrir 30 onglets dans chaque fenêtre. Après, toujours grâce à AppleScript, il a pu positionner chaque fenêtre au pixel près et transmettre les paramètres de position à chaque onglet

-- Création d'une fenêtre avec ses onglets
set bounds of newWindow to {x, y, x + width, y + height}
repeat (numTabs - 1) times
tell newWindow
make new tab with properties {URL:baseURL & "windowIndex=" & windowNum & "&tabIndex=" & tabCount}
end tell
end repeat

Ensuite est venu le défi des performances car par défaut, Chrome limite drastiquement les ressources des onglets en arrière-plan. Sa solution a donc été d’utiliser des Web Workers pour maintenir une fréquence d’actualisation décente.

Concernant la synchronisation entre les onglets, il s’est appuyé sur le Broadcast Channel API qui est un canal de communication permettant à l’onglet principal de coordonner tous les autres.

L’auteur a dû faire preuve d’une précision chirurgicale pour gérer tous les aspects, à savoir…

  • Des mesures exactes avec 92 pixels entre le bord gauche et le premier favicon, 58 pixels entre les favicons…
  • De l’optimisation des performances avec de la mise en cache des favicons pour éviter de les regénérer inutilement
  • Une bonne gestion des collisions avec une détection précise quand la balle change d’onglet
  • Et un effet de traînée pour lequel il a ajouté une trace derrière la balle pour améliorer le rendu visuel

Maintenant, faut quand même le reconnaitre, les navigateurs récents ont quand même des API hyper puissantes, même si Eieio a quand même du faire preuve d’ingéniosité pour contourner certaines limites.

Maintenant, si vous voulez tester son pong, le code source est sur Github !

Source