一个基于 腾讯云 EdgeOne Pages 部署的化学判断题趣味竞答游戏，包含排行榜、管理员面板和 KV 持久化存储。
| 功能 | 描述 |
|---|---|
| 98道化学判断题 | 涵盖初中化学常见误区与易错知识点 |
| 5秒限时答题 | 答错或超时立即结束，显示详细解析 |
| 荣耀排行榜 | 得分降序 + 用时升序，仅保留前200名 |
| 管理员面板 | 密码进入，可查看/删除所有记录 |
| 敏感词过滤 | 自动过滤不文明用户名 |
┌─────────────────────────────────────────┐
│ 用户浏览器 │
│ ┌─────────────────────────────────┐ │
│ │ index.html (游戏主页面) │ │
│ │ - 游戏逻辑 (纯前端) │ │
│ │ - 排行榜展示 │ │
│ │ - 管理员面板 │ │
│ └──────────────┬──────────────────┘ │
│ │ fetch /api/leaderboard │
└─────────────────┼─────────────────────────┘
│
┌─────────────▼─────────────┐
│ EdgeOne Pages Functions │
│ edge-functions/api/ │
│ leaderboard.js │
│ (边缘函数 API) │
└─────────────┬─────────────┘
│
┌─────────────▼─────────────┐
│ EdgeOne Pages KV │
│ TOF_reactionlab4 │
│ (持久化排行榜数据) │
└───────────────────────────┘
核心技术栈：
- 前端：原生 HTML + CSS + JavaScript（无框架依赖）
- 后端：EdgeOne Pages
- 存储：EdgeOne Pages KV（键值对持久化存储）
- 部署：腾讯云 EdgeOne Pages + CNB 自动部署
.
├── index.html # 游戏主页面（纯 HTML 结构）
├── CHANGELOG.md # 完整变更记录（含开发细节）
├── README.md # 项目说明文档
├── source/
│ ├── css/
│ │ └── style.css # 全部样式
│ └── js/
│ ├── questions.js # 题库数据（98道化学判断题）
│ ├── changelog.js # 版本日志数据 + 弹窗渲染函数
│ └── app.js # 游戏逻辑（排行榜 + 答题 + 管理面板）
├── edge-functions/
│ └── api/
│ ├── leaderboard.js # 排行榜 API（KV 读写）
│ └── auth.js # 管理员验证 API（KV 密码校验）
└── .cnb.yml # CNB 部署配置
-
安装 EdgeOne CLI：
npm install -g @edgeone/cli -
登录腾讯云账号：
edgeone auth login
- 将代码推送至 CNB 仓库
- 在 CNB 配置自动化部署流水线
- 配置环境变量
EO_API_TOKEN（EdgeOne API Token）
部署配置见 .cnb.yml
EdgeOne Pages KV 命名空间需要与项目绑定后才能在边缘函数中使用。
- 登录 腾讯云 EdgeOne 控制台
- 进入 Pages → 选择项目
reactionlab4 - 左侧菜单选择 环境变量与绑定
- 点击 添加绑定：
- 变量名：
TOF_reactionlab4⚠️ 必须与代码一致 - 命名空间：选择已创建的 KV 命名空间（如
Maimaio）
- 变量名：
- 重新部署（绑定更改后必须重新部署才能生效）
# 本地开发时需要先关联项目
edgeone pages link
edgeone pages dev
部署后访问：https://reactionlab4.maimaio.top/api/leaderboard
- 返回
[]→ KV 绑定成功 - 返回错误信息 → 检查变量名是否一致，或重新部署
获取排行榜数据。
响应示例：
[
{"name": "张三", "score": 98, "duration": 245, "timestamp": 1746182400000},
{"name": "李四", "score": 95, "duration": 180, "timestamp": 1746182300000}
]
保存完整排行榜数据（覆盖式写入）。
请求体：
[
{"name": "张三", "score": 98, "duration": 245, "timestamp": 1746182400000}
]
响应示例：
{"success": true}
- 输入班级名字开始挑战（名字会显示在排行榜）
- 98道判断题随机排序，每题限时 5秒
- 点击 ✅ 正确 或 ❌ 错误 作答
- 答错或超时 → 立即结束，显示该题解析
- 满分通关 → 显示特殊成就提示
- 游戏结束后自动提交成绩到排行榜
- 排行榜名字唯一——排行榜上的名字全局唯一，防止重复刷榜
- 排行榜按 得分降序 → 用时升序 排序，仅保留 前200名
当玩家提交成绩时，系统按以下规则处理：
玩家输入名字 → 开始挑战 → 游戏结束 → 提交成绩
│
┌─────────────────┴────────────────┐
│ 排行榜检查 │
│ │
├─ 名字被占用 ── 是 ─ playerId ─┬── 相同 → ✅ 同一个人，更新最佳成绩
│ │ │
│ │ └── 不同 → ❌ 提示已被占用，请换名字
│ │
└─ 名字未被占用 ── 是 ─ playerId ─┬── 已有记录 → ✅ 旧名字释放，改用新名字
│
└── 无记录 → ✅ 全新记录，正常写入
- 同一个人（同一台设备）玩多次 → 只保留最高分那条
- 不同人（不同设备）想用同一个名字 → 提示已被占用，需换个名字
- 同一个人想改名 → 自动释放旧名字，改用新名字上榜
访问管理员面板：
- 点击页面右上角 🔒 管理员 按钮
- 输入密码（默认
chemadmin2025，登录后可修改） - 可查看所有玩家记录、删除违规数据、修改管理员密码
密码存储在 EdgeOne KV 中，通过
edge-functions/api/auth.js验证，不硬编码在代码中，公开仓库中无法直接查看。
# 克隆项目
git clone <your-repo-url>
cd <repo-name>
# 关联 EdgeOne 项目
edgeone pages link
# 启动本地开发服务器
edgeone pages dev
注意：本地开发时 KV 绑定需要通过
edgeone pages link关联，否则排行榜会降级到 localStorage。
| 字段 | 类型 | 说明 |
|---|---|---|
name | string | 玩家名字（最长20字符） |
score | number | 得分（0-98） |
duration | number | 总用时（秒） |
timestamp | number | 提交时间戳（毫秒） |
playerId | string | 浏览器唯一标识，用于去重 |
timeLabel | string | 可读时间标签，如 2026/05/03 21:12 |
游戏内置了版本更新日志（Changelog）弹窗，位于页面底部 footer 的 「📢 更新日志」 链接。每次有新版本发布时，用户首次访问会自动弹出更新提示。
编辑 source/js/changelog.js，只需修改 CHANGELOGS 数组和 APP_VERSION 常量：
// source/js/changelog.js
const APP_VERSION = '1.2.0'; // ← 更新版本号
const CHANGELOGS = [
// ★ 最新版本放在最前面 ★
{
version: 'v1.2.0', // ← 新版本号
date: '2026-05-10', // ← 发布日期
items: [
'✨ 新增了 XXXX 功能',
'🐛 修复了 XXXX 问题',
]
},
{ // 旧版本保留在后方
version: 'v1.1.0',
date: '2026-05-03',
items: [ /* ... */ ]
},
];
游戏的完整开发日志（含重构、文件结构调整等开发者侧变更）记录在 CHANGELOG.md 中。发布新版时同步更新该文件。
- 编辑
source/js/changelog.js - 在
CHANGELOGS数组最前面插入一条新记录，填写版本号、日期和更新条目 - 将
APP_VERSION更新为新的版本号（如'1.2.0'） - 同步更新
CHANGELOG.md中的完整记录 - 提交代码并重新部署
用户访问时，系统会自动比对
localStorage中记录的版本号与APP_VERSION。不一致时自动弹窗通知并更新记录，后续不再重复弹窗。
题库已从游戏主文件分离到 source/questions.js，方便独立编辑：
// source/js/questions.js
{ text: "二氧化碳能使紫色石蕊试液变红。", answer: true, explanation: "CO2与水反应生成碳酸…" },
// ↑ 题目正文（判断题） ↑ 答案 ↑ 答错时显示的解析
text— 题目正文answer—true（正确）或false（错误）explanation— 答错时弹出的解析文本
直接在 FULL_QUESTIONS 数组中添加或删除条目即可，TOTAL_Q 会自动根据数组长度更新。
修改题库后无需额外配置，重新部署即可生效。
- KV 绑定变量名必须与代码中完全一致（
TOF_reactionlab4），区分大小写 - 修改 KV 绑定后必须重新部署才能生效
- 排行榜采用覆盖式写入，前端会在提交时传入完整排行榜数据
- 管理员密码存储在 EdgeOne KV 的
adminPassword键中，不硬编码在代码中。首次部署默认密码chemadmin2025，可在管理面板中修改，也可直接在 KV 控制台编辑该键的值
MIT License
35/F,Tencent Building,Kejizhongyi Avenue,Nanshan District,Shenzhen
