一个基于React + Google Apps Script的像素风格知识问答游戏,采用复古8-bit游戏美学和赛博朋克霓虹色彩。

• 设计风格: 像素艺术 + 赛博朋克
• 游戏模式: 标签选择 → 10道题答题 → 结果展示 → 排行榜竞技
• 用户系统: 手机号登录 + 随机头像 + 自定义上传

AI-KnowledgeGame/
├── backend/ # Google Apps Script 后端
│ ├── Code.gs # 主API代码
│ └── README.md # 后端文档
├── frontend/ # React 前端应用
│ ├── src/ # 源代码
│ ├── public/ # 静态资源
│ └── README.md # 前端文档
└── README.md # 项目总览(本文件)

1. 新建Google Sheets表格
2. 创建以下Sheet页:
   • Questions - 题目数据
   • Tags - 标签数据
   • Users - 用户信息
   • GameRecords - 游戏记录
   • Leaderboard - 排行榜

1. 打开 扩展程序 → Apps Script
2. 将 backend/Code.gs 代码复制到编辑器
3. 修改 SPREADSHEET_ID 为你的表格ID
4. 运行一次 initializeAvatars() 函数初始化头像池
5. 部署为Web应用:
   • 点击 部署 → 新部署
   • 选择类型: Web应用
   • 执行身份: 我
   • 访问权限: 任何人
   • 点击 部署
6. 复制部署URL (类似 https://script.google.com/macros/s/YOUR_ID/exec)

📖 详细后端文档: backend/README.md

编辑 frontend/.env.local 文件:

VITE_API_URL=https://script.google.com/macros/s/YOUR_DEPLOYMENT_ID/exec

cd frontend
npm install
npm run dev

应用将在 http://localhost:3000 打开。

npm run build

构建后的文件在 dist/ 目录中。

📖 详细前端文档: frontend/README.md

• 📱 手机号快速登录(无需密码)
• 🎨 DiceBear随机头像(100张预生成池)
• 🖼️ 自定义头像上传(支持2MB以内图片)
• 💾 自动用户注册

• 🏷️ 多标签选择(最多3个)
• ❓ 随机抽取10道题目
• ⏱️ 实时答题进度显示
• 📊 自动计算得分
• 📝 错题详细解析

• 👤 显示玩家头像
• 🥇 最高分排名
• 🎲 总游戏局数
• 📈 平均分统计
• ⭐ 当前用户高亮

• 平台: Google Apps Script
• 数据库: Google Sheets
• API: RESTful风格(GET/POST)
• 头像服务: DiceBear API

• 框架: React 18
• 构建工具: Vite 5
• 路由: React Router DOM 6
• 状态管理: Zustand (带持久化)
• HTTP客户端: Axios
• 样式: 纯CSS(像素风格 + 赛博朋克)

graph LR
 A[登录页] --> B[个人中心]
 B --> C[标签选择]
 C --> D[答题页面]
 D --> E[结果页面]
 E --> F[排行榜]
 F --> B

1. 登录页 - 输入手机号登录/注册
2. 个人中心 - 查看/上传头像,选择开始游戏
3. 标签选择 - 多选知识标签(最多3个)
4. 答题页面 - 连续回答10道题目
5. 结果页面 - 查看得分和错题复盘
6. 排行榜 - 查看全球排名

• 🕹️ 像素风格: 复古8-bit游戏美学
• 🌈 赛博朋克: 霓虹色彩、发光效果
• 📺 CRT效果: 扫描线、星空粒子
• ✨ 动画效果: 闪烁、脉冲、打字机
• 📱 响应式: 完美适配各种屏幕

如果遇到跨域问题,请查看 CORS_FIX.md

• ✅ 检查 .env.local 中的API地址
• ✅ 确认Google Apps Script已部署为Web App
• ✅ 检查浏览器控制台错误信息

• ✅ 确保运行过 initializeAvatars() 函数
• ✅ 检查DiceBear API网络连接
• ✅ 自定义头像确保小于2MB

MIT License

开发者: Antigravity AI
最后更新: 2026年01月27日
版本: 1.0.0