为什么值得关注

它展示了无需外部依赖的创意跨窗口协作方式，将任意桌面布局变成共享游戏台面。

适合谁使用

探索窗口间通信的 Web 开发者
构建多屏浏览器体验的创意编程者
对新颖输入/输出设置感兴趣的游戏爱好者

典型使用场景

学习如何用 localStorage 同步多窗口状态
原型化横跨多块显示器的游戏或可视化
创建让用户任意排列窗口的互动装置

项目优势

无运行时依赖——仅使用浏览器 API
简单的主机选举机制，即使标签页隐藏也能工作
碰撞模型将窗口之间的间隙视为墙壁，相邻窗口视为房间

使用前须知

碰撞检测仅使用前缘点，可能穿过极小的间隙
需要多个独立浏览器窗口（不是标签页）
必须通过 localhost 提供服务，不支持 file:// 协议

README 快速开始

Multi-Window Pong

A tiny browser experiment where one glowing Pong ball moves across multiple real browser windows as if the desktop were one shared table.

Open the same URL in two or three separate windows, arrange them on your screen, and the ball will cross between touching windows. Empty space between windows behaves like a wall.

How It Works

Browser windows from the same origin can communicate through localStorage. When one window writes to localStorage, every other open window receives a storage event.

This project uses that as a tiny message bus:

Each window writes its screen rectangle: screenX, screenY, innerWidth, and innerHeight.
All windows keep a live registry of the other windows.
The window with the lowest id becomes the host.
Only the host runs physics.
The host broadcasts the ball position through localStorage.
Every window renders the same global ball position relative to its own screenX/screenY.

That means each canvas is just a viewport into one shared screen-space coordinate system.

The collision model asks one simple question: is this screen point covered by any open window? If yes, the ball can move there. If no, it bounces. This makes touching windows behave like connected rooms while gaps behave like walls.

Run

Serve the folder over localhost. Do not open index.html directly with file://.

node server.js

Then open:

http://127.0.0.1:8000/

Use separate browser windows, not tabs.

Test

node physics.test.js
node windowRegistry.test.js
node viewport.test.js

The tests cover the important weird parts: open-room collision, hidden tab host election, and shared screen coordinates.

Files

index.html - full-window canvas and minimal styling
main.js - app wiring and animation loop
windowRegistry.js - window heartbeat, cleanup, and host election
physics.js - host-only ball physics
renderer.js - glowing trail renderer
viewport.js - shared screen-space window rectangle

Notes

This is intentionally dependency-free at runtime. It uses browser APIs, canvas, and localStorage.

The collision check probes the ball's leading edge, not its full swept circle. That is enough for normal window layouts. If you make tiny gaps or tight concave shapes, it may clip a corner.

browsertabs-talking