212 lines
5.2 KiB
Markdown
212 lines
5.2 KiB
Markdown
# 定制消消乐 - 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]
|
||
|
||
---
|
||
|
||
**享受定制化的三消乐趣！** 🎉 |