? 前言

相信很多小伙伴小的时候都玩过实体的数字华容道，在那个还没有手机的年代，这样的小游戏可以玩一整天不觉得厌烦的，就像下面这样的：

数字华容道.png
赶上这次谁是头号玩家的活动，并且这个小游戏也比较简单，所以就做一个线上版本的。供大家闲暇的时候娱乐一下顺便重温一下经典，玩法说明在游戏界面已经写了，所以不在这里赘述了。

数字华容道.png

? 分析

虽然说这个游戏很简单，但是在写代码的过程中还是涉及到了一点点知识的。下面就来分析分析具体涉及到哪些知识，要是有帮助记得帮我点赞哦！?

??? 打乱数组

当游戏初始化的时候，需要制造一个乱序的多维数组，我采用的方案是生成一个0-n的有序数组，然后打乱之后在生成多维数组。在这个过程中就涉及到了一个知识点：打乱数组

要确保每个元素都够等概率出现在每个位置中，在这里我用的是Fisher-Yates 洗牌算法「有好几种洗牌算法?」：

生成0-数组长度范围内的随机数，然后跟第一个元素交换，这样第一个元素已经打乱了，然后生成1到数组长度-1内的随机数，然后跟第一个交换，数组的第二个元素就打乱了，重复上述这一个操作即可打乱整个数组

const upsetOrderlyArrFun = (data: OrderArrTypr) => {
    // Fisher-Yates 洗牌算法
    for (let i = 0; i < data.length; ++i) {
            const j = Math.floor(Math.random() * (data.length - i)) + i;
            [data[i], data[j]] = [data[j], data[i]];
    }
    return data;
};
复制代码

Tipes：力扣的第384题就是这个，有兴趣的小伙伴可以去看看

⚙️⚙️⚙️ 边界判断和移动

在游戏里面我们要实现点击某个元素，如果和空白格子相邻则和空白格子互换位置，如果不相邻则不移动。首先判断这个元素是否在边界上，如果在边界上判断方向的时候就可以省略边界的方向。~~这个也不算什么知识点，还可能写得麻烦了~~?

/**
 * 判断是否能移动
 * @param x 当前元素的横坐标
 * @param y 当前元素的纵坐标
 * @param data 棋盘数据
 */
const isMoveFun = (x: number, y: number, data: OrderArrTypr[]) => {
    let moveObj = {
            top: false,
            right: false,
            bottom: false,
            left: false,
    };
    // 获取边界情况
    const borderObj = isBorderFun(x, y, latitude.value);
    // 说明不在上边界，判断是否向上移动
    if (!borderObj.top) {
            if (data[y - 1][x] == board.value) {
                    moveObj.top = true;
                    return moveObj;
            }
    }
    // 说明不在下边界，判断是否向下移动
    if (!borderObj.bottom) {
            if (data[y + 1][x] == board.value) {
                    moveObj.bottom = true;
                    return moveObj;
            }
    }
    // 说明不在左边界，判断是否向上移动
    if (!borderObj.left) {
            if (data[y][x - 1] == board.value) {
                    moveObj.left = true;
                    return moveObj;
            }
    }
    // 说明不在右边界，判断是否向上移动
    if (!borderObj.right) {
            if (data[y][x + 1] == board.value) {
                    moveObj.right = true;
                    return moveObj;
            }
    }
    // 说明不能移动
    return moveObj;
};
复制代码

??? 结果判断

最后就是判断有没有完成游戏，这里面就涉及到一个多维数组的对比。不过在这个游戏里面，不用进行对比，只要多维数组里面的每一个数组都是有序递增数组就可以：

/**
 * 判断是否完成游戏
 */
const judgeSuccessFun = (n: number, data: OrderArrTypr[]) => {
    let index = 0;
    while (index < n) {
            for (let i = 0; i < n; i++) {
                    let nowIndex = data[index][i] - n * index;
                    if (nowIndex != i + 1) {
                            return false;
                    }
            }
            index = index + 1;
    }
    return true;
};
复制代码