html5拼图微信小游戏,微信小程序：拼图游戏

微信小程序：拼图游戏

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

游戏界面

初始化游戏：

游戏成功：

思路&功能：

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

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

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

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

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

代码：

项目中所用到的数据：

data: {

num: ['★', '★', '★', '★', '★', '★', '★', '★', '★'], //初始化前

hidden: true, //隐藏空白格中的数字

time:0, //秒数

t:'' //定时器

}

构建页面：index.wxml

{{item}}

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

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

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

游戏初始化：

init:function(){

this.setData({

num:this.sortArr([1,2,3,4,5,6,7,8]).concat([9])

})

}

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

随机打乱数组:

sortArr: function (arr) {

return arr.sort(function () {

return Math.random() - 0.5

})

}

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

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

onMoveTap: function (e) {

var index = e.currentTarget.dataset.index;

var item = e.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] == 9 && index != 2 && index != 5) {

this.right(e);

}

if (this.data.num[index - 1] == 9 && index != 3 & index != 6) {

this.left(e);

}

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

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

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

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

移动：

以向上移动举例

up: function (e) {

var index = e.currentTarget.dataset.index; //当前数字下标

var temp = this.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();

}

}

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

游戏成功：

success: function () {

var that = this;

wx.showToast({

title: '闯关成功',

icon: 'success',

success: function () {

that.init();

}

})

}

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

定时器：

timeCount:function(){

var that = this;

var timer = that.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();

}

}

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

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