如何打造一款三消类游戏

首发于微信公众号“Shopee技术团队”。

摘要

样式繁多的“消消乐”游戏想必大家都不陌生，通关秘籍就是将三个或更多相同的元素配对消除，通常我们称这类游戏为“三消”游戏。Shopee 购物平台内嵌的三消游戏 Shopee Candy 也受到了不少用户的喜爱，这篇文章将带你从项目起源、游戏架构和项目工具集等方面了解如何打造一款这样的三消小游戏。

1. 项目起源

1.1 游戏简介

Shopee Candy 是一款面向多地区市场的三消类休闲 H5 游戏，用户可以在游戏中获得 Shopee Coins、商家购物券等优惠奖励，既可以增强用户粘性，激励用户消费，也可以为商家引流。同时，分享领奖、好友排行榜等机制增强了游戏的社交性，起到了为平台拉新的作用。此外，H5 游戏简单、轻量、高适配的特性与 Shopee 用户的使用习惯非常契合，可以即点即玩，参与门槛低的同时兼顾了趣味性。

2020 年 6 月，Shopee Candy 在 Shopee 全市场上线，推出 iOS 和安卓正式版本。自上线以来，Shopee Candy 在日常和大促活动中表现耀眼，用户的活跃度和在线时长屡创新高。

Shopee Candy 在风格上使用了缤纷可爱的糖果元素主题；玩法上主要是在限制操作步数的同时，设定收集元素数量作为通关条件。关卡内，用户通过交换相邻糖果，使三个或以上相同颜色的糖果连接起来，便可触发消除；根据消除糖果的数量和形状还可以生成有特殊消除能力的道具元素；模式上有关卡模式及无尽模式等。

1.2 项目简介

随着项目不断发展，Shopee Candy 的功能迭代可以被清晰地划分为四类。首先是各类业务功能模块（道具商城、任务系统和兑换商店等）；其次是负责消除逻辑算法，计算分数、关卡进度的算法库（Algorithm SDK）和负责消除效果的动画系统；最后是服务游戏的各种工具，包括解放设计关卡生产力的 Map Editor 关卡编辑器，可以量化关卡难度的 Score Runner 跑分器以及能进行操作复盘的 Replayer 回放工具等。

2. 游戏架构

2.1 算法库（Algorithm SDK）

作为一款元素消除种类丰富的三消游戏，Shopee Candy 的算法部分非常重要和复杂。早在项目之初，算法和动画是耦合在一起的。随着产品的上线和消除种类的增加，我们慢慢发现项目维护成本越来越高；同时算法本身是独立的，跟动画和业务没有依赖，所以将算法部分抽离了出来。

2.1.1 Algorithm SDK 实现

Algorithm SDK 的实现主要有三大部分：Map、Operator 以及 Logic Processing。

地图（Map）

Map 管理了游戏关卡中的地图对象和元素对象。我们根据每个元素的特性对元素进行了上、中、下三层的管理，这种元素分层的架构模式能够满足不同特效新元素的加入。每一层元素相互制约、相互影响，在消除流程中相辅相成，完成游戏中华丽的消除效果。

export default class Grid {
   
  public middle: CellModel;
  public upper: Upper;
  public bottom: Bottom;

  constructor(info: ICellInfo) {
   
    const {
    type } = info;

    this.upper = new Upper(/* ... */);
    this.middle = new CellModel(/* ... */);
    this.bottom = new Bottom(/* ... */);
  }
}

操作（Operator）

Operator 对算法的所有可行操作进行管理，是整个 Algorithm SDK 与外部通信的桥梁，负责接收外部的交换、双击等操作信号，进行相应算法的调用。在 Shopee Candy 主流程的调用中，Operator 会收集动画数据，并以此与动画系统进行通信。