目录:
Web扫雷开发小记(1)
Web扫雷开发小记(2)
Web扫雷开发小记(3)
其实在完成上篇的功能之后，一个扫雷游戏的雏形已经差不多了。但扫雷的功能远远不止这些，比如左键标记当前块为雷，左右键同时按下挖开周边的块等等等。这次要完成的呢，就是右键标记的功能。
不过在做这件事之前呢，让我们先美化一下面板。
美化面板
基于我极其糟糕的审美，做这件事情也就不自由发挥了，参考人家扫雷的面板吧。
上一篇的截图也看到了，我们的面板是黑的，挖开一看灰扑扑的，数字也是惨白惨白的。好吧，这得改。
首先面板改成灰色，这没啥好说的，fillStyle属性里把颜色改一改的事。
然后数字颜色换一换，1是蓝色的，2是绿色的，3是红色等等等……本来一开始呢，我想用图片调用drawImage()来做的，然后发现这样不好看，不如直接用fillText()，跟css里设置差不多，字体大小颜色设置一下。
然后是雷，这个得用drawImage()了。但这里有个坑得注意，如果像这样
var img = new Image();
img.src = "images/bomb.jpg";
mineContext.drawImage(img, mines[i][j].columns * block_width, mines[i][j].rows * block_height);
你会发现你的图片是出不来的。
为什么呢？因为图片的加载是异步的，你不等它加载完就去用，当然什么都没有咯。
解决办法也很简单，onload+匿名函数。
var img = new Image();
img.src = "images/bomb.jpg";
img.onload = function() {
mineContext.drawImage(img, mines[i][j].columns * block_width, mines[i][j].rows * block_height);
};
完成这些再来看一眼我们的游戏，可算像个扫雷游戏了。
右键标记
禁止右键菜单
要使用右键首先得先禁止浏览器默认的右键事件，这个很简单，一小段代码的事。
document.oncontextmenu = function(e) {
return false;
}
鼠标事件
右键事件呢，靠的是当前鼠标点击事件中event.button这个属性来判断的。左键点击时这个值是0，右键点击时是2。那么我们就要添加一个右键监听事件，而这个事件刚好跟左键点击可以分成两个判断去做。
于是我这里添加了一个handleSingleClick()的方法，将鼠标点击事件用参数形式传进来，再去判断。大概就是这样
MindSweeping.handleSingleClick = function (e){
if(e.button===0){...}
else if (e.button ===2){...}
}
同时这里未雨绸缪一下，之后是要完成一个左右键同时按下的功能的，这个得实现肯定也少不了判断鼠标事件。所以我再加上了一个handleClick()函数，判断当前事件是同时按下还是只按下了一个键。
右键标记图案
然后我们就可以开始完成右键事件中的代码啦。
先不管内里的逻辑，就先做一件事，点击，绘出一个旗子图案，再点击，旗子消失。
点击绘制图案好做，跟上面绘制雷一样。
var img = new Image();
img.src = "images/flag.jpg";
img.onload = function() {
maskContext.drawImage(img, index.xIndex * block_width + 1, index.yIndex * block_height + 1, block_width - 2, block_height - 2);
};
但再点击消失呢？我要如何让计算机知道，我这里已经有一个标记了，这次我点击这个方块的时候，需要你把它消除呢？
于是之前MineBlock对象里，又要多加一个属性了，isFlaged。这是个布尔值，每一次点击之前，都去检查这个值是否为true。如果为true，那么表示这个方块已经被标记了，那这次点击我要做的就是除掉方块上的旗子，同时把isFlaged改为false。
（这个属性在后面做到左右键同时按下事件的时候也是有用的）
if (mines[index.xIndex][index.yIndex].isFlaged === false) {
if (mines[index.xIndex][index.yIndex].isFlaged === false) {
mines[index.xIndex][index.yIndex].isFlaged = true;
var img = new Image();
img.src = "images/flag.jpg";
img.onload = function() {
maskContext.drawImage(img, index.xIndex * block_width + 1, index.yIndex * block_height + 1, block_width - 2, block_height - 2);
};
} else if (mines[index.xIndex][index.yIndex].isFlaged === true) {
mines[index.xIndex][index.yIndex].isFlaged = false;
maskContext.fillStyle = "#c2c2c2";
maskContext.strokeStyle = 'white';
maskContext.fillRect(index.xIndex * block_width, index.yIndex * block_height, block_width, block_height);
maskContext.strokeRect(index.xIndex * block_width, index.yIndex * block_height, block_width, block_height);
}
现在打开网页重新试一试，点击，再点击，视觉效果就出来啦。
右键标记逻辑
有了图案不管用，计算机才不管什么图案不图案呢。如果标记了一个旗子，再点这个方块，你会发现还是被挖开了。
而我们标记一个旗子就是为了标记这个地方是雷，不能挖开。
那么很简单，在左键点击事件中，加上一个判断，isFlaged===false，左键的点击事件才生效。
