首发于微信公众号“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 会收集动画数据,并以此与动画系统进行通信。