用 JS 做一个数独游戏（二）

用 JS 做一个数独游戏（二）

在 上一篇博客 中，我们通过 Node 运行了我们的 JavaScript 代码，在控制台中打印出来生成好的数独终盘。为了让我们的数独游戏能有良好的体验，这篇博客将会为生成好的数独终盘做一个比较完善的界面。最终的效果如下：

你也可以访问网页上的 demo 进行数独游戏的体验。

完善挖洞算法

上一篇博客 中提到过挖洞算法，实际上那并不完整，因为算法里面只有生成数独终盘的部分，并没有进行挖洞处理（也就是隐藏部分格子）。为了补充完整挖洞的算法，我们在 Game 对象里面加上随机隐藏格子的代码：

// class Game
/**
 * 挖去一部分格子，将属性设为隐藏
 */
digBoard() {
    let dig = 0, block;
    for(let i = 0; i < 3; i++) {
        for(let j = 0; j < 3; j++) {
            for( let k = 0; k < this.digTimes; k++) {
                block = this.board.getBlockGrids(i, j);
                dig   = Math.floor( Math.random() * 9 );

                if( block[dig].isVisible() ) {
                    // avoid duplicated hiding
                    block[dig].setVisible(false);
                }
            }
        }
    }
    // Utils.printAll(this.board);
}

实际上就是很简单的取随机数，在每个 block 块（一个块是一个 3x3 的大方格）中进行 n 次循环，每次循环都将随机的数作为索引，修改块中的 grid 对象的 visible 属性，将其设为隐藏。

挖洞法比较简单，通过预设的三种难度：

Game.DifficutyEasy = 1;
Game.DifficutyNormal = 2;
Game.DifficutyHard = 3;

每种难度隐藏不同数目的格子，然后只要将其显示在界面上即可。

编写界面代码

界面是用网页的方式实现的，主要的 html 代码如下：

<div align="center">
    <div id="gamediv" align="center">

    </div>
    <div>
        <p id="result-label" class="result-normal"></p>
    </div>
    <hr />
    <div id="time">
        <p id="time-label">00:00:00</p>
    </div>
    <div id="difficuty">
        <input type="radio" name="difficuty" value="1" onmouseup="changeDifficuty(this.value)" checked="checked" />Easy
        <input type="radio" name="difficuty" value="2" onmouseup="changeDifficuty(this.value)" /> Normal
        <input type="radio" name="difficuty" value="3" onmouseup="changeDifficuty(this.value)" /> Hard
    </div>
    <div id="buttons">
        <button onclick="genBoard()" type="button">Restart game</button>
        <button onclick="tu.startTimer()" type="button">Start Game</button>
    </div>
</div>
<script src="./NumberPlaceCore.js"></script>
<script src="./game.js"></script>

预留了一个 div 用于显示数独棋盘。有用时记录，两个按钮，和难度选择。

数独棋盘的显示是由 JavaScript 代码完成的。首先查找页面中是否已有数独棋盘，若已有棋盘，则先将其删除，再重新创建，这样做是为了重新开始游戏后保证页面中只有一个棋盘。

let tBoard;
tBoard = document.getElementById("board");
if( tBoard ) {
    tBoard.remove();
}
tBoard = document.createElement("table");

然后通过循环依次创建各个格子，对于未显示的值的格子，将其用一个 input 组件表示，留给玩家填数字，最后将填充好的格子添加到预览的 div 中：

let tr, td, grid, value;
let ginput;
for(let i = 0; i < 9; i++) {
    tr = document.createElement("tr");
    for(let j = 0; j < 9; j++) {
        td = document.createElement("td");
        value = g.getValueAt(new Number(i), new Number(j));
        td.setAttribute("class", "grid-show");
        if( value ) {
            td.innerHTML = value;
        }
        else {
            ginput = document.createElement("input");
            inputs.push(ginput);
            // ... 省略部分代码
            td.appendChild(ginput);
        }
        tr.appendChild(td);
    }
    tBoard.appendChild(tr);
}

gamediv.appendChild(tBoard);

其中有个 inputs 数组用于记录待填的格子，每当玩家向格子中填一个数，就会调用函数 placeGrid，将玩家填写的值传递给底层的 board 对象。每次填写数字时，都会判断一次是否所有的待填格子都已经填充完毕：

function checkInputs() {
    let valid = true;
    inputs.forEach( e => {
        if( !e.value ) {
            valid = false;
        }
    });
    return valid;
}

若该函数返回 true 的话，那么就应该提示用于游戏结束，给出结果，例如：

总结

这一部分其实比较简单，涉及到较多的内容是通过 JavaScript 代码对 DOM 进行操作。但是这部分代码仍然有些不足：

1. 计时工具必须要手动点击 Start Game 按钮才会开始计时，可以考虑做成玩家进入界面时就开始计时，或者开始填充第一个数时计时。

2. 缺乏一些提示，可以在提高待填格子数目的情况下，通过某个操作（比如说点击帮助按钮显示某个格子的值）来降低游戏难度，提高可玩性。

3. 挖洞法的方法是随机的，不能确定是否在挖完之后的棋盘上填充数字时只有唯一解。

至此，一个简单的数独游戏就完成了。