小猿圈web前端之HTML5拖拽功能实现的拼图游戏

时候玩的拼图游戏，大家好记得吗？有没有想过自己做一个这样的游戏呢，特别一些特殊的日子，送给他（她）呢。为了实现大家的想法，小猿圈web前端讲师就讲讲利用HTML5拖拽功能实现的拼图游戏

具体代码如下所示：

<!DOCTYPE html>

<html>

<head>

<title>drag拖拽</title>

<style>

.box{

float: left;

}

img{

width: 150px;

height:150px;

}

#puzzle{

font-size: 0;

margin:80px auto;

padding: 5px;

width: 460px;

}

</style>

</head>

<body>

</div>

var image=document.getElementsByTagName("img");

var box=document.getElementsByClassName("box");

image.draggable=true;

var source="";

var nowImage;

var nowImageBox;

var thenImage;

for(let i=0;i<image.length;i++){

source="picture"+i+".jpg";

image[i].setAttribute("src",source);

image[i].onmousedown=function(){

nowImage=this;

nowImageBox=this.parentNode;

}

box[i].ondragover=function(event){

event.preventDefault(); //去除ondragover事件的默认行为，该行为默认无法将数据或者元素放置到其他元素

}

box[i].ondrop=function(event){

thenImage=box[i].childNodes[0];

box[i].appendChild(nowImage);

nowImageBox.appendChild(thenImage);

}

</script>

</body>

</html>

以上就是小猿圈web前端讲师针对HTML5拖拽功能实现的拼图游戏的讲解，你有想过学习前端开发嘛，想学习前端可以到小猿圈去直接观看，这里面从基础到实战的所有学习资料，可以满足你提升自己，为你实现编程梦想的起点。

文收录本头条号已发表的经典文章，并持续更新中，请大家关注。

ES6/JavaScript的箭头函数是怎样将this与作用域联系起来的，及什么是this词法

你所不知道的JavaScript动态作用域，它与词法作用域有什么区别和关联？

你写过JavaScript的类吗？你知道JavaScript的类的机制是什么样的吗？

JavaScript中this是一种什么机制？又该如何的避免的二个坑？

高级JavaScript程序员必须掌握的一个问题：如何解决回调的信任问题

JavaScript异步：请先理解JavaScript的事件循环

使用JavaScript+HTML5 Canvas实现的界面元素截屏功能

区分初级和高级JavaScript程序员：是否理解JavaScript闭包（Closure）

在JavaScript中使用LINQ：linq.js插件简介

Processing.js和P5.js的功能简介和区别

前端开发框架选型：Angular2/React/jQuery

JavaScript语言的三种编程范式比较

JavaScript的那些坑，你遇到过吗？又该如何避免？

常见面试题JavaScript语言中四种函数调用方式实例分析

Ionic2、React、NativeScript比较

JavaScript Promise实现任务的灵活调度

一个支持PDF/文本/二进制文件的实用的客户端数字签名框架

jQuery实现纯HTML/CSS的拼图游戏

阻止广告：JavaScript实现Chrome插件实例分析

JavaScript实现三维轨道灯动画

使用 Angular 构建 JavaScript 应用

利用jQuery实现多个ajax请求等待

JavaScript代码重构

SQL注入和跨站点脚本实例分析

仿生智能算法之路径智能寻找的HTML及JS动画实现代码

HTML5动画背后的数学-粒子群仿生算法简介

HTML5及JS实现粒子群仿生动画代码

NodeJS、Java和PHP性能考量和若干参考结论

WebGL、Asm.js和WebAssembly概念简介

WebAssembly工作原理和JavaScript性能对比

Async之流程控制

由：之前看哔哩哔哩官网登录的时候有一个拼图验证码，很好奇怎么去实现。然后就想着自己弄一个。先给大家看我的最终效果。后面再一点点拆解代码。

为什么想着写这个功能呢，主要在于拼图验证码在前端这里会比较复杂并且深入。相比文字拼写，12306的图片验证码都没有拼图验证码对前端的要求来的复杂，和难。

我总结下知识点：

1、弹窗功能

2、弹窗基于元素定位

3、元素拖动

4、canvas绘图

5、基础逻辑

一、弹窗和弹窗组件

抱歉，这里我偷懒了直接用了elementUI的el-popover组件，所以小伙伴不懂的直接看elementUI官网的说明。

我个人也研究和编写了这块的组件功能（基于popper.js）

二、编写基础结构

这块属于html的基础内容，也就标题党了

三、canvas绘制图片

1、canvas绘制外部img图片

代码：

let mainDom=document.querySelector("#codeImg");
let bg=mainDom.getContext("2d");
let width=mainDom.width;
let height=mainDom.height;
let blockDom=document.querySelector("#sliderBlock");
let block=blockDom.getContext("2d");
//重新赋值，让canvas进行重新绘制
blockDom.height=height;
mainDom.height=height;
let imgsrc=require("../assets/images/back.jpg");
let img=document.createElement("img");
img.style.objectFit="scale-down";
img.src=imgsrc;
img.onload=function() {
 bg.drawImage(img, 0, 0, width, height);
 block.drawImage(img, 0, 0, width, height);
};复制代码

这里我绘制了两个canvas，因为一个是背景一个是滑块

核心在于

let mainDom=document.querySelector("#codeImg");
let imgsrc=require("../assets/images/back.jpg");
let bg=mainDom.getContext("2d");
let img=document.createElement("img");
img.onload=function() {
 bg.drawImage(img, 0, 0, width, height);
};
复制代码

2、canvas绘制滑块部分

就是这个图，这个有一些知识点，不难，但是很复杂。

代码部分：

drawBlock(ctx, xy={ x: 254, y: 109, r: 9 }, type) {
 let x=xy.x,
 y=xy.y,
 r=xy.r,
 w=40;
 let PI=Math.PI;
 //绘制
 ctx.beginPath();
 //left
 ctx.moveTo(x, y);
 //top
 ctx.arc(x + (w + 5) / 2, y, r, -PI, 0, true);
 ctx.lineTo(x + w + 5, y);
 //right
 ctx.arc(x + w + 5, y + w / 2, r, 1.5 * PI, 0.5 * PI, false);
 ctx.lineTo(x + w + 5, y + w);
 //bottom
 ctx.arc(x + (w + 5) / 2, y + w, r, 0, PI, false);
 ctx.lineTo(x, y + w);
 ctx.arc(x, y + w / 2, r, 0.5 * PI, 1.5 * PI, true);
 ctx.lineTo(x, y);
 //修饰，没有会看不出效果
 ctx.lineWidth=1;
 ctx.fillStyle="rgba(255, 255, 255, 0.5)";
 ctx.strokeStyle="rgba(255, 255, 255, 0.5)";
 ctx.stroke();
 ctx[type]();
 ctx.globalCompositeOperation="xor";
}复制代码

解释下：

参数是传入canvas对象

x，y轴数据

剪切还是填充的canvas函数（fill，clip）

绘制难点：（很重要，不然你没法理解它怎么绘制的）

绘制主要是需要理解这里的绘制是根据你设置一个起始点坐标，然后你绘制第二次的时候线就会连接到第二个点，依次连接最后回到原点就形成一个完整的图形。

用的是arc参数，主要是看这个图

fill是用于填充绘制的部分，clip是裁剪出绘制的部分，利用这个就可以出现一个扣掉的图片和一个裁剪出来的图片。

完成之后就是我的那个函数了。大家可以直接拿去用。

3、让元素跟随鼠标点击之后滑动

这里其实原理非常简单，就是有一个注意点。

原理：

鼠标点击之后记录当前坐标，然后随着（mousemove）滚动的时候修改元素的left和top值就行了。

还有一点就是鼠标快速滑动会导致丢失滑动效果，这里需要用document，不能是元素级别的监听。

元素上面我只需要鉴定按下mousedown

代码：

//鼠标按下
drag(e) {
 console.log("鼠标按下", e);
 let dom=e.target; //dom元素
 let slider=document.querySelector("#sliderBlock"); //滑块dom
 const downCoordinate={ x: e.x, y: e.y };
 //正确的滑块数据
 let checkx=Number(this.slider.mx) - Number(this.slider.bx);
 //x轴数据
 let x=0;
 const move=moveEV=> {
 x=moveEV.x - downCoordinate.x;
 //y=moveEV.y - downCoordinate.y;
 if (x >=251 || x <=0) return false;
 dom.style.left=x + "px";
 //dom.style.top=y + "px";
 slider.style.left=x + "px";
 };
 const up=()=> {
 document.removeEventListener("mousemove", move);
 document.removeEventListener("mouseup", up);
 dom.style.left="";
 console.log(x, checkx);
 let max=checkx - 5;
 let min=checkx - 10;
 //允许正负误差1
 if ((max >=x && x >=min) || x===checkx) {
 console.log("滑动解锁成功");
 this.puzzle=true;
 this.tips="验证成功";
 setTimeout(()=> {
 this.visible=false;
 }, 500);
 } else {
 console.log("拼图位置不正确");
 this.tips="验证失败，请重试";
 this.puzzle=false;
 this.canvasInit();
 }
 };
 document.addEventListener("mousemove", move);
 document.addEventListener("mouseup", up);
}复制代码

4、总结

核心点比较多，写过之后发现不难，关键在于去写

个人该页面git地址：https://github.com/ht-sauce/dream

该页面处于项目的

路由访问为：http://localhost:8080/consumer

5、完整的页面代码

<template>
 <div id="login">
 <el-form class="loginFrom" :model="logindata" :rules="rules" ref="ruleForm">
 <el-form-item class="login-item">
 <h1 class="login-title">海天酱油登录中心</h1>
 </el-form-item>
 <el-form-item prop="userName">
 <el-input
 class="login-inputorbuttom"
 prefix-icon="el-icon-user"
 placeholder="登录名"
 v-model="logindata.userName"
 ></el-input>
 </el-form-item>
 <el-form-item prop="password">
 <el-input
 class="login-inputorbuttom"
 prefix-icon="el-icon-lock"
 placeholder="密码"
 v-model="logindata.password"
 ></el-input>
 </el-form-item>
 <!--<el-form-item prop="verificationCode">
 <el-input
 class="login-inputorbuttom"
 v-model="logindata.verificationCode"
 ></el-input>
 </el-form-item>-->
 <el-form-item class="login-item">
 <el-button
 class="login-inputorbuttom login-bottom"
 type="primary"
 v-popover:popover
 @click="visible=!visible"
 >登 录</el-button
 >
 </el-form-item>
 </el-form>
 <!--验证码弹窗-->
 <el-popover
 popper-class="slidingPictures"
 ref="popover"
 trigger="manual"
 v-model="visible"
 >
 <div class="sliding-pictures">
 <div class="vimg">
 <canvas id="sliderBlock"></canvas>
 <canvas id="codeImg"></canvas>
 </div>
 <div class="slider">
 <div class="track" :class="{ pintuTrue: puzzle }">
 {{ tips }}
 </div>
 <div class="button el-icon-s-grid" @mousedown.prevent="drag"></div>
 </div>
 <div class="operation">
 <span
 title="关闭验证码"
 @click="visible=false"
 class="el-icon-circle-close"
 ></span>
 <span
 title="刷新验证码"
 @click="canvasInit"
 class="el-icon-refresh-left"
 ></span>
 </div>
 </div>
 </el-popover>
 </div>
</template>
<script>
export default {
 name: "login",
 data() {
 return {
 tips: "拖动左边滑块完成上方拼图",
 logindata: {
 userName: "",
 password: "",
 verificationCode: ""
 },
 rules: {},
 visible: false,
 //滑块x轴数据
 slider: {
 mx: 0,
 bx: 0
 },
 //拼图是否正确
 puzzle: false
 };
 },
 watch: {
 visible(e) {
 if (e===true) {
 this.canvasInit();
 this.puzzle=false;
 }
 }
 },
 beforeCreate() {},
 created() {},
 beforeMount() {},
 mounted() {},
 methods: {
 //拼图验证码初始化
 canvasInit() {
 //生成指定区间的随机数
 const random=(min, max)=> {
 return Math.floor(Math.random() * (max - min + 1) + min);
 };
 //x: 254, y: 109
 let mx=random(127, 244),
 bx=random(10, 128),
 y=random(10, 99);
 this.slider={ mx, bx };
 this.draw(mx, bx, y);
 },
 //鼠标按下
 drag(e) {
 console.log("鼠标按下", e);
 let dom=e.target; //dom元素
 let slider=document.querySelector("#sliderBlock"); //滑块dom
 const downCoordinate={ x: e.x, y: e.y };
 //正确的滑块数据
 let checkx=Number(this.slider.mx) - Number(this.slider.bx);
 //x轴数据
 let x=0;
 const move=moveEV=> {
 x=moveEV.x - downCoordinate.x;
 //y=moveEV.y - downCoordinate.y;
 if (x >=251 || x <=0) return false;
 dom.style.left=x + "px";
 //dom.style.top=y + "px";
 slider.style.left=x + "px";
 };
 const up=()=> {
 document.removeEventListener("mousemove", move);
 document.removeEventListener("mouseup", up);
 dom.style.left="";
 console.log(x, checkx);
 let max=checkx - 5;
 let min=checkx - 10;
 //允许正负误差1
 if ((max >=x && x >=min) || x===checkx) {
 console.log("滑动解锁成功");
 this.puzzle=true;
 this.tips="验证成功";
 setTimeout(()=> {
 this.visible=false;
 }, 500);
 } else {
 console.log("拼图位置不正确");
 this.tips="验证失败，请重试";
 this.puzzle=false;
 this.canvasInit();
 }
 };
 document.addEventListener("mousemove", move);
 document.addEventListener("mouseup", up);
 },
 draw(mx=200, bx=20, y=50) {
 let mainDom=document.querySelector("#codeImg");
 let bg=mainDom.getContext("2d");
 let width=mainDom.width;
 let height=mainDom.height;
 let blockDom=document.querySelector("#sliderBlock");
 let block=blockDom.getContext("2d");
 //重新赋值，让canvas进行重新绘制
 blockDom.height=height;
 mainDom.height=height;
 let imgsrc=require("../assets/images/back.jpg");
 let img=document.createElement("img");
 img.style.objectFit="scale-down";
 img.src=imgsrc;
 img.onload=function() {
 bg.drawImage(img, 0, 0, width, height);
 block.drawImage(img, 0, 0, width, height);
 };
 let mainxy={ x: mx, y: y, r: 9 };
 let blockxy={ x: bx, y: y, r: 9 };
 this.drawBlock(bg, mainxy, "fill");
 this.drawBlock(block, blockxy, "clip");
 },
 //绘制拼图
 drawBlock(ctx, xy={ x: 254, y: 109, r: 9 }, type) {
 let x=xy.x,
 y=xy.y,
 r=xy.r,
 w=40;
 let PI=Math.PI;
 //绘制
 ctx.beginPath();
 //left
 ctx.moveTo(x, y);
 //top
 ctx.arc(x + (w + 5) / 2, y, r, -PI, 0, true);
 ctx.lineTo(x + w + 5, y);
 //right
 ctx.arc(x + w + 5, y + w / 2, r, 1.5 * PI, 0.5 * PI, false);
 ctx.lineTo(x + w + 5, y + w);
 //bottom
 ctx.arc(x + (w + 5) / 2, y + w, r, 0, PI, false);
 ctx.lineTo(x, y + w);
 ctx.arc(x, y + w / 2, r, 0.5 * PI, 1.5 * PI, true);
 ctx.lineTo(x, y);
 //修饰，没有会看不出效果
 ctx.lineWidth=1;
 ctx.fillStyle="rgba(255, 255, 255, 0.5)";
 ctx.strokeStyle="rgba(255, 255, 255, 0.5)";
 ctx.stroke();
 ctx[type]();
 ctx.globalCompositeOperation="xor";
 }
 }
};
</script>
<style>
.slidingPictures {
 padding: 0;
 width: 300px;
 border-radius: 2px;
}
</style>
<style scoped lang="scss">
#login {
 display: flex;
 flex-flow: row;
 justify-content: flex-end;
 align-items: center;
 width: 100%;
 height: 100%;
 background-image: url("../assets/images/back.jpg");
 background-size: 100% 100%;
 .loginFrom {
 width: 300px;
 margin-top: -10vw;
 margin-right: 10vw;
 .login-item {
 display: flex;
 justify-content: center;
 align-items: center;
 }
 .login-title {
 color: #ffffff;
 font-size: 16px;
 margin-bottom: 10px;
 }
 .login-bottom {
 margin-top: 15px;
 }
 .login-bottom:hover {
 background: rgba(28, 136, 188, 0.5);
 }
 .login-bottom:active {
 background: rgba(228, 199, 200, 0.5);
 }
 /deep/.login-inputorbuttom {
 height: 40px;
 width: 300px;
 background: rgba(57, 108, 158, 0.5);
 border-radius: 20px;
 border: #396c9e 1px solid;
 font-size: 14px;
 color: #ffffff;
 .el-input--small,
 .el-input__inner {
 line-height: 43px;
 border: none;
 color: #ffffff;
 font-size: 14px;
 height: 40px;
 border-radius: 20px;
 background: transparent;
 text-align: center;
 }
 .el-input__icon {
 line-height: 40px;
 font-size: 16px;
 }
 }
 }
}
/*该样式最终是以弹窗插入*/
.sliding-pictures {
 width: 100%;
 .vimg {
 width: 100%;
 height: 170px;
 #codeImg,
 #sliderBlock {
 padding: 7px 7px 0 7px;
 width: inherit;
 height: inherit;
 }
 #codeImg {
 //display: none;
 }
 #sliderBlock {
 position: absolute;
 z-index: 4000;
 }
 }
 .slider {
 width: 100%;
 height: 65px;
 border-bottom: #c7c9d0 1px solid;
 display: flex;
 align-items: center;
 justify-content: flex-start;
 .track {
 margin-left: 7px;
 width: 286px;
 height: 38px;
 background: rgba(28, 136, 188, 0.5);
 border-radius: 25px;
 font-size: 14px;
 line-height: 38px;
 padding-right: 15px;
 padding-left: 70px;
 }
 .pintuTrue {
 background: #67c23a;
 color: #ffffff;
 }
 .button {
 position: absolute;
 width: 50px;
 height: 50px;
 line-height: 48px;
 background: #ffffff;
 box-shadow: #b9bdc8 0 0 3px;
 border-radius: 50%;
 left: 7px;
 text-align: center;
 font-size: 28px;
 color: #3e5d8b;
 &:hover {
 color: #2181bd;
 }
 }
 }
 .operation {
 width: 100%;
 height: 40px;
 > span {
 color: #9fa3ac;
 display: inline-block;
 width: 40px;
 font-size: 25px;
 line-height: 40px;
 text-align: center;
 &:hover {
 background: #e2e8f5;
 }
 }
 }
}
</style>

最后

喜欢的可以点个关注吗，小可乐也不容易呢

在线咨询

上一篇：数据分析逻辑：流量转化漏斗模型详解
下一篇：mysq5.7.44源代码方式下载安装配置

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

小猿圈web前端之HTML5拖拽功能实现的拼图游戏

您的项目需求