# ⚽ 传奇11人 — 足球传奇阵容比拼 程序详细说明
## 一、程序概述
传奇11人 是一个基于单页面 HTML/JS/CSS 的互动游戏程序，功能完整，无需安装任何依赖，双击足球11人.html 即可在浏览器中运行。游戏主题是 两位玩家（或人机/在线）轮流挑选足球传奇球星，对比阵容实力一分高下。---
## 二、游戏流程
首页 → 选择模式 → 石头剪刀布 → 逐位置选人 → 胜负判定| 阶段 | 说明 |
|:---|:---|
| ① 首页 | 展示标题、30位传奇头像预览、三个模式入口 |
| ② 石头剪刀布 | 双方出拳，胜者获得优先选人权 |
| ③ 选人阶段 | 按4-3-3阵型11个位置依次选人，每人从5位随机传奇中各选1人 |
| ④ 结果页 | 11个位置逐一对比评分，判定胜负 |
---
## 三、三种游戏模式
### 👥 双人对战 (mode=2)
两位玩家在同一设备上轮流操作：
- 石头剪刀布：玩家1出 → 玩家2出 → 揭晓
- 选人：轮到谁谁点选
### 🤖 VS 电脑 (mode=1)
玩家对抗 AI 电脑：
- 石头剪刀布：玩家出拳 → AI 随机出拳
- 选人：玩家选完后 AI 自动从剩余中随机挑选（等待约200ms，模拟思考）
### 🌐 在线对战 (mode=3)
通过 PeerJS (WebRTC) 进行 P2P 远程对战：
- 一方创建房间（生成房间号），另一方输入房间号加入
- 使用 确定性随机种子 保证双方看到相同的5人选择池
- 每一步（石头剪刀布、选人）都实时通过网络同步
---
## 四、核心数据结构
### 110位传奇 (PP)
11个位置 × 10人，包含球员名、评分(85-95分)、国旗emoji、国旗Key：
GK(门将): 雅辛92, 布冯91, 卡西90, 卡恩89, 诺伊尔89, ...
LB(左后卫): 马尔蒂尼92, 卡洛斯89, ...
CB(中后卫): 贝肯鲍尔93, 卡纳瓦罗91, 巴雷西91, ...
CM(中场): 马特乌斯92, 皮尔洛91, 哈维91, 杰拉德90, ...
CAM(前腰): 马拉多纳95, 齐达内93, 普拉蒂尼92, ...
LW(左边锋): C罗93, 贝斯特90, ...
RW(右边锋): 梅西94, 加林查89, 菲戈88, 贝克汉姆87, ...
ST(前锋): 贝利95, 大罗93, 亨利91, 范巴斯滕91, ...### 4-3-3 阵型 (POS_ORDER)
门将 → 左后卫 → 中后卫×2 → 右后卫 → 中场×2 → 前腰 → 左边锋 → 右边锋 → 前锋
GK → LB → CB×2 → RB → CM×2 → CAM → LW → RW → ST### 四区划分 (AREAS)
| 区域 | 位置 | 球场底色 |
|:---|:---|:---:|
| ⚡ 前场 (fwd) | LW, RW, ST | 红色 |
| 🎯 中场 (mid) | CM×2, CAM | 绿色 |
| 🛡️ 后场 (def) | LB, CB×2, RB | 蓝色 |
| 🥅 门将 (gk) | GK | 金色 |
---
## 五、选人系统详解
### 随机选人池
每次游戏开始时，goDraft() 函数对每个位置独立洗牌，抽取前5人作为本局可选池。对于CB/CM等重复位置(出现2次)，采用分片偏移机制：
- CB1 取洗牌结果 [0..4]，CB2 取 [5..9]
- 保证同一位置不出现重复传奇
### 选人顺序
从 getCurrentSlot() 获取当前未选满的位置，规则如下：
- 如 P1 已选但 P2 未选 → 轮到 P2（同位置双方各选1人）
- 如双方都未选 → 根据 S.pi 交替
- 如双方都选完 → 前进到下一个位置
### 评分隐藏
选人阶段所有卡片不显示评分，只显示国旗和球员名。结果页面才揭晓评分对比（👑标识胜出方）。
---
## 六、胜负判定逻辑
逐个位置对比双方选择的传奇评分：
| 规则 | 胜出条件 |
|:---|:---|
| 位置得分 | 评分高的一方得1分 |
| 总分判断 | 位置得分多者获胜 |
| 平局判断 | 比较平均评分，高者胜 |
| 无法判定 | 显示"完全平局" |
结果页包含：
- 🏆 获胜方标题 + 奖杯
- 双方总评分对比 + 百分比进度条
- 11个位置的逐一对比列表（球员名 + 评分 + 👑标识）
- 胜利时彩色纸屑飘落动画
---
## 七、UI 界面说明
### 首页
- 金色渐变标题「⚽ 传奇11人」
- 30位传奇头像缩略图预览
- 三个模式按钮
- 底部 🐛 DBG 调试按钮
### 石头剪刀布页面
- 双方卡片，选择时模糊隐藏对方结果
- 揭晓时有翻转动画
- 平局自动重开
### 选人页面
- 顶部栏：当前玩家、回合数、四区进度条(4个圆点)
- 顶部球队条：蓝色(P1)和红色(P2)已选球员头像缩略条
- 球场区：四区彩色背景 + 11个位置圆圈，已选球员在两侧显示头像，当前待选位置金色高亮动画
- 底部选人面板：5张球员卡（头像、国旗、姓名），可点击
### 结果页面
- 奖杯动画 + 胜者标题
- 双方总评分 + 百分比进度条
- 11个位置的逐一评分对比
---
## 八、技术特性
### Avatar 生成
所有球员头像纯 Canvas 绘制：
- 背景为该国国旗颜色渐变
- 中央显示姓名首字母
- 白色描边 + 阴影
### 在线同步
- PeerJS (WebRTC) 实现 P2P 连接，CDN 加载（有备选源）
- 确定性 RNG (线性同余法 16807)，双方用同一seed生成相同的洗牌序列
- 消息协议：init(seed) → rps_choice(出拳) → rps_res(结果) → pick(选人)
### 调试系统
- 点击左下角 🐛 DBG 按钮打开调试面板
- 实时记录操作日志（选人、状态变更、错误）
- 支持 导出日志文件 用于排查问题
---
## 九、文件结构
单文件架构（全部内容在足球11人.html 中）：| 部分 | 内容 |
|:---|:---|
|