初学JS，写了个扫雷,聊以纪念
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=gbk"><title>Untitled Document</title><script type="text/javascript"> var bgObj; function showWin(strInfo){ var sWidth,sHeight; sWidth=screen.width; sHeight=screen.height; bgObj=document.createElement("div"); bgObj.setAttribute( "id", "bgDiv"); bgObj.style.position="absolute"; bgObj.style.top="0"; bgObj.style.background="#cccccc"; bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75)"; bgObj.style.opacity="0.6"; bgObj.style.left="0"; bgObj.style.width=screen.width+"px"; bgObj.style.height=screen.height+"px"; document.body.appendChild(bgObj); //main.style.display='block';main.style.visibility = "visible";main.style.zIndex = "50"; main.style.width="100%";document.getElementById("warnInfo").innerHTML="<h2>"+strInfo+"</h2>"; } function closeWin(){ init(); document.body.removeChild(bgObj); main.style.visibility = "hidden"; }</script><style type="text/css">/*初始状态*/.f0{background-color:#425ccd}/*鼠标悬停状态*/.f1{background-color:#609aff}/*扫雷状态*/.f2{background-color:#cbd8ea}/*地雷状态*/.f3{background-color:#cbd8ea;background-image:url("mine2.png")}/*扫出的地雷*/.f4{background-color:#cbd8ea;background-image:url("mine.png")}td {width:18px;}tr {height:18px;} font{font-weight:bolder;}.n1{color:#4050be}.n2{color:#1e6902}.n3{color:#b05964}.n4{color:#010184}.n5{color:#8c2d34}.n6{color:#ff0080}.n7{color:#ff8000}.n8{color:#00ffff}#main{position:absolute;z-index:50; visibility:hidden}</style> <script type='text/javascript'>//配置信息 宽度 高度 地雷数量（默认为 9 9 10）var setting = {width:9,height:9,mine:10};var minePostionArray = [];var mineWarnArray=[]; //警告信息数组,记忆生成var notMineNum; //非雷区的数量var realnotMineNum;function $(id){return document.getElementById(id);}Array.prototype.has= function(num){//可以优化查询算法var flag =false;for(var i=0;i<minePostionArray.length;i++){if(num==minePostionArray[i]){flag = true;break;}}return flag;}function init(){setting = {width:9,height:9,mine:10}; minePostionArray = []; mineWarnArray=[];initSetting();initMainArea(setting.width,setting.height,setting.mine);initMine(setting.width,setting.height,setting.mine);}//初始化配置function initSetting(){//获得选中的难度var level = document.FrmSetting.level;var checkLevel = 0;for(var i =0 ; i<4 ; i++){if(level[i].checked==true){checkLevel = i;break;}}//根据难度配置settingswitch(checkLevel){case 0:setting = {width:9,height:9,mine:10};break;case 1:setting = {width:16,height:16,mine:40}; break;case 2:setting = {width:16,height:30,mine:99}; break;case 3:setting = {width:$('width').value,height:$('height').value,mine:$('mine').value};break;}notMineNum=0;realnotMineNum = setting.width*setting.height-setting.mine;}//初始化扫雷游戏主区域界面function initMainArea(width,height,mine){var innerHtml = ["<table cellpadding='0' cellspacing='0' border='1' bordercolor='black'>"];for(var i=0;i<height;i++){innerHtml.push("<tr>");for(var j=0;j<width;j++){var id= i*width+j;innerHtml.push("<td class='f0' id='"+id+"' onmouseover='mouseover(this);' onmouseout='mouseout(this);' onclick='mouseclick(this);'> </td>");}innerHtml.push("</tr>");}innerHtml.push("</table>");var obj = document.getElementById("MainArea");obj.innerHTML = innerHtml.join("");}//初始化地雷function initMine(width,height,mine){var basicArray = [];var allBlank = width*height;for(var m=0;m<allBlank;m++){basicArray[m]=m;mineWarnArray[m]=-1;}for(var n=0;n<mine;n++){var randomNum = Math.floor(Math.random()*(basicArray.length));minePostionArray.push(basicArray[randomNum]);basicArray.splice(randomNum,1);}minePostionArray.sort(function(a,b){return a-b});//alert(minePostionArray);}function mouseover(obj){if(obj.className=="f0"){obj.className="f1";}}function mouseout(obj){if(obj.className=="f1"){obj.className="f0";}}function mouseclick(obj){if(obj.className=="f1"){var index = obj.id;if(minePostionArray.has(index)){//该位置有地雷for(var i = 0 ;i<minePostionArray.length;i++){$(minePostionArray[i]).className="f4";}obj.className="f3";showWin("技术还不到家哈。。。");}else{//该位置无雷obj.className="f2";showNum(index);}}}function showNum(index){notMineNum++;mineWarnArray[index]=-2;var x = index%setting.width;var y = Math.floor(index/setting.width);//alert(index+" "+x+" "+y);var count = 0 ;point1:for(var i = x-1 ; i<=x+1 ; i++){for(var j= y-1 ; j<=y+1 ;j++){if(i<0){continue point1;}if(i>setting.width-1){break point1;}if(0 <= j && j <= setting.height-1){var postion = j*setting.width+i;//alert(postion+" "+i+" "+j);if (mineWarnArray[postion] == -1) {if (minePostionArray.has(postion)) {count++;}else{mineWarnArray[postion] =-2;}}}}}$(index).innerHTML = (count==0)?" ":"<font class='n"+count+"'>"+count+"</font>";$(index).className="f2";mineWarnArray[index] = count;if(notMineNum==realnotMineNum){for(var i = 0 ;i<minePostionArray.length;i++){$(minePostionArray[i]).className="f4";}showWin("恭喜您过关了。。。。");} if(count == 0){point2:for (var i = x - 1; i <= x + 1; i++) { for (var j = y - 1; j <= y + 1; j++) {if(i<0){continue point2;}if(i>setting.width-1){break point2;} if (0 <= j && j <= setting.height-1) { var num =j*setting.width+i; //alert(num);if(mineWarnArray[num]<0){showNum(num);} } } }/*index = index-0;if(x>0){if(mineWarnArray[index-1]<0){showNum(index-1);}}if(x<setting.width-1){if(mineWarnArray[index+1]<0){showNum(index+1);}}if(y>0){if(mineWarnArray[index-setting.width]<0){showNum(index-setting.width);}}if(y<setting.height-1){if(mineWarnArray[index+setting.width]<0){showNum(index+setting.width);}}if (x > 0 && y > 0) {if (mineWarnArray[index - setting.width - 1] < 0) {countRound(index - setting.width - 1);}}if(x > 0 && y<setting.height-1){if(mineWarnArray[index-setting.width+1]<0){countRound(index-setting.width+1);}}if(x<setting.width-1 && y>0 ){if(mineWarnArray[index+setting.width-1]<0){countRound(index+setting.width-1);}}if(x<setting.width-1 && y<setting.height-1){if(mineWarnArray[index+setting.width+1]<0){countRound(index+setting.width+1);}}*/ }}</script></head><body bgcolor="#c8c8c8"><form name="FrmSetting"><font size="4">难度</font> <div><input type="radio" name="level" value="0" checked="checked"><b>初级</b>（10个雷，9*9平铺网格）<br/><input type="radio" name="level" value="1"><b>中级</b>（40个雷，16*16平铺网格）<br/><input type="radio" name="level" value="2"><b>高级</b>（99个雷，16*30平铺网格）<br/><input type="radio" name="level" value="3"><b>自定义</b> 高度(9-24)(H)<input type="text" id="height" value="9" size="2"> 宽度(9-30)(W)<input type="text" id="width" value="9" size="2"> 雷数(10-668)(M)<input type="text" id="mine" value="10" size="3"></div><input type="button" value="开始游戏" onclick="init();"></form> <div id="main" align="center"> <span id="warnInfo"></span> <input type="button" value="再玩一盘" onclick="closeWin();"/> </div><div align="center" id="MainArea"></div></body></html><!--逻辑层 -- 有雷 无雷表示层-- 初始状态（0） 点击状态 （1） 扫雷状态（2） 引爆状态（3）雷的全部数量-->