最近流行微信小游戏,我也心血来潮写了一个微信小程序版2048,本篇文章主要分享实现2048的算法以及注意的点,一起来学习吧!(源码地址见文章末尾)
算法
1、生成4*4棋盘视图
2、随机生成2或4填充两个单元格
3、记录用户touch时的起始位置和结束位置,以此判断滑动方向
4、根据滑动方向移动单元格,并进行相同值合并
5、用户一次滑动完成后重复执行步骤2
6、判断游戏是否结束,并根据游戏结果产生不同提示
难点
1、确定滑动方向
2、用户滑动时相同格子合并,并移到滑动方向一侧
实现
视图实现
1、用wxml+wxss生成棋盘视图
2、用wx:for将数据渲染到每个单元格
逻辑实现
1、页面加载完毕随机用数字2或4填充两个单元格
2、判断用户滑动方向
-
使用touchStart事件函数获取起始位置touchStartX、touchStartY,touchMove获取终点位置touchEndX、touchEndY
1 var disX = this.touchStartX - this.touchEndX; 2 var absdisX = Math.abs(disX); 3 var disY = this.touchStartY - this.touchEndY; 4 var absdisY = Math.abs(disY); 5 <