如何用HTML5实现拖拽功能的拼图游戏的呢?
导读：今天就跟大家聊聊有关“如何用HTML5实现拖拽功能的拼图游戏的呢?”的内容，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。 本文通过实例代码给大家介绍...
今天就跟大家聊聊有关“如何用HTML5实现拖拽功能的拼图游戏的呢?”的内容，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。
本文通过实例代码给大家介绍了HTML5拖拽功能实现的拼图游戏，代码简单易懂，非常不错，有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。
具体代码如下所示：
!--代码如下，最下面给出了我测试用的9张250*250的图片切片-->
!DOCTYPE html>
html>
head>
meta charset="utf-8">
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>
p id="puzzle">
p class="box">
img alt="1">
/p>
p class="box">
img alt="2">
/p>
p class="box">
img alt="3">
/p>
p class="box">
img alt="4">
/p>
p class="box">
img alt="5">
/p>
p class="box">
img alt="6">
/p>
p class="box">
img alt="7">
/p>
p class="box">
img alt="8">
/p>
p class="box">
img alt="9">
/p>
/p>
script>
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;
iimage.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>
通过以上内容的阐述，相信大家对“如何用HTML5实现拖拽功能的拼图游戏的呢?”已经有了进一步的了解，更多相关的问题，欢迎关注网络或到官网咨询客服。
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 如何用HTML5实现拖拽功能的拼图游戏的呢?
本文地址： https://pptw.com/jishu/654056.html