「小游戏系列」之拖拖拽拽的掘金拼图(PC在线游玩)

本文链接：https://blog.youkuaiyun.com/Android062005/article/details/124682575

💥 游戏介绍

看下面这个gif图 ![QQ20220416-202221-HD.gif](https://img-blog.csdnimg.cn/img_convert/55432f1c3fe4ba75e2826146fda3f6d9.gif)     如上面这个图所示，通过鼠标拖拽，将图片还原成示例的样子。  
游戏一共分三种难度，分别是简单难度-掘金LOGO、中级难度-掘金酱的头像、困难难度-？？？「友情提醒，困难难度一般不要挑战哦！」

🎾 游戏彩蛋

拼图小游戏的第三关是比较困难的，所以试玩的掘友们可以把自己通关的步数截图发在评论区，4月22号使用步数最少的掘友可以获得一个掘金杯子哦😄「截图记得要截全哦，就和上面的gif一样😎」

⚙️ 实现思路

相信前端的同学都听过低代码这个概念，而且大部分同学也都或多或少的参与了低代码平台的开发，不说复杂的实现逻辑，组件的拖拽是很多低代码平台都具有的一个功能。  

这个掘金拼图的游戏就是基于HTML5中的_拖放(drag和drog)_，再结合Vue3的数据驱动来实现的。「当然使用定位这些也是能够实现的」

📑 代码介绍

在介绍具体代码前，先介绍一下_拖放(drag和drog)_。  

首先，元素是否允许被拖放且可响应 API 操作依赖于_draggable_标签属性，需要设置draggable为true的时候，元素才能被拖动。  
`<p draggable="true"></p>`

拖拽触发时机

然后拖动元素在不同的时刻会触发不同的回调函数，在这些回调函数中执行我们想要做的操作。

<template>
<!-- 拖动元素 -->
<div
    class="main_one"
    draggable="true"
    @dragstart="dragstart()"
    @drag="drag()"
    @dragend="dragend()"
></div>
<!-- 放置元素 -->
<div
    class="main_two"
    draggable="true"
    @dragenter="dragenter()"
    @dragover="dragover()"
    @dragleave="dragleave()"
    @drop="drop()"
></div>
</template>

<script setup> /**
 * 拖拽开始，只在拖拽元素开始拖拽的时候触发一次，触发元素：被拖拽的元素
 */
const dragstart = () => {
  console.log('dragstart');
};
/**
 * 拖拽过程，拖拽过程中持续触发，触发元素：被拖拽的元素
 */
const drag = () => {
  console.log('drag');
};
/**
 * 拖拽结束，当送开鼠标元素回到初始位置的时候触发一次，触发元素：被拖拽的元素
 * Tipes：当拖拽元素回到初始位置才触发
 */
const dragend = () => {
  console.log('dragend');
};
/**
 * 当被拖拽元素进入到允许释放的元素上面的时候触发一次， 触发元素：释放元素
 */
const dragenter = () => {
  console.log('dragenter');
};
/**
 * 当被拖拽元素进入到允许释放的元素内部后一直触发「以鼠标位置判定」 触发元素：释放元素
 */
const dragover = () => {
  e.preventDefault(); // 允许放置
  console.log('dragover');
};
/**
 * 当被拖拽元素从允许释放的元素上面离开的时候触发一次，触发元素：释放元素
 */
const dragleave = () => {
  console.log('dragleave');
};
/**
 * 当被拖拽元素从允许释放的元素上面释放的时候触发一次，触发元素：释放元素
 */
const drop = () => {
  console.log('drop');
}; </script>

从上面的代码可以总结出来这样一张图片，图片总结了元素在拖拽的每个阶段所执行的回调函数：

交换

遵循Vue数据驱动，所以在实现拖动元素和释放元素的交换的时候，只需要修改对应的数据源就可以：

const endDrop = (index: number, e: any) => {
	if (index == dragIndex.value) return;
	[list.value[dragIndex.value], list.value[overindex.value]] = [
		list.value[overindex.value],
		list.value[dragIndex.value],
	];
	steps.value = steps.value + 1; // 交换成功之后步数加一
	e.preventDefault();
};

📖 总结

小游戏实现很简单，只不过是Api的调用。只要熟练掌握这些Api，前端涉及到的一些简单拖拽那就是洒洒水。当然上面涉及到的拖拽Api是最简单的，在我们使用过程中还要注意到元素上的属性，比如DataTransfer对象等。有兴趣的小伙伴可以再多研究，这里就不细说了。  

今天写小游戏的时候才发现，其实大部分的小游戏逻辑也不是特别复杂。只不过想要做的好看，就需要找素材，素材太难找了，所以页面还是比较简陋的，大家多多担待。😢  

最后：小游戏的页面返回上一级就是游戏大厅，虽然就两个游戏吧，哈哈后面还会再写一两个，有兴趣的小伙伴可以试玩一下。  
[游戏大厅](https://link.juejin.cn/?target=http%3A%2F%2Fhome.lp20peter.top%2F%23%2F "http://home.lp20peter.top/#/")

「有帮助记得帮我点点赞哦」
最后祝各位大佬学习进步，事业有成！🎆🎆🎆