uni-app 框架开发的 H5 休闲游戏，采用经典的"黄金矿工"玩法。玩家通过控制吊钩抓取地下物品获得分数，在限定时间和能量内挑战最1高分，并可以参与全球排行榜竞争。

## 二、核心功能模块

### 1. 用户登录系统

**功能描述**：

- **游客模式**：快速登录，无需注册即可体验游戏

- **邮箱登录**：输入有效邮箱地址登录，支持参与排行榜排名

- **隐私政策**：用户需勾选同意隐私政策后才能登录

- **账号切换提示**：检测到已有登录状态时，提供"切换账号"或"继续游戏"选项

**技术实现**：

- 调用后端 `/api/user/login` 接口进行身份验证

- 使用 Vuex 管理用户状态和 token

- localStorage 存储游客标识

### 2. 游戏主界面

**功能描述**：

- **开始游戏**：进入游戏关卡

- **游戏规则**：查看游戏玩法说明

- **音乐控制**：开启/关闭背景音乐

- **排行榜入口**：查看 TOP3 排行

- **分享功能**：复制游戏链接分享给好友

**技术实现**：

- 使用 Howler.js 管理背景音乐播放

- 音乐状态通过 Vuex 全局管理，页面间同步

- 从后端获取游戏规则内容（前端已覆盖为中文）

### 3. 核心游戏玩法

**游戏机制**：

**操作方式**：

- 点击屏幕任意位置，吊钩向点击方向发射

- 吊钩碰到物品后自动抓取并收回

- 不同物品重量不同，回收速度也不同

**游戏目标**：

- 在60秒时间内获得尽可能高的分数

- 合理管理1000点初始能量

- 每次发射消耗200点能量

**物品系统**：

- **电池/油桶**：能量道具，补充600点能量，但扣除17分

- **建筑材料**：铁塔塔架、木材、预制板、钢桥等，价值较高

- **墙壁**：价值较低，还会扣除分数

- **秘籍**：稀有道具，价值极高（6666分）

**特殊功能**：

- **刷新道具**：当分数达到1500分时，可消耗1500分重新生成地下物品

- **实时反馈**：抓取物品时显示得分变化（正分绿色，负分红）

**结束条件**：

- 时间耗尽（60秒倒计时）

- 能量耗尽（无法继续发射吊钩）

- 最1后10秒有倒计时音效提示

**技术实现**：

- 使用 GSAP 动画库实现吊钩摆动和伸缩动画

- Canvas 渲染游戏场景和物品

- 碰撞检测算法判断吊钩与物品的接触

- 物理引擎模拟物品重量和回收速度

### 4. 游戏结束系统

**时间到弹窗**：

- 显示"金光闪闪！恭喜你本轮捕获了XXX黄金！"

- 展示最终得分

- 提供两个选项：

  - 左侧按钮：中断游戏，返回首页

  - 右侧按钮：观看广告后重新开始

**能量耗尽弹窗**：

- 提示能量不足

- 同样提供中断或重新开始选项

**广告倒计时弹窗**：

- 模拟观看广告流程

- 5秒倒计时 + 进度条显示

- 倒计时期间按钮禁用，显示"观看中..."

- 倒计时结束后显示"重新开始"

- 点击后返回开始页面，可重新开始游戏

**技术实现**：

- 三个独立弹窗组件：endTime.vue、endPower.vue、adCountdown.vue

- 通过事件通信机制协调弹窗切换

- 倒计时使用 setInterval 实现

### 5. 提现功能

**功能描述**：

- 游戏页面分数旁显示"提现"按钮

- 点击打开提现申请弹窗

- 自动计算可提现金额（100分=1元）

- 选择收款方式（微信/支付宝/银行卡）

- 填写收款账号

- 最1低1000分才能提现

**表单验证**：

- 分数不足1000分时按钮禁用

- 必须填写收款账号才能提交

- 提交后显示确认对话框

**技术实现**：

- withdraw.vue 独立组件

- 深蓝渐变背景 + 金色边框设计

- 响应式表单验证

- 可扩展对接后端提现API

### 6. 排行榜系统

**TOP3 排行榜**：

- 显示前三名玩家信息

- 展示当前用户最1高分

- 每周一自动刷新

- 可查看完整排行榜

**全部排行榜**：

- 显示所有玩家排名

- 突出显示当前用户排名

- 支持滚动查看所有数据

**技术实现**：

- 调用 `/api/user/getRank1` 获取 TOP3

- 调用 `/api/user/getAllRankList` 获取完整排行

- 使用邮箱作为用户标识

- 动态样式区分前三名（金银铜牌图标）

### 7. 游戏规则系统

**规则内容**：

- 游戏目标说明

- 操作方法详解

- 物品分类及价值说明

- 能量系统规则

- 时间限制说明

- 得分计算规则

- 游戏技巧建议

- 排行榜说明

**技术实现**：

- 从后端 `/api/user/getGameInstruction` 获取规则

- 前端已覆盖为完整中文内容

- 使用 uni-popup 组件展示

- 支持滚动查看长文本

### 8. 隐私政策系统

**功能描述**：

- 登录页面底部显示隐私政策链接

- 点击弹出隐私政策详情

- 必须勾选同意才能登录

- 包含完整的中文化隐私条款

**政策内容**：

- 信息收集说明（仅收集邮箱和缓存）

- 信息使用目的

- 信息共享规则

- 信息存储和保护

- Cookie 使用说明

- 用户权利（访问、修改、删除）

- 未成1年1人保护

- 政策更新机制

- 联系方式

## 六、用户体验优化

### 加载优化

- 所有页面添加 loading 动画

- 使用 imagesloaded 确保图片加载完成后显示

- 异步加载游戏资源

### 交互反馈

- 按钮点击有视觉反馈（位移效果）

- 吊钩摆动有流畅动画

- 得分变化有颜色区分（正分绿色，负分红）

- 能量低时有颜色警示（红色进度条）

### 音频体验

- 背景音乐循环播放

- 音效不循环，避免重叠

- 音乐开关全局同步

- 尊重浏览器自动播放策略，用户交互后播放

### 视觉设计

- 统一的深蓝色调主题

- 金色点缀呼应"淘金"主题

- 圆角设计，现代化风格

- 渐变色背景，立体感强

## 七、数据交互

### API 接口列表

1. `/api/user/login` - 用户登录

2. `/api/user/getInitData` - 获取游戏初始化数据（配置、物料）

3. `/api/user/gameFinished` - 上传游戏得分

4. `/api/user/getRank1` - 获取 TOP3 排行榜

5. `/api/user/getAllRankList` - 获取完整排行榜

6. `/api/user/getBgm` - 获取背景音乐路径

7. `/api/user/getGameInstruction` - 获取游戏规则

8. `/api/user/refresh` - 刷新地下物品

9. `/api/user/getUserAgreement` - 获取隐私政策

### 数据存储

- **Vuex Store**：用户信息、音乐对象、播放状态

- **localStorage**：游客标识

- **uni.setStorage**：token 存储

## 八、页面路由

1. **pages/login/index** - 登录页面（入口）

2. **pages/start/index** - 开始页面（主菜单）

3. **pages/game/index** - 游戏页面（核心玩法）

4. **pages/rule/index** - 规则页面（备用，实际在 start 页面弹窗展示）

5. **pages/rank/index** - TOP3 排行榜

6. **pages/rankall/index** - 完整排行榜

## 九、特色功能亮点

1. **经典玩法重现**：完美还原黄金矿工核心体验

2. **能量管理系统**：创新的双限制机制（时间+能量）

3. **刷新道具**：策略性道具，增加游戏深度

4. **广告变现**：模拟广告观看流程，为商业化预留接口

5. **提现功能**：积分兑换现金，增强用户粘性

6. **全球排行**：激发竞争欲望，提升留存

7. **完整中文化**：无障碍中文体验

8. **资源本地化**：离线可用，加载快速

9. **跨平台支持**：一套代码多端运行

10. **响应式设计**：适配各种屏幕尺寸

## 十、项目状态

- ✅ 核心游戏功能完整

- ✅ 用户系统完善

- ✅ 排行榜功能正常

- ✅ 资源全部本地化

- ✅ 界面完全汉化

- ✅ 音效系统完善

- ✅ 音乐开关正常

- ✅ 提现功能就绪

- ✅ 广告完成

- ✅ 可发布上线

---

**总结**：体验流畅的 H5 休闲游戏，具备经典玩法、社交排行、商业变现等完整功能闭环，代码结构清晰，易于维护和扩展。

---

## 推荐SEO标题方案

### 方案一（综合型 - 推荐）

**Vue+uni-app黄金矿工源码 | 休闲挖1矿小游戏 | 内置矿1机玩法+广告联盟变现 | 含排行榜提现 完整开源**

### 方案二（技术导向型）

**Vue2+uni-app游戏源码 | 黄金矿工休闲项目 | 挖1矿1机制+矿1机系统 | 支持广告联盟对接 三端适配**

### 方案三（功能亮点型）

**黄金矿工H5游戏源码 | 挖11矿闯关+矿1机增益功能 | 广告联盟广告弹窗+积分提现 | 开箱即用多端模板**

### 方案四（商业价值型）

**可商用休闲游戏源码 | 黄金矿工经典玩法 | 挖1矿收益+矿1机配置 | 集成广告联盟 自带变现体系**

### 方案五（简洁精准型）

**uni-app黄金矿工源码 | 挖1矿小游戏 | 矿1机功能齐全 | 对接广告联盟 H5/小程序/App通用**

---

## SEO关键词建议

### 核心四大关键词（必选）

- 黄金矿工

- 挖1矿

- 矿1机

- 广告联盟

### 组合长尾关键词

- 黄金矿工挖1矿游戏源码

- 带矿1机玩法H5小游戏

- 游戏广告联盟对接源码

- 黄金矿工矿1机增益模板

- 挖1矿收益休闲游戏代码

- uni-app挖1矿游戏源码

- 可对接广告联盟小游戏

- 黄金矿工多端商用源码

### 技术关键词

- Vue2 + uni-app

- GSAP动画库

- Howler.js音频

- 跨平台开发

- HBuilderX项目

- 游戏广告位开发

- 前端休闲游戏开发

---

## 推荐使用场景

**GitHub/Gitee仓库标题**：方案一、方案二

**技术博客文章标题**：方案三

**商业推广售卖页面**：方案四

**开发者社区/插件市场**：方案五

---

## 最1佳实践建议

1. 标题控制60–80字符，四大核心关键词合理分布，避免堆砌；

2. 「广告联盟」侧重商用变现、「矿1机/挖1矿/黄金矿工」侧重玩法引流；

3. 突出完整源码、三端发布、提现功能、开箱即用核心卖点；

4. 明确标注技术栈，精准吸引源码购买、二次开发用户；

5. 详情页穿插四大关键词组合短句，提升整体搜索收录权重。

---

## 最终推荐标题

**黄金矿工H5游戏源码 | Vue+uni-app挖1矿小游戏 | 内置矿1机玩法 | 对接广告联盟 提现变现完整项目**

定制看需求，一般几小时内完成，也不贵。