一个使用 canvas 绘制，TypeScript 实现的消除游戏。消除的玩法设计以及部分资源来源于梦幻花园。
English | 简体中文
https://vermouth1995.github.io/MatchThreeGame/
- 🎀 美观的页面，丝滑流畅的游戏体验。
- 🌼 使用
TypeScript开发，提供完整的类型定义文件。 - 🏅 多种渲染方式支持能力。
- ⚙️ 使用
gulp打包编译。 - 🏆 深入每个细节的关卡定制能力。
- 🤳 支持移动端。
- 执行
npm i - 执行
npm run build - 在浏览器中打开
html文件(/dist/index.html)
- 执行
npm run format
concept -- 基本工具（工具概念类内容）
concept
├─ coordinate -- 坐标及对坐标的操作
├─ event -- 记录运动事件
├─ coordinate_adaptor -- 坐标系适配器
├─ coordinate_dynamic -- 可以动态计算的坐标系
├─ coordinate_value -- 普通坐标系
├─ coordinate -- 坐标系接口
└─ locus -- 记录移动状态及坐标轨迹
├─ linked_list -- 单链表
├─ listener -- 监听工具，管理监听事件
├─ once -- 管理一系列的callback函数调用
├─ style -- 样式类，比如颜色，字体等
└─ random_weight -- 带权随机存取
engine -- 游戏引擎（游戏核心元素及概念）
engine
├─ birth -- 消除元素的生成
├─ board -- 游戏面板
├─ cell -- 游戏单元格
├─ goal -- 游戏目标
├─ item -- 消除元素
├─ sacrifice -- 消除规则
├─ puzzle_keeper -- 持有真实渲染块的对象，提供获取puzzle功能
└─ score -- 游戏步数/分数管理
game -- 游戏逻辑（包括分值计算，关卡递进关系等）
game
├─ game -- 游戏逻辑实例
├─ level_creator -- 关卡生成器
├─ level_data -- 关卡数据接口
├─ level -- 关卡实现
└─ message -- 消息
level -- 关卡（关卡内容设置）
level
├─ 1 -- 关卡1
├─ 2 -- 关卡2
├─ 3 -- 关卡3
└─ ... -- 关卡...
main -- 项目入口
main
├─ resource -- 游戏资源
└─ index -- 入口
platform -- 渲染方式
platform
├─ canvas -- canvas渲染
└─ webgl -- webgl渲染
render -- 图像渲染
render
├─ atom -- 最小渲染单元
├─ puzzle -- 真实渲染的块
├─ render_adapter -- 渲染适配
├─ render_locus -- 渲染树的轨迹节点
├─ render_position -- 渲染树的节点
└─ render -- 渲染接口
- window onResize 时重新渲染
- 移动端的 onTouch 事件
- 关卡选择功能
- 样式优化
- 自动提示功能
- 炸弹出现权重可设置
- 小矮人关卡
MIT © Vermouth1995