开心消消乐（HTML5三消游戏）

游戏简介

开心消消乐是一款基于HTML5 Canvas开发的经典三消消除类游戏，支持100个精心设计的关卡、自由模式、丰富的消除特效与音效、进度自动保存，适配PC和移动端。所有核心逻辑、界面与资源均集成于单一HTML文件，开箱即用。

---

目录

• 主要特性
• 详细玩法说明
• 关卡与难度机制
• 特殊宝石与障碍
• 道具系统
• 音效与自定义资源
• 进度保存与通关标记
• 界面与操作说明
• 文件结构与资源要求
• 常见问题与技巧
• 兼容性与技术说明

---

主要特性

• 100个关卡：难度逐步提升，目标分数和步数动态调整，后期关卡更具挑战性。
• 自由模式：无限步数，随心畅玩，适合练习和娱乐。
• 特殊宝石：4连生成横/竖线消除，5连生成彩虹万能宝石，带来更强消除体验。
• 冰块障碍：部分格子带冰块，需多次消除，增加策略性。
• 道具系统：洗牌、彩虹变换道具，关键时刻助你通关。
• 粒子与消除特效：消除、连锁、整行整列等动画，视觉体验丰富。
• 音效系统：支持自定义音效包，内置基础音效，支持静音与自定义加载。
• 进度保存：自动记录通关与解锁进度，断点续玩。
• 通关标记：已完成关卡绿色高亮并带✓，一目了然。
• 响应式设计：适配PC与移动端，自动调整布局。
• 本地部署：无需服务器，直接用浏览器打开即可游玩。

---

详细玩法说明

1. 基本操作：
   • 点击相邻的宝石进行交换。
   • 只有能形成消除的交换才会被执行。
2. 消除规则：
   • 连成3个或更多同色宝石即可消除。
   • 4连生成横/竖线消除宝石，5连生成彩虹万能宝石。
   • 消除后上方宝石下落，空位自动补充。
   • 连锁消除会自动触发，分数加成。
3. 目标与失败：
   • 每关有目标分数和步数限制。
   • 步数用尽未达目标则失败，可重试。
   • 达到目标分数即可通关，自动解锁下一关。
4. 冰块障碍：
   • 带冰块的格子需多次消除才能完全清除。
   • 冰块会阻挡宝石交换和消除。
5. 道具使用：
   • 洗牌：随机打乱棋盘，保证有可消除步。
   • 彩虹：将指定宝石变为彩虹万能宝石（每关仅限一次）。

---

关卡与难度机制

• 关卡总数：100关，难度逐步递增。
• 目标分数：每关目标分数随关卡提升而提高。
• 步数限制：前期步数较多，后期步数逐步减少。
• 宝石种类：初期仅3种，随关卡提升逐步解锁更多颜色，最高9种。
• 冰块障碍：关卡越高，冰块出现概率越大，最多可达25%。
• 每关通关后自动解锁下一关，已通关关卡绿色高亮并带✓。

---

特殊宝石与障碍

1. 横/竖线消除宝石：
   • 4连时生成，消除时可横/竖整行或整列。
2. 彩虹万能宝石：
   • 5连时生成，交换后可消除棋盘上所有同色宝石。
3. 冰块障碍：
   • 需多次消除，优先策略可提升通关效率。

---

道具系统

• 洗牌道具：随机打乱棋盘，保证有可消除步。
• 彩虹道具：将任意宝石变为彩虹万能宝石（每关仅限一次）。
• 道具按钮位于游戏界面左侧，使用后有动画提示。

---

音效与自定义资源

1. 音效系统：
   • 内置基础音效，支持消除、连锁、胜利、失败等。
   • 支持自定义音效包，放置于 audio/9439/ 目录。
   • 支持静音与音量调节。
2. 自定义图片资源：
   • 宝石图片放置于 images/ 目录，命名为 gem0.png ~ gem8.png。
   • 建议尺寸64x64像素及以上，PNG格式。
3. 自定义音效资源：
   • 文件名需为：bg.mp3, pop.mp3, combo.mp3, win.mp3, lose.mp3。
   • 游戏内可通过“音效包”按钮加载自定义音频。

---

进度保存与通关标记

• 游戏自动保存通关进度与解锁状态，刷新或关闭浏览器不会丢失。
• 已通关关卡在关卡选择界面以绿色高亮并带✓标记。
• 存档数据保存在浏览器本地 localStorage。

---

界面与操作说明

1. 主菜单：
   • “开始游戏”：进入第一关。
   • “关卡选择”：自由选择已解锁关卡。
   • “自由模式”：无限步数畅玩。
2. 关卡选择：
   • 绿色✓为已通关关卡。
   • 点击关卡数字进入对应关卡。
3. 游戏界面：
   • 左侧为游戏信息、目标、道具按钮。
   • 右侧为8x12棋盘，支持鼠标或触屏操作。
   • 下方有浮动提示与动画。
4. 音效与静音：
   • 可随时切换静音/解除静音。
   • 支持自定义音效加载。

---

文件结构与资源要求

消消乐/
├── index.html          # 主游戏文件（包含全部代码与样式）
├── images/             # 宝石图片资源（gem0.png ~ gem8.png）
├── audio/9439/         # 可选音效包（bg.mp3, pop.mp3, combo.mp3, win.mp3, lose.mp3）
└── README.md           # 说明文档

图片资源

• 格式：PNG，建议64x64像素及以上
• 命名：gem0.png ~ gem8.png（红、蓝、绿、黄、紫、橙、青、浅绿、粉）
• 放置于 images/ 目录

音效资源

• 格式：MP3
• 内置基础音效，支持自定义音效包
• 自定义音效放置于 audio/9439/ 目录，文件名需为：bg.mp3, pop.mp3, combo.mp3, win.mp3, lose.mp3

---

常见问题与技巧

1. 如何自定义宝石图片？
   • 将自制PNG图片命名为 gem0.png ~ gem8.png，放入 images/ 目录即可。
2. 如何自定义音效？
   • 将自制MP3音效命名为 bg.mp3, pop.mp3, combo.mp3, win.mp3, lose.mp3，放入 audio/9439/ 目录，点击“音效包”按钮加载。
3. 进度丢失怎么办？
   • 检查浏览器是否禁用localStorage或清理了缓存。
4. 移动端适配问题？
   • 游戏已适配主流移动端，若有显示异常建议横屏或更换浏览器。
5. 如何重置进度？
   • 清除浏览器本地存储（localStorage）即可重置所有关卡进度。
6. 游戏卡顿或音效无声？
   • 建议使用最新版Chrome/Edge/Firefox，部分浏览器需用户交互后音效才会播放。

---

兼容性与技术说明

• 支持主流现代浏览器（Chrome、Edge、Firefox、Safari等）
• 适配PC与移动端，响应式布局
• 纯HTML5 + JavaScript实现，Canvas 2D渲染
• 无外部依赖，单文件部署
• 所有进度与资源均本地存储，安全可靠

---

🎮 祝您游戏愉快！如有建议欢迎反馈与改进。