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

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

涉及知识点

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

• 拼图游戏，只有相邻的元素才可以交换位置，那如何判断两个元素相邻，方法如下：

• 左右相邻：y轴坐标相同，x轴相减的绝对值等于一个元素的宽度。

• 上下相邻：x轴坐标相同，y轴相减的绝对值等于一个元素的高度。

• 如何判断拼图中的可以与之交换位置的空白，方法如下：

• 通过ref引用属性，将空白属性，定义为empty,其他定义为block，以便区分。

• 如何将一张图放到每一个元素上，并只显示一块内容，方法如下：

• 将背景图的位置和元素的坐标起始位置关联起来，即将图片的向左上方平移即可。

• 元素之间的切换平滑过渡。在本例中，通过css样式设置，所有元素的移动都在0.3s内完成，达到平滑过渡的效果。

示例效果图

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

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

下一关，效果如下所示：

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

核心源码

关于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

脚本部分（Script），主要用于逻辑的校验和判断，如下所示：

  1 <script>  2 export default {  3   props: {  4     img: {  5       // 图片路径  6       type: String,  7       required: true,  8     },  9     width: { 10       // 图片总宽度 11       type: Number, 12       default: 500, 13     }, 14     height: { 15       // 图片总高度 16       type: Number, 17       default: 500, 18     }, 19     row: { 20       // 行数 21       type: Number, 22       default: 3, 23     }, 24     col: { 25       // 列数 26       type: Number, 27       default: 3, 28     }, 29   }, 30   data() { 31     return { 32       status: { 33         type: String, 34         default: "进行中......", 35       }, 36     }; 37   }, 38   methods: { 39     handleClick(e) { 40       const blockDom = e.target; 41       const empthDom = this.$refs.empty[0]; 42       const { left, top } = blockDom.style; 43       if (!this.isAdjacent(blockDom, empthDom)) { 44         return; 45       } 46       //交换元素 47       blockDom.style.left = empthDom.style.left; 48       blockDom.style.top = empthDom.style.top; 49       empthDom.style.left = left; 50       empthDom.style.top = top; 51       const winFlag = this.winCheck(); 52       if (winFlag) { 53         //   console.log('success'); 54         this.winGame(empthDom); 55       } 56     }, 57     isAdjacent(blockDom, empthDom) { 58       // 判断是否相邻 59       const { left: blockLeft, top: blockTop, width, height } = blockDom.style; 60       const { left: emptyLeft, top: emptyTop } = empthDom.style; 61       const xDis = Math.floor( 62         Math.abs(parseFloat(blockLeft) - parseFloat(emptyLeft)) 63       ); 64       const yDis = Math.floor( 65         Math.abs(parseFloat(blockTop) - parseFloat(emptyTop)) 66       ); 67       const flag = 68         (blockLeft === emptyLeft && yDis === parseInt(height)) || 69         (blockTop === emptyTop && xDis === parseInt(width)); 70       console.log(flag); 71       return flag; 72     }, 73     winCheck() { 74       // 判断是否完成 75       const blockDomArr = this.$refs.block; 76       return blockDomArr.every((dom) => { 77         const { left: domLeft, top: domTop } = dom.style; 78         const { correctx: correctX, correcty: correctY } = dom.dataset; 79         const flag = 80           parseInt(domLeft) === parseInt(correctX) && 81           parseInt(domTop) === parseInt(correctY); 82         return flag; 83       }); 84       // console.log(blockDomArr.length); 85     }, 86     winGame(empthDom) { 87       //通关 88       setTimeout(() => { 89         this.status = "胜利"; 90         alert("恭喜通关"); 91         empthDom.style.opacity = 1; 92         this.$emit("getStatus"); 93         setTimeout(() => { 94           this.goToNextLevel(); 95         }, 300); 96       }, 300); 97     }, 98     goToNextLevel() { 99       const answerFlag = window.confirm("现在进行下一关么？");100       if (answerFlag) {101         this.status = "进行中......";102         this.$emit("next");103       }104     },105   },106   computed: {107     blockWidth() {108       return this.width / this.col;109     },110     blockHeight() {111       return this.height / this.row;112     },113     correctPoints() {114       const { row, col, blockWidth, blockHeight } = this;115       const arr = [];116       for (let i = 0; i < row; i++) {117         for (let j = 0; j < col; j++) {118           arr.push({119             x: j * blockWidth,120             y: i * blockHeight,121             id: new Date().getTime() + Math.random() * 100,122           });123         }124       }125       return arr;126     },127     blockPoints() {128       const points = this.correctPoints;129       const length = points.length; //数组的长度130       const lastEle = points[length - 1]; //最后一个元素131       const newArr = [...points];132       newArr.length = length - 1;133       //打乱顺序134       newArr.sort(() => Math.random() - 0.5);135       newArr.push(lastEle);136       return newArr;137     },138   },139 };140 </script>

View Code

样式部分（Style），主要用于外观样式的设置，如下所示：

 1 <style> 2 .puzzle { 3   box-sizing: content-box; 4   border: 2px solid #cccccc; 5   position: relative; 6 } 7 .puzzle__block { 8   border: 1px solid #ffffff; 9   box-sizing: border-box;10   /* background-color: rebeccapurple; */11   position: absolute;12   transition: all 0.3s;13 }14 </style>

View Code

 拼图组件的调用App.vue

首先组件需要引入和注册，采用使用，如下所示：

 1 <script> 2 import puzzle from "./Puzzle"; 3 export default { 4   components: { 5     puzzle, 6   }, 7   data() { 8     return { 9       level: 0,10       puzzleConfig: [11         { img: "./img/001.jpg", row: 3, col: 3 },12         { img: "./img/002.jpg", row: 4, col: 4 },13         { img: "./img/003.jpg", row: 5, col: 5 },14         { img: "./img/004.jpg", row: 6, col: 6 },15         { img: "./img/005.jpg", row: 7, col: 7 },16       ],17       status: "进行中......",18     };19   },20   methods: {21     handleNext() {22       console.log("next");23       this.status = this.$refs.dpuzzle.status;24       this.level++;25       if (this.level == this.puzzleConfig.length - 1) {26         const answerFlag = window.confirm("已经是最后一关了，需要重新开始么？");27         if (answerFlag) {28           this.level = 0;29         }30       }31     },32     getStatus() {33       this.status = this.$refs.dpuzzle.status;34     },35   },36 };37 </script>

View Code

组件的调用，如下所示：

1 <template>2   <div>3     <h3>[拼图游戏]当前是第{{level+1}}关,当前状态[{{status}}]</h3>4     <puzzle ref="dpuzzle" @getStatus="getStatus" @next="handleNext" v-bind="puzzleConfig[level]" />5     <!-- <button @click="handleNext" style="width:20px,height:20px" value="下一关">下一关</button> -->6   </div>7 </template>

View Code

 注意事项：

如果获取组件内部的元素的值，在组件调用时采用ref属性，然后获取组件内的data属性值。

组件内如果调用父组件的方法，本文采用触发注册事件的方式this.$emit("next");

如果需要学习参考源码的朋友，可以点击源码链接进行下载。

源码链接

备注

浪淘沙令·帘外雨潺潺

作者：李煜【五代十国南唐后主】

帘外雨潺潺，春意阑珊。

罗衾不耐五更寒。

梦里不知身是客，一晌贪欢。

独自莫凭栏，无限江山，别时容易见时难。

流水落花春去也，天上人间。