微信小程序版2048小游戏
最近流行微信“跳一跳”小游戏,本站也有文章分享:php实现微信跳一跳小游戏,本文主要分享实现2048的算法以及注意的点,一起来学习吧!(源码地址见文章末尾)。
算法
生成4*4棋盘视图
随机生成2或4填充两个单元格
记录用户touch时的起始位置和结束位置,以此判断滑动方向
根据滑动方向移动单元格,并进行相同值合并
用户一次滑动完成后重复执行步骤2
判断游戏是否结束,并根据游戏结果产生不同提示
难点
确定滑动方向
用户滑动时相同格子合并,并移到滑动方向一侧
实现
视图实现
1、用wxml+wxss生成棋盘视图
2、用wx:for将数据渲染到每个单元格
逻辑实现
1、页面加载完毕随机用数字2或4填充两个单元格
2、判断用户滑动方向
使用touchStart事件函数获取起始位置touchStartX、touchStartY
使用touchMove事件函数获取终点位置touchEndX、touchEndY
var disX = this.touchStartX - this.touchEndX; var absdisX = Math.abs(disX); var disY = this.touchStartY - this.touchEndY; var absdisY = Math.abs(disY); // 确定移动方向 // 0:上, 1:右, 2:下, 3:左 var direction = absdisX > absdisY ? (disX <p>3、根据滑动方向(假设向右滑动)移动表格以及相同项合并</p><p>将2048的棋盘生成4*4的二维数组list,为空的空格用0表示</p><pre class="brush:php;toolbar:false">// 比如棋盘数据如下 var grid = [ [2, 2, 0, 0], [0, 0, 0, 0], [0, 8, 4, 0], [0, 0, 0, 0]];
根据滑动方向生成4*4二维数组
var list = [ [0, 0, 2, 2], // 注意是0022不是2200,因为像右滑动所以从右边push入数组 [0, 0, 0, 0], [0, 4, 8, 0], [0, 0, 0, 0]];
相应代码(代码中this.board.grid为上面的初始grid):
formList(dir) { // 根据传入的滑动方向生成list的四个数组 var list = [[], [], [], []]; for(var i = 0; i <p>将list的每一个小数组中的数字提到前面,0放到末尾</p><pre class="brush:php;toolbar:false">list2 = [ [2, 2, 0, 0], [0, 0, 0, 0], [4, 8, 0, 0], [0, 0, 0, 0]];
相应代码:
changeItem(item) { // 将 [0, 2, 0, 2] 改为 [2, 2, 0, 0] var cnt = 0; for(var i = 0; i <p>将相同值的单元格加起来,并将后面的一个单元格值变为0</p><pre class="brush:php;toolbar:false">list2 = [ [4, 0, 0, 0], [0, 0, 0, 0], [4, 8, 0, 0], [0, 0, 0, 0]];
相应代码:
combine(list) { // 滑动时相同的合并 for(var i = 0; i <p>将list2回退为list并渲染数据到棋盘视图</p><p>list = [<br> [0, 0, 0, 4],<br> [0, 0, 0, 0],<br> [0, 0, 8, 4],<br> [0, 0, 0, 0]<br>];<br></p><p>相应代码:</p><pre class="brush:php;toolbar:false">move(dir) { // 0:上, 1:右, 2:下, 3:左 var curList = this.formList(dir); var list = this.combine(curList); var result = [[],[],[],[]]; for(var i = 0; i <p>4、重复步骤1</p><p>5、判断游戏是否结束</p><p>判断标准:4*4单元格填满且任意一个单元格上下左右没有相同值的单元格</p><pre class="brush:php;toolbar:false">isOver() { // 游戏是否结束,结束条件:可用格子为空且所有格子上下左右值不等 for (var i = 0; i <p>6、根据游戏结果给出相应提示</p><p><img src="https://img.php.cn//upload/image/643/251/892/1516858360233019.jpg" title="1516858360233019.jpg" alt="3.jpg"></p><p>po一个源码地址:windlany/wechat-weapp-2048 有兴趣的可以尝试一下哦,希望能帮助到大家。</p><p>