定制消消乐 - Custom Match 3 Game

一个支持自定义消除元素的 Web 移动端三消游戏，基于 Phaser 3 开发。

🎮 游戏特色

• 自定义消除元素：通过配置文件轻松定制消除方块的外观、属性和特效
• 智能关卡生成：自动生成可通关的关卡，确保游戏的可玩性
• 移动端优化：专为移动设备优化的触摸操作和界面适配
• 本地数据存储：支持游戏进度、设置和统计数据的本地保存
• 流畅动画：丰富的消除特效和流畅的交互动画
• 主题切换：支持一键切换不同的游戏主题

🚀 快速开始

环境要求

• Node.js (版本 14 或更高)
• 现代浏览器 (Chrome, Firefox, Safari, Edge)

安装

# 克隆项目
git clone <repository-url>
cd custom-match3-game

# 安装依赖
npm install

运行

# 开发模式
npm run dev

# 构建项目
npm run build

# 预览构建结果
npm run preview

# 本地服务器运行（构建后）
npm run serve

开发模式下，游戏将在 http://localhost:3000 启动。

📁 项目结构

custom-match3-game/
├── public/                    # 静态资源目录
├── src/                       # 源代码目录
│   ├── scenes/               # 游戏场景
│   │   ├── PreloadScene.js   # 预加载场景
│   │   ├── MenuScene.js      # 主菜单场景
│   │   └── GameScene.js      # 游戏主场景
│   ├── game/                 # 游戏核心逻辑
│   │   ├── GameBoard.js      # 游戏棋盘类
│   │   └── LevelGenerator.js # 关卡生成器
│   ├── utils/                # 工具类
│   │   └── StorageManager.js # 本地存储管理
│   └── main.js               # 游戏入口文件
├── config/                   # 配置文件
│   ├── elements.json         # 消除元素配置
│   └── levelgen.json         # 关卡生成配置
├── assets/                   # 游戏资源
│   └── elements/             # 消除元素图片
├── index.html                # 主页面
├── vite.config.js            # Vite 配置
├── package.json              # 项目依赖配置
└── README.md                 # 项目说明

⚙️ 自定义配置

消除元素配置 (config/elements.json)

{
  "elements": [
    {
      "id": "red",
      "name": "红色方块",
      "type": "basic",
      "imagePath": "assets/elements/red.png",
      "color": "#ff4444",
      "score": 10,
      "animations": {
        "idle": "red_idle",
        "match": "red_match",
        "destroy": "red_destroy"
      },
      "sounds": {
        "match": "match.mp3",
        "destroy": "destroy.mp3"
      }
    }
  ]
}

关卡生成配置 (config/levelgen.json)

{
  "levelGeneration": {
    "boardSize": {
      "width": 8,
      "height": 8
    },
    "difficulties": [
      {
        "level": 1,
        "name": "简单",
        "elementTypes": 4,
        "maxMoves": 30,
        "targetScore": 1000
      }
    ]
  }
}

🎯 核心功能

三消游戏逻辑

• 匹配检测：自动检测横向和纵向的三个或以上相同元素
• 连锁反应：消除后自动触发下落和新的匹配检测
• 交换验证：只允许能产生匹配的有效交换
• 重力系统：消除后元素自动下落填补空缺

关卡生成算法

• 可解性保证：使用回溯算法确保每个关卡都有解
• 难度递进：根据关卡数自动调整难度参数
• 目标多样化：支持分数、收集、清除障碍等多种目标类型

移动端适配

• 触摸优化：支持点击选择和滑动交换操作
• 响应式设计：自动适配不同屏幕尺寸
• 性能优化：针对移动设备的内存和性能优化

🛠️ 技术栈

• 游戏引擎：Phaser 3.70.0
• 构建工具：Vite 4.4.0
• 开发语言：JavaScript (ES6+)
• 样式预处理：原生 CSS
• 部署平台：静态网站托管

📱 浏览器支持

• Chrome 60+
• Firefox 55+
• Safari 11+
• Edge 79+
• 移动端浏览器 (iOS Safari, Android Chrome)

🎨 自定义主题

游戏支持主题切换功能，你可以通过以下方式自定义主题：

1. 在 assets/elements/ 目录下添加新的主题图片
2. 修改 config/elements.json 中的图片路径
3. 重新构建项目

🔧 开发指南

添加新的消除元素

1. 在 assets/elements/ 目录下添加新的图片文件
2. 在 config/elements.json 中添加新的元素配置
3. 重启开发服务器

修改关卡生成规则

1. 编辑 config/levelgen.json 文件
2. 调整难度参数、棋盘大小、目标类型等
3. 重启开发服务器查看效果

扩展游戏功能

游戏采用模块化设计，你可以轻松扩展以下功能：

• 新的特殊道具和效果
• 更多的游戏模式
• 社交功能（排行榜、分享等）
• 音效和背景音乐

📄 许可证

MIT License

🤝 贡献

欢迎提交 Issue 和 Pull Request 来改进这个项目！

📞 联系方式

如有问题或建议，请通过以下方式联系：

• 项目 Issues: [GitHub Issues]
• 邮箱: [your-email@example.com]

---

享受定制化的三消乐趣！ 🎉