见缝插针小游戏

见缝插针是一款节奏简单但越往后越紧张的休闲小游戏：屏幕中央是一个匀速旋转的白色圆盘，你需要从下方依次把针发射出去，让针稳稳钉在圆盘上，并且不能撞到已经钉住的针。每关给定固定数量的针，全部成功钉入即过关，任何一次相撞都立刻失败。它的原型是手机端非常出名的 AA、Pin Out 这类小游戏，玩法极简，看似随便点点就能玩，真正上手后却很考验时机判断和心理控制。本工具把它搬到浏览器里，无需注册、不要下载，电脑用鼠标点击，手机用手指轻点屏幕即可发射。

游戏的主循环由 requestAnimationFrame 驱动，每帧把内部 rotation 增加一个固定的 speed 值（单位：度/帧），然后遍历所有已钉入的针元素，把 transform 设为 rotate(baseAngle + rotation)。因为 transform 是合成层属性，浏览器可以把旋转交给 GPU 合成线程处理，不会触发布局或重绘，所以即使最后一关同时有 15 根针在旋转也能稳定 60fps。 命中检测采用「角度差转弦长」的方式：每根针在圆盘坐标系下用它的 baseAngle 表示（相对圆盘的固定位置，不随旋转改变）。新针抵达中心时，它在世界坐标系下的角度是 TARGET_ANGLE = 0，对应到圆盘坐标系下就是 normalizeAngle(0 - rotation)。然后比较新 baseAngle 和所有已有 baseAngle 的角度差 Δθ，转换为针顶端圆点中心间的弦长 2R·sin(Δθ/2)（R = 111px 是顶端圆点中心到圆心的距离）。如果小于 24px 阈值就算撞针，立即结束本局。 发射动作做了简单的状态机控制：shootLocked 标记一根针在飞行中，防止同一根针的 transitionend 和兜底 setTimeout 触发两次结算；针的飞行时间由 CSS transition 控制为 120ms，180ms 的 setTimeout 兜底是为了在极少数情况下 transitionend 没有触发（例如 DOM 在过渡完成前被改动）时仍能完成结算。pendingShots 缓冲玩家在飞行中连续点击的发射请求，上限为 3 发，超过 3 发的点击直接丢弃，这样既能保留快速连射体验，也不会让多根针同时挤向中心。失败和过关都把 gameOver 置为 true，主循环虽然继续运转，但不再更新 rotation，相当于让画面定格。 为了适配不同分辨率，游戏整体保持 420×720 的设计尺寸，外层根据视口宽高计算缩放比例，套在容器上用 transform: scale。当前实现把上限锁在 1，所以小屏会等比缩小、桌面端大屏不会进一步放大；命中检测用的全部都是设计坐标系下的数字，不需要为每个屏幕重新计算阈值，逻辑简单且任何屏幕上判定都一致。

• 主循环：requestAnimationFrame，每帧 rotation += speed，所有针元素 transform: rotate(baseAngle + rotation)。
• GPU 加速：旋转使用 transform 而非 left/top，浏览器合成层处理，不触发布局/重绘。
• 命中检测：把世界坐标的 0° 反推回圆盘坐标 normalizeAngle(0 - rotation)，再用弦长公式 2R·sin(Δθ/2) 与 24px 阈值比较。
• 状态机：shootLocked 防止重复结算，pendingShots 上限 3 发并截断超出（不是排队），gameOver 后冻结 rotation 更新。
• 结算回调：CSS 飞行 120ms，transitionend 主结算 + 180ms setTimeout 兜底，应对 transitionend 偶发不触发的情况。
• 适配方案：固定 420×720 设计坐标系，外层 transform: scale 按视口缩放（上限锁定 1，桌面端大屏保持原始尺寸）。
• 数据保存：仅在 localStorage 中记录历史最佳关卡，不上传任何数据，没有账号体系。