基于Vue.js实现数字拼图游戏

发布时间：2020-12-17 03:05:16 所属栏目：百科来源：网络整理

导读：先来看看效果图：功能分析当然玩归玩，作为一名Vue爱好者，我们理应深入游戏内部，一探代码的实现。接下来我们就先来分析一下要完成这样的一个游戏，主要需要实现哪些功能。下面我就直接将此实例的功能点罗列在下了： 1.随机生成1~15的数字格子，每一个数

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

1.随机生成1~15的数字格子，每一个数字都必须出现且仅出现一次

2.点击一个数字方块后，如其上下左右有一处为空，则两者交换位置

3.格子每移动一步，我们都需要校验其是否闯关成功

4.点击重置游戏按钮后需对拼图进行重新排序

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

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

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

1.这里我们首先在每个格子的li上添加了点击事件@click="moveFn($index)"，通过$index参数获取点击方块在数组中的位置

2.其次获取其上下左右的数字在数组中的index值依次为index - 4、index + 4、index - 1、index + 1

3.当我们找到上下左右有一处为空的时候我们将空的位置赋值上当前点击格子的数字，将当前点击的位置置为空

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

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

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

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

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

以上就是本文的全部内容，其实本游戏的代码量不多，功能点也不是很复杂，不过通过Vue来写这样的游戏，有助于我们了解Vue以数据驱动的响应式原理，在简化代码量的同时也增加了代码的可读性。希望本文对大家学些Vue有所帮助。

（编辑：李大同）

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