增加准备阶段
广告
{{v.name}}
📋 原始需求(task.md):
增加准备阶段:游戏开始后1~3s播放"各就各位.mp3"且全屏显示"各就各位"字样,在播放"各就各位.mp3"之后5~10s开始播放倒计时"321.mp3"且全屏显示"3"、"2"、"1"字样,1s后播放发令枪声"发令枪声.mp3",然后开始比赛。
增加准备阶段:游戏开始后1~3s播放"各就各位.mp3"且全屏显示"各就各位"字样,在播放"各就各位.mp3"之后5~10s开始播放倒计时"321.mp3"且全屏显示"3"、"2"、"1"字样,1s后播放发令枪声"发令枪声.mp3",然后开始比赛。
为跨栏王子增加真实的"田径比赛"准备阶段:玩家点击"开始比赛"后,会先显示"各就各位"字样(含 1~3 秒随机延迟 + 低频鼓点音效),随后进入 5~10 秒的等待,再依次显示倒计时"3 / 2 / 1"(每 1 秒切换,频率递增的短促 beep 音),最后"GO!"大字(红色 + 发令枪声效)。
问题分析
原代码在 startGame() 中直接启动 RAF,玩家点击"开始比赛"后立刻开始跑,缺乏真实的比赛仪式感。
玩家无法判断"何时可以开始按 Q/W/E"——任何时候按都会立即生效,存在抢跑问题。
没有准备阶段的音效,"开始"按钮一按就直接响起跑动声,体验突兀。
解决方案
1) 引入 phase 状态机:ready → countdown → go → playing,以及 phaseText/phaseClass 控制全屏大字覆盖层。2) runReadyPhase() 异步函数:随机等待 1~3s → 显示"各就各位" + 播放低频鼓点 → 随机等待 5~10s → 循环显示 3/2/1 + 递增频率 beep → 等待 1s → 显示 GO! + 发令枪声 → 启动 loop() 进入 playing。3) Web Audio API 程序化合成所有音效(如果 assets/ 目录有同名 mp3 则优先使用音频文件)。4) onKey 中 phase !== 'playing' 时拒绝 Q/W/E 键,避免抢跑。