自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

分享自己做的JS掃雷小游戲

作者：巴里切羅
開發(fā) 前端
引用了jQuery，節(jié)省了很多鼠標點擊上的判斷。界面顯然都是照搬Windows的掃雷啦，詳細的內容注釋里都有，我就不啰嗦啦~

看了草根程序猿分享的JS掃雷小游戲

想起去年的時候自己也做了一個

于是也拿出來分享之

先上截圖~

引用了jQuery，節(jié)省了很多鼠標點擊上的判斷

界面顯然都是照搬Windows的掃雷啦

詳細的內容注釋里都有，我就不啰嗦啦~

【JS部分】

  1. var mineArray,  //地雷數組  
  2.     lastNum,  //剩余雷數  
  3.     countNum,  //未被揭開的方塊數  
  4.     inGame = 0,  //游戲狀態(tài)，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);  //左鍵點擊未揭開且未插旗方塊即執(zhí)行操作1  
  17.                 } else if(!clicked.hasClass('hidden')) {  
  18.                     openNearBlock(cX,cY);  //由于同時點擊左右鍵實現起來比較麻煩，所以改成用點擊左鍵實現操作4  
  19.                 }  
  20.             } else if(e.which == 3 && clicked.hasClass('hidden')) {  //右鍵點擊操作2，如果允許使用問號標記，則可執(zhí)行操作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 ++) {  //遍歷地雷數組，統(tǒng)計每個格子四周地雷的數量  
  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 += '<div id="b' + i + '-' + j + '" style="left:' + (j - 1) * 20 + 'px;top:' + (i - 1) * 20 + 'px;" class="hidden"></div>';  
  88.         }  
  89.     }  
  90.     $('#main').html(block).width(x * 20 + 1).height(y * 20 + 1).show();  //繪圖  
  91.     $('#warning').html('');  
  92.     $('#submenu').show();  
  93.     $('#lastnum').text(lastNum);  
  94. }  
  95. //揭開方塊  
  96. function openBlock(x, y) {  
  97.     var current = $('#b' + x + '-' + y);  
  98.     if(mineArray[x][y] == -1) {  
  99.         if(inGame == 1) {  //觸雷時如游戲進行中，則失敗結束游戲  
  100.             current.addClass('cbomb');  
  101.             endGame();  
  102.         } else if(inGame == 2) {  //如游戲初始化后還未開始，則重新初始化地雷陣，再揭開此方塊，以保證第一次點擊不觸雷  
  103.             init(mineArray[0].length - 2, mineArray.length - 2, lastNum);  
  104.             openBlock(x, y);  
  105.         } else {  //游戲結束時需揭開全部方塊，標記地雷位置  
  106.             if(!current.hasClass('flag')) current.addClass('bomb');  
  107.         }  
  108.     } else if(mineArray[x][y] > 0) {  
  109.         if(current.hasClass('flag')) {  //若在無雷的方塊上標記了小旗，如果周圍的廣場執(zhí)行操作4時波及到此方塊，則觸發(fā)失敗結束游戲  
  110.             current.addClass('wrong');  
  111.             if(inGame) endGame();  
  112.         } else {  
  113.             current.html(mineArray[x][y]).addClass('num' + mineArray[x][y]).removeClass('hidden');  //顯示周邊的地雷數量  
  114.             if(current.hasClass('check')) current.removeClass('check');  
  115.             if(inGame) countNum --;  
  116.         }  
  117.     } else {  
  118.         if(current.hasClass('flag')) {  //同上  
  119.             current.addClass('wrong');  
  120.             if(inGame) endGame();  
  121.         } else {  
  122.             current.removeClass('hidden');  
  123.             if(current.hasClass('check')) current.removeClass('check');  
  124.             if(inGame) {  //點擊到周邊無雷的方塊時，自動揭開周圍方塊  
  125.                 countNum --;  
  126.                 var row = mineArray.length - 2, col = mineArray[0].length - 2;  
  127.                 if(x > 1 && y > 1 && $('#b' + (x - 1) + '-' + (y - 1)).hasClass('hidden')) openBlock(x - 1, y - 1);  
  128.                 if(x > 1 && $('#b' + (x - 1) + '-' + y).hasClass('hidden')) openBlock(x - 1, y);  
  129.                 if(x > 1 && y < col && $('#b' + (x - 1) + '-' + (y + 1)).hasClass('hidden')) openBlock(x - 1, y + 1);  
  130.                 if(y < col && $('#b' + x + '-' + (y + 1)).hasClass('hidden')) openBlock(x, y + 1);  
  131.                 if(x < row && y < col && $('#b' + (x + 1) + '-' + (y + 1)).hasClass('hidden')) openBlock(x + 1, y + 1);  
  132.                 if(x < row && $('#b' + (x + 1) + '-' + y).hasClass('hidden')) openBlock(x + 1, y);  
  133.                 if(x < row && y > 1 && $('#b' + (x + 1) + '-' + (y - 1)).hasClass('hidden')) openBlock(x + 1, y - 1);  
  134.                 if(y > 1 && $('#b' + x + '-' + (y - 1)).hasClass('hidden')) openBlock(x, y - 1);  
  135.             }  
  136.         }  
  137.     }  
  138. }  
  139. //揭開格子鄰近確認無雷的方塊  
  140. function openNearBlock(x, y) {  
  141.     var flagNum = 0, hiddenNum = 0;  
  142.     for(i = x - 1; i < x + 2; i ++) {  
  143.         for(j = y - 1; j < y + 2; j ++) {  
  144.             if(mineArray[i][j] != undefined) {  
  145.                 if($('#b' + i + '-' + j).hasClass('flag')) flagNum ++;  //統(tǒng)計方塊周圍的旗幟數和未揭開的方塊數  
  146.                 if($('#b' + i + '-' + j).hasClass('hidden')) hiddenNum ++;  
  147.             }  
  148.         }  
  149.     }  
  150.     if(flagNum == mineArray[x][y] && hiddenNum > flagNum) {  //旗幟數和雷數相等且有未揭開方塊且未插旗的方塊時，則揭開它  
  151.         for(i = x - 1; i < x + 2; i ++) {  
  152.             for(j = y - 1; j < y + 2; j ++) {  
  153.                 if(mineArray[i][j] >= 0 && $('#b' + i + '-' + j).hasClass('hidden')) openBlock(i, j);  
  154.             }  
  155.         }  
  156.     }  
  157. }  
  158. //計時  
  159. function timer(){  
  160.     if(inGame == 1) {  //只在游戲進行中計時  
  161.         var now = new Date(),  
  162.             ms = now.getTime();  
  163.         $('#time').text(Math.ceil((ms - startTime) / 1000));  
  164.         if(inGame == 1) setTimeout(function() { timer(); }, 500);  
  165.     } else if(inGame == 2) {  
  166.         $('#time').text('0');  
  167.     }  
  168. }  
  169. //結束游戲  
  170. function endGame(isWin) {  
  171.     inGame = 0;  
  172.     for(var i = 1, row = mineArray.length - 1; i < row; i ++) {  
  173.         for(var j = 1, col = mineArray[0].length - 1; j < col; j ++) {  
  174.             if(isWin) {  
  175.                 if($('#b' + i + '-' + j).hasClass('hidden') && !$('#b' + i + '-' + j).hasClass('flag')) $('#b' + i + '-' + j).addClass('flag');  
  176.                 lastNum = 0;  
  177.                 $('#lastnum').text(lastNum);  
  178.             } else {  
  179.                 openBlock(i, j);  
  180.             }  
  181.         }  
  182.     }  
  183.     $('#warning').text(isWin ? 'You Win!' : 'You Lose!');  
  184. } 

【HTML部分】

  1. <div id="menu"> 
  2.     <a href="javascript:;" onclick="init(10,10,10);">初級</a> 
  3.     <a href="javascript:;" onclick="init(16,16,40);">中級</a> 
  4.     <a href="javascript:;" onclick="init(30,16,99);">高級</a> 
  5.     <input type="checkbox" id="check" /><label for="check">是否使用標記(?)</label> 
  6. </div> 
  7. <div id="submenu"> 
  8.     剩余雷數：<span id="lastnum"></span> 
  9.     時間：<span id="time"></span>秒  
  10.     <span id="warning"></span> 
  11. </div> 
  12. <div id="main"></div> 

【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;} 

最后是運行效果，你可以進入他的博客進行在線游戲

原文鏈接：http://www.cnblogs.com/barrichello/archive/2012/09/11/2679582.html

【編輯推薦】

  1. 編程賦予了我們什么樣的改變
  2. JS游戲開發(fā)，讓你的靜態(tài)人物動起來
  3. JS游戲開發(fā)（二）讓目標人物移動
  4. JavaScript制作新浪網易的評論塊
  5. 從未離開過的JavaScript應用
責任編輯：張偉 來源： 巴里切羅的博客
JavaScriptJSjQ
相關推薦

2022-07-08 14:53:46

掃雷小游戲鴻蒙

2022-03-29 07:40:23

H5游戲開發(fā)掃雷游戲

2012-01-10 12:48:52

Java

2022-11-01 15:17:48

JS鴻蒙小游戲

2022-08-25 21:41:43

ArkUI鴻蒙

2022-02-11 14:39:11

游戲JS鴻蒙

2022-10-28 16:20:10

JS鴻蒙小游戲

2022-02-11 14:02:09

游戲JS鴻蒙

2011-03-15 13:19:11

jQuery

2023-10-17 10:20:53

VueReact

2020-08-20 20:30:49

C語言小游戲貪吃蛇

2018-01-22 20:35:27

微信小游戲開發(fā)

2022-08-04 13:55:08

拼數字小游戲鴻蒙

2022-08-22 17:28:34

ArkUI鴻蒙

2020-12-09 11:42:18

WiFi IoT鴻蒙開發(fā)

2022-02-17 20:18:27

JS鴻蒙操作系統(tǒng)

2022-10-31 15:22:37

JS鴻蒙小游戲

2021-02-23 07:01:24

js小游戲技術

2019-10-08 15:27:18

掃雷BashLinux

2012-01-18 10:53:08

iOS小游戲
點贊
收藏

51CTO技術棧公眾號