html5⽹页⼩游戏拖拽,HTML5拖拽功能实现的拼图游戏
本⽂通过实例代码给⼤家介绍了HTML5拖拽功能实现的拼图游戏，代码简单易懂，⾮常不错，有⼀定的参考价值，有需要的朋友可以参考⼀下，希望对你们有所帮助。
具体代码如下所⽰：
drag拖拽
.box{
float: left;
}
img{
width: 150px;
height:150px;
}
#puzzle{
font-size: 0;
margin:80px auto;
padding: 5px;
width: 460px;
}
var image = ElementsByTagName("img");
var box = ElementsByClassName("box");
image.draggable = true;
var source = "";
var nowImage;
var nowImageBox;
var thenImage;
for(let i=0;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); }
}
总结
以上所述就是给⼤家介绍的HTML5拖拽功能实现拼图游戏的全部内容，希望能对⼤家的学习有所帮助。更多相关教程请访问Html5视频教程！
相关推荐：
php公益培训视频教程
HTML5图⽂教程
网页游戏小游戏HTML5在线⼿册

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。