编写项目基本架构
广告
{{v.name}}
📋 原始需求（task.md）：
本项目是一个跨栏王子游戏。以下是该项目的基本架构和实现步骤： 1. **项目概述** - **目的**：玩家操作跨栏运动员，通过滑动条或Q/W键控制运动员奔跑的速度，通过跳跃键或E键控制运动员跳跃以跨栏，通过R键在通过终点后跳胜利结算舞蹈动作。 2. **技术栈** - **前端**：使用vue3 cdn版本。index.html是主页，主页在未开始游戏时显示一个悬浮对话框，开始游戏后隐藏对话框，显示游戏界面。游戏界面是一个田径场，田径场分9条赛道，游戏开始时随机选择其中一个赛道作为玩家操作的赛道，剩下的8条赛道均为人机对手。在跨栏时的速度必须在0.6~0.9倍最大速度之间才能跨栏成功，否则跨栏失败。跨栏失败时栏杆有向前滚动倒下的动画，并且对应的玩家或人机的速度在1秒内降至0.3倍最大速度。只要有一个玩家或人机通过终点，游戏结束，并显示胜利结算界面。 必须实现的模块： - 编写前端页面
本项目是一个跨栏王子游戏。以下是该项目的基本架构和实现步骤： 1. **项目概述** - **目的**：玩家操作跨栏运动员，通过滑动条或Q/W键控制运动员奔跑的速度，通过跳跃键或E键控制运动员跳跃以跨栏，通过R键在通过终点后跳胜利结算舞蹈动作。 2. **技术栈** - **前端**：使用vue3 cdn版本。index.html是主页，主页在未开始游戏时显示一个悬浮对话框，开始游戏后隐藏对话框，显示游戏界面。游戏界面是一个田径场，田径场分9条赛道，游戏开始时随机选择其中一个赛道作为玩家操作的赛道，剩下的8条赛道均为人机对手。在跨栏时的速度必须在0.6~0.9倍最大速度之间才能跨栏成功，否则跨栏失败。跨栏失败时栏杆有向前滚动倒下的动画，并且对应的玩家或人机的速度在1秒内降至0.3倍最大速度。只要有一个玩家或人机通过终点，游戏结束，并显示胜利结算界面。 必须实现的模块： - 编写前端页面
本项目是一个跨栏王子游戏，玩家操作跨栏运动员在 9 条赛道的田径场上与其他 8 名 AI 选手同场竞技。玩家通过滑动条或 Q/W 键控制奔跑速度，在跨栏前的 50 像素内按 E 键跳跃（速度须在 0.6~0.9 倍之间才能成功跨栏），通过终点后按 R 键触发胜利舞蹈。游戏有完整的准备阶段（"各就各位"→ "3 2 1" 倒计时 → "GO!" 发令枪声）和结算阶段（含领奖台与排名列表）。
技术栈
- 前端：Vue 3 CDN 版本。index.html 主页在未开始游戏时显示悬浮对话框（包含规则说明 + "开始比赛"按钮），点击开始后显示 9 条赛道的田径场；每条赛道宽度内含独立滚动的内容层，玩家的运动员始终固定显示在屏幕中央，跑道随玩家 position 反向滚动；赛道 500 像素间隔分布 9 根栏杆，跨栏前 50 像素内必须按 E 键，否则强制失败（栏杆向前倒下动画 + 速度降至 0.3 倍持续 1 秒）；比赛结束弹出结算对话框，显示领奖台（1/2/3 名）+ 完整 9 人排名，玩家在领奖台上可按 R 键触发胜利舞蹈；底部固定触屏按钮栏（Q 减速 / W 加速 / E 跳跃 / R 嘲讽），结算时仅显示 R 按钮
必须实现的模块
- 编写前端页面
