“小游戏”开发难？不妨先从 2048 入手试试看

作者：windlany

最近流行微信「跳一跳」小游戏，我也心血来潮写了一个微信小程序版 2048，本篇文章主要分享实现 2048 的算法以及注意的点，一起来学习吧！

算法

生成 4*4 棋盘视图

随机生成 2 或 4 填充两个单元格

记录用户 touch 时的起始位置和结束位置，以此判断滑动方向

根据滑动方向移动单元格，并进行相同值合并

用户一次滑动完成后重复执行步骤 2

判断游戏是否结束，并根据游戏结果产生不同提示

难点

确定滑动方向

用户滑动时，相同格子合并，并移到滑动方向一侧

视图实现

1. 用 WXML + WXSS 生成棋盘视图

2. 用wx:for将数据渲染到每个单元格

逻辑实现

1. 页面加载完毕随机用数字 2 或 4 填充两个单元格

2. 判断用户滑动方向

使用touchStart事件函数获取起始位置touchStartX、touchStartY

使用touchMove事件函数获取终点位置touchEndX、touchEndY

3. 根据滑动方向（假设向右滑动）移动表格以及相同项合并

将 2048 的棋盘生成 4*4 的二维数组 list，为空的空格用 0 表示

根据滑动方向生成 4*4 二维数组

将 list 的每一个小数组中的数字提到前面，0 放到末尾

相应代码：

将相同值的单元格加起来，并将后面的一个单元格值变为 0

相应代码：

将 list2 回退为 list 并渲染数据到棋盘视图

相应代码：

4. 重复步骤 1

5. 判断游戏是否结束

判断标准：4*4 单元格填满且任意一个单元格上下左右没有相同值的单元格

6. 根据游戏结果给出相应提示

原文地址：

https://juejin.im/post/5a6690dd518825732c53ace5

关注「知晓程序」微信公众号，回复「开发」，让你的小程序性能再上一层楼。