AI 成语大闯关

一个由 DeepSeek AI 实时驱动的成语闯关小游戏。AI 担任主持人与裁判：按关卡难度出题（只给释义提示、不露答案），玩家输入四字成语作答，AI 即时评判对错并给出出处解析。前端原生 HTML5 + CSS3 + JavaScript 实现，零依赖、纯静态、无需后端。

功能特点

• AI 出题：几十秒内按关卡难度生成释义题，提示词中绝不泄露答案用字，且同一局不重复出题
• AI 裁判：即时判断对错、给出成语出处与释义、按关卡得分
• 闯关体系：答对晋级、答错可重试（每关限 3 次）、可随时换题
• 限时作答：每关倒计时（20~40 秒），时间到提示但不强制淘汰
• 积分连击：答对加对应分值，连击越高成就感越强
• 荣誉称号：初出茅庐 → 学富五车 → 出口成章 → 才高八斗 → 一代宗师
• 古风国潮 UI：宣纸底色、朱红点缀，移动端/桌面端自适应

快速开始

项目为纯静态页面，任选一种方式启动本地静态服务后，浏览器打开即可（推荐 8080 端口，跨域已验证放行）：

# 方式一：Python
cd ruanjian6chengyudachangguan
python3 -m http.server 8080
# 浏览器访问 http://localhost:8080

# 方式二：Node
cd ruanjian6chengyudachangguan
npx serve -l 8080 .

提示：本游戏依赖联网调用 AI 接口，需保证网络可达 api-ai.gitcode.com。

配置说明

所有 AI 相关配置集中在 js/config.js：

配置项	说明
apiUrl	AI 接口地址（GitCode 开放 API，OpenAI 兼容协议）
apiKey	鉴权密钥，默认内置班级共享 key
model	模型名称 deepseek-ai/DeepSeek-V4-Flash
totalLevels	总关卡数（默认 10 关）
maxRetriesPerLevel	每关最多答错次数（默认 3 次）
systemPrompt	系统提示词，约束 AI 始终按下方 JSON 协议输出
titles	称号与积分区间映射

更换自己的 key 时，只需修改 apiKey 即可。

从 Python 参考代码到 JavaScript

官方参考实现使用 Python requests 流式调用接口，本项目已完整转换为原生 JavaScript（js/api.js），无需任何第三方依赖：

Python 参考代码	JavaScript 等价实现（js/api.js）
requests.post(..., stream=True)	fetch(apiUrl, { method: "POST" }) + resp.body.getReader()
response.iter_lines() + startswith(b"data:")	按 \n 切分流并过滤 data: 前缀行
line.rstrip("/n") + json.loads	JSON.parse(payload)，忽略 [DONE] 结束标记
chunk["choices"]	chunk.choices[0].delta，累积 content、忽略 reasoning_content 思考字段
yield 逐块返回	onText 回调增量推送、onDone 返回完整正文

AI 返回的 JSON 协议

系统提示词要求模型每次只输出一个合法 JSON 对象（禁用 markdown 代码块），前端流式累积后解析渲染，共四种消息：

1. 出题

{
  "type": "question",
  "level": 1,
  "hint": "比喻做了多余的事，反而弄巧成拙",
  "tip": "4个字，首字拼音首字母为 h",
  "deadline": 30,
  "score": 10,
  "answer": "画蛇添足"
}

2. 评判（答对 / 答错）

{ "type": "judge", "correct": true, "answer": "画蛇添足", "right_answer": "", "explanation": "语出《战国策·齐策二》…", "retry": false }

{ "type": "judge", "correct": false, "answer": "马马虎虎", "right_answer": "画蛇添足", "explanation": "…", "retry": true }

3. 结算

{ "type": "end", "message": "恭喜通关！", "total_score": 180, "max_level": 10, "title": "一代宗师" }

4. 错误兜底

{ "type": "error", "message": "本次出题失败，请点击重试" }

answer 及状态快照仅用于后台裁判比对，不会展示给玩家。前端解析失败时会自动降级为纯文本展示，保证游戏不间断。

项目结构

ruanjian6chengyudachangguan/
├── index.html          主页面（单页应用）
├── css/
│   └── style.css       古风国潮主题样式
├── js/
│   ├── config.js       API 配置 + 系统提示词（JSON 协议）
│   ├── api.js          流式 SSE 调用：忽略思考字段、累积正文、解析 JSON
│   ├── game.js         游戏状态机：关卡/积分/连击/称号/倒计时/消息历史
│   └── ui.js           渲染层：题目卡、作答区、消息流、结算弹层
├── docs/superpowers/specs/
│   └── 2026-09-18-ai-chengyu-challenge-design.md   设计文档
└── README.md

数据流

输入作答 ─▶ game.js（状态机：维护消息历史+状态快照）
         ─▶ api.js（fetch 流式请求，拼接 content，忽略 reasoning_content 思考字段）
         ─▶ 完整文本 ─▶ extractJson 解析 ─▶ 按 type 路由渲染

测试

已通过的自动化验证：

• 协议冒烟：开始游戏/答对/答错/下一关/结算 五类请求均按 JSON 协议返回，字段齐全，提示不泄露答案
• 浏览器冒烟（Playwright + Chromium）：页面加载 → 开始闯关 → 出题 → 答对/答错 → 重试 → 晋级 → 光荣结算 全链路通过，无控制台错误

注意事项

• apiKey 为班级共享密钥，请勿外传滥用；发布站点前建议更换为个人密钥（前端暴露的 key 天然可见，仅供学习演示）。
• AI 生成存在不确定性，偶发解析失败时页面会自动提示重试。
• 需要联网使用；离线环境将无法出题。