Javascript 实现扫雷小游戏（含详细注释）

ゝ一世哀愁。 2022-11-27 08:50 390阅读 0赞

" class="reference-link">样例展示在这里插入图片描述

在这里插入图片描述

文件夹结构

在这里插入图片描述

index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>JS扫雷</title>
  8.     <link rel="stylesheet" href="CSS/index.css">
  9.     <link rel="icon" href="favicon.ico">
  10. </head>
  12. <body>
  13.     <div id="mine">
  14.         <div class="level">
  15.             <button class="active">初级</button>
  16.             <button>中级</button>
  17.             <button>高级</button>
  18.             <button>重新开始</button>
  19.         </div>
  20.         <div class="gameBox">
  21.         </div>
  22.         <div class="info">
  23.             剩余雷数：<span class="mineNum"></span>
  24.             <br>
  25.             <span class="tips">左键扫雷，右键插旗，再次点击右键拔旗</span>
  26.         </div>
  27.     </div>
  28.     <script src="JS/index.js"></script>
  29. </body>
  31. </html>

index.css

  1. #mine {
  3.     margin: 50px auto;
  5. }
  7. .level {
  9.     text-align: center;
  10.     margin-bottom: 10px;
  11. }
  13. .level button {
  15.     padding: 5px 15px;
  16.     background-color: #02a4ad;
  17.     border: none;
  18.     color: #fff;
  19.     border-radius: 3px;
  20.     outline: none;
  21.     cursor: pointer;
  22. }
  24. .level button.active {
  26.     background-color: #00abff;
  27. }
  29. table {
  31.     border-spacing: 1px;
  32.     background-color: #929196;
  33.     margin: 0 auto;
  34. }
  36. td {
  38.     padding: 0;
  39.     width: 20px;
  40.     height: 20px;
  41.     background-color: #ccc;
  42.     border: 2px solid;
  43.     border-color: #fff #a1a1a1 #a1a1a1 #fff;
  44.     text-align: center;
  45.     line-height: 20px;
  46.     font-weight: bold;
  48. }
  50. .tips {
  52.     color: red;
  53.     font-size: 16px;
  54. }
  56. .mine {
  58.     background: #d9d9d9 url(../images/mine.png) no-repeat center;
  59.     background-size: cover;
  60. }
  62. .flag {
  64.     background: #ccc url(../images/flag.png) no-repeat center;
  65.     background-size: cover;
  66. }
  68. .info {
  70.     margin-top: 10px;
  71.     text-align: center;
  72. }
  75. td.zero {
  77.     background-color: #d9d9d9;
  78.     border-color: #d9d9d9;
  79. }
  81. td.one {
  83.     background-color: #d9d9d9;
  84.     border-color: #d9d9d9;
  85.     color: #0332fe;
  86. }
  88. td.two {
  90.     background-color: #d9d9d9;
  91.     border-color: #d9d9d9;
  92.     color: #019f02;
  93. }
  95. td.three {
  97.     background-color: #d9d9d9;
  98.     border-color: #d9d9d9;
  99.     color: #ff2600;
  100. }
  102. td.four {
  104.     background-color: #d9d9d9;
  105.     border-color: #d9d9d9;
  106.     color: #93208f;
  107. }
  109. td.five {
  111.     background-color: #d9d9d9;
  112.     border-color: #d9d9d9;
  113.     color: #ff7f29;
  114. }
  116. td.six {
  118.     background-color: #d9d9d9;
  119.     border-color: #d9d9d9;
  120.     color: #ff3fff;
  121. }
  123. td.seven {
  125.     background-color: #d9d9d9;
  126.     border-color: #d9d9d9;
  127.     color: #3fffbf;
  128. }
  130. td.eight {
  132.     background-color: #d9d9d9;
  133.     border-color: #d9d9d9;
  134.     color: #22ee0f;
  135. }

index.js(核心代码）

内含详细注释

  1. function Mine(tr, td, mineNum) {
  3.     this.tr = tr; // tr表示行数  
  4.     this.td = td; // td表示列数  
  5.     this.mineNum = mineNum; // mineNum表示雷的数量
  7.     this.squares = []; // 存储所有方块的信息，是一个二维数组，按照行与列的顺序排放，存取都按照行列方式
  8.     this.tds = []; // 存储所有单元格的DOM
  9.     this.surplusMine = mineNum; // 剩余雷的数量
  10.     this.allRight = false; // 右击标注的小红旗是否全部是雷，用来判断用户是否游戏成功
  11.     this.parent = document.querySelector('.gameBox');
  12. }
  14. // 生成n个不重复的数字
  15. Mine.prototype.randomNum = function () {
  17.     var square = new Array(this.tr * this.td); // 生成一个空数组  长度为格子总数
  18.     for (var i = 0; i < square.length; i++) {
  20.         square[i] = i;
  21.     }
  22.     // 数组乱序
  23.     square.sort(function () {
  25.         return 0.5 - Math.random()
  26.     });
  27.     return square.slice(0, this.mineNum);
  28. };
  30. Mine.prototype.init = function () {
  32.     // this.randomNum();
  33.     var rn = this.randomNum(); // 雷在格子里的位置
  34.     var n = -1; // 用来找到对应的索引格子
  35.     for (var i = 0; i < this.tr; i++) {
  37.         this.squares[i] = [];
  38.         for (var j = 0; j < this.td; j++) {
  40.             // 取一个方块在数组里的数据，要使用行与列的形式存取
  41.             // 找方块周围的方块的时候，要用坐标的形式去取
  42.             // 行与列的形式，和坐标的形式，x，y是刚好相反的
  43.             n++;
  44.             if (rn.indexOf(n) != -1) {
  46.                 // 如果这个条件成立，说明现在循环到的索引在雷的数组里面找到了，那就表明这个索引对应的是个雷
  47.                 this.squares[i][j] = {
  49.                     type: 'mine',
  50.                     x: j,
  51.                     y: i
  52.                 };
  54.             } else {
  56.                 this.squares[i][j] = {
  58.                     type: 'number',
  59.                     x: j,
  60.                     y: i,
  61.                     value: 0
  62.                 };
  63.             }
  64.         }
  65.     }
  67.     this.updateNum();
  68.     this.createDom();
  70.     this.parent.oncontextmenu = function () {
  72.         return false;
  73.         // 阻止右键出菜单事件
  74.     }
  76.     // 剩余雷数
  77.     this.mineNumDom = document.querySelector('.mineNum');
  78.     this.mineNumDom.innerHTML = this.surplusMine;
  79. };
  81. // 创建表格
  82. Mine.prototype.createDom = function () {
  84.     var This = this;
  85.     var table = document.createElement('table');
  86.     for (var i = 0; i < this.tr; i++) {
  87.      // 行
  88.         var domTr = document.createElement('tr');
  89.         this.tds[i] = [];
  90.         for (var j = 0; j < this.td; j++) {
  91.      // 列
  92.             var domTd = document.createElement('td');
  93.             this.tds[i][j] = domTd; // 把所有创建的td添加到数组当中
  94.             domTd.pos = [i, j]; // 把格子对应的行和列村到格子身上，为了下面通过这个值去数组里面取到对应的数据
  95.             domTd.onmousedown = function () {
  97.                 This.play(event, this); // 大的This 指的是实例对象   小的this指的是点击的domTd 
  98.             };
  100.             // if (this.squares[i][j].type == 'mine') {
  102.             //     domTd.className = 'mine';
  103.             // }
  104.             // if (this.squares[i][j].type == 'number') {
  106.             //     domTd.innerHTML = this.squares[i][j].value;
  107.             // }
  109.             domTr.appendChild(domTd);
  110.         }
  111.         table.appendChild(domTr);
  112.     }
  113.     this.parent.innerHTML = ''; // 避免多次点击创建多个
  115.     this.parent.appendChild(table);
  116. };
  118. // 找某个方格周围的八个格子
  119. Mine.prototype.getAround = function (square) {
  121.     var x = square.x,
  122.         y = square.y;
  123.     var result = []; // 把找到的格子的坐标返回出去（二维数组）
  124.     for (var i = x - 1; i <= x + 1; i++) {
  126.         for (var j = y - 1; j <= y + 1; j++) {
  128.             if (i < 0 ||
  129.                 j < 0 ||
  130.                 i > this.td - 1 ||
  131.                 j > this.tr - 1 ||
  132.                 // 上述表示出边界
  133.                 (i == x && j == y) ||
  134.                 // 表示循环到自己
  135.                 this.squares[j][i].type == 'mine'
  136.                 // 表示循环到（周围的格子）雷 (注意i和j表示的是坐标，而squares存储的是行和列)
  137.             ) {
  139.                 continue;
  140.             }
  141.             // 要以行与列的形式返回出去，因为到时候需要它去取数组里的数据
  142.             result.push([j, i]);
  143.         }
  144.     }
  145.     return result;
  146. }
  148. // 更新所有的数字
  149. Mine.prototype.updateNum = function () {
  151.     for (var i = 0; i < this.tr; i++) {
  153.         for (var j = 0; j < this.td; j++) {
  155.             // 要更新的是雷周围的数字
  156.             if (this.squares[i][j].type == 'number') {
  158.                 continue;
  159.             }
  160.             var num = this.getAround(this.squares[i][j]); // 获取到每一个雷周围的数字
  161.             for (var k = 0; k < num.length; k++) {
  163.                 this.squares[num[k][0]][num[k][1]].value += 1;
  164.             }
  165.         }
  166.     }
  167. };
  169. Mine.prototype.play = function (ev, obj) {
  171.     var This = this;
  172.     if (ev.which == 1 && obj.className != 'flag') {
  173.      // 后面的条件是为了用户右键之后不能点击
  174.         // 点击的是左键
  175.         var curSquare = this.squares[obj.pos[0]][obj.pos[1]];
  176.         var cl = ['zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight'];
  177.         // cl 存储className
  179.         if (curSquare.type == 'number') {
  181.             // 用户点击的是数字
  182.             obj.innerHTML = curSquare.value;
  183.             obj.className = cl[curSquare.value];
  185.             // 点到了数字零
  186.             if (curSquare.value == 0) {
  188.                 /* 
  189.                     递归思路： 
  190.                     1.显示自己
  191.                     2.查找四周
  192.                         1) 显示四周（如果四周的值不为零，那就显示到这，不需要再找了）
  193.                         2）如果值为零了
  194.                             a.显示自己
  195.                             b.找四周（如果四周的值不为零，那就显示到这，不需要再找了）
  196.                                 I.显示自己
  197.                                 II.找四周（如果四周的值不为零，那就显示到这，不需要再找了）
  198.                                     。。。。。。
  199.                  */
  201.                 obj.innerHTML = ''; // 显示为空
  202.                 function getAllZero(square) {
  204.                     var around = This.getAround(square); // 找到了周围N个格子
  205.                     for (var i = 0; i < around.length; i++) {
  207.                         var x = around[i][0]; // 行
  208.                         var y = around[i][1]; // 列
  209.                         This.tds[x][y].className = cl[This.squares[x][y].value];
  211.                         if (This.squares[x][y].value == 0) {
  213.                             // 如果以某个格子为中心，找到的某个格子为零，那就接着调用（递归）
  214.                             if (!This.tds[x][y].check) {
  216.                                 // 给对应的td 添加一条属性，如果找过的话，这个值就为true，下一次就不会再找了，防止函数调用栈出问题
  217.                                 This.tds[x][y].check = true;
  218.                                 getAllZero(This.squares[x][y]);
  219.                             }
  221.                         } else {
  223.                             // 如果以某个格子为中心找到的四周的值不为零，就把数字显示出来
  224.                             This.tds[x][y].innerHTML = This.squares[x][y].value;
  225.                         }
  226.                     }
  228.                 }
  229.                 getAllZero(curSquare);
  230.             }
  232.         } else {
  234.             // 用户点击的是雷
  235.             this.gameOver(obj);
  236.         }
  237.     }
  238.     if (ev.which == 3) {
  240.         // 用户点击的是右键
  241.         // 如果右击的是一个数字，就不能点击
  242.         if (obj.className && obj.className != 'flag') {
  244.             return;
  245.         }
  246.         obj.className = obj.className == 'flag' ? '' : 'flag'; // 切换calss 有无
  248.         if (this.squares[obj.pos[0]][obj.pos[1]].type == 'mine') {
  250.             this.allRight = true;
  251.         } else {
  253.             this.allRight = false;
  254.         }
  256.         if (obj.className == 'flag') {
  258.             this.mineNumDom.innerHTML = --this.surplusMine;
  259.         } else {
  261.             this.mineNumDom.innerHTML = ++this.surplusMine;
  262.         }
  264.         if (this.surplusMine == 0) {
  266.             // 剩余的雷的数量为0，表示用户已经标完小红旗了，这时候要判断游戏是成功还是结束
  267.             if (this.allRight == true) {
  269.                 // 这个条件成立，说明用户全部标对了
  270.                 alert('恭喜你，游戏通过');
  271.                 for (i = 0; i < this.tr; i++) {
  273.                     for (j = 0; j < this.td; j++) {
  275.                         this.tds[i][j].onmousedown = null;
  276.                     }
  277.                 }
  279.             } else {
  281.                 alert('游戏失败');
  282.                 this.gameOver();
  283.             }
  284.         }
  285.     }
  286. }
  288. // 游戏失败函数
  289. Mine.prototype.gameOver = function (clickTd) {
  291.     /* 
  292.         1.显示所有的雷
  293.         2.取消所有格子的点击事件
  294.         3.给点中的格子标红
  295.     */
  296.     for (i = 0; i < this.tr; i++) {
  298.         for (j = 0; j < this.td; j++) {
  300.             if (this.squares[i][j].type == 'mine') {
  302.                 this.tds[i][j].className = 'mine';
  303.             }
  304.             this.tds[i][j].onmousedown = null;
  305.         }
  306.     }
  307.     if (clickTd) {
  309.         clickTd.style.backgroundColor = '#f00';
  310.     }
  311. }
  313. // var mine = new Mine(28, 28, 99);
  314. // mine.init();
  316. // 添加 button 的功能
  317. var btns = document.getElementsByTagName('button');
  318. var mine = null; // 用来存储生成的实例
  319. var ln = 0; // 用来处理当前选中的状态
  320. var arr = [
  321.     [9, 9, 10],
  322.     [16, 16, 40],
  323.     [28, 28, 99]
  324. ]; //不同级别的行数，列数，雷数
  325. for (let i = 0; i < btns.length - 1; i++) {
  327.     btns[i].onclick = function () {
  329.         btns[ln].className = '';
  330.         this.className = 'active';
  331.         mine = new Mine(arr[i][0], arr[i][1], arr[i][2]);
  332.         mine.init();
  333.         ln = i;
  334.     }
  335. }
  336. btns[0].onclick(); // 初始化
  337. btns[3].onclick = function () {
  339.     for (var i = 0; i < btns.length - 1; i++) {
  341.         if (btns[i].className == 'active') {
  343.             btns[i].onclick();
  344.         }
  345.     }
  346. }

图片

在这里插入图片描述
在这里插入图片描述
其中的 favicon.ico 是用地雷进行格式转换得到的，大家可自行解决

end

发表评论

表情：
评论列表 （有 0 条评论，390人围观）

还没有评论，来说两句吧...

相关阅读

    相关 扫雷小游戏

    先感谢大家的反馈意见，扫雷小游戏的升级版已经完成。至此，扫雷游戏开发也就告一段落了。当前的版本在上一版本的基础上做了如下修改： 1. 雷区方格加大了5个像素点； 2. 资源

    清疚清疚/ 0 赞/ 399 阅读