分享自己做的JS扫雷小游戏

看了草根程序猿分享的JS扫雷小游戏

10年积累的成都网站设计、成都网站建设经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先制作网站后付款的网站建设流程,更有上思免费网站建设让你可以放心的选择与我们合作。

想起去年的时候自己也做了一个

于是也拿出来分享之

先上截图~

引用了jQuery,节省了很多鼠标点击上的判断

界面显然都是照搬Windows的扫雷啦

详细的内容注释里都有,我就不啰嗦啦~

【JS部分】

 
 
 
 
  1. var mineArray,  //地雷数组  
  2.     lastNum,  //剩余雷数  
  3.     countNum,  //未被揭开的方块数  
  4.     inGame = 0,  //游戏状态,0为结束,1为进行中,2为初始化完毕但未开始  
  5.     startTime;  //开始时间  
  6.     //以下操作1表示揭开一个方块,操作2表示标记一个小旗,操作3表示标记一个问号,操作4表示若某个方块周围的地雷全都标记完,则将其周围剩下的方块挖开  
  7. $(function(){  
  8.     $('#main').mouseup(function(e) {  
  9.         var clicked = $(e.target),  
  10.             id = clicked.attr('id'),  
  11.             cX = parseInt(id.substring(1, id.indexOf('-'))),  //所点击方格的X坐标  
  12.             cY = parseInt(id.substring(id.indexOf('-') + 1));  //所点击方格的Y坐标  
  13.         if(inGame == 1) {  
  14.             if(e.which == 1) {  
  15.                 if(clicked.hasClass('hidden') && !clicked.hasClass('flag')) {  
  16.                     openBlock(cX,cY);  //左键点击未揭开且未插旗方块即执行操作1  
  17.                 } else if(!clicked.hasClass('hidden')) {  
  18.                     openNearBlock(cX,cY);  //由于同时点击左右键实现起来比较麻烦,所以改成用点击左键实现操作4  
  19.                 }  
  20.             } else if(e.which == 3 && clicked.hasClass('hidden')) {  //右键点击操作2,如果允许使用问号标记,则可执行操作3  
  21.                 if(clicked.hasClass('flag')) {  
  22.                     clicked.removeClass('flag');  
  23.                     if($('#check').attr('checked')) clicked.addClass('check');  
  24.                     lastNum ++;  
  25.                     countNum ++;  
  26.                 } else if(clicked.hasClass('check')) {  
  27.                     clicked.removeClass('check');  
  28.                 } else {  
  29.                     clicked.addClass('flag');  
  30.                     lastNum --;  
  31.                     countNum --;  
  32.                 }  
  33.                 $('#lastnum').text(lastNum);  
  34.             }  
  35.             if(lastNum == countNum) endGame(1);  //因为最后剩下的方块均为雷时应直接结束游戏,因此设置为剩余雷数和未被揭开的方块数相等的时候结束游戏  
  36.         } else if(inGame == 2) {  
  37.             if(e.which == 1) {  //初始化完毕后只允许点击左键开始游戏  
  38.                 openBlock(cX,cY);  
  39.                 inGame = 1;  
  40.                 var now = new Date();  
  41.                 startTime = now.getTime();  
  42.                 timer();  
  43.             }  
  44.         }  
  45.     });  
  46.     $('#main').bind('contextmenu', function(){ return false; });  //阻止默认右击事件  
  47. });  
  48. //初始化  
  49. function init(x, y, mine) {  
  50.     countNum = x * y;  
  51.     inGame = 2;  
  52.     lastNum = mine;  
  53.     mineArray = new Array(y + 2);  
  54.     $.each(mineArray, function(key) {  
  55.         mineArray[key] = new Array(x + 2);  
  56.     });  
  57.     for(var i = 1; i <= y; i ++) {  
  58.         for(var j = 1; j <= x; j ++) {  
  59.             mineArray[i][j] = 0;  
  60.         }  
  61.     }  
  62.     while(mine > 0) {  //随机布雷,-1为有雷  
  63.         var i = Math.ceil(Math.random() * y);  
  64.         var j = Math.ceil(Math.random() * x);  
  65.         if(mineArray[i][j] != -1) {  
  66.             mineArray[i][j] = -1;  
  67.             mine --;  
  68.         }  
  69.     }  
  70.     for(var i = 1; i <= y; i ++) {  //遍历地雷数组,统计每个格子四周地雷的数量  
  71.         for(var j = 1; j <= x; j ++) {  
  72.             if(mineArray[i][j] != -1) {  
  73.                 if(i > 1 && j > 1 && mineArray[i - 1][j - 1] == -1) mineArray[i][j] ++;  
  74.                 if(i > 1 && mineArray[i - 1][j] == -1) mineArray[i][j] ++;  
  75.                 if(i > 1 && j < x && mineArray[i - 1][j + 1] == -1) mineArray[i][j] ++;  
  76.                 if(j < x && mineArray[i][j + 1] == -1) mineArray[i][j] ++;  
  77.                 if(i < y && j < x && mineArray[i + 1][j + 1] == -1) mineArray[i][j] ++;  
  78.                 if(i < y && mineArray[i + 1][j] == -1) mineArray[i][j] ++;  
  79.                 if(i < y && j > 1 && mineArray[i + 1][j - 1] == -1) mineArray[i][j] ++;  
  80.                 if(j > 1 && mineArray[i][j - 1] == -1) mineArray[i][j] ++;  
  81.             }  
  82.         }  
  83.     }  
  84.     var block = '';  
  85.     for(var i = 1, row = mineArray.length - 1; i < row; i ++) {  
  86.         for(var j = 1, col = mineArray[0].length - 1; j < col; j ++) {  
  87.             block += '
';  
  •         }  
  •     }  
  •     $('#main').html(block).width(x * 20 + 1).height(y * 20 + 1).show();  //绘图  
  •     $('#warning').html('');  
  •     $('#submenu').show();  
  •     $('#lastnum').text(lastNum);  
  • }  
  • //揭开方块  
  • function openBlock(x, y) {  
  •     var current = $('#b' + x + '-' + y);  
  •     if(mineArray[x][y] == -1) {  
  •         if(inGame == 1) {  //触雷时如游戏进行中,则失败结束游戏  
  •             current.addClass('cbomb');  
  •             endGame();  
  •         } else if(inGame == 2) {  //如游戏初始化后还未开始,则重新初始化地雷阵,再揭开此方块,以保证第一次点击不触雷  
  •             init(mineArray[0].length - 2, mineArray.length - 2, lastNum);  
  •             openBlock(x, y);  
  •         } else {  //游戏结束时需揭开全部方块,标记地雷位置  
  •             if(!current.hasClass('flag')) current.addClass('bomb');  
  •         }  
  •     } else if(mineArray[x][y] > 0) {  
  •         if(current.hasClass('flag')) {  //若在无雷的方块上标记了小旗,如果周围的广场执行操作4时波及到此方块,则触发失败结束游戏  
  •             current.addClass('wrong');  
  •             if(inGame) endGame();  
  •         } else {  
  •             current.html(mineArray[x][y]).addClass('num' + mineArray[x][y]).removeClass('hidden');  //显示周边的地雷数量  
  •             if(current.hasClass('check')) current.removeClass('check');  
  •             if(inGame) countNum --;  
  •         }  
  •     } else {  
  •         if(current.hasClass('flag')) {  //同上  
  •             current.addClass('wrong');  
  •             if(inGame) endGame();  
  •         } else {  
  •             current.removeClass('hidden');  
  •             if(current.hasClass('check')) current.removeClass('check');  
  •             if(inGame) {  //点击到周边无雷的方块时,自动揭开周围方块  
  •                 countNum --;  
  •                 var row = mineArray.length - 2, col = mineArray[0].length - 2;  
  •                 if(x > 1 && y > 1 && $('#b' + (x - 1) + '-' + (y - 1)).hasClass('hidden')) openBlock(x - 1, y - 1);  
  •                 if(x > 1 && $('#b' + (x - 1) + '-' + y).hasClass('hidden')) openBlock(x - 1, y);  
  •                 if(x > 1 && y < col && $('#b' + (x - 1) + '-' + (y + 1)).hasClass('hidden')) openBlock(x - 1, y + 1);  
  •                 if(y < col && $('#b' + x + '-' + (y + 1)).hasClass('hidden')) openBlock(x, y + 1);  
  •                 if(x < row && y < col && $('#b' + (x + 1) + '-' + (y + 1)).hasClass('hidden')) openBlock(x + 1, y + 1);  
  •                 if(x < row && $('#b' + (x + 1) + '-' + y).hasClass('hidden')) openBlock(x + 1, y);  
  •                 if(x < row && y > 1 && $('#b' + (x + 1) + '-' + (y - 1)).hasClass('hidden')) openBlock(x + 1, y - 1);  
  •                 if(y > 1 && $('#b' + x + '-' + (y - 1)).hasClass('hidden')) openBlock(x, y - 1);  
  •             }  
  •         }  
  •     }  
  • }  
  • //揭开格子邻近确认无雷的方块  
  • function openNearBlock(x, y) {  
  •     var flagNum = 0, hiddenNum = 0;  
  •     for(i = x - 1; i < x + 2; i ++) {  
  •         for(j = y - 1; j < y + 2; j ++) {  
  •             if(mineArray[i][j] != undefined) {  
  •                 if($('#b' + i + '-' + j).hasClass('flag')) flagNum ++;  //统计方块周围的旗帜数和未揭开的方块数  
  •                 if($('#b' + i + '-' + j).hasClass('hidden')) hiddenNum ++;  
  •             }  
  •         }  
  •     }  
  •     if(flagNum == mineArray[x][y] && hiddenNum > flagNum) {  //旗帜数和雷数相等且有未揭开方块且未插旗的方块时,则揭开它  
  •         for(i = x - 1; i < x + 2; i ++) {  
  •             for(j = y - 1; j < y + 2; j ++) {  
  •                 if(mineArray[i][j] >= 0 && $('#b' + i + '-' + j).hasClass('hidden')) openBlock(i, j);  
  •             }  
  •         }  
  •     }  
  • }  
  • //计时  
  • function timer(){  
  •     if(inGame == 1) {  //只在游戏进行中计时  
  •         var now = new Date(),  
  •             ms = now.getTime();  
  •         $('#time').text(Math.ceil((ms - startTime) / 1000));  
  •         if(inGame == 1) setTimeout(function() { timer(); }, 500);  
  •     } else if(inGame == 2) {  
  •         $('#time').text('0');  
  •     }  
  • }  
  • //结束游戏  
  • function endGame(isWin) {  
  •     inGame = 0;  
  •     for(var i = 1, row = mineArray.length - 1; i < row; i ++) {  
  •         for(var j = 1, col = mineArray[0].length - 1; j < col; j ++) {  
  •             if(isWin) {  
  •                 if($('#b' + i + '-' + j).hasClass('hidden') && !$('#b' + i + '-' + j).hasClass('flag')) $('#b' + i + '-' + j).addClass('flag');  
  •                 lastNum = 0;  
  •                 $('#lastnum').text(lastNum);  
  •             } else {  
  •                 openBlock(i, j);  
  •             }  
  •         }  
  •     }  
  •     $('#warning').text(isWin ? 'You Win!' : 'You Lose!');  
  • 【HTML部分】

     
     
     
     
    1.  
    2.     初级 
    3.     中级 
    4.     高级 
    5.     是否使用标记(?) 
     
  •  
  •     剩余雷数: 
  •     时间:秒  
  •      
  •  
  •  
  • 【CSS部分】

     
     
     
     
    1. body{background:#fff;font-size:14px;}  
    2. #submenu{display:none;}  
    3. #warning{color:#ff0000;}  
    4. #main{background:#ddd;border:1px solid #888;display:none;position:relative;}  
    5. #main div{border:1px solid #888;font-weight:bold;height:19px;height:21px\9;line-height:18px;cursor:default;position:absolute;text-align:center;width:19px;width:21px\9;}  
    6. .hidden{background:url(mine.gif) 0 0;}  
    7. .flag{background:url(mine.gif) -19px 0;}  
    8. .check{background:url(mine.gif) -38px 0;}  
    9. .bomb{background:url(mine.gif) -57px 0;}  
    10. .cbomb{background:url(mine.gif) -57px 0 #ff0000;}  
    11. .wrong{background:url(mine.gif) -76px 0;}  
    12. .num1{color:#0000ff;}  
    13. .num2{color:#008000;}  
    14. .num3{color:#ff0000;}  
    15. .num4{color:#000080;}  
    16. .num5{color:#800000;}  
    17. .num6{color:#008080;}  
    18. .num7{color:#000000;}  
    19. .num8{color:#808080;} 

    最后是运行效果,你可以进入他的博客进行在线游戏

    分享题目:分享自己做的JS扫雷小游戏
    路径分享:http://www.shufengxianlan.com/qtweb/news9/397259.html

    网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等

    广告

    声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

    猜你还喜欢下面的内容

    App开发知识

    行业网站建设