1.

源代码：https://github.com/lcp1551/lcpISfat

游戏界面2.

初始化游戏：

3.

游戏成功：

思路功能：4.

1.初始化，将数字1~8存放在数组中，随机打乱后拼接一个9(空白格),修改空白格的样式

5.

2.点击数字，判断空白格对于其所在位置的方向，进行相应的上下左右移动

6.

3.上下左右移动，及把移动的两个数字互换在数组中的位置

7.

4.判断数组中元素是否是[1,2,3,4,5,6,7,8,9]，是则游戏成功，

8.

5.计时，利用定时器，结束，清除定时器

代码：项目中所用到的数据：data:{num:['★','★','★','★','★','★','★','★','★'],//初始化前hidden:true,//隐藏空白格中的数字time:0,//秒数t:''//定时器},复制代码9.

构建页面：index.wxml

viewclass"container"viewclass"row"wx:for"{{num}}"wx:for-item"item"wx:for-index"index"buttonclass"btn{{item9?'active':''}}"catchtap'onMoveTap'data-item"{{item}}"data-index"{{index}}"{{item}}/button/view/view复制代码10.

需要传两个数据过去，一个是被点击块的下标index和块中的数字item

11.

动态为空白格[9]添加样式active

{{item9?'active':''}}复制代码游戏初始化：init:function(){this.setData({num:this.sortArr([1,2,3,4,5,6,7,8]).concat([9])})},复制代码12.

初始化的时候，这里用了sortArr(arr)打乱数组，并拼接个空白格[9]，这样让空白格初始化的时候永远处于最后一位。

随机打乱数组:sortArr:function(arr){returnarr.sort(function(){returnMath.random()-0.5})}复制代码13.

这里用了最简单的打乱方法，缺点就是打乱不完全

给每个块添加点击事件onMoveTap:onMoveTap:function(e){varindexe.currentTarget.dataset.index;variteme.currentTarget.dataset.item;if(this.data.num[index+3]9){this.down(e);}if(this.data.num[index-3]9){this.up(e);}if(this.data.num[index+1]9index!2index!5){this.right(e);}if(this.data.num[index-1]9index!3index!6){this.left(e);}}复制代码14.

如果空白格的下标比所点击的块的下表大3，则表示空白格在所点击块的下方，那么点击后向下移动；

15.

如果空白格的下标比所点击的块的下表小3，则表示空白格在所点击块的上方，那么点击后向上移动；

16.

如果空白格的下标比所点击的块的下表大1，则表示空白格在所点击块的右方，那么点击后向右移动，需考虑点击快是否在容器右边缘；

17.

如果空白格的下标比所点击的块的下表小1，则表示空白格在所点击块的左方，那么点击后向左移动，需考虑点击快是否在容器左边缘；

移动：18.

以向上移动举例

up:function(e){varindexe.currentTarget.dataset.index;//当前数字下标vartempthis.data.num[index];this.data.num[index]this.data.num[index-3]this.data.num[index-3]temp;this.setData({num:this.data.num})if(this.data.num.toString()[1,2,3,4,5,6,7,8,9].toString()){this.success();}}复制代码19.

移动后，将所点击块与空白格互换在数组中的位置，并判断目前的数组是否满足游戏成功的条件，判断数组相等，我这里把数组转化成字符串做的比较

游戏成功：success:function(){varthatthis;wx.showToast({title:'闯关成功',icon:'success',success:function(){that.init();}})}复制代码20.

游戏成功，弹出交互反馈窗口，并初始化重新打乱数组

定时器：timeCount:function(){varthatthis;vartimerthat.data.time;that.setData({t:setInterval(function(){timer++;that.setData({time:timer})},1000)})}复制代码开始结束游戏：timeBegin:function(){clearInterval(this.data.t);this.setData({time:0})this.timeCount();this.init();},timeStop:function(){clearInterval(this.data.t);if(this.data.num.toString()![1,2,3,4,5,6,7,8,9].toString()){this.fail();}}复制代码21.

给开始按钮绑定timeBegin事件，初始化游戏

22.

给结束按钮绑定timeStop事件，判断是否游戏成功

23.

试玩:

24.

源代码：github.com/lcp1551/lcp…

待开发：25.

选择难度

26.

自传图片