“小游戏”开发难?不妨先从 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

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

  • 发表于:
  • 原文链接:http://kuaibao.qq.com/s/20180125G051CF00?refer=cp_1026

扫码关注云+社区