JavaScript开发数独游戏（二）

在JavaScript开发数独游戏（一）中已经介绍了项目的框架搭建过程，下面讲讲数独游戏实现。

首先是要创建一个9x9的矩阵用数组表示。创建的方式有很多种，但是我们最终要定位到每一个单元格中，这里用行作为第一维数组由9个数组组成，每个数组作为第二维。
先用函数生成行数组，如下：
function makeRow(v = 0) {
const array = new Array(9);
array.fill(v);
return array;
}
再生成一个数组然后把行数组作为参数传递，如下：
function makeMatrix(v = 0) {
return Array.from({length: 9}, () => makeRow(v));
}
这里用到伪数组，如果makeMatrix()直接用相同方法生成数组，更改一个值的时候所有相同下标二维数组对应的值都会改变，因为makeRow()函数只调用一次。解决的方法是构造一个伪数组将数组每个元素进行映射。

这里还要介绍一下几个算法：
随机算法
需要将整个矩阵的数字打乱，采用经典洗牌算法实现：
function shuffle(array) {
const endIndex = array.length - 2;
for (let i = 0; i <= endIndex; i++) {
const j = i + Math.floor(Math.random() * (array.length - i));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
检查算法
按游戏规则，每行每列每宫要填入1-9不重复的数据，所以只需要对每行每列每宫进行检查。检查的时候按行列宫抽取数据。抽取行列数据不难，抽取宫数据的时候回麻烦一点，用坐标计算的方式获取宫数据，如：第六宫序号n = 5，则坐标bx = n %3 = 2;by = n / 3 = 1；起始格坐标：x0= bx *3 = 6;y0 = by * 3 = 3；宫内小格坐标：x = x0 +I % 3;y = y0 + I / 3。

界面设计
实现算法前先要进行界面设计，分成三部分：标题、九宫格、底部固定按钮。九宫格由js生成，底部按钮包含检查、重置、清理、重建。如下：

先不考虑数字的填充默认为0，标题和底部很容易实现，重点是中间九宫格部分，使用构造函数对id为container进行操作，注意宫的边框设置，附上截图：

完成以上界面效果后就可以对九宫格里的数字和底部的四个按钮进行操作了。重要代码也以附上，编译时还是用gulp工具。