U探店闯关问答

Table of contents

项目结构

game/
├── index.html              # 首页（单页应用
├── css/                    # 样式文件
├── js/                     # 前端JS文件
├── assets/                 # 静态资源
├── server.js              # Node.js 后端服务
├── package.json           # 后端依赖
└── data/                  # SQLite数据库文件（自动生成）

两种部署方式

方式一：一体式部署（最简单，前后端同域）

适用于本地开发或内部使用

优点：配置简单，无需处理跨域问题

步骤：

1. 安装依赖：

   npm install

2. 启动服务：

   npm start

3. 访问：http://localhost:3000

方式二：前后端分离部署（前端GitHub Pages + 本地后端）

适用于前端代码托管在GitHub Pages，后端和数据库运行在本地

第一步：部署前端到GitHub Pages

1. 创建GitHub仓库

   • 在GitHub上创建一个新的public仓库
   • 仓库名例如：u-tan-dian-game

2. 准备前端文件

   • 将以下文件/目录上传到仓库：
     • index.html
     • css/ 目录
     • js/ 目录
     • assets/ 目录
   • 注意：不需要上传 server.js、package.json、node_modules/、data/

3. 启用GitHub Pages

   • 进入仓库 Settings → Pages
   • Source 选择 main 分支，根目录 /
   • 保存后等待几分钟，访问地址类似： https://<你的用户名.github.io/u-tan-dian-game/

4. 配置API地址

   • 在浏览器中打开部署好的GitHub Pages页面
   • 按 F12 打开开发者工具
   • 在 Console 中输入：

     localStorage.setItem('apiBase', 'http://localhost:3000/api');

   • 刷新页面

第二步：启动本地后端

1. 在本地项目目录执行：

   npm install
   npm start

2. **后端会运行在 http://localhost:3000

3. CORS配置：

   • 默认已启用CORS，允许所有来源跨域访问
   • 如需限制来源，编辑 server.js 中的 cors 配置：

     app.use(cors({
       origin: ['https://your-username.github.io',
       credentials: true
     }));

游戏模式说明

经典答题模式

• 传统问答游戏模式
• 三关难度递进
• 支持单选、多选、判断、问答题型

马里奥闯关模式

• 横版2D闯关玩法
• 角色左右移动、跳跃
• 碰到怪物/顶问号砖块触发答题
• 3条生命值
• 到达终点通关

操作方式

键盘：

• ← → 或 A D：左右移动
• ↑ 或 W 或 空格：跳跃
• ESC：暂停/继续
• Enter：确认

蓝牙手柄：

• 左摇杆 / 十字键：左右移动
• A / B 键：跳跃
• X 键：确认

API 接口列表

注意事项

1. Gamepad API 限制：

   • 蓝牙手柄功能仅在 HTTPS 或 localhost 环境下可用
   • GitHub Pages 是 HTTPS，支持手柄
   • 首次使用需要按一下手柄任意键激活

2. 本地后端必须运行：

   • 前后端分离部署时，本地必须启动后端服务
   • 否则无法登录、排行榜等功能不可用

3. 数据存储：

   • 用户数据和游戏记录保存在本地 SQLite 数据库
   • 数据库文件：data/game.db

4. 浏览器兼容性：

   • Chrome / Edge / Safari / Firefox 均支持
   • 建议使用最新版浏览器