点球大战 · Penalty Kick

一个单文件的「点球大战」小游戏，纯前端实现，无任何外部依赖。

你和电脑各罚 5 个点球，5 轮过后比分领先者获胜；若打平则进入「突然死亡」加赛，直到分出胜负。

玩法说明

你罚球时（进攻）：

1. 在球门区域内移动鼠标进行瞄准（红色虚线指向罚球点）。
2. 拖动「力度」滑杆调节射门力度。
   • 力度太轻（<35）：球提前落地，被没收。
   • 力度过猛（>92）：球直接打飞过横梁。
   • 适度力度下：射向守门员扑救范围两侧的死角更容易进球（注意贴柱射门有中柱风险）。
3. 点击「射门」按钮，或按 空格键 / 回车键 起脚。
4. 守门员会向左/中/右飞扑，球的落点是否落入守门员覆盖范围决定扑救是否成功。

电脑罚球时（防守）：

1. 屏幕提示限时 3 秒选择扑救方向。
2. 点击「扑左 / 扑中 / 扑右」按钮，或按 方向键 / A S D。
3. 扑中方向即可扑出，猜错方向电脑即得分。

如何运行

无需安装任何依赖，两种方式任选：

方式一：直接双击

双击 index.html，用浏览器打开即可游玩（推荐 Chrome / Edge / Firefox）。

方式二：启动静态服务器

# 方式 A：Python 自带服务器
python3 -m http.server 8080

# 方式 B：Node 生态的 serve
npx serve .

然后浏览器访问 http://localhost:8080。

项目结构

football-game/
├── index.html   # 单文件游戏（HTML + CSS + JavaScript 全部内嵌）
└── README.md    # 本说明文档

技术要点

• Canvas 2D 绘制：全部场景（绿茵场、球门与球网、足球、守门员小人、瞄准虚线）均使用 <canvas> 的 2D 上下文逐帧绘制，无任何图片资源。
• requestAnimationFrame 动画循环：游戏主体是一个每帧驱动的动画循环，负责推进球的飞行插值动画、守门员飞扑动画（含骨骼倾斜/手臂伸展）、以及电脑回合倒计时，保证 60fps 下的流畅度。
• 碰撞检测 / 命中判定：
  • 守门员扑救用「覆盖区（圆形半径）碰撞」模型——球到达门线时的落点 x 与守门员扑救中心 gx 的距离小于覆盖半径 KEEPER_COVER 即判「扑出」；
  • 贴门柱射门另有「击中门柱」的边界判定；
  • 电脑罚球回合则简化为方向相等判定（玩家扑救方向 === 电脑射门方向 即扑出）。

全局状态机

瞄准(aim) → 射击动画(shoot) → 定格(flash) → 扑救选择(saveSelect) → 电脑射门(cpuShoot) → … → 终局(gameOver)

所有阶段通过 S.phase 状态机驱动，配合「局代数」S.gen 防止延迟回调串台。