Bouncing Balls 弹跳碰撞球
Twelve balls that reflect off the walls — and pass straight through each other on contact. 十二个撞墙反弹的球——但彼此相遇时直接穿过去。
Runs live on this page. Move the pointer, click, or drag — whichever the effect listens for. 就在本页实时运行。移动鼠标、点击或拖拽——看它响应哪一种。
How it works原理拆解
The reflection is a single sign flip: if x leaves the range 0–width, vx *= -1. There is deliberately no pairwise collision resolution, which is why the balls overlap. It reads as playful rather than broken because the colours differ, so the eye does not expect solid bodies. 反弹就是一次符号翻转：x 跑出 0–width 就让 vx *= -1。代码里刻意没有做两两碰撞解算，所以球会互相重叠。它看起来是俏皮而不是出错，因为颜色各不相同，眼睛不会把它们当成实心刚体。
What to change可以改的地方
- 1Add pairwise distance checks and swap velocities on contact for real billiards.
- 2Give each ball a random radius and use r in the boundary test so big balls bounce earlier.
- 1加上两两距离检测、碰撞时交换速度，就是真的台球了。
- 2给球随机半径，并让边界判断用上 r，大球会提前反弹。
Source code源码
Self-contained — paste it into any HTML file and it runs. No libraries. 完全独立——粘进任意 HTML 文件就能跑，不需要任何库。