利用Vue.js实现拼图游戏

之前写过一篇《基于Vue.js的表格分页组件》的文章，主要介绍了Vue组件的编写方法，有兴趣的可以访问这里进行阅读：https://segmentfault.com/a/11...

前言

为了进一步让大家了解Vue.js的神奇魅力，了解Vue.js的一种以数据为驱动的理念，本文主要利用Vue实现了一个数字拼图游戏，其原理并不是很复杂，效果图如下：

demo展示地址为：https://luozhihao.github.io/v...!/

有能力的可以玩玩，拼出来有赏哦~~

功能分析

当然玩归玩，作为一名Vue爱好者，我们理应深入游戏内部，一探代码的实现。接下来我们就先来分析一下要完成这样的一个游戏，主要需要实现哪些功能。下面我就直接将此实例的功能点罗列在下了：

随机生成1~15的数字格子，每一个数字都必须出现且仅出现一次
点击一个数字方块后，如其上下左右有一处为空，则两者交换位置
格子每移动一步，我们都需要校验其是否闯关成功
点击重置游戏按钮后需对拼图进行重新排序

以上便是本实例的主要功能点，可见游戏功能并不复杂，我们只需一个个攻破就OK了，接下来我就来展示一下各个功能点的Vue代码。

构建游戏面板

作为一款以数据驱动的JS框架，Vue的HTML模板很多时候都应该绑定数据的，比如此游戏的方块格子，我们这里肯定是不能写死的，代码如下：

这里我省略了css样式部分，大家可以先不用关心。以上代码我们将1~15的数字写死在了一个数组中，这显然不是随机排序的，那么我们就来实现随机排序的功能。

随机排序数字

这里我们首先在每个格子的li上添加了点击事件@click="moveFn($index)"，通过$index参数获取点击方块在数组中的位置
其次获取其上下左右的数字在数组中的index值依次为index - 4、index + 4、index - 1、index + 1
当我们找到上下左右有一处为空的时候我们将空的位置赋值上当前点击格子的数字，将当前点击的位置置为空

备注：我们为什么要使用$set方法，而不直接用等号赋值呢，这里包含了Vue响应式原理的知识点。

// 因为 JavaScript 的限制，Vue.js 不能检测到下面数组变化：

// 1.直接用索引设置元素，如 vm.items[0] = {}；
// 2.修改数据的长度，如 vm.items.length = 0。
// 为了解决问题 (1)，Vue.js 扩展了观察数组，为它添加了一个 $set() 方法：

// 与 `example1.items[0] = ...` 相同，但是能触发视图更新
example1.items.$set(0, { childMsg: 'Changed!'})

详见：http://cn.vuejs.org/guide/lis...问题

检测是否闯关成功

我们在moveFn方法里调用了passFn方法来进行检测，而passFn方法里又涉及了两个知识点：
（1）slice方法

通过slice方法我们截取数组的前15个元素生成一个新的数组，当然前提是数组随后一个元素为空

（2）every方法

通过every方法我们来循环截取后数组的每一个元素是否等于其index+1值，如果全部等于则返回true，只要有一个不等于则返回false

如果闯关成功那么isPass的值为true，就会alert "恭喜，闯关成功！"提示窗，如果没有则不提示。

重置游戏

重置游戏其实很简单，只需添加重置按钮并在其上调用render方法就行了：

这里我一并加上了css代码。

总结

其实本游戏的代码量不多，功能点也不是很复杂，不过通过Vue来写这样的游戏，有助于我们了解Vue以数据驱动的响应式原理，在简化代码量的同时也增加了代码的可读性。

本实例的所有源码我已经上传至我的github，地址为https://github.com/luozhihao/... 需要的童鞋可以自行下载运行。

本文地址：https://segmentfault.com/a/11...
博客园：http://www.cnblogs.com/luozhi...