~~~接上篇，游戏的主体框架完成了，接下来我们对游戏中存在的两个主要实体进行分析，一个是雷点类BombObject（节点对象），一个是节点对象对应的图片对象BombImgObject，根据第一篇的介绍，这两个类的对象配合棋盘类实现游戏过程，这里重新解释下这两个类的用处：
一、雷点类（BombObject）：一个承上启下的对象类别。
1. 此类的对象集合（棋盘类中的ObjList数组）组成了游戏棋盘上的每一个节点，节点的类型有空节点（数值为0）、雷点（数值为-1）、非雷非空节点（数值为N，依据节点周围的雷点个数而定）。
2. 每一个对象需要标记其在棋盘中的坐标位置（x、y），同时能够获取其周围8个方位上的节点坐标（没有即为null），这8个方位节点的属性标记为North、NorthEast、East、SouthEast、South、SouthWest、West、NorthWest。
3. 节点对象包含一个与其一一对应的图片对象（ImgObj），展现给玩家的棋盘最终以图片对象列表的形式，图片对象根据当前节点数值属性（DisplayNum）的值显示不同的图片。
类的定义如下：
1 //棋盘节点对象类 2 function BombObject(x, y, num, xNum, yNum) { 3 this.X = x; //节点的x坐标 4 this.Y = y; //节点的y坐标 5 this.ImgObj = new BombImgObject(num, x, y); //节点对应的图片对象 6 this.IsBomb = (num === -1) ? true : false; //节点是否是雷点 7 this.DisplayNum = (this.IsBomb) ? -1 : parseInt(num); //节点对应的数值 8 //北方节点对象 9 this.North = (function() { 10 if ((y - 1) < 0) { 11 return null; 12 } 13 else { 14 return { X: x, Y: y - 1 }; 15 } 16 } ()); 17 //东北方向节点对象 18 this.NorthEast = (function() { 19 if ((y - 1) < 0 || (x + 1) >= xNum) { 20 return null; 21 } 22 else { 23 return { X: x + 1, Y: y - 1 }; 24 } 25 } ()); 26 //东方的节点对象 27 this.East = (function() { 28 if ((x + 1) >= xNum) { 29 return null; 30 } 31 else { 32 return { X: x + 1, Y: y }; 33 } 34 } ()); 35 //东南方的节点对象 36 this.EastSouth = (function() { 37 if ((y + 1) >= yNum || (x + 1) >= xNum) { 38 return null; 39 } 40 else { 41 return { X: x + 1, Y: y + 1 }; 42 } 43 } ()); 44 //南方节点对象 45 this.South = (function() { 46 if ((y + 1) >= yNum) { 47 return null; 48 } 49 else { 50 return { X: x, Y: y + 1 }; 51 } 52 } ()); 53 //西南方节点对象 54 this.SouthWest = (function() { 55 if ((y + 1) >= yNum || (x - 1) < 0) { 56 return null; 57 } 58 else { 59 return { X: x - 1, Y: y + 1 }; 60 } 61 } ()); 62 //西方节点对象 63 this.West = (function() { 64 if ((x - 1) < 0) { 65 return null; 66 } 67 else { 68 return { X: x - 1, Y: y }; 69 } 70 } ()); 71 //西北方节点对象 72 this.WestNorth = (function() { 73 if ((x - 1) < 0 || (y - 1) < 0) { 74 return null; 75 } 76 else { 77 return { X: x - 1, Y: y - 1 }; 78 } 79 } ()); 80 } 81 //判断两个节点对象是否相等 82 BombObject.prototype.Equals = function(that) { 83 if (!(that instanceof BombObject) || that.constructor !== BombObject || that == null) { 84 throw new Error("the add obj is not allowed."); 85 return false; 86 } 87 else if (this.X == that.X && this.Y == that.Y) { 88 return true; 89 } 90 else { 91 return false; 92 } 93 }; 94 //判断当前节点对象的坐标值是否一致 95 BombObject.prototype.EqualsEx = function(x, y) { 96 if (this.X == x && this.Y == y) { 97 return true; 98 } 99 else { 100 return false; 101 } 102 };
可以看到，节点对象类包含了一个图片对象，同时也定义了两个对象比较函数，可由节点类对象直接调用。下面来介绍这个图片对象类：
二、图片对象类（BombImgObject）：定义与节点对象一一对应的图片对象。
1. 此类的对象是节点对象的表现层，节点的有些属性和操作均通过此对象实现，每个节点对象是根据节点数值属性定义的。
2. 图片类对象是展现给用户的表现层，游戏的功能及效果都是通过此层实现的，故需要在图片对象上定义鼠标事件（左键、右键、按下、弹起、左右键一起按、移入、移出等）。
3. 同时在响应鼠标事件的同时，需要触发有些功能监听事件，比如空节点点击事件、数值判断左右键同时按下事件等。
类的定义包括一个Img元素（展现给玩家用）标签对象，对应的棋盘坐标x、y，是否被标记标志flag（左键、右键的响应视为已经标记），类的定义如下：
1 //图片对象集合共用的鼠标类型值，0为无鼠标事件，1为左键，2为右键，3为左右键，4为滚轮 2 BombImgObject.MouseType = 0; 3 //定义各节点的图片对象类（传递图片在棋盘中的数值：0~8、-1，图片在棋盘中的x、y坐标） 4 function BombImgObject(altValue, xPos, yPos) { 5 //保存this指针，防止函数嵌套时指代不明确 6 var img = this; 7 8 img.ImgObj = null; //图片实体对象 9 img.x = xPos; //图片在棋盘中的x坐标 10 img.y = yPos; //图片在棋盘中的y坐标 11 if (document.createElement) { 12 img.ImgObj = document.createElement("img"); 13 } 14 if (img.ImgObj) { 15 img.ImgObj.lang = altValue; //保存当前图片对象对应的节点数值，0~8、-1 16 img.ImgObj.src = "img/small/normal.bmp"; //赋值默认图片路径 17 img.ImgObj.flag = false; //标记图片处理标示，如果图片处理过（标记、显示等）则不再响应其他事件 18 img.ImgObj.id = "img" + img.x + "-" + img.y; //根据图片对应棋盘中的坐标定义图片对象的id属性 19 20 //定义图片对象的鼠标按下事件 21 img.ImgObj.onmousedown = function() { 22 //如果没有触发雷点 23 if (BombObjectList.fireFlag !== 2) { 24 //判断是何种鼠标事件 25 switch (window.event.button) { 26 case 1: 27 //左键 28 if (this.src.indexOf("normal") >= 0) { 29 this.src = "img/small/kong.bmp"; 30 } 31 //标记当前的鼠标操作类型 32 BombImgObject.MouseType = 1; 33 //图片鼠标按下事件，标记游戏开始 34 BombObjectList.fireFlag = 1; 35 break; 36 case 2: 37 //右键 38 if (this.src.indexOf("normal") >= 0) { 39 //标记图片已处理（被标记） 40 this.flag = true; 41 this.src = "img/small/flag.bmp"; 42 BombObjectList.MarkedNum++; 43 } 44 else if (this.src.indexOf("flag") >= 0) { 45 //取消图片已处理标记（还原默认） 46 this.flag = false; 47 this.src = "img/small/normal.bmp"; 48 BombObjectList.MarkedNum--; 49 } 50 //标记当前的鼠标操作类型 51 BombImgObject.MouseType = 2; 52 break; 53 case 3: 54 //左右键一起 55 BombImgObject.MouseType = 3; 56 //以该点为中心,在其8个方向上进行节点判断，如果已经都展开，则什么也不做，如果有未展开的节点，而这些节点里面有雷点，则不展开，反之将递归展开所有 57 BombObjectList.DC_X = img.x; 58 BombObjectList.DC_Y = img.y; 59 break; 60 case 4: 61 //滑轮 62 BombImgObject.MouseType = 4; 63 break; 64 } 65 } 66 } 67 //定义图片对象的右键处理程序，空返回 68 img.ImgObj.oncontextmenu = function() { 69 if (BombObjectList.fireFlag !== 2) { 70 return false; 71 } 72 } 73 //定义图片对象的鼠标提起事件处理程序 74 img.ImgObj.onmouseup = function() { 75 //如果没有触发雷点 76 if (BombObjectList.fireFlag !== 2) { 77 if (this.src.indexOf("flag") >= 0 || this.src.indexOf("normal") >= 0) { 78 //如果图片被标记处理或者未处理过，则直接返回 79 return; 80 } 81 else { 82 //如果不是右键事件，则进入处理 83 if (BombImgObject.MouseType !== 2) { 84 if (BombImgObject.MouseType !== 1) { 85 //双击时，不进行接下来的操作 86 BombImgObject.MouseType = 0; 87 return; 88 } 89 //标记图片对象已被处理过 90 this.flag = true; 91 //根据图片数值显示对应的图片信息 92 var caseValue = parseInt(this.lang); 93 switch (caseValue) { 94 case -1: //雷点 95 { 96 this.src = "img/small/fire.bmp"; 97 //触雷，更行触发标记，以便定时器捕获 98 BombObjectList.fireFlag = 2; 99 break; 100 } 101 case 1: //该节点旁边有一个雷点，标记数值1 102 { 103 this.src = "img/small/1.bmp"; 104 break; 105 } 106 case 2: //该节点旁边有两个雷点，标记数值2 107 { 108 this.src = "img/small/2.bmp"; 109 break; 110 } 111 case 3: //该节点旁边有三个雷点，标记数值3 112 { 113 this.src = "img/small/3.bmp"; 114 break; 115 } 116 case 4: //该节点旁边有四个雷点，标记数值4 117 { 118 this.src = "img/small/4.bmp"; 119 break; 120 } 121 case 5: //该节点旁边有五个雷点，标记数值5 122 { 123 this.src = "img/small/5.bmp"; 124 break; 125 } 126 case 6: //该节点旁边有六个雷点，标记数值6 127 { 128 this.src = "img/small/6.bmp"; 129 break; 130 } 131 case 7: //该节点旁边有七个雷点，标记数值7 132 { 133 this.src = "img/small/7.bmp"; 134 break; 135 } 136 case 8: //该节点旁边有八个雷点，标记数值8 137 { 138 this.src = "img/small/8.bmp"; 139 break; 140 } 141 case 0: 142 { 143 //空节点，需要遍历相邻的所有空节点，目前采用递归方法 144 this.src = "img/small/kong.bmp"; 145 //定义当前空节点的坐标未知，以便定时器捕获对该位置相连的所有节点进行递归处理，显示递归中发现的所有空节点 146 BombObjectList.fire_X = img.x; 147 BombObjectList.fire_Y = img.y; 148 break; 149 } 150 } 151 } 152 } 153 } 154 //鼠标提起时，清空鼠标操作状态。 155 BombImgObject.MouseType = 0; 156 } 157 //禁止图片对象的鼠标拖动事件 158 img.ImgObj.ondrag = function() { 159 return false; 160 } 161 //定义图片对象的鼠标移入事件 162 img.ImgObj.onmouseout = function() { 163 if (BombObjectList.fireFlag!==2 && !this.flag && BombObjectList.IsMouseDown && this.src.indexOf("kong") >= 0 && BombImgObject.MouseType != 2) { 164 this.src = "img/small/normal.bmp"; 165 } 166 } 167 img.ImgObj.onmouseover = function() { 168 if (BombObjectList.fireFlag !== 2 && !this.flag && BombObjectList.IsMouseDown && this.src.indexOf("normal") >= 0 && BombImgObject.MouseType != 2) { 169 this.src = "img/small/kong.bmp"; 170 } 171 } 172 } 173 //根据x、y坐标显示该图片对象的图像 174 img.ShowNumImg = function(tag) { 175 if (!img.ImgObj.flag) { 176 if (arguments.length === 0) { 177 if (parseInt(img.ImgObj.lang) == 0) { 178 //为空时 179 document.getElementById("img" + img.x + "-" + img.y).src = "img/small/kong.bmp"; 180 } 181 else { 182 //数值时 183 document.getElementById("img" + img.x + "-" + img.y).src = "img/small/" + img.ImgObj.lang + ".bmp"; 184 } 185 //标记该图像已经处理过，不再响应后续的所有操作。 186 img.ImgObj.flag = true; 187 } 188 else { 189 //双击时 190 if (tag === 1) { 191 //按下 192 document.getElementById("img" + img.x + "-" + img.y).src = "img/small/kong.bmp"; 193 } 194 else { 195 //弹起 196 document.getElementById("img" + img.x + "-" + img.y).src = "img/small/normal.bmp"; 197 } 198 } 199 } 200 } 201 202 //返回节点的图像对象 203 return img; 204 } 205 //设置图片对象的数值 206 BombImgObject.prototype.SetImgNum = function(num) { 207 if (this !== null) { 208 this.ImgObj.lang = num; 209 } 210 }
由于游戏需要，从空间复杂度上考虑，需要定义两个成员函数，一个是图片节点的动态展开函数，标记为ShowNumImg；另一个是动态改变图片对象对应的数值的函数，标记为SetImgNum。
~~代码中灰色底纹部分是为了响应棋盘类监听事件所写的，在javascript中，类与类之间的相互作用没有VC++中的消息机制，这里在一个类中采用定时器监听（读）变量、另一个类中根据触发点设置变量的方法（写）的方法，技术有限，欢迎大家指导学习！！
三、游戏控制类
至此，游戏功能部分全部完成，不过就展现给玩家的界面来说，还比较单调，仅仅一个期盼而已，为了完善游戏的辅助功能，增添游戏的趣味性，还需要完成以下一系列工作：
1. 需要一个计时器，每秒钟刷新一次，统计当前游戏用时，然后反馈给玩家。
2. 需要一个计数器，显示当前游戏剩余雷点水，一旦用户标记出一个雷点，计数器减1，玩家误标记而计数器为零且游戏未结束时，需要出现负数提示。
3. 游戏可以重新开始，模仿windows下的扫雷，设置一个重新开始按钮，游戏重新开始需要清除当前过程的所有临时变量，以便为接下来新的游戏过程预留空间。
4. 剩余雷点数不多时，需要自动识别剩下的节点是否全是雷点，如果是，则游戏自动成功结束，以提高游戏趣味性。
鉴于上述分析，我们需要定义一个游戏控制类，标记为PlayBombGame，对游戏的整个流程和状态进行控制和监听，对客户机环境进行兼容性判断，为整个游戏检测提供一个正常的运行环境，类的定义如下：
1 //玩家操作接口类的定义 2 function PlayBombGame(TimerId, BombNumId, ContentId, TryAgainId, width, height, BombNum) { 3 //预留退路 4 if (ContentId === "" || BombNumId === "" || TryAgainId === "" || TimerId === "") return false; 5 if (!document.getElementById) return false; 6 if (!document.createDocumentFragment) return false; 7 if (!document.createElement) return false; 8 if (!document.getElementById(ContentId)) return false; 9 if (!document.getElementById(BombNumId)) return false; 10 if (!document.getElementById(TryAgainId)) return false; 11 if (!document.getElementById(TimerId)) return false; 12 13 //保存当前对象，以防函数嵌套时指代不清 14 var PBG = this; 15 16 PBG.GameInfo = new BombObjectList("ContentSection", width, height, BombNum); //游戏操作对象 17 PBG.TimerID = TimerId; //计时器元素id 18 PBG.BombNumId = BombNumId; //雷点计数器元素id 19 PBG.TryAgainId = TryAgainId; //重置按钮id 20 PBG.CurSecond = 0; //当前用户用时（s） 21 PBG.CurBombNum = BombNum; //当前剩余雷点个数 22 PBG.GameState = -1; //当前的游戏状态，-1为结束（未开始），1为进行中 23 24 var timer = null; 25 var ListenTimer = null; 26 //开始初始化游戏 27 PBG.play = function() { 28 if (PBG.GameInfo != null || PBG.GameInfo != undefined) { 29 PBG.GameInfo.Initial().Display(); 30 } 31 } 32 //重新初始化游戏 33 PBG.playAgain = function() { 34 if (PBG.GameInfo != null || PBG.GameInfo != undefined) { 35 PBG.GameInfo.TryAgain(); 36 BombObjectList.fireFlag = 0; 37 BombObjectList.MarkedNum = 0; 38 //关闭计时器 39 PBG.CurSecond = 0; 40 PBG.CurBombNum = BombNum; 41 PBG.GameState = -1; 42 //重新开始监测 43 clearInterval(ListenTimer); 44 clearInterval(timer); 45 timer = null; 46 ListenTimer = null; 47 PBG.TimerControl(); 48 } 49 } 50 //游戏结束时的处理 51 PBG.GameOver = function(tag) { 52 //标记游戏状态结束 53 PBG.GameState = -1; 54 //结束时处理 55 if (arguments.length !== 0) { 56 //成功 57 PBG.GameInfo.GameOver(tag); 58 document.getElementById(PBG.TryAgainId).src = "img/face/over.bmp"; 59 } 60 else { 61 //失败 62 PBG.GameInfo.GameOver(); 63 document.getElementById(PBG.TryAgainId).src = "img/face/fail.bmp"; 64 } 65 //关闭定时器 66 clearInterval(ListenTimer); 67 clearInterval(timer); 68 timer = null; 69 ListenTimer = null; 70 } 71 //监测游戏状态 72 PBG.TimerControl = function() { 73 if (ListenTimer === null || ListenTimer === undefined) { 74 ListenTimer = setInterval(function() { 75 if (BombObjectList.fireFlag === 2) { 76 PBG.GameOver(); 77 } 78 else if (BombObjectList.fireFlag === 1) { 79 //开启计时器 80 if (timer == null) { 81 //标记游戏开始 82 PBG.GameState = 1; 83 timer = setInterval(function() { 84 PBG.CurSecond++; 85 document.getElementById(PBG.TimerID).innerHTML = GetCount(PBG.CurSecond); 86 if (PBG.CurSecond === 999) { 87 //最长时间999秒，超出即结束 88 PBG.GameOver(); 89 } 90 }, 1000); 91 //开启对空节点的监听 92 PBG.GameInfo.ListenKong(); 93 } 94 } 95 else { 96 //未开始状态下 97 if (PBG.GameState === -1) { 98 //如果在进行中点击了重新开始 99 document.getElementById(PBG.TimerID).innerHTML = GetCount(PBG.CurSecond); 100 clearInterval(timer); 101 timer = null; 102 } 103 } 104 //监听剩余雷点 105 if (BombObjectList.fireFlag !== 2) { 106 //监听玩家标记出的个数来展现当前剩余的雷的个数 107 PBG.CurBombNum = BombNum - BombObjectList.MarkedNum; 108 document.getElementById(PBG.BombNumId).innerHTML = GetCount(PBG.CurBombNum); 109 if ($("#" + ContentId + " > IMG").length > 0) { 110 //如果剩余雷点数为0，且棋盘上剩余未标记节点个数为0，则游戏结束，全部标记正确，游戏成功 111 if (PBG.CurBombNum === 0 && $("#" + ContentId + " > img[flag='false']").length === 0) { 112 PBG.GameOver(1); 113 BombObjectList.fireFlag = 2; 114 } 115 //剩余未标记的都是雷点，则游戏结束，程序自动标记所有的雷点，游戏成功 116 if (PBG.CurBombNum > 0 && $("#" + ContentId + " > img[flag='false']").not("lang='-1'").length === 0) { 117 PBG.GameOver(2); 118 BombObjectList.fireFlag = 2; 119 } 120 } 121 } 122 }, 50); 123 } 124 } 125 //启动检测 126 PBG.TimerControl(); 127 //根据数值获取图片数值展现对象 128 function GetCount(num) { 129 var numArr = num.toString().split(""); 130 for (var i = 0; i < numArr.length; i++) { 131 numArr[i] = (numArr[i] == "-") ? "line" : numArr[i]; 132 } 133 if (numArr.length === 1) { 134 return "<img src="img/num/0.bmp" alt="bomb" /><img src="img/num/0.bmp" alt="bomb" /><img src="img/num/" + numArr[0] + ".bmp" alt="bomb" />"; 135 } 136 else if (numArr.length === 2) { 137 return "<img src="img/num/0.bmp" alt="bomb" /><img src="img/num/" + numArr[0] + ".bmp" alt="bomb" /><img src="img/num/" + numArr[1] + ".bmp" alt="bomb" />"; 138 } 139 else { 140 return "<img src="img/num/" + numArr[0] + ".bmp" alt="bomb" /><img src="img/num/" + numArr[1] + ".bmp" alt="bomb" /><img src="img/num/" + numArr[2] + ".bmp" alt="bomb" />"; 141 } 142 } 143 //对文档的全局事件进行定义 144 AddEvent(document, "mousedown", function(e) { 145 BombObjectList.IsMouseDown = true; 146 //冒泡捕获图片对象的按下事件 147 var event = window.event || e; 148 var targetE = (event.srcElement) ? event.srcElement : event.target; 149 if (BombObjectList.fireFlag !== 2 && targetE.getAttribute("flag") !== null && BombImgObject.MouseType===1) { 150 document.getElementById(PBG.TryAgainId).src = "img/face/down.bmp"; 151 } 152 }); 153 AddEvent(document, "mouseup", function(e) { 154 BombObjectList.IsMouseDown = false; 155 //冒泡捕获图片对象的按下事件 156 var event = window.event || e; 157 var targetE = (event.srcElement) ? event.srcElement : event.target; 158 if (BombObjectList.fireFlag !== 2 && targetE.getAttribute("flag") != null) { 159 document.getElementById(PBG.TryAgainId).src = "img/face/up.bmp"; 160 } 161 }); 162 AddEvent(document, "contextmenu", function() { return false; }); 163 AddEvent(document.getElementById(PBG.TryAgainId), "click", function() { PBG.playAgain(); }); 164 AddEvent(document.getElementById(PBG.TryAgainId), "mousedown", function() { this.src = "img/face/0.bmp"; }); 165 AddEvent(document.getElementById(PBG.TryAgainId), "mouseup", function() { this.src = "img/face/up.bmp"; }); 166 167 function AddEvent(target, eventType, callback) { 168 if (target.addEventListener) { 169 target.addEventListener(eventType, callback, false); 170 } 171 else { 172 target.attachEvent("on" + eventType, function(event) { return callback.call(target, event); }); 173 } 174 }; 175 }
完成上面类的定义，整个游戏就完成了，展现给玩家的是篇章一所示的效果图，嗯，界面比较粗糙哈~~
题外：
经常来博客园看技术大牛的分享，不知不觉就3年过去了，就在月初，突然发现自己博客园的年龄都3年临三个月了，说来惭愧，自己的博客园却空空如野，什么都没有，作为一个程序猿，热爱编程的同时突然很强烈想着在这个职业上留下点什么，说做就做，于是就有了上述四个篇章，游戏虽小，但也要五脏俱全，玩和做真的不一样。
想是一回事，做是一回事，写出来又是一回事，个人觉得这三步的难度是递进关系的，哈哈，个人鄙见。此章节的完成，突然发现兴趣是最好的推动力，工作之余，做自己想做的事，也对之前一段时间以来所学习的内容进行一个小结，美事一桩，第一次写自己的博客，这只是个开端，接下来我将自己学习所得、所想、所做一一与大家分享，因为分享，所以快乐~~
~~Little Dream，在与大家互相交流中成长~~