<style>  ul{padding:0;list-style:none;}  #mine{overflow:hidden;width:30px;height:30px;border:1px solid #966;}  #mine li{float:left;width:30px;height:30px;line-height:30px;text-align:center;font-size:14px;color:#222;}  #mine .mine_01{background:url(mine.gif) no-repeat;}  #mine .mine_02{background:url(mine.gif) -30px 0 no-repeat;}  #mine .mine_03{background:url(mine.gif) -60px 0 no-repeat;}  #mine .mine_04{background:url(mine.gif) -90px 0 no-repeat;}  #mine .mine_05{background:url(mine.gif) -120px 0 no-repeat;}  #mine .mine_06{background:url(mine.gif) -150px 0 no-repeat;}  #mine .mine_07{background:url(mine.gif) -180px 0 no-repeat;}  #count{font-size:12px;}  #time{color:#900;font-weight:bold;}</style> <select id="wh"> <option value="8*10">8*10</option> <option value="10*10">10*10</option> <option value="12*12">12*12</option> </select> <button id='ready'>重新開始</button><div id="count"> 計(jì)時(shí): <span id="time">0</span></div><ul id="mine"></ul>ie6+ ff oprea 谷歌opera 早期版本 默認(rèn)不支持document.oncontextmenu事件 沒有找到好的替代方法<script>var $ = function(id){return document.getElementById(id)};window.onload=function ready(){  var V=$('wh').value.split('*')  setMineField(Number(V[0]),Number(V[1]));    $('wh').onchange=$('ready').onclick=function(){    V=$('wh').value.split('*')    setMineField(Number(V[0]),Number(V[1]))  }}//---------------------------------------------------雷區(qū)var mineField={  _mineW:30,   //每一個(gè)雷的寬度 必須和樣式同步  _mineH:30,  _mineFieldBlock:$('mine'),  _mineFieldEle:$('mine').getElementsByTagName('li'),  _time:$('time'),    status:0,   //雷區(qū)狀態(tài) 0還沒開始 1開始了 已經(jīng)在計(jì)時(shí)了 2游戲結(jié)束了    mineNum:0,   //雷數(shù)  clearPlace:0, //統(tǒng)計(jì)掃除的格子;  x:0,      //列  y:0,      //行  density:0.2,  //雷的密度 雷區(qū)密度不宜超過0.5 在有些尺寸的雷區(qū)下 過高的設(shè)置 無法生成mineMap數(shù)組  mineMap:[],  //雷區(qū)的二維圖,0 ： 不是雷  -1 ： 雷  time:-1,    //計(jì)時(shí) s  debug:false   //調(diào)試模式}//mineField object endfunction timedCount(){  if(mineField.status!=1){return false}  mineField.time++;  mineField._time.innerHTML=mineField.time;  setTimeout("timedCount()",1000);}//--------------------------------------對雷的狀態(tài)設(shè)置function setThisMine(str,index){  var allMine=mineField._mineFieldEle;  //設(shè)置雷是否插旗  if(str=='setOn'){    var thisMine=allMine[index];    thisMine.on=thisMine.on<2?thisMine.on+1:0;    if(thisMine.on==1){thisMine.className='mine_03';}//插旗    else if(thisMine.on==2){thisMine.className='mine_04'}//取消插旗    else if(thisMine.on==0){thisMine.className='mine_01'}//取消插旗    return false;  }  //顯示方格  if(str=='show'){    if(Object.prototype.toString.call(index) === '[object Array]'){//顯示一大片      mineField.clearPlace=mineField.clearPlace+index.length;      for(var i=0;i<index.length;i++){        var thisMine=allMine[index[i]];        thisMine.innerHTML=mineField.mineMap[thisMine.index];        thisMine.className='mine_02';        thisMine.on=3;      }    }    else{//顯示單個(gè)非雷區(qū)域      mineField.clearPlace++;      allMine[index].on=3;      allMine[index].innerHTML=mineField.mineMap[index];      allMine[index].className='mine_02';    }    if(mineField.clearPlace==mineField.x*mineField.y-mineField.mineNum){//恭喜你      alert('恭喜你');      for(var i=0;i<allMine.length;i++){        if(mineField.mineMap[allMine[i].index]==-1){          allMine[i].className='mine_07';        }      }      mineField.status=2;      return false;    }  }  //顯示全部雷  if(str=='peng'){      for(var i=0;i<allMine.length;i++){        if(mineField.mineMap[allMine[i].index]==-1){          allMine[i].className=i==index?'mine_06':'mine_05';        }      }      mineField.status=2;  }}//-----------------------------------------------設(shè)置行數(shù) 和 列數(shù)function setMineField(a,b){    var thisMineFiele=mineField._mineFieldBlock;    DivBox=document.createElement("div"),    num=a*b,k=0;    thisMineFiele.innerHTML='';    //雷區(qū)參數(shù)調(diào)整    mineField.x=a;//有幾列    mineField.y=b;//有幾行    mineField.mineNum=Math.floor(a*b*mineField.density);    mineField.status=0;    mineField.time=-1;    mineField.clearPlace=0;    mineField.mineMap.length=0;    mineField._time.innerHTML=0;            //生成雷區(qū)地圖    setMineMap();    //生成雷區(qū)(創(chuàng)建li)    while(k<num){    var newLi=document.createElement("li");    if(mineField.debug) newLi.innerHTML=mineField.mineMap[k];//作弊    newLi.className='mine_01';    DivBox.appendChild(newLi);    k++;    }    thisMineFiele.style.height=mineField._mineW*b+'px';    thisMineFiele.style.width=mineField._mineH*a+'px';    thisMineFiele.innerHTML=DivBox.innerHTML;    DivBox=null;    setEvent();//事件}//-----------------------------------生成雷區(qū)地圖function setMineMap(){    var num=mineField.x*mineField.y,      mineNum=mineField.mineNum,      Interval=Math.floor(num/mineNum);    for(var i=0;i<num;i++){      if(i%Interval==0&&i<mineNum*Interval){mineField.mineMap[i]=-1;}else{mineField.mineMap[i]=0;}//雷等距離分布與數(shù)組中    }    mineField.mineMap.sort(function(){ return 0.5 - Math.random()})//打亂數(shù)組        //判斷方格周圍是否都是雷 如果是的話 要重新生成雷區(qū) 從而避免成片雷區(qū)的存在    var br=0,//所在行      x=mineField.x,      L_T,T,R_T,L,R,L_B,B,R_B;    for(var i=0;i<num;i++){      br=Math.ceil((i+1)/x);      L_T = i-x-1;      T  = i-x;      R_T = i-x+1;      L  = i-1;      R  = i+1;      L_B = i+x-1;      B  = i+x;      R_B = i+x+1;       //坐上角 如果在雷區(qū) 并且是在上一行 并且他不是雷 就進(jìn)行下一方格檢測       if(L_T>=0&&Math.ceil((L_T+1)/x)==br-1&&mineField.mineMap[L_T]==0){continue}       if(T >=0&&Math.ceil((T +1)/x)==br-1&&mineField.mineMap[T ]==0){continue}       if(R_T>=0&&Math.ceil((R_T+1)/x)==br-1&&mineField.mineMap[R_T]==0){continue}              if(L>=0 &&Math.ceil((L+1)/x)==br&&mineField.mineMap[L]==0){continue}       if(R<num&&Math.ceil((R+1)/x)==br&&mineField.mineMap[R]==0){continue}              if(L_B<num&&Math.ceil((L_B+1)/x)==br+1&&mineField.mineMap[L_B]==0){continue}       if(B <num&&Math.ceil((B +1)/x)==br+1&&mineField.mineMap[B ]==0){continue}       if(R_B<num&&Math.ceil((R_B+1)/x)==br+1&&mineField.mineMap[R_B]==0){continue}              setMineMap();       return false    }    //統(tǒng)計(jì)非雷方格周圍的雷數(shù)    for(i=0;i<num;i++){       if(mineField.mineMap[i]==-1){continue}       var thisMineNum=0       br=Math.ceil((i+1)/x);       L_T = i-x-1;       T  = i-x;       R_T = i-x+1;       L  = i-1;       R  = i+1;       L_B = i+x-1;       B  = i+x;       R_B = i+x+1;              if(L_T>=0&&Math.ceil((L_T+1)/x)==br-1&&mineField.mineMap[L_T]==-1){thisMineNum++;}       if(T >=0&&Math.ceil((T +1)/x)==br-1&&mineField.mineMap[T ]==-1){thisMineNum++;}       if(R_T>=0&&Math.ceil((R_T+1)/x)==br-1&&mineField.mineMap[R_T]==-1){thisMineNum++;}              if(L>=0 &&Math.ceil((L+1)/x)==br&&mineField.mineMap[L]==-1){thisMineNum++;}       if(R<num&&Math.ceil((R+1)/x)==br&&mineField.mineMap[R]==-1){thisMineNum++;}              if(L_B<num&&Math.ceil((L_B+1)/x)==br+1&&mineField.mineMap[L_B]==-1){thisMineNum++;}       if(B <num&&Math.ceil((B +1)/x)==br+1&&mineField.mineMap[B ]==-1){thisMineNum++;}       if(R_B<num&&Math.ceil((R_B+1)/x)==br+1&&mineField.mineMap[R_B]==-1){thisMineNum++;}              mineField.mineMap[i]=thisMineNum;    }}//----------------------------------雷區(qū)事件function setEvent(){    var thisMineFiele=mineField._mineFieldBlock,      allMine=mineField._mineFieldEle,      iMax=mineField.x*mineField.y;    for(var i=0;i<iMax;i++){      allMine[i].index=i;      allMine[i].on=0;//0為默認(rèn) 1為插旗 2為問號 3為顯示    }    thisMineFiele.onmouseup=function(e){      if(mineField.status==2){return false;}      if(mineField.status==0){mineField.status=1;timedCount();}      var e=e||window.event,        thisObj=e.target||e.srcElement;      if(thisObj.nodeName=='UL'||thisObj.on==3){return false;}            var Btn=getButton(e);      if(Btn== 0){//左鍵        if(thisObj.on==1){return false;}//插旗子了 就不能點(diǎn)了        if(mineField.mineMap[thisObj.index]==-1){//點(diǎn)雷了          setThisMine('peng',thisObj.index);        }else if(mineField.mineMap[thisObj.index]==0){//點(diǎn)到空地了 打開一大片          //alert('你運(yùn)氣真好')          var allShowMine=minesShow(thisObj.index);          setThisMine('show',allShowMine)        }else{//顯示一個(gè)格子          setThisMine('show',thisObj.index)        }      }      if(Btn== 2){//右鍵       setThisMine('setOn',thisObj.index);      }    }}//--------------------------------按到空格時(shí) 顯示一大片function minesShow(I){      var allMine=mineField._mineFieldEle,        allShowMine=[I];//保存要顯示的雷的下標(biāo)            allMine[I].on=3;            see(I);//查詢下標(biāo)為I的周圍的方格      function see(allI){        var _allI=[];        if(Object.prototype.toString.call(allI) === '[object Array]'){          for(var i=0;i<allI.length;i++){f(allI[i])}        }        else{f(allI)}        function f(thisI){          var text,          x=mineField.x,          br,          num=x*mineField.y,          L_T,T,R_T,L,R,L_B,B,R_B;                  text='_'+allShowMine.join('_')+'_';//用來判斷下標(biāo)是否已經(jīng)寫入數(shù)組          br=Math.ceil((thisI+1)/x);          L_T = thisI-x-1;          T  = thisI-x;          R_T = thisI-x+1;          L  = thisI-1;          R  = thisI+1;          L_B = thisI+x-1;          B  = thisI+x;          R_B = thisI+x+1;         //左上角的方格 如果是在雷區(qū) 又是在上一行 又是沒翻開的格子 又是空格 那么就寫如_allI數(shù)組 來進(jìn)行下一次檢索         if(L_T>=0&&Math.ceil((L_T+1)/x)==br-1&&allMine[L_T].on==0&&mineField.mineMap[L_T] == 0){_allI.push(L_T);}         if(T >=0&&Math.ceil((T +1)/x)==br-1&&allMine[T ].on==0&&mineField.mineMap[T ] == 0){_allI.push(T);}         if(R_T>=0&&Math.ceil((R_T+1)/x)==br-1&&allMine[R_T].on==0&&mineField.mineMap[R_T] == 0){_allI.push(R_T);}                if(L>=0&&Math.ceil((L+1)/x)==br&&allMine[L].on==0&&mineField.mineMap[L] == 0){_allI.push(L);}         if(R<num&&Math.ceil((R+1)/x)==br&&allMine[R].on==0&&mineField.mineMap[R] == 0){_allI.push(R);}                if(L_B<num&&Math.ceil((L_B+1)/x)==br+1&&allMine[L_B].on==0&&mineField.mineMap[L_B] == 0){_allI.push(L_B);}         if(B <num&&Math.ceil((B +1)/x)==br+1&&allMine[B ].on==0&&mineField.mineMap[B ] == 0){_allI.push(B);}         if(R_B<num&&Math.ceil((R_B+1)/x)==br+1&&allMine[R_B].on==0&&mineField.mineMap[R_B] == 0){_allI.push(R_B);}         //------------------------------------------------         //左上角的的格子 如果在雷區(qū) 又是在上一行 又是沒翻開的格子 又是沒寫入allShowMine數(shù)組的 那就寫入吧 并提前標(biāo)記為翻開的格子         if(L_T>=0&&Math.ceil((L_T+1)/x)==br-1&&allMine[L_T].on==0&&text.indexOf('_'+L_T+'_') == -1){allShowMine.push(L_T);allMine[L_T].on=3}         if(T >=0&&Math.ceil((T +1)/x)==br-1&&allMine[T ].on==0&&text.indexOf('_'+T+'_') == -1){allShowMine.push(T);allMine[T].on=3}         if(R_T>=0&&Math.ceil((R_T+1)/x)==br-1&&allMine[R_T].on==0&&text.indexOf('_'+R_T+'_') == -1){allShowMine.push(R_T);allMine[R_T].on=3}                if(L>=0&&Math.ceil((L+1)/x)==br&&allMine[L].on==0&&text.indexOf('_'+L+'_') == -1){allShowMine.push(L);allMine[L].on=3}         if(R<num&&Math.ceil((R+1)/x)==br&&allMine[R].on==0&&text.indexOf('_'+R+'_') == -1){allShowMine.push(R);allMine[R].on=3}                if(L_B<num&&Math.ceil((L_B+1)/x)==br+1&&allMine[L_B].on==0&&text.indexOf('_'+L_B+'_') == -1){allShowMine.push(L_B);allMine[L_B].on=3}         if(B <num&&Math.ceil((B +1)/x)==br+1&&allMine[B ].on==0&&text.indexOf('_'+B+'_') == -1){allShowMine.push(B );allMine[B ].on=3}         if(R_B<num&&Math.ceil((R_B+1)/x)==br+1&&allMine[R_B].on==0&&text.indexOf('_'+R_B+'_') == -1){allShowMine.push(R_B);allMine[R_B].on=3}                  if(_allI.length!=0){see(_allI)}        }      }      return allShowMine}//--------------------------------------document.oncontextmenu=function(){return false;}//禁止右鍵菜單function getButton(e){  var Btn;  if(document.implementation.hasFeature('MouseEvents','2.0')){Btn=e.button;}  else{    switch(e.button){          case 0:          case 1:          case 3:          case 5:          case 7:           Btn=0;           break;          case 2:          case 6:           Btn=2;           break;          case 4:           Btn=9;           break;        }  }  return Btn;}</script>