超简单的九宫格拼图游戏（原生js实现）

页面

<meta charset="UTF-8">
<div id="game"></div>
<h1>欢迎来玩</h1>
<script src="my.js"></script>

这样写的页面是符合html最新规范的，没错，什么head，body标签统统不要，留下唯一有用的

my.js

(() => {
    const eleContainer = document.querySelector('#game');
    eleContainer.style = "width:500px;height:500px;border:1px solid rgb(204,204,204);position:relative;"
    const row = 3;
    const col = 3;
    const widthOfContainer = +getComputedStyle(eleContainer).width.slice(0, -2);
    const heightOfContainer = +getComputedStyle(eleContainer).height.slice(0, -2);

    /* 随机打乱一个数组 */
    function shuffle(arr) {
        arr.sort(() => Math.random() - 0.5);
    }
    /* 获取偏移位置 */
    function getLeft(ele){
        return getComputedStyle(ele).left.slice(0, -2);
    }
    function getTop(ele){
        return getComputedStyle(ele).top.slice(0, -2);
    }

    let axiosArr = new Array(0);  // 初始化位置坐标数组
    let indexArr = new Array(0);  // 随机下标数组
    let pointArr = new Array(0);  // 正确点位坐标数组
    let index = 0;
    for (let i = 0; i < row; i++) {
        for (let j = 0; j < col; j++) {
            if (!(i === row - 1 && j === col - 1)) {
                axiosArr.push([i, j]);
                indexArr.push(index);
                index++;
            }
        }
    }

    // 生成随机打乱的位置小块
    shuffle(indexArr);
    index = 0;
    for (let i = 0; i < row; i++) {
        for (let j = 0; j < col; j++) {
            if (!(i === row - 1 && j === col - 1)) {
                const elePart = document.createElement('div');
                elePart.style.border = '0.5px solid #fff';
                elePart.style.width = (widthOfContainer - 0.5 * row * 2) / 3 + 'px';
                elePart.style.height = (heightOfContainer - 0.5 * col * 2) / 3 + 'px';
                elePart.style.position = 'absolute';
                elePart.style.top = axiosArr[indexArr[index]][0] * (heightOfContainer / 3 - 0.5) + 'px';
                elePart.style.left = axiosArr[indexArr[index]][1] * (widthOfContainer / 3 - 0.5) + 'px';
                pointArr.push({
                    standard_x: parseFloat(j * (widthOfContainer / 3 - 0.5) + '').toFixed(3),
                    standard_y: parseFloat(i * (heightOfContainer / 3 - 0.5) + '').toFixed(3),
                    surrounding: [
                        /*上*/[parseFloat(j * (widthOfContainer / 3 - 0.5) + '').toFixed(3),
                            parseFloat((i - 1) * (heightOfContainer / 3 - 0.5) + '').toFixed(3),],
                        /*下*/[parseFloat(j * (widthOfContainer / 3 - 0.5) + '').toFixed(3),
                            parseFloat((i + 1) * (heightOfContainer / 3 - 0.5) + '').toFixed(3),],
                        /*左*/[parseFloat((j - 1) * (widthOfContainer / 3 - 0.5) + '').toFixed(3),
                            parseFloat(i * (heightOfContainer / 3 - 0.5) + '').toFixed(3),],
                        /*右*/[parseFloat((j + 1) * (widthOfContainer / 3 - 0.5) + '').toFixed(3),
                            parseFloat(i * (heightOfContainer / 3 - 0.5) + '').toFixed(3),],
                    ]
                });
                index++;
                elePart.style.backgroundImage = 'url(img/lol.png)';
                elePart.style.backgroundPositionX = -(j * (widthOfContainer / 3) + 0.5) + 'px';
                elePart.style.backgroundPositionY = -(i * (heightOfContainer / 3) + 0.5) + 'px';
                elePart.style.cursor = 'pointer';
                eleContainer.appendChild(elePart);
            } else {
                pointArr.push({
                    standard_x: parseFloat((col - 1) * (widthOfContainer / 3 - 0.5) + '').toFixed(3),
                    standard_y: parseFloat((row - 1) * (heightOfContainer / 3 - 0.5) + '').toFixed(3),
                    surrounding: [
                        /*上*/[parseFloat((col - 1) * (widthOfContainer / 3 - 0.5) + '').toFixed(3),
                            parseFloat((row - 2) * (heightOfContainer / 3 - 0.5) + '').toFixed(3),],
                        /*下*/[parseFloat((col - 1) * (widthOfContainer / 3 - 0.5) + '').toFixed(3),
                            parseFloat(row * (heightOfContainer / 3 - 0.5) + '').toFixed(3),],
                        /*左*/[parseFloat((col - 2) * (widthOfContainer / 3 - 0.5) + '').toFixed(3),
                            parseFloat((row - 1) * (heightOfContainer / 3 - 0.5) + '').toFixed(3),],
                        /*右*/[parseFloat(col * (widthOfContainer / 3 - 0.5) + '').toFixed(3),
                            parseFloat((row - 1) * (heightOfContainer / 3 - 0.5) + '').toFixed(3),],
                    ]
                });
            }
        }
    }

    // 如何判断空白格子的位置，简单的方法是给每一个格子做一个标记
    // 但这样难度就大大降低，玩家只需要按F12键，然后按规律修改标记即可
    // 所以用每个小块的left和top值作为评判标准
    function getBlankPoint() {
        const allPart = document.querySelectorAll('#game div');
        for (let i = 0; i < pointArr.length; i++) {
            let flag = false;
            for (let j = 0; j < allPart.length; j++) {
                let pic_x = +getLeft(allPart[j]);
                let pic_y = +getTop(allPart[j]);
                if ((+pointArr[i].standard_x === pic_x && +pointArr[i].standard_y === pic_y)) {
                    flag = true;
                    break;
                }
            }
            if (!flag) {
                return pointArr[i];
            }
        }
    }

    const allPart = document.querySelectorAll('#game div');

    allPart.forEach(function (item) {
        item.onclick = function () {
            let currentBlankPoint = getBlankPoint();
            // console.log(currentBlankPoint);
            let current_x = +getLeft(this);
            let current_y = +getTop(this);
            let current_pos = undefined;
            pointArr.forEach(function (item) {
                if (current_x === +item.standard_x && current_y === +item.standard_y) {
                    current_pos = item;
                }
            });

            for (let j = 0; j < current_pos.surrounding.length; j++) {
                if (+current_pos.surrounding[j][0] === +currentBlankPoint.standard_x && +current_pos.surrounding[j][1] === +currentBlankPoint.standard_y) {
                    // console.log(this)
                    this.style.left = currentBlankPoint.standard_x + 'px';
                    this.style.top = currentBlankPoint.standard_y + 'px';
                }
            }

            // 判断是否成功
            let flag = true;
            for (let i = 0; i < allPart.length; i++) {
                if (+getLeft(allPart[i]) !== +pointArr[i].standard_x || +getTop(allPart[i]) !== +pointArr[i].standard_y) {
                    flag = false
                    break;
                }
            }
            if (flag) {
                document.querySelector('h1').innerHTML = '恭喜挑战成功'
            }
        }
    });
})();

当然，前提是你最好自己准备一张500x500绝对尺寸的图片放在img文件夹下