数字华容道以及拼图

前言

使用 Vue3 + TS 实现对应代码仓地址为 huarongdao: 数字华容道，益智类游戏 (gitee.com)

1、判断游戏是否成功

数字华容道成功的依据是数字依次排序，所以判断逻辑很简单，数组顺序是否为1至8即可。

2、生成乱序且有效的数组

2.1 生成乱序数组

const generateRandomArr = (length: number): number[] =>
  Array.from({ length }, (_, index) => index + 1).sort(
    () => Math.random() - 0.5
  )

2.1 生成有效数组

生成的乱序数组有三种情况：

1. 与原始数组[1,2,3,4,5,6,7,8]一致是成功状态的；
2. 有效的数组，即可以通过移动并最终排序成功的；
3. 无效的数组，这种情况对应的就是说不论如何进行移动都无法得到[1,2,3,4,5,6,7,8]，也就是数字华容道中无解的情况，该情形是最后两位是反着的[1,2,3,4,5,6,8,7]，也称镜像解。

但是游戏呢，肯定要保证这个是有解的，要不就是搁这耍流氓嘛。在查询了一些资料后，最终给我找到了一个简单的条件来生成有效数组：奇数阶的逆序数为偶数，偶数阶的逆序数为奇数时有解。那么又涉及到一个逆序数的概念，简单来说就是一个数组中一项，如果比前面的几个数小，那它的逆序数就是几，数组的逆序数就是所有项逆序数的和。例如[3,6,1,5,8,2,7,4]数组，从左至右逐个分析，1的前面有2个数比它大（分别是3与6），而5的前面有1个数比它大（为6），同理2有4个数，7有1个数，4有4个数，把这些个数相加0+0+2+1+0+4+1+4=12，这便是[3,6,1,5,8,2,7,4]数组的逆序数。有兴趣的可以去看看逆序数的概念 - 知乎 (zhihu.com)，这个是找到较为简单的讲解。

3、移动

数字华容道是一个简单的游戏，元素能被移动原理也很简单，空位上下左右的元素才能被移动，且每个元素仅能向一个方向移动。 在页面上渲染时，仅以乱序的数组无法做后续数据的移动处理，所以需要其他的属性来记录它的状态。

{
  id: 0, // 数字
  col: col, // 行数，从0开始计数
  row: row, // 列数，从0开始计数
  up: false, // 能否向上移动
  down: false, // 能否向下移动
  left: false, // 能否向左移动
  right: false // 能否向右移动
}

从以上对象来看，肯定是看出了解决移动的方式，初始化时，第6个元素可以向下移动，第8个元素可以向右移动。行列数从0开始计数有个好处可以方便计算出该项在数组中对应的下标。

3.1 键盘移动

想象一下，开始游戏了，通过键盘来控制元素移动，起始时只能是向下或是向右移动，举例来说向下移动，那么找到可以向下移动的目标元素和空元素，目标元素的行数加一，空元素的目标元素减一即更新完行列数状态，接下来就要更新下上下左右移动的状态了。根据空位上下左右的元素才能被移动的原理，先重置下所有元素的上下左右移动的状态为false,找到空位，计算其上下左右的项，然后设置对应的项设置对应的移动方向，上方的可以向下移动，下方的可以向上移动，依次类推。

3.1 鼠标移动

当鼠标点击到对应的元素上，检查该元素上下左右的属性，若为真，就像上面键盘移动一致，触发移动指令即可。

4、拼图

在完成数字华容道的过程中，发现以前的拼图游戏的逻辑其实也是一样的，所以在这基础上做了拼图游戏，希望大家玩的开心。