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

时间2024-01-23 18:26:23发布访客分类HTML浏览935

导读：收集整理的这篇文章主要介绍了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>

@H_406_5@

总结

以上所述就是给大家介绍的HTML5拖拽功能实现拼图游戏的全部内容，希望能对大家的学习有所帮助。更多相关教程请访问HTML5视频教程！