如何将JavaScript版扫雷游戏改写为长尾词？

本文共计1911个文字，预计阅读时间需要8分钟。

原文：本文实例为大家分享了js版扫雷游戏的整体代码，供大家参考。具体内容如下：+ 面板 + 考虑到简单，一般，困难三个难度区域的格子数都不相同，所以面板上的扫雷区域是动态生成的。+ 先搭建‘‘+’’

改写后：本文提供js扫雷游戏完整代码示例，供学习参考。主要内容包括：+ 游戏界面 + 设计上，不同难度（简单、一般、困难）的扫雷区域格子数不同，因此游戏界面上的扫雷区域是动态构建的。+ 初始化阶段 + 首先构建游戏界面。

本文实例为大家分享了js版扫雷游戏的具体代码，供大家参考，具体内容如下

界面

考虑到简单，一般，困难三个扫雷区域的格子数都不同，所以界面上的扫雷区域是用js动态生成。
先搭好整体html框架：

<div class="container">         <div class="level">             <button class="select">简单</button>             <button>一般</button>             <button>困难</button>             <button>重新开始</button>         </div>         <div class="mine">             //扫雷区域         </div>         <div class="last">总共雷数 ： <span class="mineNum"></span></div> </div>

首先写一个MineSweeper()构造方法：

function MineSweeper(tr, td, mineNum) {     this.tr = tr; //行     this.td = td; //列     this.mineNum = mineNum; //雷数     this.area = [];  //存取每个格子信息     this.doms = [];  //存储格子DOM,用来动态创建DOM     this.lastMineNum = mineNum; //剩余雷数     this.parent = document.querySelector('.mine');     this.num = document.querySelector('.last .mineNum'); }

扫雷区域用一个二维数组表示并存储：

/* * 扫雷游戏区域area(二维数组) * [ *      [type: mine/number, x1, y1], *      [type: mine/number, x2, y2], *       ... , *      [type: mine/number, xn, yn] * ] */

其中type有两个值，mine表示当前格子是一个雷；number表示当前格子是一个数字。
在构造方法的原型上添加方法创建DOM表格，用来动态生成扫雷区域界面：

MineSweeper.prototype.create = function() {     var _this = this;     var table = document.createElement('table');     for(var i = 0; i < this.tr; i++) {         var trDom = document.createElement('tr');         //创建行         this.doms[i] = [];         for(var j = 0; j < this.td; j++) {             //创建列             var tdDom = document.createElement('td');             this.doms[i][j] = tdDom;             trDom.appendChild(tdDom); //往行中添加列         }         table.appendChild(trDom);//往table中添加行     }     this.parent.appendChild(table); //将table添加到界面 };

JS

function MineSweeper(tr, td, mineNum) {     this.tr = tr; //行     this.td = td; //列     this.mineNum = mineNum;      this.area = [];      this.doms = [];      this.lastMineNum = mineNum;      this.parent = document.querySelector('.mine');     this.num = document.querySelector('.last .mineNum'); } //初始化 MineSweeper.prototype.init = function() {     var rn = this.randomNum(); //获得type: mine 的索引     var n = 0; //记录格子索引     for(var i = 0; i < this.tr; i++) {         this.area[i] = [];         for(var j = 0; j < this.td; j++) {             n ++;             if(rn.indexOf(n) !== -1) {                 this.area[i][j] = {                     type: 'mine',                     x: j,                     y: i                 };             } else {                 this.area[i][j] = {                     type: 'number',                     x: j,                     y: i,                     value: 0                 };             }         }     }     // console.log(this.area);     this.num.innerHTML = this.mineNum; //初始化雷数     this.parent.oncontextmenu = function() {         return false; //阻止右击菜单事件     }     this.updateNumber();     //创建表格     this.parent.innerHTML = "";     this.create(); } //创建DOM表格 MineSweeper.prototype.create = function() {     var _this = this;     var table = document.createElement('table');     for(var i = 0; i < this.tr; i++) {         var trDom = document.createElement('tr');         this.doms[i] = [];         for(var j = 0; j < this.td; j++) {             var tdDom = document.createElement('td');             this.doms[i][j] = tdDom;             trDom.appendChild(tdDom);             tdDom.pos = [i, j];             tdDom.onmousedown = function(event) {                 if(event.button === 0) {  //鼠标左键                     var curArea = _this.area[this.pos[0]][this.pos[1]];                     console.log(curArea)                     if(curArea.type === 'mine') {                         // console.log('踩到雷了！')                         this.className = 'mine';                         _this.gameOver(this);                                              } else {                         // console.log('is number')                         if(!curArea.value) {  //踩到0，出现一大片                             // console.log(0);                             this.className = 'select'; //先显示自己                             this.innerHTML = '';                                                          function getAllZero(area) {                                 var around = _this.mineAround(area); //找其周围的格子                                 for(var i = 0; i < around.length; i++) {                                     var x = around[i][0]; //行                                     var y = around[i][1]; //列                                     _this.doms[x][y].className = 'select';                                     if(!_this.area[x][y].value) {                                         if(!_this.doms[x][y].isHas) {                                               _this.doms[x][y].isHas = true; //标记被找过的元素,避免格子重复重复被调用,导致内存资源被滥用                                             arguments.callee(_this.area[x][y])                                         }                                     } else {                                         _this.doms[x][y].innerHTML = _this.area[x][y].value;                                     }                                 }                             }                             getAllZero(curArea);                         } else {                             this.className = 'select';                             this.innerHTML = curArea.value;                         }                                              }                                  } else if(event.button === 2) {  //鼠标右键                     this.className = this.className == 'flag'? '':'flag';                     //标记小旗子，则剩余雷数-1                     if(this.className === 'flag') {                         _this.num.innerHTML = --_this.lastMineNum;                     } else {                         _this.num.innerHTML = ++_this.lastMineNum;                     }                 }             }         }         table.appendChild(trDom);     }     this.parent.appendChild(table); }; //生成指定数量的不重复的数字 MineSweeper.prototype.randomNum = function() {     var mineArr = new Array(this.tr*this.td); //该数组用来存储所有格子下标     for(var i = 0; i < mineArr.length; i++) {         mineArr[i] = i;     }     mineArr.sort(function() {return 0.5 - Math.random()}); //将数组乱序排序     return mineArr.slice(0, this.mineNum); //随机取得放置雷的下标 }; //找目标格子周围的格子, 雷周围的格子都需要number++ MineSweeper.prototype.mineAround = function(target) {     var x = target.x;     var y = target.y;     var result = []; //二位数组,存储周围格子的坐标     for(var i = x-1; i <= x+1; i++) {         for(var j = y-1; j <= y+1; j++) {             if(                   i < 0 || j < 0 || i > this.td - 1 || j > this.tr - 1 ||  //排除四个角                   (i == x && j == y) ||                            //排除周围是雷                   this.area[j][i].type === 'mine'                   ){                 continue;             }             result.push([j, i]);         }     }     return result;  }; //更新所有数字 MineSweeper.prototype.updateNumber = function() {     for(var i = 0; i < this.tr; i++) {         for(var j = 0; j < this.td; j++) {             if(this.area[i][j].type == 'number') {                 continue;             }             var nums = this.mineAround(this.area[i][j]);  //获取雷周围的格子             for(var k = 0; k < nums.length; k++) {                 //雷周围的格子的number都要+1                 this.area[nums[k][0]][nums[k][1]].value += 1;             }         }     } }; //gameOver MineSweeper.prototype.gameOver = function(downMine) {     for(var i = 0; i < this.tr; i++) {         for(var j = 0; j < this.td; j++) {             if(this.area[i][j].type === 'mine') {                 this.doms[i][j].className = 'mine';             }             this.doms[i][j].onmousedown = null;         }     }     if(downMine) {         downMine.style.backgroundColor = '#f40';     } } function startGame() {     var btn = document.querySelectorAll('.container .level>button');     var arr = [[10,10,15],[15,15,40],[20,20,80]];     var select = 0; //当前选中状态的按钮     var mine = null;     for(let i = 0; i < btn.length - 1; i++) {         console.log(i);         console.log(arr);         btn[i].onclick = function(e) {             btn[select].className = '';             this.className = 'select';             select = i;             mine = new MineSweeper(...arr[i]);             console.log(arr[i]);             mine.init();         }     }     btn[0].onclick();     btn[3].onclick = function() {         mine.init();     } } startGame();

CSS

.container {     margin: 30px auto;     text-align: center; } .container .level button {     background-color: #e5c1cd;     outline-style: none;     border: none;     cursor: pointer;     color: #fff; } .container .level button.select {     background-color: #b6b4c2; } .container .mine table {     border-spacing: 1px;     margin: 10px auto; } .container .mine table td {     width: 18px;     height: 18px;     padding: 0;     background-color: #bfb8da;     border: 2px solid;     border-color: #ebd7d4 #a56781 #a56781 #ebd7d4;     text-align: center;     line-height: 16px;     font-weight: bold; } .container .mine table td.select, .container .mine table td.mine {     background-color: #bfb8da;     border: 1px solid #ebd7d4; } .container .mine table td.mine {     background-image: url("../image/mine.png");     background-repeat: no-repeat;     background-size: cover; } .container .mine table td.flag {     background-image: url("../image/flag.png");     background-repeat: no-repeat;     background-size: cover; } .container .last {     color: #d87f81; }

HTML

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>MineSweeper</title>     <link rel="stylesheet" href="./css/index.css"> </head> <body>     <div class="container">         <div class="level">             <button class="select">简单</button>             <button>一般</button>             <button>困难</button>             <button>重新开始</button>         </div>         <div class="mine">                      </div>         <div class="last">总共雷数 ： <span class="mineNum"></span></div>     </div> <script src="./js/index.js"></script> </body> </html>

更新数字

遍历扫雷区域数组，当遇到雷时，取到其周围的格子，如果是数字，则number都+1；如果是雷，则该格子不作操作。

MineSweeper.prototype.updateNumber = function() {     for(var i = 0; i < this.tr; i++) {         for(var j = 0; j < this.td; j++) {             if(this.area[i][j].type == 'number') {                 continue;  //遇到数字格子跳过,不需要取其周围的格子             }             var nums = this.mineAround(this.area[i][j]);  //获取雷周围的格子             for(var k = 0; k < nums.length; k++) {                 //雷周围的格子的number都要+1                 this.area[nums[k][0]][nums[k][1]].value += 1;             }         }     } };

实现效果：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。