基于Vue.js的数字拼图

我们先来看看效果图：

泛函分析

当然，玩就是玩。作为一个Vue爱好者，我们应该深入游戏，探索代码的实现。接下来，我们来分析一下完成这样一个游戏所需的主要功能。我将在下面直接列出这个例子的功能点：

1.随机生成1~15的数字网格，每个数字必须只出现一次

2.点击一个数字框后，如果它的上下左右两边有一个是空的，两边就会交换位置

3.每次网格移动，我们都需要检查它是否成功

4.点击重置游戏按钮后，你需要重新排列拼图

这些是这个例子的主要功能点。可以看出游戏功能并不复杂，我们只需要逐个击破，然后我会展示每个功能点的Vue代码。

构建游戏面板

作为一个数据驱动的JS框架，Vue的HTML模板在很多情况下应该与数据绑定。相比这样游戏的方块格子，我们这里写不死。代码如下：

模板div class='box' ul class='拼图-包装' li :class='{ '拼图' : true，'拼图-空' :puzzle } ' v-for=' puzzle in puzzle ' v-text=' puzzle '/Li/ul/div/templatescript export default { data(){ return { puzzle 3360[1，2，3，4，5，6，7，8，9，10，11，12，13，14，15]}}}/script我这里省略了css样式，所以大家不用先关心。在上面的代码中，我们把1到15的数字写在一个数组中，这显然不是随机排序的，所以我们将实现随机排序的功能。

对数字进行随机排序

模板div class='box' ul class='拼图-包装' li :class='{ '拼图' : true，'拼图-空' :拼图}“v-for=”拼图中的拼图“v-text=”拼图/Li/ul/div/templatescript export default { data(){ return { puzzle s :[]}，methods : {//reset render render(){ let puzzle arr=[]，i=1 //为(I；i 16I){ puzzarr . push(I)}//随机置乱数组puzzlearr=puzzlearr。sort(()={返回数学。random()-0.5 })；//页面显示了这一点。谜题=谜题arrthis。谜题。push(')}，}，ready () {this。render ()}}。我们使用for循环生成了一个1~15的有序数组，然后使用本机JS的排序方法对这些数字进行随机加扰。这里还有一个知识点，就是数学。

要使用sort()方法进行自定义排序，我们需要提供一个比较函数，然后返回一个数字来解释这两个值的相对顺序。返回值如下：

1.返回小于0的值，表示a小于b。

2.返回0，表示A等于b。

3.返回一个大于0的值，表示A大于b

本文利用Math.random()生成一个介于0和1之间的随机数，然后减去0.5，这样一半概率会返回一个小于0的值，一半概率会返回一个大于0的值，从而保证生成数组的随机性，实现动态随机生成数字网格的功能。

应该注意的是，我们还在数组的末尾插入了一个空字符串，以生成一个唯一的空白网格。

交换盒位置

模板div class='box' ul class='拼图-包装' li :class='{ '拼图' : true，'拼图-空' :拼图}“v-for=”拼图中的拼图“v-text=”拼图“@ click=”moveFn($ index)”/Li/ul/div/templatescript export default { data(){ return { puzzle :[]}，methods : {//reset rendering(){ let puzzle arr=[]，i=1 //为(I；i 16I){ puzzarr . push(I)}//随机置乱数组puzzlearr=puzzlearr。sort(()={返回数学。random()-0.5 })；//页面显示了这一点。谜题=谜题arr这个。谜题。push(')}，//点击框moveFn (index) {//获取点击位置及其值，让curNum=this .拼图[index]。leftNum=this .拼图[index - 1]，rightNum=this .拼图[index 1]，topNum=this .拼图[index - 4]，Bottomnum=this。困惑[index 4]//和一个空的位置交换值if (leftnum==='') {this。谜题。$ set (index-1，curnum)这个。谜题。$ set(index ' ')} else if(rightNum===' '){ this .拼图. $set(index 1，curNum) this .拼图. $ set(index ' ')} else if(topNum===' '){ this .拼图. $set(index - 4，curNum) this .拼图. $ set(index ' ')} } else if(bottom num====' '){ this .拼图. $set(index 4，curNum) this .拼图. $ set(index ' ')} } }，Ready () {this。render ()}}/script1。这里，我们首先在每个网格的li中添加一个click事件@click='moveFn($index ')，并通过$index参数获取click框在数组中的位置

其次，数组中上、下、左、右数字的索引值依次为索引-4、索引4、索引-1、索引1

3.当我们发现上、下、左、右都有一个空的位置时，我们将当前被点击的网格的编号分配给空的位置，并将当前被点击的位置设置为空

注意：为什么我们使用$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，{childmsg3360 '已更改！})检查是否成功

模板div class='box' ul class='拼图-包装li :class='{ '拼图' :真'拼图-空' :拼图}"v-for="拼图中的拼图" v-text="拼图" @ click=" moveFn($ index)"/Li/ul/div/template script导出默认值{ data(){ return {拼图3360[]}，methods: { //重置渲染render(){ let puzzlarr=[]，i=1 //生成包含1 ~ 15数字的数组对于；i 16I){ puzzlarr。push(I)}//随机打乱数组puzzarr=puzzarr。sort(()={返回数学。random()-0.5 })；//页面显示这个。拼图=puzzleArr。拼图。push(')}，//点击方块moveFn(索引){ //获取点击位置及其上下左右的值让curNum=这个。拼图[index]，leftNum=这个。拼图[index - 1]，rightNum=这个。拼图[索引1]，topNum=this。拼图[index - 4]，bottomNum=这个。拼图[索引4] //和为空的位置交换数值if(left num==' '){ this。拼图。$set(index - 1，curNum)这个。拼图。$ set(index ' ')} else if(right num===' '){ this。拼图。$set(index 1，curNum)这个。拼图。$ set(index ' ')} else if(TopNum===' '){ this。拼图。$set(index - 4，curNum)这个。拼图。$ set(index，')} else if(bottom num==' '){ this。拼图。$set(index 4，curNum)这个。拼图。$ set(index ' ')}此。passfn()}，//校验是否过关passFn(){ if(this。百叶窗[15]===' '){ const new blinds=this。百叶窗。slice(0，15)const isPass=新盲注。每((e，i)=e===i 1) if (isPass) { alert('恭喜，闯关成功!')} } } }，ready () { this.render() }}/script我们在moveFn方法里调用了密码方法来进行检测，而密码方法里又涉及了两个知识点：

(1)切片方法

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

(2)每方法

通过每一方法我们来循环截取后数组的每一个元素是否等于其索引一值，如果全部等于则返回没错，只要有一个不等于则返回错误的

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

重置游戏

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

模板div class='box' ul class='拼图-包装li :class='{ '拼图' :真'拼图-空' :拼图}“v-for=”拼图中的拼图v-text='拼图@ click=' moveFn($ index)'/Li/ul button class=' BTN BTN-警告BTN-阻止BTN-重置' @ click=' render '重置游戏/button/div/templatescript导出默认值{ data(){ return {拼图s :[]} }，methods: { //重置渲染render(){ let puzzlarr=[]，i=1 //生成包含1 ~ 15数字的数组对于；i 16I){ puzzlarr。push(I)}//随机打乱数组puzzarr=puzzarr。sort(()={返回数学。random()-0.5 })；//页面显示这个。拼图=puzzleArr。拼图。push(')}，//点击方块moveFn(索引){ //获取点击位置及其上下左右的值让curNum=这个。拼图[index]，leftNum=这个。拼图[index - 1]，rightNum=这个。拼图[索引1]，topNum=this。拼图[index - 4]，bottomNum=这个。拼图[索引4] //和为空的位置交换数值if(left num==' '){ this。拼图。$set(index - 1，curNum)这个。拼图。$ set(index ' ')} else if(right num===' '){ this。拼图。$set(index 1，curNum)这个。拼图。$ set(index ' ')} else if(TopNum===' '){ this。拼图。$set(index - 4，curNum)这个。拼图。$ set(index，')} else if(bottom num==' '){ this。拼图。$set(index 4，curNum)这个。拼图。$ set(index ' ')}此。passfn()}，//校验是否过关passFn(){ if(this。百叶窗[15]===' '){ const new blinds=this。百叶窗。slice(0，15)const isPass=新盲注。每((e，i)=e===i 1) if (isPass) { alert('恭喜，闯关成功!')} } }，ready(){ this。render()} }/script style @ import URL(' ./资产/CSS/bootstrap。量滴CSS ')；正文{ font-family: Arial，'微软雅黑；}.盒子{宽度： 400像素： 50像素自动0;}.拼图包装{宽度： 400像素高度： 400像素；边距-底部： 40pxpadd : 0；背景# ccclist-style:无；}.拼图{ float:左侧；宽度： 100像素；高度： 100像素；font-size : 20px背景技术# f90文本对齐：中心；线高： 100像素；border: 1px固体# cccbox-shadow : 1px 1px 4px；文字-阴影： 1px 1px 1px # B9B4B 4；光标：指针；}.拼图-空{ background : # cccbox-shadow :插图2px 2px 18px}。BTN-复位{盒影：插图2px 2px 18px}/样式这里我一并加上了钢性铸铁代码。

总结

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