扫雷
1 <!DOCTYPE html> 2 3 <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5 <meta charset="utf-8" /> 6 <style type="text/css"> 7 td { 8 border:1px solid red; 9 color:white; 10 } 11 </style> 12 </head> 13 <body> 14 <script type="text/javascript"> 15 var bones = {};//存放所有的地雷 16 var rowNumber = 10,//格子的行数 17 lineNumber = 10;//格子的列数 18 var boneNumber = 9;//地雷数量 19 var showCount = 0; 20 ///会根据每行与每列所有的格子数来确定雷在什么位置 21 ///每次只会创建一个雷 22 function createBone () { 23 var rowNo = parseInt(Math.random(new Date().getTime()) * rowNumber); 24 var lineNo = parseInt(Math.random(new Date().getTime()) * lineNumber); 25 var tempNo = rowNo * 1000 + lineNo; 26 if (bones.hasOwnProperty(tempNo)) { 27 createBone(); 28 } else { 29 bones[tempNo] = { ln: lineNo, rn: rowNo }; 30 } 31 }; 32 function CreateBones(bn) { 33 bones = {}; 34 for (var i = 0; i < bn; i++) { 35 createBone(); 36 } 37 } 38 39 ///用于初始化格子和雷的数量 40 function init (rn, ln, bn) { 41 rowNumber = parseInt( rn); 42 lineNumber = parseInt(ln); 43 boneNumber = parseInt(bn); 44 }; 45 function create (id) { 46 var dom = O(id); 47 createGame(dom); 48 }; 49 var index = 0; 50 function createGame(dom) { 51 CreateBones(boneNumber); 52 dom.innerHTML = ''; 53 showCount = 0; 54 var table = document.createElement("table"); 55 for (var i = 0; i < rowNumber; i++) { 56 var tr = document.createElement("tr"); 57 for (var j = 0; j < lineNumber; j++) { 58 var td = document.createElement("td"); 59 td.style.backgroundColor='#808080'; 60 td.width = 30; 61 td.height = 30; 62 td.id = "r" + i + 'l' + j; 63 td._rowNumber = i; 64 td._lineNumber = j; 65 td._index = index++; 66 td._boneCount = 0; 67 td._context = 0; 68 tr.appendChild(td); 69 td.onclick = tdClick(td); 70 function tContextFun(dom) { 71 var td = dom; 72 return function () { 73 if (!td._show) { 74 if (td._context == 0) { 75 td._click = td.onclick; 76 td.onclick = null; 77 td.innerText = '标'; 78 td._context = 1; 79 } else if (td._context == 1) { 80 td.innerText = '?'; 81 td.onclick = td._click; 82 td._context = 2; 83 } else { 84 td.innerText = ''; 85 td._context = 0; 86 } 87 } 88 return false; 89 }; 90 } 91 td.oncontextmenu = tContextFun(td); 92 var tempNo = i * 1000 + j; 93 if (bones.hasOwnProperty(tempNo)) { 94 td._isBone = true; 95 } 96 } 97 table.appendChild(tr); 98 } 99 dom.appendChild(table); 100 InitNumbers(); 101 } 102 function InitNumbers() { 103 var tFun = function (id) { 104 var dom = O(id); 105 if (dom != null) { 106 if (dom.hasOwnProperty('_boneCount')) { 107 dom._boneCount++; 108 } else { 109 dom._boneCount = 1; 110 } 111 } 112 }; 113 for (var b in bones) { 114 var currentRow = bones[b]['rn'], 115 currentLine = bones[b]['ln']; 116 tFun("r" + (currentRow + 1) + 'l' + currentLine); 117 tFun("r" + (currentRow) + 'l' + (currentLine + 1)); 118 tFun("r" + (currentRow + 1) + 'l' + (currentLine + 1)); 119 tFun("r" + (currentRow + 1) + 'l' + (currentLine - 1)); 120 tFun("r" + (currentRow - 1) + 'l' + (currentLine + 1)); 121 tFun("r" + (currentRow - 1) + 'l' + (currentLine - 1)); 122 tFun("r" + (currentRow - 1) + 'l' + (currentLine)); 123 tFun("r" + (currentRow) + 'l' + (currentLine - 1)); 124 125 } 126 } 127 function tdClick(dom) { 128 return function () { 129 show(dom); 130 }; 131 } 132 function show(dom) { 133 if (dom==null) { 134 return; 135 } 136 var currentLine = dom._lineNumber; 137 var currentRow = dom._rowNumber; 138 var tFun = function (d) { 139 if (d != null && !d._show) { 140 if (d._isBone) { 141 d.innerText = 'Bone'; 142 BadShow(d.parentElement.parentElement); 143 }else if (d._boneCount ) { 144 d.innerText = d._boneCount; 145 } else { 146 d.innerText = ''; 147 d.style.backgroundColor = 'white'; 148 } 149 d._show = true; 150 } 151 }; 152 tFun(dom); 153 if (++showCount >= (rowNumber * lineNumber - boneNumber)) { 154 alert("You win"); 155 } 156 if (dom._isBone || dom._boneCount) { 157 return; 158 } 159 var d1 = O( 'r' + (currentRow + 1) + 'l' + currentLine), 160 d2 = O( 'r' + currentRow + 'l' + (currentLine + 1)), 161 d3 = O( 'r' + (currentRow - 1) + 'l' + currentLine), 162 d4 = O( 'r' + currentRow + 'l' + (currentLine - 1)); 163 if (!(d1 && d1._show)) { 164 show(d1); 165 } 166 if (!(d2 &&d2._show)) { 167 show(d2); 168 } 169 if (!(d3&& d3._show)) { 170 show(d3); 171 } 172 if (!(d4&&d4._show)) { 173 show(d4); 174 } 175 } 176 function O(id) { 177 return document.getElementById(id); 178 } 179 function Bclick() { 180 var rn = document.getElementById('txtRowCount').value; 181 var ln = document.getElementById('txtLineCount').value; 182 var bn = document.getElementById('txtBoneCount').value; 183 Start(rn, ln, bn, 'tShow'); 184 } 185 function BadShow(tableDom) { 186 var tFun = function (d) { 187 if (d != null && !d._show) { 188 if (d._isBone) { 189 d.innerText = 'Bone'; 190 } else if (d._boneCount) { 191 d.innerText = d._boneCount; 192 } else { 193 d.innerText = ''; 194 d.style.backgroundColor = 'white'; 195 } 196 d._show = true; 197 } 198 }; 199 var trLen = tableDom.childNodes.length; 200 for (var i = 0; i < trLen; i++) { 201 var currentTr = tableDom.childNodes[i]; 202 var tdLen = currentTr.childNodes.length; 203 for (var j = 0; j < tdLen; j++) { 204 var currentTd = currentTr.childNodes[j]; 205 if (!currentTd._show) { 206 tFun(currentTd); 207 } 208 } 209 } 210 alert('Faild'); 211 } 212 function Start(rn,ln,bn,id) { 213 init(rn, ln, bn); 214 create(id || 'tShow'); 215 } 216 window.onload = function () { 217 Start(10, 10, 10); 218 }; 219 </script> 220 221 <div id="boneDiv"> 222 <div> 223 设置：<input type="button" value="Setting" /><br /> 224 <div> 225 <input type="button" value="高级" onclick="Start(33,33,40)" /><br /> 226 <input type="button" value ="中级" onclick="Start(22,22,30)" /><br /> 227 <input type="button" value="初级" onclick="Start(15,15,10)" /><br /> 228 <input type="button" value="弱智" onclick="Start(10,10,1)" /> 229 </div> 230 </div> 231 <div> 232 BoneCount:<input type="text" id="txtBoneCount" /><br /> 233 RowCount :<input type="text" id="txtRowCount" /><br /> 234 LineCount :<input type="text" id="txtLineCount" /><br /> 235 <input type="button" value="自定义" onclick="Bclick()" /> 236 </div> 237 <div id="tShow"> 238 239 </div> 240 </div> 241 <script type="text/javascript"> 242 243 </script> 244 </body> 245 </html>
修改了右键出问题的BUG，谢谢朋友们给指出
