Lightning 随机闪电
A bolt is a random walk downward in 15px steps, redrawn from scratch every frame. 闪电就是一路向下、每 15px 随机偏移一点的随机游走,而且是每帧重新画的。
Runs live on this page. Move the pointer, click, or drag — whichever the effect listens for. 就在本页实时运行。移动鼠标、点击或拖拽——看它响应哪一种。
How it works原理拆解
The branch is generated by stepping y by 15 and nudging x by a random ±20. Because a new bolt is only created when Math.random() < 0.08, the strikes feel sporadic rather than metronomic. The bolt is drawn once and immediately discarded — the lingering afterglow comes from the 0.2-alpha clear. 分支的生成方式是 y 每次加 15、x 随机偏移 ±20。只有 Math.random() < 0.08 时才生成新闪电,所以劈下来的节奏是偶发的,不是节拍器。闪电画完就丢,眼里看到的余辉来自 0.2 透明度的清屏。
What to change可以改的地方
- 1Reduce the step to 6px for a more detailed, jagged bolt.
- 2Draw the bolt 2–3 times with slight offsets during the same strike to simulate branch forks.
- 1步长缩到 6px,闪电会更细碎、更毛刺。
- 2同一次闪电错位画 2–3 遍,就能模拟出分叉。
Source code源码
Self-contained — paste it into any HTML file and it runs. No libraries. 完全独立——粘进任意 HTML 文件就能跑,不需要任何库。