今天中午空闲之余写了个拖动拼图!感觉还不错!(拼图游戏)

开始游戏 重新游戏

<script>
    // 被拖拽的元素
    let tds = document.querySelectorAll('td');
    // 被拖拽的元素所放的容器
    let tr1 = document.querySelector('#tr1');
    let tr2 = document.querySelector('#tr2');
    let tr3 = document.querySelector('#tr3');
    // 开始游戏和重新游戏按钮
    let btnStart = document.querySelector('#btnStart');
    let btnReset = document.querySelector('#btnReset');

    // 拖拽元素放到容器时，让容器能接收
    tr1.ondragover = tr2.ondragover = tr3.ondragover = function (ev) {
        ev.preventDefault();
    }

    tr1.ondrop = tr2.ondrop = tr3.ondrop = function (ev) {
        ev.preventDefault();
        // 获取拖动元素的类名，目的通过类名得到拖动的元素。
        let className = ev.dataTransfer.getData("class");
        // 获取到拖动的元素
        let dragImg = document.getElementsByClassName(className)[0];
        // 获取到拖动元素下一个元素。  作一个参照物。
        let dragImgNextElement = dragImg.nextElementSibling;
        // 获取到拖动元素所在的父元素。  tr
        let dragImgParent = dragImg.parentElement;
        // 获取到目标元素的父元素  tr
        let targetParent = ev.target.parentElement;
        // dragImgParent.id === targetParent.id 判断是否是同一行元素之间进行拖动
        // dragImgNextElement判断拖动的是否是最后一列的图片
        // dragImgNextElement.className === ev.target.className判断拖动元素和目标元素是否是同一行紧临的两个元素。
        if (dragImgParent.id === targetParent.id && dragImgNextElement && dragImgNextElement.className === ev.target.className) {
            // 把目标元素插入到拖动元素之前。
            this.insertBefore(ev.target, dragImg);
        } else { // 拖动元素是第三列是没有下一个元素
            // 把拖动元素插入到目标元素之前。
            this.insertBefore(dragImg, ev.target);
        }

        // 把目标元素插入到拖动元素的下一个元素之前。
        dragImgParent.insertBefore(ev.target, dragImgNextElement);

        // 判断是否成功。
        if (success()) {
            alert("你完成了游戏");
        }
    }

    // 定义一个数组，用来存储td所需要的类名。这些类名用来控制背景图。
    let arrImg = ['img0', 'img1', 'img2', 'img3', 'img4', 'img5', 'img6', 'img7', 'img8'];
    function randomImg() {
        // 把arrImg打乱。
        arrImg.sort(function () {
            return Math.random() > 0.5 ? -1 : 1;
        })
        for (let i = 0; i < tds.length; i++) {
            const td = tds[i];
            // 先把td原来的类名去除
            td.removeAttribute('class');
            // td.className = "";
            // td.classList.remove(`img${i}`)
            // 再添加随机的类名，这样就可以把“图片”打乱。
            td.setAttribute('class', arrImg[i]);
            // 给td绑定拖动事件。
            td.ondragstart = function (ev) {
                // 把拖拽之前的类名先保存，目的后面使用。
                ev.dataTransfer.setData('class', ev.target.className)
            }
        }
    }
    // 第一次渲染时，先执行一次，随机给td添加相应的类名，如:img0...img8
    randomImg();

    btnStart.addEventListener('click', function () {
        randomImg();
    })

    btnReset.addEventListener('click', function () {
        randomImg();
    })

    function success() {
        let result = false;
        // 原来的类名顺序
        let oldArr = ['img0', 'img1', 'img2', 'img3', 'img4', 'img5', 'img6', 'img7', 'img8'];
        // 取出所有的td的class属性值，组成一个新数组。
        let tds = document.querySelectorAll('td');
        let newArr = Array.from(tds).map(function (td) {
            return td.className;
        })
        // 判断两个数组值是否相等。如果值相等表示拼图成功。
        result = equal(newArr, oldArr);

        return result;
    }

    function equal(arr1, arr2) {
        for (let i = 0; i < arr1.length; i++) {
            if (arr1[i] !== arr2[i]) {
                return false;
            }
        }
        return true;
    }
</script>

//CSS样式!(不要把事情想的很复杂 其实很简单!) *{ margin: 0; padding: 0; box-sizing: border-box; }

.box{
width: 550px;
margin: 0 auto;
}

.box table{
width: 540px;
margin: 0 auto;
}

.box table td{
width: 168px;
height: 168px;
background-image: url(…/img/all.jpg);
background-repeat: no-repeat;
}

.box table td.img0{
background-position: 0 0;
}
.box table td.img1{
background-position: -168px 0;
}
.box table td.img2{
background-position: -336px 0;
}
.box table td.img3{
background-position: 0 -168px;
}
.box table td.img4{
background-position: -168px -168px;
}
.box table td.img5{
background-position: -336px -168px;
}
.box table td.img6{
background-position: 0 -336px;
}
.box table td.img7{
background-position: -168px -336px;
}
.box table td.img8{
background-position: -336px -336px;
}