📖 引言
一个现代化、功能丰富的 消消乐游戏，支持特殊宝石、连击系统、关卡进度等特性。无论您是在桌面电脑还是移动设备上，都能享受到流畅的游戏体验。
🎮 游戏介绍
消消乐（Match3）是一款经典的益智消除游戏。玩家通过交换相邻的宝石，使三个或更多同色宝石连成一线，从而消除得分。游戏融合了策略思考和反应速度，简单易懂但富有挑战性。
本项目是消消乐游戏的现代 Web 实现，保留了经典玩法的所有乐趣，同时增添了现代 UI 设计、流畅动画和多项增强功能：
- 🎨 精美的宝石渐变效果和动画
- 💎 4 种特殊宝石（横条纹、竖条纹、炸弹、彩虹）
- 🔥 连击系统和级联消除
- 🏆 5 个渐进关卡，难度逐步提升
- 🎯 提示和洗牌道具助您过关
- 🌓 支持明亮和暗黑双主题
✨ 功能特性
核心玩法
- 8×8 棋盘：经典消除游戏布局
- 6 种彩色宝石：红、蓝、绿、黄、紫、橙，带有渐变光泽效果
- 流畅动画：交换、消除、下落、新宝石出现均有丝滑动画
特殊宝石系统
1. 横条纹宝石（↔）
- 触发条件：横向匹配 4 个宝石
- 效果：消除整行所有宝石
- 外观：蓝色底色 + 白色横纹 + ↔ 箭头
2. 竖条纹宝石（↕）
- 触发条件：纵向匹配 4 个宝石
- 效果：消除整列所有宝石
- 外观：紫色底色 + 白色竖纹 + ↕ 箭头
3. 炸弹宝石（💥）
- 触发条件：匹配 5 个宝石（L/T 型）
- 效果：消除周围 3×3 范围的所有宝石
- 外观：保留原宝石颜色 + 💥 图标 + 金色脉冲光晕
4. 彩虹宝石（🌈）
- 触发条件：直线匹配 5 个宝石
- 效果：消除场上所有同色宝石
- 外观：彩虹渐变背景，闪烁动画
进阶系统
连击加分
- 2 连击：1.5x 分数加成
- 3 连击：2x 分数加成
- 4+ 连击：2.5x 分数加成
级联消除
- 宝石下落后的自动匹配
- 每次级联都会触发连击加成
关卡系统（5 个关卡）
| 关卡 | 目标分数 | 移动步数 | 描述 |
|---|---|---|---|
| 1 | 500 | 30 | 🌟 初次挑战 |
| 2 | 1500 | 28 | 🌟🌟 稳步前进 |
| 3 | 2500 | 26 | 🌟🌟🌟 挑战极限 |
| 4 | 3500 | 24 | 🌟🌟🌟🌟 大师之路 |
| 5 | 5000 | 22 | 🌟🌟🌟🌟🌟 传奇巅峰 |
说明：
- 目标分数：过关的最低要求（必须达到才能解锁下一关）
- 移动步数：每关可用的操作步数（后期递减，难度递增）
道具系统
- 提示（Hint）：高亮显示一个有效的交换位置（限用 3 次）
- 洗牌（Shuffle）：重新排列棋盘（限用 1 次）
主题支持
- 亮色主题：清爽明亮风格
- 暗色主题：深色护眼风格
- 主题切换按钮在右上角
🎯 游戏规则
- 基本操作：点击一个宝石，再点击相邻的宝石进行交换
- 有效交换：只有交换后能形成 3 个或更多同色宝石的交换才有效
- 无效交换：交换后无法匹配，宝石会自动回弹到原位置
- 目标：在限定步数内达到关卡目标分数
- 过关：达到目标分数后进入下一关
- 失败：步数用完但未达到目标分数，游戏结束
- 通关：通过全部 5 关后，显示通关庆祝页面
🕹 操作指南
桌面端操作
| 操作 | 方式 |
|---|---|
| 选择宝石 | 点击一个宝石 |
| 交换宝石 | 点击相邻的目标宝石 |
| 使用提示 | 点击”💡 提示”按钮 |
| 洗牌 | 点击”🔀 洗牌”按钮 |
| 重来 | 点击”🔄 重来”按钮 |
| 新游戏 | 点击”🎮 新游戏”按钮 |
| 切换主题 | 点击右上角主题切换按钮 |
移动端操作
| 操作 | 方式 |
|---|---|
| 选择宝石 | 点击一个宝石 |
| 交换宝石 | 点击相邻的目标宝石 |
| 使用提示 | 点击”💡 提示”按钮 |
| 洗牌 | 点击”🔀 洗牌”按钮 |
| 重来 | 点击”🔄 重来”按钮 |
| 新游戏 | 点击”🎮 新游戏”按钮 |
| 切换主题 | 点击右上角主题切换按钮 |
🧩 游戏策略
基本策略
- 优先制造特殊宝石：尽量形成 4 个或 5 个宝石匹配，获得强力特殊宝石
- 组合特殊宝石：交换两个特殊宝石可以触发组合效果，产生大面积消除
- 从底部开始：优先消除底部的宝石，增加级联消除的机会
- 合理使用道具：在关键时刻使用提示或洗牌，避免浪费
高级技巧
- 条纹宝石组合：交换两个条纹宝石可以消除整行和整列
- 炸弹宝石精准放置：将炸弹放在密集区域，最大化消除效果
- 彩虹宝石策略：在有大量同色宝石时使用彩虹宝石，获得高分
- 预留移动步数：在接近目标分数时，计算剩余步数，避免无谓的交换
💻 技术实现
前端技术
- HTML5 - 构建游戏界面结构
- CSS3 - 实现响应式布局和流畅动画
- JavaScript (ES6+) - 实现游戏核心逻辑
- LocalStorage - 本地数据持久化
核心算法
- 匹配检测算法 - 高效检测横向和纵向的匹配
- 消除算法 - 处理普通消除和特殊宝石效果
- 下落算法 - 实现宝石下落和填充新宝石
- 级联检测 - 实时检测级联消除和连击
- 提示算法 - 智能查找有效的交换位置
性能优化
- CSS 动画 - 使用 CSS3 硬件加速提升动画性能
- 事件委托 - 减少事件监听器数量
- 防抖处理 - 优化窗口调整和触摸事件
- 内存管理 - 避免内存泄漏和过度 DOM 操作
📁 项目结构
1 | match3/ |
🚀 安装与运行
在线体验
访问游戏主页，即可开始游戏
本地运行
克隆仓库：
1
git clone https://github.com/huazie/flea-game.git
进入项目目录：
1
cd flea-game
打开 match3 游戏：
- Windows: 双击
match3/index.html文件 - macOS:
open match3/index.html - Linux:
xdg-open match3/index.html
- Windows: 双击
或者使用本地服务器（推荐）：
1
2
3
4
5# 在项目根目录运行
npx http-server -p 8080 --cors
# 然后在浏览器访问
# http://127.0.0.1:8080/match3/开始游戏！
🌐 浏览器兼容性
| 浏览器 | 支持状态 | 最低版本 |
|---|---|---|
| Chrome | ✅ 完全支持 | 49+ |
| Firefox | ✅ 完全支持 | 52+ |
| Safari | ✅ 完全支持 | 10+ |
| Edge | ✅ 完全支持 | 79+ |
| Opera | ✅ 完全支持 | 36+ |
| 移动端Chrome | ✅ 完全支持 | 49+ |
| 移动端Safari | ✅ 完全支持 | 10+ |
| 移动端Firefox | ✅ 完全支持 | 52+ |
🛠 开发说明
Match3Game 类
游戏的核心逻辑在 Match3Game 类中实现，主要包括：
- 初始化：设置游戏板、分数、关卡和事件监听器
- 棋盘生成：随机生成初始棋盘，确保无初始匹配
- 点击处理：处理宝石选择和交换逻辑
- 匹配检测：检测横向和纵向的有效匹配
- 消除逻辑：处理普通消除和特殊宝石效果
- 下落逻辑：实现宝石下落和填充新宝石
- 关卡管理：管理关卡进度、目标分数和移动步数
- 道具系统：实现提示和洗牌功能
- 主题切换：处理明暗主题的切换
- 状态管理：检测游戏是否结束或过关
- UI 更新：更新游戏界面和分数显示
- 动画处理：实现平滑的交换、消除和下落动画
GameStorage 类
数据持久化由 GameStorage 类处理，负责：
- 保存游戏状态：将当前关卡、最高分等保存到 LocalStorage
- 加载游戏状态：从 LocalStorage 加载之前的游戏状态
- 管理最高分：记录和更新最高分
- 清除数据：提供清除保存数据的功能
❓ 常见问题
如何获得高分？
优先制造特殊宝石，并合理组合使用。尽量触发级联消除和连击，获得分数加成。
提示功能用完了怎么办？
提示功能每关限制使用 3 次。用完后只能依靠自己的观察找到有效交换。这也是游戏的挑战所在！
洗牌功能会重置棋盘吗？
不会。洗牌功能只是重新排列棋盘上的宝石，不会改变分数、关卡进度或其他游戏状态。
游戏进度会保存吗？
是的，游戏会自动保存您的关卡进度和最高分。下次打开游戏时，会自动恢复到之前的关卡。
如何切换主题？
点击界面右上角的主题切换按钮即可在明亮和暗黑主题之间切换。
通关后会怎样？
通过全部 5 关后，会显示通关庆祝页面。您可以点击”🎮 重新开始”按钮，从第 1 关重新挑战。
可以在移动设备上玩吗？
可以！游戏采用响应式设计，完美支持各种移动设备。
👥 贡献指南
我们欢迎所有形式的贡献，包括但不限于：
- 报告问题和建议
- 提交功能请求
- 代码贡献和 Pull Request
- 文档改进
请通过 GitHub Issues 或 Pull Request 参与项目贡献。
📄 许可证
本项目采用 MIT 许可证。有关详细信息，请参阅 LICENSE 文件。