怎么用vue编写一个拼图小游戏？

用vue编写一个拼图小游戏

今天带大家用Vue完成一个拼图游戏的demo

最终成果

准备工作

创建Vue项目，把需要的图片放在public目录下（图片最好是正方形的），父组件APP子组件sumImg，父组件引入子组件

1.大致结构布局

父组件只需引入对应子组件，再添加上想修改的属性，如果过多可以考虑用v-bind来进行包装，这样布局会更清晰一点。
子组件需要根据关卡难度进行不一样的选择，所以这里很多属性是需要变化的，即通过父组件来传输的。
还要注意的一点就是最后一块拼图是空白的，我们可以判断索引来给它的透明值设置为0，
其实每个小碎片的定位和他们的背景图片定位是相同原理的，但是因为要乱序，所以需要把小碎片定位的数组单独拿过来生成一个新数组，进行乱序后再把值输出给背景图片定位。同时外面也要记录到背景图片定位的值，(data-createx data-createy)，这样在进行移动时能判断是否移动到了该移动的位置，
ps（始终记住背景图片定位和成功复位后的定位是有密切联系的，它们是全部相等的才会复位成功）
动画效果给每个小碎片加上移动过渡，而最后一个空白碎片则是拼图成功后再慢慢显示出来
ref则是给每个小碎片选择的依据，有图案的一类，空白的一类。
加上一个小按钮可以进行跳关
加上展示原来的图片可以更好观察

2.逻辑原理分析

boxStyle方法用来计算拼图父容器的大小
sonNum方法对各个小碎片进行行列均匀排布，返回一个小碎片定位数组
sumNum方法对有图案小碎片乱序后再把空白图案加上，返回一个图案碎片乱序的数组，
具体步骤看函数内操作

给点击事件做处理
先定义各个变量，判断能进行位移的条件：同一行且定位left的差值的绝对值是一个小碎片的宽度，同理列也是一样的道理。再加上一个控制阀，如果未成功则可以移动，成功则不可以进行位移了。
ps:这里（下面也是）需要对值进行去除“px”，去除小数点取整，取绝对值操作，不然比对无法成功。

判断成功的条件：用index记录多少个小碎片正确复位了，成功复位条件则是当前位移的坐标是否和乱序后记录下的背景图片定位坐标值一致，若都一致，即index === 图案数组的长度

判断成功后的操作：
1.先把小碎片的边框都去除
2.把空白小碎片的透明值还原成1
3.判断是否是最后一关，是则给用户选择，否则关闭控制阀，防止点击，是则开启控制阀，并且重开
4.不是最后一关提示是否进入下一关，否则关闭控制阀，是则跳转下一关
ps：这里判断是否最后一关需要让父组件传递一个参数，改变flag的值，往往是最后一个对象内加入，
（实在不理解可以看最后父组件的传值），然后就能判断了。

跳转方法：给按钮添加 和 成功后自动跳转添加
向父容器传值告诉需要换下一关（看下面）

父容器接受和传值
1.用level控制采用数组那个索引
2.给数组最后一项加入特有属性gameNum告诉子组件是最后一关了
3.接受到子组件要换下一关的信息，执行Handel方法，如果不是最后一关则level自增，如果是最后一关，判断是通过点击跳转还是自行完成拼图过关的，若是后者则直接跳转，因为子组件里已经有相关提示信息，这里只需要重开，若是前者，则根据用户选择进行对应判断。

传值和样式

简单看看吧不做解释了。

End

大家多多评论留言，想要自己练习需要源码可以私信滴滴。
有问题或者bug也欢迎各位大佬提出，或者优化。

本文地址：https://blog.csdn.net/kzj0916/article/details/107889623