判定窗实验室：把时机手感做成两个滑块

判定窗实验室：把时机手感做成两个滑块

一句话本质

这不是一款商业游戏，而是一个为「时机 / 反应」母型建造的实验室级最小游戏实例：一局 20 个节拍、一个收缩环、一个固定判定圈，玩法被压缩到只剩「在重合瞬间点击」这一件事。它真正的价值在于把决定时机手感的两个核心旋钮——判定窗口宽严（Perfect 窗口 ms）与节拍密度（BPM）——直接做成可调滑块，让玩家和开发者都能亲手拖动，体验同一个原语在不同参数下的手感差异。

行为循环

1. 音符提前 2 拍从外圈生成，hitAt 精确落在拍点上；
2. 圆环随时间线性收缩逼近中央的固定判定圈，判定圈中心每拍还有一次脉冲闪烁做节奏提示；
3. 玩家在自认为重合的瞬间点击画布任意位置；
4. 系统取「离判定点最近的未判定音符」，比较点击时刻与 hitAt 的绝对误差：≤Perfect 窗口判 Perfect（+100+连击×5 分），≤Good 窗口（Perfect×2.2）判 Good（+40 分），超出则只提示「太早/太晚」，不消耗音符；
5. 音符超过 Good 窗口仍未点击判 Miss，连击清零；
6. 20 个音符全部判定后结算：Perfect+Good ≥ 60%（12 个）即胜利，可再来一次。

原语标注

• SpawnNote(hitAt) – 提前 approach（2 拍）生成音符，拍点由 BPM 推导
• CompareTiming(clickTime, hitAt) – 比较判定原语：取绝对误差作为判定输入
• JudgePerfect(err ≤ perfectMs) / JudgeGood(err ≤ perfectMs×2.2) / JudgeMiss(超时) – 三档时机窗口判定
• ComboInc() / ComboReset() – 连击累积与清零
• CheckPass(P+G ≥ total×0.6) – 过关阈值比较

参数速查表

| 参数 | 说明 | 默认值 | 可调范围 | 单位 | |------|------|--------|----------|------| | perfectMs | Perfect 判定窗口（±） | 80 | 40~150（步进 5） | ms | | bpm | 节拍速度 | 100 | 60~180（步进 5） | BPM | | total | 一局音符数 | 20 | 固定 | 个 | | approach | 出环提前量（=每拍秒数×2） | 2 | 固定 | 拍 | | Good 窗口 | Perfect 窗口的倍数 | 2.2× | 固定 | — | | 过关线 | Perfect+Good 占比 | 60 | 固定 | % | | Perfect 得分 | 基础分 + 连击加成 | 100+连击×5 | 固定 | 分 | | Good 得分 | 基础分 | 40 | 固定 | 分 |

设计取舍

1. 只暴露两个旋钮：判定宽严与节奏密度正是时机母型的全部设计空间——前者决定「高手感与低门槛」的分界（80ms 的 Perfect 已经偏休闲，40ms 接近硬核音游），后者决定玩家用「反应式」（看环收缩到位再点）还是「节奏式」（跟着拍点预判）策略。其余参数全部写死，保证每次只动一个变量。
2. 早/晚点击不惩罚：超出 Good 窗口的点击只提示「太早/太晚」，不消耗音符、不断连击，试错成本为零。这是实验室实例的取舍——商业音游通常用 ghost-tap 惩罚制造紧张感，但实验室要的是让玩家敢试、试完能归因。
3. 连击加成只挂 Perfect：Perfect 得 100+连击×5，Good 固定 40，用分差把玩家推向「追求 Perfect 而不是混 Good」，连击又在 Miss 时清零，构成「越准越赚、一漏归零」的张力。
4. 60% 过关线：允许漏掉 8 个音符仍能过关，保证入门玩家能把 20 个节拍打完、看到完整结算，而不是中途失败退出实验。
5. 把不可见的判定窗画出来：画布下方常驻「Perfect ±80ms / Good ±176ms」文字，教学透明优先于沉浸感——这正是「实验室」的定位。

实现要点

• 点击归属：点击时遍历所有未判定音符，取 hitAt 离当前时刻最近的一个做判定，避免多音符同时在场时判错对象；
• 判定与时间源解耦：判定基准是固定步长 60fps 累加的 game.time，不是渲染帧时间戳，掉帧不影响判定公平性；
• 收缩环渲染：半径 r = R0 + (Rj − R0) × progress，progress 由剩余时间与 approach 线性插值；晚于判定点仍未点击的环变红并继续收缩到最小半径 6px，把「已经晚了」画在脸上；
• BPM 联动：每拍秒数 beat = 60/bpm，出环提前量 approach = beat × 2，因此任何 BPM 下圆环的视觉收缩速度一致，变化的只有节拍密度——这正是「BPM 旋钮只改密度、不改难度手感」的实现关键；
• Miss 检测在 update 中完成：遍历未判定音符，超过 Good 窗口即判 Miss、连击清零，全部 20 个判定完立即结算；
• 纯静态引擎：demo 基于 AtomCore（Canvas 2D 手绘风），无服务器依赖，通过 postMessage 发出 demo:ready / demo:score / demo:complete，接收 demo:restart，可直接 iframe 嵌入。

把这个实例玩透的方法很简单：先把 Perfect 窗口拖到 150ms 打一局，再拖到 40ms 打一局——两局之间你感受到的「手感塌掉 / 手感紧绷」，就是时机母型全部的设计学问。