5.2 KiB

Raw Blame History

定制消消乐 - 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)

🎨 自定义主题

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

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

🔧 开发指南

添加新的消除元素

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

修改关卡生成规则

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

扩展游戏功能

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

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

📄 许可证

MIT License

🤝 贡献

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

📞 联系方式

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

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

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

5.2 KiB Raw Blame History Unescape Escape