# 登高游戏

**Repository Path**: wdl_/height-climbing-game

## Basic Information

- **Project Name**: 登高游戏
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-08-28
- **Last Updated**: 2026-08-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 环泊酚登高挑战 · H5 版

> 📘 活动现场使用说明（玩家玩法 + 主持人操作流程）见 [`使用说明.md`](./使用说明.md)。

纯前端实现（HTML + CSS + Canvas），**双击 `front/index.html` 即可在浏览器运行**，无需安装、无需服务器、无外部资源依赖。

## 玩法
- 点击屏幕 / 按 `空格` 或 `↑` / 点"登高一阶"按钮 → 角色向上攀登一阶
- 每攀登 **5 阶** 弹出一段环泊酚品牌历程，并解锁一枚纪念徽章
- 登顶 **30 阶** 即达成最终胜利："成功助力环泊酚出海"
- 进度、最佳成绩、已解锁徽章通过 `localStorage` 本地存档

## 项目结构
```
huipofen-climb-h5/
├── front/                 # 前端静态文件
│   ├── index.html         #   玩家游戏页（HUD、徽章架、开始/里程碑/胜利弹窗）
│   ├── styles.css         #   样式与移动端适配
│   ├── game.js            #   游戏逻辑（品牌文案配置、关卡生成、跳跃/相机、徽章解锁、存档、合成音效、分享）
│   ├── char.png           #   角色图
│   ├── admin.html         #   主持人控制台（扫码、大厅控制、实时成绩、清空排名）
│   ├── rank.html          #   实时排名页（简洁版，适合嵌入或常规投屏）
│   ├── rank-bg.html       #   带活动背景图的大屏实时排名展示页
│   └── rank-bg.jpg        #   排名页背景图
├── server/                # Node.js 后端（Express + MySQL）
│   ├── server.js          #   成绩提交、全局排行榜、组队大厅、微信授权回调
│   ├── package.json
│   ├── .env.example       #   数据库连接 / ADMIN_TOKEN / 大厅配置 / 微信授权 等样例
│   └── ecosystem.config.js
├── sql/                   # 数据库脚本
│   ├── game-db-schema.sql #   建库建表与排行榜视图
│   ├── _alter_avatar.sql  #   增量：加头像列并重建视图
│   └── _alter_v2_timing.sql # 增量：加 duration_ms 计时列并重建视图
├── docs/                  # 说明文档与配置样例
│   ├── README.md          #   本文档（开发说明）
│   ├── 使用说明.md         #   活动现场使用说明（玩家玩法 + 主持人流程）
│   ├── 环泊酚登高挑战-活动使用说明.docx  # 使用说明的 Word 版（已用真实网址 game.iceriverbj.com）
│   ├── deploy-baota.md    #   宝塔面板 v11.6.0 部署指南
│   └── db-config.example.json
├── dist/                  # 打包产物（build.py 生成，可交付）
│   ├── 环泊酚登高挑战.html      # 单文件 H5（内联 CSS/JS，双击即玩）
│   └── huipofen-climb-h5-deploy.zip # 部署包（front/ + server/ + sql/ + docs/）
└── build.py               # 打包脚本：生成单文件 HTML 与部署 zip
```

## 运行方式
1. 直接双击 `front/index.html`（桌面浏览器）。
2. 或在 `front/` 目录下起本地服务：`cd front && python3 -m http.server 8123`，访问 `http://localhost:8123/`。
3. 手机体验：用任意静态托管（如 EdgeOne Pages / CloudBase / GitHub Pages）部署 `front/` 目录即可生成分享链接。

## 带排行榜的线上部署（后端 + 数据库）

- 前端默认 `API_BASE = '/api'`，需后端配合。后端在 `server/`（`Express + MySQL`，见 `server/.env.example`）。
- 后端默认从 `server/` 的上一级 `front/` 目录提供静态文件（`FRONTEND_DIR`），因此部署时 `front/` 与 `server/` 必须作为同级目录存在。
- **宝塔面板部署（v11.6.0）**完整步骤见 👉 [`deploy-baota.md`](./deploy-baota.md)：前后端分离说明、Node.js 环境（含 v11「Node 项目」模块与 PATH 坑）、PM2/进程守护、反向代理实现同源、日常发版与排错。
- 数据库：`huipofen_game`（脚本 `sql/game-db-schema.sql` 建库；增量变更 `sql/_alter_avatar.sql`、`sql/_alter_v2_timing.sql`）。
- 无后端时前端自动回退本机排行榜，仍可正常玩。

## 重新打包发版物

在项目根目录执行 `python3 build.py`，生成 `dist/环泊酚登高挑战.html` 与 `dist/huipofen-climb-h5-deploy.zip`。

## 说明
- 所有品牌文案、徽章名称、里程碑节点均与原小程序版一致。
- 音效由 Web Audio 实时合成，无需音频文件；部分浏览器需用户首次点击后才会发声。
- 分享优先调用系统原生分享（Web Share API），不支持时自动复制挑战链接。