首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JavaScript制作windows经典扫雷小游戏

Posted in Javascript onMarch 31, 2015

代码其实很简单，这里就不多废话了

<html>
<head>
<meta http-equiv="Content-Language" content="zh-cn">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>扫雷-JavaScript Mine Sweeper</title>
<style type="text/css">
table{TABLE-LAYOUT: fixed;cursor:pointer}
td{width: 20px; height: 20px; font-size: 12px; font-family: Verdana;font-weight:bold; text-align:center;background:#CECECE;}
td.Normal, .Flag{border-left:2px solid #F5F5F5; border-right:2px outset #F5F5F5; border-top:2px solid #F5F5F5; border-bottom:2px outset #F5F5F5; font-weight:bold}
.Mine, .Boom, .M0, .M1, .M2, .M3, .M4, .M5, .M6, .M7, .M8{background:#C5C5C5;border-right:1px solid #B4B4B4; border-bottom:1px solid #B4B4B4;}
td.Mine{background: url(http://sandbox.runjs.cn/uploads/rs/202/xyovf5xj/mine.gif) no-repeat center}
td.Boom{background:#F00 url(http://sandbox.runjs.cn/uploads/rs/202/xyovf5xj/mine.gif) no-repeat center}
td.Flag, td.ErrFlag{background-image: url(http://sandbox.runjs.cn/uploads/rs/202/xyovf5xj/flag.gif);background-repeat: no-repeat; background-position: center;}
td.ErrFlag{background:#0F0}
td.M1 {color: #00f}
td.M2 {color: #008000}
td.M3 {color: #f00}
td.M4 {color: #000080}
td.M5 {color: #800000}
td.M6 {color: #008080}
td.M7 {color: #000}
td.M8 {color: #808080}
</style>
<script>
var $=function(id){return document.getElementById(id)},
  MouseButton=LeftMouse=0,//作为双键单击的计数，mouseup事件置0，mousedown事件＋1，当MouseButton=2说明双键同时单击;鼠标左键是否按下，当鼠标左键按下时为1，松开为0
  FlagImg=new Image(),
  HappyImg=new Image(),
  MineImg=new Image(),
  SadImg=new Image(),
  SuccessImg=new Image(),
 
  WhichButton=function(e){
    e=e||window.event;
    var b=getOs();
    if(b!=2){ //非FF
      switch(e.button){
        case 2:
          return 0;
        case 0:
          return b==1?0:1; //b==1,IE
        default:
          return 1;
      }
    }else{ //FF
      return e.which==3?0:1;
    }
  },
 
OMine={
  MaxX:9,MaxY:9,//最大的坐标
  MineCount:10,//定义雷的个数,可改
  FlagCount:0, //已经标记的旗子的数量
  OpenedCount:0, //已经打开的地区的数量
  MaxOpenCount:0,//应该要打开的最大地区数量
  //当OpenedCount=MaxOpenCount&&FlagCount=MineCount的时候,判断游戏成功结束
  Mine:[],
  GameOver:false, //true代表游戏失败结束
  Success:false, //true代表游戏成功结束
  aClear:[],//临时开雷的数组
   
  //刷新网页的时候初始化
  fInit:function(){
    var T=this,MaxX=T.MaxX,MaxY=T.MaxY,nX,nY=MaxY,MineCount=T.MineCount,
      AStr=['<table bordercolor="#000000" border="0" cellpadding="0" cellspacing="0" height="'+20*MaxY+'px" width="'+20*MaxX+'px" style="border: 10px inset #a0a0a0">'],
      i=0,TAr,TMine=T.Mine;
    T.MaxOpenCount=MaxX*MaxY-MineCount;
    while(nY--){
      AStr[++i]='<tr>';
      TAr=TMine[nY]=[];
      nX=MaxX;
      while(nX--){
        AStr[++i]='<td class="Normal" onmousedown="OMine.fMouseDown('+nX+','+nY+',event);" onmouseup="OMine.fMouseUp('+nX+','+nY+',event);" onmouseover="OMine.fButtonMouseOver('+nX+','+nY+')" onmouseout="OMine.fButtonMouseOut('+nX+','+nY+')" id="Img'+nX+'_'+nY+'">　</td>';
        TAr[nX]={
          Mine:0, //0表示没有雷,1表示有雷
          State:0,//0表示未开启,1表示左键开启,2表示右键标记
          MineCount:0//周围有几个雷
        }
      }
       AStr[++i]='</tr>';
    }
    AStr[++i]='</table>';
    $('dMap').innerHTML=T.InitStr=AStr.join('');
    $('txtFlagCount').value=MineCount;
    T.fInitMine();
    $('btnRefreshMap').src='http://sandbox.runjs.cn/uploads/rs/202/xyovf5xj/happy.gif';
    T.GameOver=T.Success=false;
    T.OpenedCount=T.FlagCount=T.aClear.lenght=0;
  },
   
  //为了方便循环赋值,给表格数组赋值的时候是XY倒过来循环的,所以调用的时候要倒回去
  //比如要获得该格子是否有雷,用OMine.fGetMine(x,y).Mine;
  fGetMine:function(X,Y){return this.Mine[Y][X]},
   
  //仅当按重新开始的按钮，不初始化大表格字符
  fRefreshMap:function(){
    var T=this;
    $('dMap').innerHTML=T.InitStr;
    T.fResetOMine();//必须先重置OMine,再重置99个雷
    T.fInitMine();
    T.GameOver=T.Success=false;
    $('btnRefreshMap').src='http://sandbox.runjs.cn/uploads/rs/202/xyovf5xj/happy.gif';
    $('txtFlagCount').value=T.MineCount;
    T.OpenedCount=T.FlagCount=T.aClear.lenght=0;
  },
 
  //重置OMine.Mine数组
  fResetOMine:function(){
    var T=this,MaxY=T.MaxY,MaxX=T.MaxX,X,Y=MaxY,M,Mine=T.Mine,TAr;
    while(Y--){
      X=MaxX;
      TAr=Mine[Y];
      while(X--)(M=TAr[X]).Mine=M.State=M.MineCount=0;
    }
  },
   
  //初始化雷的数组
  fInitMine:function(){
    var T=this,MaxX=T.MaxX,MaxY=T.MaxY,a,fGetMine=T.fGetMine,
      aOld=[],x,y=MaxY,n=0,l=T.MineCount,xRand; //一个随机数字
    while(y--){
      x=MaxX;
      while(x--)aOld[n++]=[x,y];
    }
    while(l--){
      a=aOld[xRand=Math.floor(Math.random()*(n-1))];
      T.fGetMine(a[0],a[1]).Mine=1;
      aOld.splice(xRand,1);
      --n;
    }
  },
 
  //鼠标移动到某格子的时候
  fButtonMouseOver:function(X,Y){
    var T=this;
    switch(MouseButton){
      case 2://双键按下的状态
        var arr=T.fGetAround(X,Y),i=arr.length,TAr;
        while(i--)T.fButtonDown((TAr=arr[i])[0],TAr[1]);
      case 1:
        LeftMouse==1&&T.fButtonDown(X,Y); //左键是按下的
    }
  },
   
  //鼠标移出某格子的时候
  fButtonMouseOut:function(X,Y){
    var T=this;
    switch(MouseButton){
      case 2://双键按下的状态
        var arr=T.fGetAround(X,Y),i=arr.length,TAr;
        while(i--)T.fButtonUp((TAr=arr[i])[0],TAr[1]);
      case 1:
        LeftMouse==1&&T.fButtonUp(X,Y); //左键是按下的
    }
  },
 
  //鼠标按下时没被开启的格子呈现被按下
  fButtonDown:function(X,Y){
    var srcEle=$('Img'+X+'_'+Y);
    srcEle.className=='Normal'&&(srcEle.className='M0');
  },
   
  //让没被开启并且已经呈现被按下的格子回复Normal
  fButtonUp:function(X,Y){
    var srcEle=$('Img'+X+'_'+Y);
    srcEle.className=='M0'&&!this.fGetMine(X,Y).State&&(srcEle.className='Normal');
  },
   
  //获取8个方向的坐标
  fGetAround:function(X,Y){
    var TX,TY,i=8,MX=this.MaxX-1,MY=this.MaxY-1,
      Arr=[[-1,0],[-1,-1],[0,-1],[1,-1],[1,0],[1,1],[0,1],[-1,1]],
      newArr=[],TAr;
    while(i--){
      TX=X+(TAr=Arr[i])[0];
      TY=Y+TAr[1];
      !(TX<0||TX>MX||TY<0||TY>MY)&&newArr.push([TX,TY]);
    }
    return newArr;
  },
   
  //鼠标在格子按下
  fMouseDown:function(X,Y,evt){
    var T=this;
    if(T.GameOver){
      alert('游戏失败,再接再厉!');
      return;
    }
    if(T.Success){
      alert('恭喜游戏成功!再来一局吧？');
      return;
    }
    var srcEle=$('Img'+X+'_'+Y),ObXY=T.fGetMine(X,Y),arr,i,TAr;
    ++MouseButton;
    evt=evt||window.event;
    switch(MouseButton){
      case 2:
        arr=T.fGetAround(X,Y);i=arr.length;
        while(i--)T.fButtonDown((TAr=arr[i])[0],TAr[1]);
        break;
      case 1:
        if(WhichButton(evt)){
          LeftMouse=1;
          T.fButtonDown(X,Y);
        }else{
          switch(ObXY.State){
            case 0:
              ObXY.State=2;
              srcEle.className='Flag';
              --$('txtFlagCount').value;
              ++T.FlagCount;
              break;
            case 2:
              ObXY.State=0;
              srcEle.className='Normal';
              ++$('txtFlagCount').value;
              --T.FlagCount;
          }
        }
      }
  },
   
  //鼠标在格子弹起
  fMouseUp:function(X,Y,evt){
    var T=this;
    evt=evt||window.event;
    var srcEle=$('Img'+X+'_'+Y),ObXY=T.fGetMine(X,Y),arr,i,TAr;
    switch(MouseButton){
      case 2: //MouseDown为两个键都单击按下，任意一个键弹起都判断为双键弹起
        LeftMouse=0;
        //鼠标弹起，把呈现被按下状态的格子恢复
        arr=T.fGetAround(X,Y);i=arr.length;
        while(i--)T.fButtonUp((TAr=arr[i])[0],TAr[1]);
        !ObXY.State&&T.fButtonUp(X,Y);
        ObXY.State==1&&ObXY.MineCount&&T.fOpenFlagMine(X,Y);
        break;
      case 1: //当MouseDown为一个键单击时，MouseUp才判断为一个键弹起
        if(WhichButton(evt)){
        //只有在State=0才起作用,跟是否有雷没关系
            LeftMouse=0;
            if(ObXY.State){break;}
            ObXY.Mine?(
              //触雷,结束该局
              T.fFail(),
              srcEle.className='Boom'
            ):(
              ObXY.State=1, //压栈之前就要设置为已经开启
              T.aClear.push([X,Y]),
              T.fClearMine()
            )
        }
    }
    MouseButton=0;
    if(T.OpenedCount==T.MaxOpenCount&&T.FlagCount==T.MineCount){
      T.fSuccess();
      alert('恭喜游戏成功!再来一局吧？');
      return;
    }
    //当剩余未开启的格子数＝剩余的旗子数，自动完成
    T.MaxOpenCount+T.MineCount-T.OpenedCount-T.FlagCount==$('txtFlagCount').value&&(
      T.fSuccess(),
      T.fAutoFlag(),
      alert('恭喜游戏成功!再来一局吧？')
    )
  },
   
  //自动填充未开启的地区的雷
  fAutoFlag:function(){
    var T=this,nX,nY=T.MaxY,MaxX=T.MaxX,Mine=T.Mine,TAr;
    while(nY--){
      nX=MaxX;
      TAr=Mine[nY];
      while(nX--)!TAr[nX].State&&($('Img'+nX+'_'+nY).className='Flag');
    }
    $('txtFlagCount').value=0;
  },
   
  //递归开雷
  fClearMine:function(){
    var T=this;
    if(T.aClear.length==0){return}
    ++T.OpenedCount;
    var aXY=T.aClear.pop(),X=aXY[0],Y=aXY[1],TX,TY,
      aTmpClear=[], //一个临时数组
      srcEle=$('Img'+X+'_'+Y),
      ObXY,ObTXTY,
      countMine=0, //获取周围雷的个数
    //从正左开始的8个方向
      arr=T.fGetAround(X,Y),i=arr.length,TAr;
    while(i--){
      //TX,TY获得本格周围的坐标
      (ObTXTY=T.fGetMine(TX=(TAr=arr[i])[0],TY=TAr[1])).Mine==1&&++countMine;
      !ObTXTY.State&&aTmpClear.push([TX,TY]);
    }
    ObXY=T.fGetMine(X,Y);
    ObXY.MineCount=countMine;
    srcEle.className='M'+countMine;
    if(!countMine){
      Array.prototype.push.apply(T.aClear,aTmpClear);
      i=aTmpClear.length;
      while(i--)T.fGetMine((TAr=aTmpClear[i])[0],TAr[1]).State=1;
    }else{
      getOs()==2?
        srcEle.textContent=countMine
        :srcEle.innerText=countMine
    }
    T.fClearMine();
  },
   
  //获得双键辅助开启
  fOpenFlagMine:function(X,Y){
    var T=this,FlagCount=0,TX,TY,ObXY,ObTXTY,aTmpClear=[],FlagErr=false,
      arr=T.fGetAround(X,Y),i=arr.length,TAr;
    while(i--){
      //TX,TY获得本格周围的坐标
      ObTXTY=T.fGetMine(TX=(TAr=arr[i])[0],TY=TAr[1]);
      switch(ObTXTY.State){
        case 0: //未开启未标记
          !ObTXTY.Mine&&aTmpClear.push([TX,TY]); //没雷也没旗子的时候加入到被辅助开启的数组}
          break;
        case 2: //标记了旗子
          ++FlagCount; //只要标记了旗子,无论对错,都记录标记数+1
          !ObTXTY.Mine&&(FlagErr=true); //没有雷但是标记了旗子,标记错误
      }
    }
    if(FlagCount<T.fGetMine(X,Y).MineCount||aTmpClear.length==0)return;
    //旗子比实际雷少,无论标记对错,不开启
    //没有可以提供开启的空格
    if(FlagErr){ //有错误则进行结束游戏处理
      T.fFail();
      return;
    }
    Array.prototype.push.apply(T.aClear,aTmpClear);
    i=aTmpClear.length;
    while(i--)T.fGetMine((TAr=aTmpClear[i])[0],TAr[1]).State=1;
    T.fClearMine();
  },
   
  //显示所有的雷
  fShowMine:function(){
    var T=this,X=0,Y=T.MaxY,MaxX=T.MaxX,Mine=T.Mine,TAr,TArX;
    while(Y--){
      X=MaxX;
      TAr=Mine[Y];
      while(X--){
        TArX=TAr[X];
        switch(TArX.Mine){
          case 0:
            TArX.State==2&&($('Img'+X+'_'+Y).className='ErrFlag');
            break;
          case 1:
            $('Img'+X+'_'+Y).className='Mine';
        }
      }
    }
  },
 
  //游戏成功结束
  fSuccess:function(){
    this.Success=true;
    $('btnRefreshMap').src='http://sandbox.runjs.cn/uploads/rs/202/xyovf5xj/success.gif';
  },
   
  //游戏失败结束
  fFail:function(){
    this.GameOver=true;
    $('btnRefreshMap').src='http://sandbox.runjs.cn/uploads/rs/202/xyovf5xj/sad.gif';
    this.fShowMine();
  }
},
 
//换地图
ChangeMap=function(Map){
  var O=OMine;
  switch(Map){
    case 1:
      O.MaxX=O.MaxY=9;
      O.MineCount=10;
      break;
    case 2:
      O.MaxX=O.MaxY=16;
      O.MineCount=40;
      break;
    case 3:
      O.MaxX=30;
      O.MaxY=16;
      O.MineCount=99;
  }
  O.fInit();
},
 
getOs=function(){
  if(navigator.userAgent.indexOf("MSIE")>0)return 1;
  if(isFirefox=navigator.userAgent.indexOf("Firefox")>0)return 2;
  if(isSafari=navigator.userAgent.indexOf("Safari")>0)return 3;  
  if(isCamino=navigator.userAgent.indexOf("Camino")>0)return 4;
  if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0)return 5;
  return 0;
};
 
 
FlagImg.src='http://sandbox.runjs.cn/uploads/rs/202/xyovf5xj/flag.gif';
HappyImg.src='http://sandbox.runjs.cn/uploads/rs/202/xyovf5xj/happy.gif';
MineImg.src='http://sandbox.runjs.cn/uploads/rs/202/xyovf5xj/mine.gif';
SadImg.src='http://sandbox.runjs.cn/uploads/rs/202/xyovf5xj/sad.gif';
SuccessImg.src='http://sandbox.runjs.cn/uploads/rs/202/xyovf5xj/success.gif';
</script>
</head>
<body topmargin="0" oncontextmenu="return false" ondragstart="return false" onselectstart="return false" onload="OMine.fInit()" bgcolor="#808080">
<center>
<div id="dTop" align="center" style="border-style: inset; border-width: 10;width:400">
<table cellpadding="0" cellspacing="0" style="border-collapse: collapse;" width="380" height="44">
 <tr>
  <td style="width: 102; height:50px">
  <input type="text" id="txtFlagCount" size="20" style="width: 60; height: 30; color:#FF0000; text-align:center; font-family:Verdana; font-weight:bold; background-color:#000000; font-size:13pt" value=""></td>
  <td style="width: 136; height:50px">
  <input onclick="OMine.fRefreshMap()" type="image" id="btnRefreshMap" src="happy.gif"><input onclick="OMine.fShowMine();" type="button" name="B3" value="显雷"style="display:none"></td>
  <td style="width: 142; height:50px">
  <input type="radio" value="V1" checked name="R1" id="R1" onclick="ChangeMap(1)">初级<input type="radio" value="V1" name="R1" id="R2" onclick="ChangeMap(2)">中级<input type="radio" value="V1" name="R1" id="R3" onclick="ChangeMap(3)">高级</td>
 </tr>
 
</table>
</div>
<div id="dMap" align="center"></div>
</center>
</body>
</html>

以上所述就是本文的全部内容了，希望大家能够喜欢。

JavaScript制作windows经典扫雷小游戏

- Author -

hebedich

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
小议JavaScript中Generator和Iterator的使用
Jul 29 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
May 10 Javascript
一个例子轻松学会Vue.js
Jan 02 Javascript
Bootstrap DateTime Picker日历控件简单应用
Mar 25 Javascript
谈谈对vue响应式数据更新的误解
Aug 01 Javascript
bootstrap 路径导航 分页 进度条的实例代码
Aug 06 Javascript
详解vue挂载到dom上会发生什么
Jan 20 Javascript
elementUI select组件value值注意事项详解
May 29 Javascript
layui递归实现动态左侧菜单
Jul 26 Javascript
JS面向对象编程实现的拖拽功能案例详解
Mar 03 Javascript
js实现时钟定时器
Mar 26 Javascript
JavaScript或jQuery 获取option value值方法解析
May 12 jQuery
jQuery选择器源码解读（四）：tokenize方法的Expr.preFilter
Mar 31 #Javascript
JavaScript制作简易的微信打飞机
Mar 31 #Javascript
JS获取表格内指定单元格html内容的方法
Mar 31 #Javascript
JS实现为表格动态添加标题的方法
Mar 31 #Javascript
JS实现从表格中动态删除指定行的方法
Mar 31 #Javascript
jQuery选择器源码解读（三）：tokenize方法
Mar 31 #Javascript
javascript制作游戏开发碰撞检测的封装代码
Mar 31 #Javascript
vuex(1) persistedstate(1) axios(1) 曝光融合(1) InputStream(1) 高动态范围(1) Set接口(1) OutputStream(1) HDR(1) Vue3(1)
You might like
《猛禽小队》：DC宇宙的又一超级大烂片
2020/04/09 欧美动漫
与文件上传有关的php配置参数总结
2013/06/14 PHP
PHP实现的封装验证码类详解
2013/06/18 PHP
php将字符串转换成16进制的方法
2015/03/17 PHP
浅谈PHP接收POST数据方式
2015/06/05 PHP
PHP提高编程效率的20个要点
2015/09/23 PHP
JS动画效果代码3
2008/04/03 Javascript
JQuery 获取和设置Select选项的代码
2010/02/07 Javascript
JS幻灯片可循环播放可平滑旋转带滚动导航(自写)
2013/08/05 Javascript
javascript计算用户打开网页的停留时间
2014/01/09 Javascript
jquery重复提交请求的原因浅析
2014/05/23 Javascript
Node.js的Web模板引擎ejs的入门使用教程
2016/06/06 Javascript
JS原型链 详解及示例代码
2016/09/06 Javascript
禁用backspace网页回退功能的实现代码
2016/11/15 Javascript
js鼠标跟随运动效果
2017/03/11 Javascript
理解Angular的providers给Http添加默认headers
2017/07/04 Javascript
浅谈react-router HashRouter和BrowserRouter的使用
2017/12/29 Javascript
element ui table 增加筛选的方法示例
2018/11/02 Javascript
vue canvas绘制矩形并解决由clearRec带来的闪屏问题
2019/09/02 Javascript
解决antd 下拉框 input [defaultValue] 的值的问题
2020/10/31 Javascript
实例讲解Python中的私有属性
2014/08/21 Python
Python中的异常处理学习笔记
2015/01/28 Python
Python的设计模式编程入门指南
2015/04/02 Python
python数据分析数据标准化及离散化详解
2018/02/26 Python
python实现给scatter设置颜色渐变条colorbar的方法
2018/12/13 Python
Python魔法方法功能与用法简介
2019/04/04 Python
Python面向对象程序设计之静态方法、类方法、属性方法原理与用法分析
2020/03/23 Python
Win10环境中如何实现python2和python3并存
2020/07/20 Python
美国高街时尚品牌：OASAP
2016/07/24 全球购物
德国网上药房：Apotal
2017/04/04 全球购物
联想澳大利亚官网：Lenovo Australia
2018/01/18 全球购物
最新个人职业生涯规划书
2014/01/22 职场文书
优秀党员先进事迹材料
2014/12/18 职场文书
心理学培训心得体会
2016/01/22 职场文书
Java实现贪吃蛇游戏的示例代码
2022/09/23 Java/Android
Mysql的Table doesn't exist问题及解决
2022/12/24 MySQL