Home 奖励领取 见缝插针小游戏 - 在线休闲射针游戏

见缝插针小游戏 - 在线休闲射针游戏

游戏的主循环由 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 中记录历史最佳关卡,不上传任何数据,没有账号体系。