✨Effect Lab
Read the full guide完整技术长文 Things you can grab, poke and peel能抓、能戳、能刮开的东西
🫧

Pop the Bubbles 泡泡戳破

Click anywhere to spawn a bubble, click the bubble to pop it — the trick is stopping the click from also spawning a new one. 点空白处生成泡泡,点泡泡把它戳破——关键在于别让这一下同时再生成一个。

DOMHit testingevent.stopPropagation
Live demo实时演示

Runs live on this page. Move the pointer, click, or drag — whichever the effect listens for. 就在本页实时运行。移动鼠标、点击或拖拽——看它响应哪一种。

How it works原理拆解

The container listens for clicks and creates a 36px circle at the pointer, offset by half its size so it centres on the cursor. The bubble has its own click handler that calls stopPropagation(), then scales to 1.8 and fades out over 200ms before removing itself. A 3-second timer cleans up bubbles nobody popped. 容器监听 click,在指针位置建一个 36px 的圆,坐标各减 18px 让圆心对准鼠标。泡泡自带 click 处理器,先 stopPropagation(),再放大到 1.8 倍、200ms 内透明消失后 remove。另外挂一个 3 秒定时器,清掉没人戳的泡泡。

What to change可以改的地方

  • 1Animate the scale in as well as out for a squash effect on creation.
  • 2Track a pop counter — it is the cheapest possible game loop.
  • 1生成时也加一段放大动画,会有「鼓起来」的手感。
  • 2顺手记个计数,这就是最省事的游戏循环。

Source code源码

Self-contained — paste it into any HTML file and it runs. No libraries. 完全独立——粘进任意 HTML 文件就能跑,不需要任何库。

bubble.html