# 定制消消乐 - Custom Match 3 Game

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

## 🎮 游戏特色

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

## 🚀 快速开始

### 环境要求

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

### 安装

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

# 安装依赖
npm install
```

### 运行

```bash
# 开发模式
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`)

```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`)

```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]

---

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