增加虚拟键盘
广告
{{v.name}}
📋 原始需求（task.md）：

为了触屏设备也可以玩这个游戏，界面下方要多显示一个底边栏，底边栏放置"减速(Q)"、"加速(W)"、"跳跃(E)"、"嘲讽(R)"四个按钮，并且这四个按钮分别对应键盘的 "Q"、"W"、"E"、"R"键。 仅在结算对话框才允许按"嘲讽(R)"按钮或R键，并且结算对话框不能挡住"嘲讽(R)"按钮，这样会导致"嘲讽(R)"按钮无法在结算对话框弹出时被点击

为了让触屏设备也能完整体验跨栏王子，新增固定在屏幕底部的虚拟按钮栏。游戏中显示 4 个按钮（减速 Q / 加速 W / 跳跃 E / 嘲讽 R），其中 Q/W/E 在 phase==='playing' 时才可点，R 始终显示但游戏中无效（避免抢跳）。结算时仅显示宽幅 R 按钮，且按钮 z-index 高于结算对话框，确保点击不被遮挡。

问题分析

原游戏完全依赖键盘 Q/W/E/R，移动设备无法操作。

若让 R 按钮在游戏中也触发"嘲讽"动作，会和 tryJump 的 dancing 锁冲突，导致玩家嘲讽后 0.7 秒内无法跨栏。

结算对话框 z-index 900，若嘲讽按钮 z-index 仅 60 会被对话框遮挡，导致"按了但无效"。

解决方案

1) 新增 .touch-bar CSS：position: fixed; bottom: 0; z-index: 950（高于结算对话框的 900），4 个等宽按钮，touch-action: manipulation 防止双击缩放，按下时 transform: scale(0.95) 反馈。2) 模板用 v-if="!gameOver" / v-else 切换：游戏中显示 Q/W/E，结算时仅显示宽幅 R 按钮。3) 抽取 processKey(k) 统一处理键鼠和触屏，onKey 和 onTouchBtn 都调用它。4) R 键仅在 gameOver 状态生效（且玩家 finished + rank≤3）；游戏中按 R 无效。5) .result-overlay 加 padding-bottom: 84px 给底边栏预留空间，避免视觉冲突。

友链