Shockwave 爆炸涟漪
A click pushes every particle outward, and the strength depends only on how close it was to the impact. 一次点击把每个粒子往外推,推力只取决于它离爆炸点多远。
Runs live on this page. Move the pointer, click, or drag — whichever the effect listens for. 就在本页实时运行。移动鼠标、点击或拖拽——看它响应哪一种。
How it works原理拆解
For each particle the code computes the distance to the click, then applies an impulse of max(0, 200-d) * 0.15 along the normalised direction. Beyond 200px the impulse is exactly zero, which is why the wave has a visible edge instead of nudging the entire canvas. A 0.96 damping factor brings everything back to rest. 对每个粒子算到点击位置的距离,再沿单位方向施加 max(0, 200-d) * 0.15 的冲量。超过 200px 冲量精确为 0,所以波有明显的边界,而不是整块画布一起抖。0.96 的阻尼会把一切慢慢拉回静止。
What to change可以改的地方
- 1Increase 200 to 400 for a shockwave that covers the whole stage.
- 2Add a brief screen shake on click to sell the impact.
- 1把 200 改成 400,冲击波就能覆盖整个舞台。
- 2点击时叠一下屏幕震动,打击感会强很多。
Source code源码
Self-contained — paste it into any HTML file and it runs. No libraries. 完全独立——粘进任意 HTML 文件就能跑,不需要任何库。