一起学Vue自定义组件之拼图小游戏

通过学习Vue自定义组件，可以开发一些小功能，自娱自乐，巩固学习的基础知识，本文以一个简单的拼图小游戏的例子，简述Vue自定义组件的开发，调用等基本流程，仅供学习分享使用，如有不足之处，还请指正。

涉及知识点

关于Vue组件的基础知识，前篇已有介绍，本例涉及知识点如下：

拼图游戏，只有相邻的元素才可以交换位置，那如何判断两个元素相邻，方法如下：
- 左右相邻：y轴坐标相同，x轴相减的绝对值等于一个元素的宽度。
- 上下相邻：x轴坐标相同，y轴相减的绝对值等于一个元素的高度。
如何判断拼图中的可以与之交换位置的空白，方法如下：
- 通过ref引用属性，将空白属性，定义为empty,其他定义为block，以便区分。
如何将一张图放到每一个元素上，并只显示一块内容，方法如下：
- 将背景图的位置和元素的坐标起始位置关联起来，即将图片的向左上方平移即可。
元素之间的切换平滑过渡。在本例中，通过css样式设置，所有元素的移动都在0.3s内完成，达到平滑过渡的效果。

示例效果图

本例中拼图游戏一共分5关，分别是3*3，4*4等，难度逐级增加，所用图片的均是500px*500px大小，如下图所示：

一起学Vue自定义组件之拼图小游戏

当拼图完成时，询问是否进行下一关，如下所示：

一起学Vue自定义组件之拼图小游戏

下一关，效果如下所示：

一起学Vue自定义组件之拼图小游戏

其他效果图类似，只是分的行和列递增，拼图难度增加，但是处理逻辑都是相同的。

核心源码

关于Puzzle.vue源码，如下所示：

模板部分（template），主要是元素的布局，本例采用v-for动态加载，如下所示：

 1 <template>
 2   <div class="puzzle" :style="{width:width+'px',height:height+'px'}">
 3     <div
 4       v-for="(item,index) in blockPoints"
 5       :key="item.id"
 6       :style="{width:blockWidth+'px',
 7         height:blockHeight+'px',
 8         left:item.x+'px',top:item.y+'px',
 9         backgroundImage:`url(${img})`,
10         backgroundPosition:`-${correctPoints[index].x}px -${correctPoints[index].y}px`,
11         opacity: index===blockPoints.length-1 && 0 }"
12       v-on:click="handleClick"
13       class="puzzle__block"
14       :ref="index===blockPoints.length-1?'empty':'block'"
15       :data-correctX="correctPoints[index].x"
16       :data-correctY="correctPoints[index].y"
17     ></div>
18   </div>
19 </template>

View Code