Web扫雷开发小记(2)

接上篇

所有代码可以在我的Github中找到，在线试玩：点击

这一次主要做一件事，就是计算出每个方格周围共有几个雷，然后将数字绘制在方格中。

创建Mineblock对象

首先创建一个Mineblock对象，代表画布中每一个方格，总共480个。

该对象接收两个参数，该方格所在的行和列。属性包括了columns,rows,isMined,roundMines 。

function Mineblock (cloumns, rows) {
    this.cloumns = cloumns;
    this.rows = rows;
    this.isMined = false;//boolean default false
    this.roundMines = 0;//0-8
}

其中roundMines 代表当前方格周围有几个雷。

创建二维数组

在上一篇的基础上进行改进。

生成一个30x16总共480个元素的二维数组，存储了480个Mineblock对象。

同样的，需要在这480个元素中，挑出99个不重复的元素作为雷。

    for (let i = 0; i < 99; i++) {
        let index = Math.floor(Math.random() * positions.length);
        let position = positions[index];
        let x = position.x;
        let y = position.y;
        mines[x][y].isMined = true;
        positions.splice(index, 1);
        }

没什么好解释的，方法跟上一篇差不多。

生成数字

然后就是生成数字。

让我们回想一下扫雷的规则，当你点开一个方块时，上面的数字表明了在该方块的周围，总共8个方块中，一共有几个雷。

当前方块的位置如果是第i行，第j列的话，那我需要检查总共八个方块，即第i-1行的三个即j-1,j,j+1，第i行的两个j-1,j+1，第i+1行的三个j-1,j,j+1

这个用二维数组做起来就很一目了然。

        var mineNum;
        for (let i = 0, length1 = mines.length; i < length1; i++) {
            for (let j = 0, length1 = mines[i].length; j < length1; j++) {
                mineNum = 0;
                for (let k = -1; k < 2; k++) {
                    for (let l = -1; l < 2; l++) {
                        if (i + l > -1 && j + k > -1 && i + l < 30 && j + k < 16) {
                                if (mines[i + l][j + k].isMined === true) {
                                    mineNum++;

                            }
                        }
                    }
                }
                mines[i][j].roundMines = mineNum;
            }
        }

其中的检查条件if (i + l > -1 && j + k > -1 && i + l < 30 && j + k < 16) 即保证当第一行或者最后一行一类的情况时，不会超过数组的边界。

绘制面板

绘制面板没什么好说，不过这次不只是雷，还有数字的绘制，从数组中的Mineblock对象的roundMines属性获得就好。

    for (let i = 0; i < mines.length; i++) {
        for (let j = 0; j < mines[i].length; j++) {
            if (mines[i][j].isMined === true) {
                mineContext.fillStyle = "red";
                mineContext.fillRect(mines[i][j].cloumns * 20, mines[i][j].rows * 20, this.block_width, this.block_height); //绘制矩形
            } else {
                mineContext.fillStyle = "blue";
                mineContext.font = "15px Arial";
                mineContext.textAlign = 'center';
                mineContext.fillText(mines[i][j].roundMines, mines[i][j].cloumns * 20 + 10, mines[i][j].rows * 20 + 15);
            }
        }
    }

游戏结束

最后再加一个条件，当点击到雷时游戏结束，弹出一个提示框，同时清除掉遮罩层。

        maskCanvas.addEventListener("click", function(e) {
            p = getPosition(e);
            index = getMineIndex(p.x, p.y);
            maskContext.clearRect(index.xIndex * BLOCK_WIDTH, index.yIndex * BLOCK_HEIGHT, BLOCK_WIDTH - 1, BLOCK_HEIGHT - 1);
            if (mines[index.xIndex][index.yIndex].isMined === true) {
                alert("you lose");
                maskContext.clearRect(0, 0, 600, 320);
            }
        }, false);

效果如下：

弹出提示

显示地雷分布