一个简单的拼图游戏

/* 
    1. 开始游戏时把图片打乱
    2. 按下方向键，让图交换位置
    3. 判断是否完成游戏（类名的顺序num1-num9，把空白去除）
*/
// 获取开始游戏按钮
var btnStart = document.querySelector('#btnStart');
// 获取重新游戏按钮
var btnReset = document.querySelector("#btnReset");
// 获取所有的图片
var items = document.querySelectorAll('.item');
var tempItems = document.querySelectorAll('.item');
// 图片所在的容器
var box = document.querySelector('.box');
// 开始游戏
btnStart.onclick = function () {
    this.disabled = 'disabled';
    sortImg();
};
// 重新游戏
btnReset.onclick = function () {
    location.reload();
}
// 空白的索引
var index = 0;
// 让图片打乱顺序
function sortImg() {
    // 把类数组items转换成真正的数组。
    var arr = Array.from(items);
    // 把数组arr中的元素进行排序。
    arr.sort(function () {
        return Math.random() > 0.5 ? -1 : 1;
    })
    // 先清空box容器，把排序后的元素添加到box容器中。
    box.innerHTML = ``;
    for (let i = 0; i < arr.length; i++) {
        box.appendChild(arr[i]);
    }

    items[8].style.backgroundImage = 'none';
    index = arr.findIndex(function (item) {
        return item.classList.contains(`num9`);
    });
}

document.onkeyup = function (e) {
    // console.log(e.keyCode);
    if (e.keyCode === 37 || e.keyCode === 65) { // 左方向键或者a键
        moveLeft();
    } else if (e.keyCode === 38 || e.keyCode === 87) {// 上方向键或者w键
        moveTop();
    }
    else if (e.keyCode === 39 || e.keyCode === 68) {// 右方向键或者d键
        moveRight();
    }
    else if (e.keyCode === 40 || e.keyCode === 83) {// 下方向键或者s键
        moveBottom();
    }
}

function moveLeft() {
    if (!(index === 2 || index === 5 || index === 8)) {
        // 取空白元素
        var target = document.querySelectorAll('.item')[index];
        // 取空白元素右方的元素
        var ele = document.querySelectorAll('.item')[index + 1];
        // 交换空白元素和它右方元素的样式
        exchange(target, ele);

        // 让索引发生变化，目的下次准确的取目标元素。
        index = index + 1;

        // 判断是否成功
        success();
    }
}
function moveTop() {
    if (!(index === 6 || index === 7 || index === 8)) {
        // 取空白元素
        var target = document.querySelectorAll('.item')[index];
        // 取空白元素下方的元素
        var ele = document.querySelectorAll('.item')[index + 3];
        // 交换空白元素和它下方元素的样式
        exchange(target, ele);

        // 让索引发生变化，目的下次准确的取目标元素。
        index = index + 3;

        // 判断是否成功
        success();
    }
}
function moveRight() {
    if (!(index === 0 || index === 3 || index === 6)) {
        // 取空白元素
        var target = document.querySelectorAll('.item')[index];
        // 取空白元素左方的元素
        var ele = document.querySelectorAll('.item')[index - 1];
        // 交换空白元素和它左方元素的样式
        exchange(target, ele);

        // 让索引发生变化，目的下次准确的取目标元素。
        index = index - 1;
        // 判断是否成功
        success();
    }
}
function moveBottom() {
    if (!(index === 0 || index === 1 || index === 2)) {
        // 取空白元素
        var target = document.querySelectorAll('.item')[index];
        // 取空白元素上方的元素
        var ele = document.querySelectorAll('.item')[index - 3];
        // 交换空白元素和它上方元素的样式
        exchange(target, ele);

        // 让索引发生变化，目的下次准确的取目标元素。
        index = index - 3;

        // 判断是否成功
        success();
    }
}

// 交换两个元素的样式。
function exchange(target, ele) {
    var temp = ele.className;
    ele.className = target.className;
    target.className = temp;

    ele.style.backgroundImage = "none";
    target.style = "";
}

// 判断是否拼图成功
function success() {
    var result = false;
    // 判断类名的顺序是不是num1 - num9，如果是成功了，否则不成功。别忘记成功后把空白style移除

    var newItems = document.querySelectorAll('.item');
    var arr1 = Array.from(newItems);
    var arr2 = Array.from(tempItems);
    // 比较arr1和arr2中的元素值是否相等。
    // 由于数组是引用类型，不能使用恒等比较
    // if(arr1 === arr2){}
    result = equal(arr1, arr2);

    if (result) {
        items[8].style = '';
        alert('恭喜你成功了！');
    }
}

function equal(ar1, ar2) {
    for (let i = 0; i < ar1.length; i++) {
        if (ar1[i].className !== ar2[i].className) {
            return false;
        }
    }
    return true;
}