接上篇
这一次主要做一件事，就是计算出每个方格周围共有几个雷，然后将数字绘制在方格中。
创建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);
效果如下：
弹出提示
显示地雷分布
