用 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 进行操作。但是这部分代码仍然有些不足：

计时工具必须要手动点击 Start Game 按钮才会开始计时，可以考虑做成玩家进入界面时就开始计时，或者开始填充第一个数时计时。
缺乏一些提示，可以在提高待填格子数目的情况下，通过某个操作（比如说点击帮助按钮显示某个格子的值）来降低游戏难度，提高可玩性。
挖洞法的方法是随机的，不能确定是否在挖完之后的棋盘上填充数字时只有唯一解。

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