首页
所有分类
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 相关文章推荐
js实现局部页面打印预览原理及示例代码
Jul 03 Javascript
javascript学习笔记（八）正则表达式
Oct 08 Javascript
jquery中trigger()无法触发hover事件的解决方法
May 07 Javascript
angularjs学习笔记之双向数据绑定
Sep 26 Javascript
基于JS设计12306登录页面
Dec 28 Javascript
js异步编程小技巧详解
Aug 14 Javascript
详解JavaScript基础知识（JSON、Function对象、原型、引用类型）
Jan 16 Javascript
vscode中vue-cli项目es-lint的配置方法
Jul 30 Javascript
Promise.all中对于reject的处理方法
Aug 01 Javascript
深入学习JavaScript 高阶函数
Jun 11 Javascript
ant-design-vue 时间选择器赋值默认时间的操作
Oct 27 Javascript
详解JavaScript中Arguments对象用途
Aug 30 Javascript
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
DFA(1) linux(15) Qlabel(1) pycharm(6) random(1) pygame(3) pyqt5(3) Slice(1) 切片(1) MapReduce(1)
You might like
php实现按天数、星期、月份查询的搜索框
2016/05/02 PHP
js 数值项目的格式化函数代码
2010/05/14 Javascript
在JavaScript中获取请求的URL参数
2010/12/22 Javascript
IE6背景图片不缓存问题解决方案及图片使用策略多个方法小结
2012/05/14 Javascript
JQUERY 实现窗口滚动搜索框停靠效果(类似滚动停靠)
2013/03/27 Javascript
分享JavaScript与Java中MD5使用两个例子
2015/12/23 Javascript
jquery ztree异步搜索（搜叶子）实践
2016/02/25 Javascript
jQuery Chart图表制作组件Highcharts用法详解
2016/06/01 Javascript
使用gulp搭建本地服务器并实现模拟ajax
2017/04/05 Javascript
Node.JS使用Sequelize操作MySQL的示例代码
2017/10/09 Javascript
写一个移动端惯性滑动&amp;回弹Vue导航栏组件 ly-tab
2018/03/06 Javascript
10分钟彻底搞懂Http的强制缓存和协商缓存(小结)
2018/08/30 Javascript
关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)
2018/09/04 Javascript
Layui动态生成select下拉选择框不显示的解决方法
2019/09/24 Javascript
swiper4实现移动端导航栏tab滑动切换
2020/10/16 Javascript
python3.5仿微软计算器程序
2020/03/30 Python
如何在Python函数执行前后增加额外的行为
2016/10/20 Python
python实现稀疏矩阵示例代码
2017/06/09 Python
Python实现输出程序执行进度百分比的方法
2017/09/16 Python
在PyCharm中三步完成PyPy解释器的配置的方法
2018/10/29 Python
很酷的python表白工具 你喜欢我吗
2019/04/11 Python
Python中py文件转换成exe可执行文件的方法
2019/06/14 Python
python 窃取摄像头照片的实现示例
2021/01/08 Python
CSS3实现任意图片lowpoly动画效果实例
2017/05/11 HTML / CSS
IE9下html5初试小刀
2010/09/21 HTML / CSS
介绍一下gcc特性
2012/01/20 面试题
SOA的常见陷阱或者误解是什么
2014/10/05 面试题
店长岗位职责
2013/11/21 职场文书
超市总经理岗位职责
2014/02/02 职场文书
药品营销专业毕业生自荐信
2014/07/02 职场文书
处级干部考察材料
2014/12/24 职场文书
敬老院活动感想
2015/08/07 职场文书
React forwardRef的使用方法及注意点
2021/06/13 Javascript
python之json文件转xml文件案例讲解
2021/08/07 Python
浅谈JavaScript作用域
2021/12/06 Javascript
解决Vmware虚拟机安装centos8报错“Section %Packages Does Not End With %End. Pane Is Dead”
2022/06/01 Servers