在 240 个浏览器标签中运行 Pong · eieio.games

Main View: Displays 8 chrome windows with 30 tabs each in a tight 8x30 grid. The ball and paddles of a Pong game move smoothly from a canvas in the foregrounded chrome window to the tab bar above.
Inspiration: Inspired by a friend's Flappy Bird in a favicon project. A favicon is the small image shown in the tab bar. Flappy Favi is small and hard to see, so the author wanted to draw an image across multiple tabs.
Prototyping:
- Made a grid of tabs by opening chrome windows and mashing the "new tab" button.
- Used AppleScript to open 8 chrome windows with 30 tabs each and stack them neatly.
- Had problems like chrome re-opening closed tabs and needed to clear them.
Fast Favicon Updates:
- Browsers look at known URLs for favicons but you can add an element in HTML to change the icon.
- Chrome updates the icon about 4 times a second, but a tab backgrounded is throttled and the loop only runs ~once a second.
- Tried using web audio APIs and web workers. Web workers worked great for updating favicons and posting messages back to the main document.
Tab Communication:
- Two sub-problems: knowing the tab's position and choosing a communication channel.
- Solved the first problem by passing the current window and tab index as a query parameter.
- Tried using websockets but had problems with aesthetics (wanting to deploy without a server) and syncing (tabs were out of sync).
- Moved to broadcast channels which are 1 to many and better fit the project.
- Backgrounded tabs send a registration message and the main tab listens and sends an ack.
From Canvas to Tab Bar:
- Imagined a canvas extending from the foregrounded window through all the favicons and drew to both.
- Took measurements like the distance between the window and the first favicon.
- The code calculated the canvas width, tab width, and the entire "canvas" size.
- Simulated a rectangle moving and broadcast its position to other tabs.
Making it Faster:
- The original code used a lot of resources and the animation was jerky.
- Reconfigured the code to only broadcast the position of the square and let each tab compute on the fly.
- Performance improved dramatically.
Game Implementation:
- Tried snake first but found it too block-based.
- Settled on Pong as the game with the ball and paddles regularly moving between the canvas and tab bar.
- The computer player tries to keep its paddle centered with the ball.
- Simple trig is used to compute the ball's bounce angle.
- The code is open source but ugly as it was never really left in prototype mode.
Wrapping Up: This was a fun project inspired by Recurse Center. The author wrote 4 games in the last ~40 days and encourages others to consider applying.