微信小程序：拼图游戏

微信小程序：拼图游戏

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

游戏界面

初始化游戏：

游戏成功：

思路&功能：

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

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

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

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

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

代码：

项目中所用到的数据：

data: {    
, ],0);">   //初始化前    
    time:0           //秒数    
                  //定时器  
},复制代码

构建页面：index.wxml

<view class="container">
    <button"btn {{item == 9?'active':''}}"catchtap'onMoveTap'  data-item"{{item}}"data-index"{{index}}">{{item}}</button>
</view>复制代码

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

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

{{item == 9?'active'''}}复制代码

游戏初始化：

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

随机打乱数组:

return arrsort((){
}复制代码

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

给每个块添加点击事件onMoveTap:

 item item;
down);
{
    
right 
3& 
}复制代码

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

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

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

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

移动：

以向上移动举例

 temp ];
 temp;
num
success();
}复制代码

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

游戏成功：

      title'闯关成功'        that();
})
游戏成功，弹出交互反馈窗口，并初始化重新打乱数组


定时器：

      tsetInterval(){
({ 
       1000)
}复制代码

      time0
timeCount();
  timeStop(){
fail();
}复制代码

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

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

试玩:

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

待开发：

选择难度

自传图片

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!