微信小程序之拼图游戏实战教程

微信小程序：拼图游戏

游戏界面

初始化游戏：

游戏成功：

思路&功能：

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

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

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

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

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

代码：

项目中所用到的数据：

1. data: {
2. num: ['★', '★', '★', '★', '★', '★', '★', '★', '★'], //初始化前
3. hidden: true, //隐藏空白格中的数字
4. time:0, //秒数
5. t:'' //定时器
6. },复制代码

构建页面：index.wxml

3. {{item}}
5. 复制代码

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

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

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

游戏初始化：

1. init:function(){
2. this.setData({
3. num:this.sortArr([1,2,3,4,5,6,7,8]).concat([9])
4. })
5. },复制代码

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

随机打乱数组:

1. sortArr: function (arr) {
2. return arr.sort(function () {
3. return Math.random() - 0.5
4. })
5. }复制代码

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

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

1. onMoveTap: function (e) {
2. var index = e.currentTarget.dataset.index;
3. var item = e.currentTarget.dataset.item;
4. if (this.data.num[index + 3] == 9) {
5. this.down(e);
6. }
7. if (this.data.num[index - 3] == 9) {
8. this.up(e);
9. }
10. if (this.data.num[index + 1] == 9 && index != 2 && index != 5) {
11. this.right(e);
12. }
13. if (this.data.num[index - 1] == 9 && index != 3 & index != 6) {
14. this.left(e);
15. } }复制代码

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

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

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

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

移动：

以向上移动举例

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

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

游戏成功：

1. success: function () {
2. var that = this;
3. wx.showToast({
4. title: '闯关成功',
5. icon: 'success',
6. success: function () {
7. that.init();
8. }
9. })
10. }复制代码

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

定时器：

1. timeCount:function(){
2. var that = this;
3. var timer = that.data.time;
4. that.setData({
5. t:setInterval(function(){
6. timer++;
7. that.setData({
8. time:timer
9. })
10. },1000)
11. })
12. }复制代码

开始结束游戏：

1. timeBegin:function(){
2. clearInterval(this.data.t);
3. this.setData({
4. time:0
5. })
6. this.timeCount();
7. this.init();
8. },
9. timeStop:function(){
10. clearInterval(this.data.t);
11. if (this.data.num.toString() != [1, 2, 3, 4, 5, 6, 7, 8, 9].toString()) {
12. this.fail();
13. }
14. }复制代码

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

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

试玩:

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

待开发：

选择难度

自传图片