编程实现扫雷（二）

上一篇文章我们讲解了前三步骤

现在，该给格子添加点击事件了，当左键点击时，显示出格子中的数字（如果是地雷就挑战失败，结束游戏），右键点击时标记为地雷。

另外，第一次点击格子（往往带有运气成分）如果周围有空白区域会直接展开。

jms.js 中的这部分代码如下：

//在jms.js中JMS.prototype内加入
//获取元素
$: function (id) {
 return this.doc.getElementById(id);
},
//给每个格子绑定点击事件（左键和右键）
bindCells: function () {
 var self = this;
 for (var i = 0; i < this.rowCount; i++) {
 for (var j = 0; j < this.colCount; j++) {
 (function (row, col) {
 self.$("m_" + i + "_" + j).onmousedown = function (e) {
 e = e || window.event;
 var mouseNum = e.button;
 var className = this.className;
 if (mouseNum == 2) {
 if (className == "flag") {
 this.className = "";
 self.markLandMineCount--;
 } else {
 this.className = "flag";
 self.markLandMineCount++;
 }
 if (self.landMineCallBack) {
 self.landMineCallBack(self.landMineCount - self.markLandMineCount);
 }
 } else if (className != "flag") {
 self.openBlock.call(self, this, row, col);
 }
 };
 })(i,j);
 }
 }
},
//展开无雷区域
showNoLandMine: function (x, y) {
 for (var i = x - 1; i < x + 2; i++)
 for (var j = y - 1; j < y + 2; j++) {
 if (!(i == x && j == y)) {
 var ele = this.$("m_" + i + "_" + j);
 if (ele && ele.className == "") {
 this.openBlock.call(this, ele, i, j);
 }
 }
 }
},
//显示
openBlock: function (obj, x, y) {
 if (this.arrs[x][y] != 9) {
 this.currentSetpCount++;
 if (this.arrs[x][y] != 0) {
 obj.innerHTML = this.arrs[x][y];
 }
 obj.className = "normal";
 if (this.currentSetpCount + this.landMineCount == this.rowCount * this.colCount) {
 this.success();
 }
 obj.onmousedown = null;
 if (this.arrs[x][y] == 0) {
 this.showNoLandMine.call(this, x, y);
 }
 } else {
 this.failed();
 }
},
//显示地雷
showLandMine: function () {
 for (var i = 0; i < this.rowCount; i++) {
 for (var j = 0; j < this.colCount; j++) {
 if (this.arrs[i][j] == 9) {
 this.$("m_" + i + "_" + j).className = "landMine";
 }
 }
 }
},
//显示所有格子信息
showAll: function () {
 for (var i = 0; i < this.rowCount; i++) {
 for (var j = 0; j < this.colCount; j++) {
 if (this.arrs[i][j] == 9) {
 this.$("m_" + i + "_" + j).className = "landMine";
 } else {
 var ele=this.$("m_" + i + "_" + j);
 if (this.arrs[i][j] != 0)
 ele.innerHTML = this.arrs[i][j];
 ele.className = "normal";
 }
 }
 }
},
//清除显示的格子信息
hideAll: function () {
 for (var i = 0; i < this.rowCount; i++) {
 for (var j = 0; j < this.colCount; j++) {
 var tdCell = this.$("m_" + i + "_" + j);
 tdCell.className = "";
 tdCell.innerHTML = "";
 }
 }
},
//删除格子绑定的事件
disableAll: function () {
 for (var i = 0; i < this.rowCount; i++) {
 for (var j = 0; j < this.colCount; j++) {
 var tdCell = this.$("m_" + i + "_" + j);
 tdCell.onmousedown = null;
 }
 }
},

到现在为止，游戏主要部分已经完成，下面要做的就是添加游戏控制功能，让游戏正常运行起来，主要有以下几步：

给游戏开始按钮添加点击事件，重置游戏参数
游戏开始后开始记时
游戏结束就停止记时并提示

在 jms.js 中添加游戏入口和开始功能：

//在 jms.js 中 JMS.prototype 内加入
//游戏开始
begin: function () {
 this.currentSetpCount = 0;//开始的步数清零
 this.markLandMineCount = 0;
 this.beginTime = new Date();//游戏开始时间
 this.hideAll();
 this.bindCells();
},
//游戏结束
end: function () {
 this.endTime = new Date();//游戏结束时间
 if (this.endCallBack) {//如果有回调函数则调用
 this.endCallBack();
 }
},
//游戏成功
success: function () {
 this.end();
 this.showAll();
 this.disableAll();
 alert("Congratulation！");
},
//游戏失败
failed: function () {
 this.end();
 this.showAll();
 this.disableAll();
 alert("GAME OVER！");
},
//入口
play: function () {
 this.init();
 this.landMine();
 this.calculateNoLandMineCount();
},

在 index.js 中给开始按钮添加事件，开始游戏，并显示游戏时间和剩余地雷个数：

//在index.js的init中，jms = JMS("landmine", rowCount, colCount, minLandMineCount, maxLandMineCount); 之后加入
jms.endCallBack = function () {
 clearInterval(timeHandle);
};
jms.landMineCallBack = function (count) {
 landMineCountElement.innerHTML = count;
};
//为“开始游戏”按钮绑定事件
beginButton.onclick = function () {
 jms.play();//初始化
 //显示地雷个数
 landMineCountElement.innerHTML = jms.landMineCount;
 //开始
 jms.begin();
 //更新花费的时间
 timeHandle = setInterval(function () {
 timeShow.innerHTML = parseInt((new Date() - jms.beginTime) / 1000);
 }, 1000);
};

到此我们的网页版扫雷就完成了。打开 index.html 文件，就可以开始游戏了。