HTML5拖拽功能实现的拼图游戏

互联网 18-10-9

本文通过实例代码给大家介绍了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;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>