原生JS实现扫雷—

项目展示图

在这里插入图片描述

项目准备

一样的，我们先是准备出三个文件夹，以及根目录下的index.html 文件

在这里插入图片描述

然后是两张图片（地雷和旗子）

在这里插入图片描述

之后是html结构

html

首先是最外层的游戏内容区域的div 取名id为mine

<div id="mine">
</div>

之后是游戏内容区域中最上面的四个按钮，我们用四个button标签来表示，并且用一个div来包裹起来

并且给初级按钮一个最初的选中的样式

<div class="level"><button class="active">初级</button><button>中级</button><button>高级</button><button>重新开始</button>
</div>

之后是 game 的游戏进行区域，也就是雷区

<div class="gameBox">
</div>

最后一个是提示区域

<div class="info">剩余雷数：<span class="mineNum"></span><br><span class="tips">左键扫雷，右键插旗，再次点击右键拔旗</span>
</div>

那么最后，我们整合一下最后的代码如下

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS扫雷</title><link rel="stylesheet" href="CSS/index.css"><link rel="icon" href="favicon.ico">
</head><body><div id="mine"><div class="level"><button class="active">初级</button><button>中级</button><button>高级</button><button>重新开始</button></div><div class="gameBox"></div><div class="info">剩余雷数：<span class="mineNum"></span><br><span class="tips">左键扫雷，右键插旗，再次点击右键拔旗</span></div></div><script src="JS/index.js"></script>
</body></html>

CSS

首先呢我们给mine最外层的区域，让主内容居中

#mine {margin: 50px auto;
}

之后，给level 的 div 和里面的 button 添加样式

并且，添加默认的active样式

.level {text-align: center;margin-bottom: 10px;
}.level button {padding: 5px 15px;background-color: #02a4ad;border: none;color: #fff;border-radius: 3px;outline: none;cursor: pointer;
}.level button.active {background-color: #00abff;
}

之后，我们先重定义了下 table标签和 td 标签，我们的扫雷主要的游戏区域就是通过table标签来实现

table {border-spacing: 1px;background-color: #929196;margin: 0 auto;
}td {padding: 0;width: 20px;height: 20px;background-color: #ccc;border: 2px solid;border-color: #fff #a1a1a1 #a1a1a1 #fff;text-align: center;line-height: 20px;font-weight: bold;}

之后是提示区域的样式

.info {margin-top: 10px;text-align: center;
}.tips {color: red;font-size: 16px;
}

最后，我们预定义一些样式

比如，我们的地雷的样式,以及我们的棋子的样式

.mine {background: #d9d9d9 url(../images/mine.png) no-repeat center;background-size: cover;
}
.flag {background: #ccc url(../images/flag.png) no-repeat center;background-size: cover;
}

最后还有一个就是游戏内，一些方块会现实数字，这些数字代表了改方块周围的雷的数量

td.zero {background-color: #d9d9d9;border-color: #d9d9d9;
}td.one {background-color: #d9d9d9;border-color: #d9d9d9;color: #0332fe;
}td.two {background-color: #d9d9d9;border-color: #d9d9d9;color: #019f02;
}td.three {background-color: #d9d9d9;border-color: #d9d9d9;color: #ff2600;
}td.four {background-color: #d9d9d9;border-color: #d9d9d9;color: #93208f;
}td.five {background-color: #d9d9d9;border-color: #d9d9d9;color: #ff7f29;
}td.six {background-color: #d9d9d9;border-color: #d9d9d9;color: #ff3fff;
}td.seven {background-color: #d9d9d9;border-color: #d9d9d9;color: #3fffbf;
}td.eight {background-color: #d9d9d9;border-color: #d9d9d9;color: #22ee0f;
}

所以综上所述，整合了下css代码，我们的css完整的代码如下

#mine {margin: 50px auto;}.level {text-align: center;margin-bottom: 10px;
}.level button {padding: 5px 15px;background-color: #02a4ad;border: none;color: #fff;border-radius: 3px;outline: none;cursor: pointer;
}.level button.active {background-color: #00abff;
}table {border-spacing: 1px;background-color: #929196;margin: 0 auto;
}td {padding: 0;width: 20px;height: 20px;background-color: #ccc;border: 2px solid;border-color: #fff #a1a1a1 #a1a1a1 #fff;text-align: center;line-height: 20px;font-weight: bold;}.tips {color: red;font-size: 16px;
}.mine {background: #d9d9d9 url(../images/mine.png) no-repeat center;background-size: cover;
}.flag {background: #ccc url(../images/flag.png) no-repeat center;background-size: cover;
}.info {margin-top: 10px;text-align: center;
}td.zero {background-color: #d9d9d9;border-color: #d9d9d9;
}td.one {background-color: #d9d9d9;border-color: #d9d9d9;color: #0332fe;
}td.two {background-color: #d9d9d9;border-color: #d9d9d9;color: #019f02;
}td.three {background-color: #d9d9d9;border-color: #d9d9d9;color: #ff2600;
}td.four {background-color: #d9d9d9;border-color: #d9d9d9;color: #93208f;
}td.five {background-color: #d9d9d9;border-color: #d9d9d9;color: #ff7f29;
}td.six {background-color: #d9d9d9;border-color: #d9d9d9;color: #ff3fff;
}td.seven {background-color: #d9d9d9;border-color: #d9d9d9;color: #3fffbf;
}td.eight {background-color: #d9d9d9;border-color: #d9d9d9;color: #22ee0f;
}

JavaScript

思路

这次我们打算在原型链上编程

首先，我们先写出mine 的构造函数

Mine 构造函数

function Mine(tr, td, mineNum) {this.tr = tr;                                       // tr表示行数  this.td = td;                                       // td表示列数  this.mineNum = mineNum;                             // mineNum表示雷的数量this.squares = [];                                  // 存储所有方块的信息，是一个二维数组，按照行与列的顺序排放，存取都按照行列方式this.tds = [];                                      // 存储所有单元格的DOMthis.surplusMine = mineNum;                         // 剩余雷的数量this.allRight = false;                              // 右击标注的小红旗是否全部是雷，用来判断用户是否游戏成功this.parent = document.querySelector('.gameBox');
}

生成随机的雷的排布

我们构造函数中传进去了三个参数，行数，列数，以及需要的雷数，我们的思路是这样的，我们游戏是在table里面进行，table一共有 tr * td 个格子，那么我们可以创建一个长度为 tr * td 的数组，然后，给数组赋值，每个值对应一个方格，最后再给数组乱序，取出前 mineNum（需要的雷数）个，这mineNum个方格所对应的就是我们的地雷的方格

那么我们写出我们的js代码

Mine.prototype.randomNum = function () {var square = new Array(this.tr * this.td); // 生成一个空数组  长度为格子总数for (var i = 0; i < square.length; i++) {square[i] = i;}// 数组乱序square.sort(function () {return 0.5 - Math.random()});return square.slice(0, this.mineNum);
};

创建表格

我们虽然上述把雷的位置取出了，但是，我们再创建游戏区域的时候，并没必要，在创建的时候就将逻辑写入，我们可以在点击小方格的时候，来判断其位置是否是雷还是空即可

因此，我们先写出创建表格的 js 代码

Mine.prototype.createDom = function () {var This = this;var table = document.createElement('table');for (var i = 0; i < this.tr; i++) {                 // 行var domTr = document.createElement('tr');this.tds[i] = [];for (var j = 0; j < this.td; j++) {             // 列var domTd = document.createElement('td');this.tds[i][j] = domTd;                     // 把所有创建的td添加到数组当中domTd.pos = [i, j];                         // 把格子对应的行和列村到格子身上，为了下面通过这个值去数组里面取到对应的数据domTd.onmousedown = function () {This.play(event, this);                 // 大的This 指的是实例对象   小的this指的是点击的domTd };// if (this.squares[i][j].type == 'mine') {//     domTd.className = 'mine';// }// if (this.squares[i][j].type == 'number') {//     domTd.innerHTML = this.squares[i][j].value;// }domTr.appendChild(domTd);}table.appendChild(domTr);}this.parent.innerHTML = '';                         // 避免多次点击创建多个this.parent.appendChild(table);
};

其中的 This.play 是我们点击方块之后的判断，判断是雷还是空

再写play函数之前，我们还有一些其他的逻辑需要编写

初始化函数

Mine.prototype.init = function () {// this.randomNum();var rn = this.randomNum();                  // 雷在格子里的位置var n = -1;                                 // 用来找到对应的索引格子for (var i = 0; i < this.tr; i++) {this.squares[i] = [];for (var j = 0; j < this.td; j++) {// 取一个方块在数组里的数据，要使用行与列的形式存取// 找方块周围的方块的时候，要用坐标的形式去取// 行与列的形式，和坐标的形式，x，y是刚好相反的n++;if (rn.indexOf(n) != -1) {// 如果这个条件成立，说明现在循环到的索引在雷的数组里面找到了，那就表明这个索引对应的是个雷this.squares[i][j] = {type: 'mine',x: j,y: i};} else {this.squares[i][j] = {type: 'number',x: j,y: i,value: 0};}}}this.updateNum();this.createDom();this.parent.oncontextmenu = function () {return false;// 阻止右键出菜单事件}// 剩余雷数this.mineNumDom = document.querySelector('.mineNum');this.mineNumDom.innerHTML = this.surplusMine;
};

getAround() 函数

// 找某个方格周围的八个格子
Mine.prototype.getAround = function (square) {var x = square.x,y = square.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.squares[j][i].type == 'mine'// 表示循环到（周围的格子）雷 (注意i和j表示的是坐标，而squares存储的是行和列)) {continue;}// 要以行与列的形式返回出去，因为到时候需要它去取数组里的数据result.push([j, i]);}}return result;
}

updateNum() 函数

// 更新所有的数字
Mine.prototype.updateNum = function () {for (var i = 0; i < this.tr; i++) {for (var j = 0; j < this.td; j++) {// 要更新的是雷周围的数字if (this.squares[i][j].type == 'number') {continue;}var num = this.getAround(this.squares[i][j]); // 获取到每一个雷周围的数字for (var k = 0; k < num.length; k++) {this.squares[num[k][0]][num[k][1]].value += 1;}}}
};

play函数

Mine.prototype.play = function (ev, obj) {var This = this;if (ev.which == 1 && obj.className != 'flag') { // 后面的条件是为了用户右键之后不能点击// 点击的是左键var curSquare = this.squares[obj.pos[0]][obj.pos[1]];var cl = ['zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight'];// cl 存储classNameif (curSquare.type == 'number') {// 用户点击的是数字obj.innerHTML = curSquare.value;obj.className = cl[curSquare.value];// 点到了数字零if (curSquare.value == 0) {/* 递归思路： 1.显示自己2.查找四周1) 显示四周（如果四周的值不为零，那就显示到这，不需要再找了）2）如果值为零了a.显示自己b.找四周（如果四周的值不为零，那就显示到这，不需要再找了）I.显示自己II.找四周（如果四周的值不为零，那就显示到这，不需要再找了）。。。。。。*/obj.innerHTML = '';                             // 显示为空function getAllZero(square) {var around = This.getAround(square);        // 找到了周围N个格子for (var i = 0; i < around.length; i++) {var x = around[i][0];                   // 行var y = around[i][1];                   // 列This.tds[x][y].className = cl[This.squares[x][y].value];if (This.squares[x][y].value == 0) {// 如果以某个格子为中心，找到的某个格子为零，那就接着调用（递归）if (!This.tds[x][y].check) {// 给对应的td 添加一条属性，如果找过的话，这个值就为true，下一次就不会再找了，防止函数调用栈出问题This.tds[x][y].check = true;getAllZero(This.squares[x][y]);}} else {// 如果以某个格子为中心找到的四周的值不为零，就把数字显示出来This.tds[x][y].innerHTML = This.squares[x][y].value;}}}getAllZero(curSquare);}} else {// 用户点击的是雷this.gameOver(obj);}}if (ev.which == 3) {// 用户点击的是右键// 如果右击的是一个数字，就不能点击if (obj.className && obj.className != 'flag') {return;}obj.className = obj.className == 'flag' ? '' : 'flag'; // 切换calss 有无if (this.squares[obj.pos[0]][obj.pos[1]].type == 'mine') {this.allRight = true;} else {this.allRight = false;}if (obj.className == 'flag') {this.mineNumDom.innerHTML = --this.surplusMine;} else {this.mineNumDom.innerHTML = ++this.surplusMine;}if (this.surplusMine == 0) {// 剩余的雷的数量为0，表示用户已经标完小红旗了，这时候要判断游戏是成功还是结束if (this.allRight == true) {// 这个条件成立，说明用户全部标对了alert('恭喜你，游戏通过');for (i = 0; i < this.tr; i++) {for (j = 0; j < this.td; j++) {this.tds[i][j].onmousedown = null;}}} else {alert('游戏失败');this.gameOver();}}}
}

gameOver函数

Mine.prototype.gameOver = function (clickTd) {/* 1.显示所有的雷2.取消所有格子的点击事件3.给点中的格子标红*/for (i = 0; i < this.tr; i++) {for (j = 0; j < this.td; j++) {if (this.squares[i][j].type == 'mine') {this.tds[i][j].className = 'mine';}this.tds[i][j].onmousedown = null;}}if (clickTd) {clickTd.style.backgroundColor = '#f00';}
}

最后，补充些其他的功能

其他

// 添加 button 的功能
var btns = document.getElementsByTagName('button');
var mine = null; // 用来存储生成的实例
var ln = 0; // 用来处理当前选中的状态
var arr = [[9, 9, 10],[16, 16, 40],[28, 28, 99]
]; //不同级别的行数，列数，雷数
for (let i = 0; i < btns.length - 1; i++) {btns[i].onclick = function () {btns[ln].className = '';this.className = 'active';mine = new Mine(arr[i][0], arr[i][1], arr[i][2]);mine.init();ln = i;}
}
btns[0].onclick(); // 初始化
btns[3].onclick = function () {for (var i = 0; i < btns.length - 1; i++) {if (btns[i].className == 'active') {btns[i].onclick();}}
}

js 整合代码

function Mine(tr, td, mineNum) {this.tr = tr;                                       // tr表示行数  this.td = td;                                       // td表示列数  this.mineNum = mineNum;                             // mineNum表示雷的数量this.squares = [];                                  // 存储所有方块的信息，是一个二维数组，按照行与列的顺序排放，存取都按照行列方式this.tds = [];                                      // 存储所有单元格的DOMthis.surplusMine = mineNum;                         // 剩余雷的数量this.allRight = false;                              // 右击标注的小红旗是否全部是雷，用来判断用户是否游戏成功this.parent = document.querySelector('.gameBox');
}// 生成n个不重复的数字
Mine.prototype.randomNum = function () {var square = new Array(this.tr * this.td); // 生成一个空数组  长度为格子总数for (var i = 0; i < square.length; i++) {square[i] = i;}// 数组乱序square.sort(function () {return 0.5 - Math.random()});return square.slice(0, this.mineNum);
};// 创建表格
Mine.prototype.createDom = function () {var This = this;var table = document.createElement('table');for (var i = 0; i < this.tr; i++) {                 // 行var domTr = document.createElement('tr');this.tds[i] = [];for (var j = 0; j < this.td; j++) {             // 列var domTd = document.createElement('td');this.tds[i][j] = domTd;                     // 把所有创建的td添加到数组当中domTd.pos = [i, j];                         // 把格子对应的行和列村到格子身上，为了下面通过这个值去数组里面取到对应的数据domTd.onmousedown = function () {This.play(event, this);                 // 大的This 指的是实例对象   小的this指的是点击的domTd };// if (this.squares[i][j].type == 'mine') {//     domTd.className = 'mine';// }// if (this.squares[i][j].type == 'number') {//     domTd.innerHTML = this.squares[i][j].value;// }domTr.appendChild(domTd);}table.appendChild(domTr);}this.parent.innerHTML = '';                         // 避免多次点击创建多个this.parent.appendChild(table);
};Mine.prototype.init = function () {// this.randomNum();var rn = this.randomNum();                  // 雷在格子里的位置var n = -1;                                 // 用来找到对应的索引格子for (var i = 0; i < this.tr; i++) {this.squares[i] = [];for (var j = 0; j < this.td; j++) {// 取一个方块在数组里的数据，要使用行与列的形式存取// 找方块周围的方块的时候，要用坐标的形式去取// 行与列的形式，和坐标的形式，x，y是刚好相反的n++;if (rn.indexOf(n) != -1) {// 如果这个条件成立，说明现在循环到的索引在雷的数组里面找到了，那就表明这个索引对应的是个雷this.squares[i][j] = {type: 'mine',x: j,y: i};} else {this.squares[i][j] = {type: 'number',x: j,y: i,value: 0};}}}this.updateNum();this.createDom();this.parent.oncontextmenu = function () {return false;// 阻止右键出菜单事件}// 剩余雷数this.mineNumDom = document.querySelector('.mineNum');this.mineNumDom.innerHTML = this.surplusMine;
};// 找某个方格周围的八个格子
Mine.prototype.getAround = function (square) {var x = square.x,y = square.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.squares[j][i].type == 'mine'// 表示循环到（周围的格子）雷 (注意i和j表示的是坐标，而squares存储的是行和列)) {continue;}// 要以行与列的形式返回出去，因为到时候需要它去取数组里的数据result.push([j, i]);}}return result;
}// 更新所有的数字
Mine.prototype.updateNum = function () {for (var i = 0; i < this.tr; i++) {for (var j = 0; j < this.td; j++) {// 要更新的是雷周围的数字if (this.squares[i][j].type == 'number') {continue;}var num = this.getAround(this.squares[i][j]); // 获取到每一个雷周围的数字for (var k = 0; k < num.length; k++) {this.squares[num[k][0]][num[k][1]].value += 1;}}}
};Mine.prototype.play = function (ev, obj) {var This = this;if (ev.which == 1 && obj.className != 'flag') { // 后面的条件是为了用户右键之后不能点击// 点击的是左键var curSquare = this.squares[obj.pos[0]][obj.pos[1]];var cl = ['zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight'];// cl 存储classNameif (curSquare.type == 'number') {// 用户点击的是数字obj.innerHTML = curSquare.value;obj.className = cl[curSquare.value];// 点到了数字零if (curSquare.value == 0) {/* 递归思路： 1.显示自己2.查找四周1) 显示四周（如果四周的值不为零，那就显示到这，不需要再找了）2）如果值为零了a.显示自己b.找四周（如果四周的值不为零，那就显示到这，不需要再找了）I.显示自己II.找四周（如果四周的值不为零，那就显示到这，不需要再找了）。。。。。。*/obj.innerHTML = '';                             // 显示为空function getAllZero(square) {var around = This.getAround(square);        // 找到了周围N个格子for (var i = 0; i < around.length; i++) {var x = around[i][0];                   // 行var y = around[i][1];                   // 列This.tds[x][y].className = cl[This.squares[x][y].value];if (This.squares[x][y].value == 0) {// 如果以某个格子为中心，找到的某个格子为零，那就接着调用（递归）if (!This.tds[x][y].check) {// 给对应的td 添加一条属性，如果找过的话，这个值就为true，下一次就不会再找了，防止函数调用栈出问题This.tds[x][y].check = true;getAllZero(This.squares[x][y]);}} else {// 如果以某个格子为中心找到的四周的值不为零，就把数字显示出来This.tds[x][y].innerHTML = This.squares[x][y].value;}}}getAllZero(curSquare);}} else {// 用户点击的是雷this.gameOver(obj);}}if (ev.which == 3) {// 用户点击的是右键// 如果右击的是一个数字，就不能点击if (obj.className && obj.className != 'flag') {return;}obj.className = obj.className == 'flag' ? '' : 'flag'; // 切换calss 有无if (this.squares[obj.pos[0]][obj.pos[1]].type == 'mine') {this.allRight = true;} else {this.allRight = false;}if (obj.className == 'flag') {this.mineNumDom.innerHTML = --this.surplusMine;} else {this.mineNumDom.innerHTML = ++this.surplusMine;}if (this.surplusMine == 0) {// 剩余的雷的数量为0，表示用户已经标完小红旗了，这时候要判断游戏是成功还是结束if (this.allRight == true) {// 这个条件成立，说明用户全部标对了alert('恭喜你，游戏通过');for (i = 0; i < this.tr; i++) {for (j = 0; j < this.td; j++) {this.tds[i][j].onmousedown = null;}}} else {alert('游戏失败');this.gameOver();}}}
}// 游戏失败函数
Mine.prototype.gameOver = function (clickTd) {/* 1.显示所有的雷2.取消所有格子的点击事件3.给点中的格子标红*/for (i = 0; i < this.tr; i++) {for (j = 0; j < this.td; j++) {if (this.squares[i][j].type == 'mine') {this.tds[i][j].className = 'mine';}this.tds[i][j].onmousedown = null;}}if (clickTd) {clickTd.style.backgroundColor = '#f00';}
}// var mine = new Mine(28, 28, 99);
// mine.init();// 添加 button 的功能
var btns = document.getElementsByTagName('button');
var mine = null; // 用来存储生成的实例
var ln = 0; // 用来处理当前选中的状态
var arr = [[9, 9, 10],[16, 16, 40],[28, 28, 99]
]; //不同级别的行数，列数，雷数
for (let i = 0; i < btns.length - 1; i++) {btns[i].onclick = function () {btns[ln].className = '';this.className = 'active';mine = new Mine(arr[i][0], arr[i][1], arr[i][2]);mine.init();ln = i;}
}
btns[0].onclick(); // 初始化
btns[3].onclick = function () {for (var i = 0; i < btns.length - 1; i++) {if (btns[i].className == 'active') {btns[i].onclick();}}
}

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

day56 JavaScript
目录一、数组对象Arraysort()forEach()concat连接数组map()Date日期对象Math对象Json对象RegExp对象javascript允许之定义对象二、运算符算数运算符比较运算符逻辑运算符赋值运算符三、流程控制if->elseif->else if->elseswitchforwhile三元运算四、函数函数的定义与调…...
2024/4/7 13:02:57
BOM对象·
1：什么是bom？ bom就是浏览器对象！简单来说，就是学习一些操作浏览器窗口的方法和属性等！2：window对象是BOM的核心，也是BOM里面的顶级对象。 window对象也有很多内置方法（alert(1)&a…...
2024/4/7 13:02:56
安装the cnet network simulator(v3.4.1)
the cnet network simulator(v3.4.1) 说明：安装环境：ubuntu中完成的一、安装要求 ① 首先，altctrlt进入终端，输入 sudo su② 输入登入密码，按enter ③ sudo apt-get update && sudo apt-get upgrade如果…...
2024/4/24 13:41:15
python3用自带的库获取原始分辨率和缩放后的分辨率
本文介绍不用安装第三方库，实现获取windows系统原始分辨率和缩放后的分别率，直接上代码： if __name__ __main__:import ctypesuser32 ctypes.windll.user32gdi32 ctypes.windll.gdi32dc user32.GetDC(None)widthScale gdi32.GetDeviceC…...
2024/5/1 12:00:03
认证U盘丢失，机密文件是否能被打开？
不能。USBKey（俗称认证U盘）提供了高强度的身份认证形式，但在使用时，仍然需要口令才能登录。所以，即便USBKey同笔记本电脑同时遗失，只要口令没有泄密，仍然能保护系统的安全。华域精诚专注于IP-GU…...
2024/4/7 13:02:53
LeetCode 热题 HOT 100 Java题解——17. 电话号码的字母组合
LeetCode 热题 HOT 100 Java题解17. 电话号码的字母组合回溯复杂度分析17. 电话号码的字母组合题目： 给定一个仅包含数字 2-9 的字符串，返回所有它能表示的字母组合。给出数字到字母的映射如下（与电话按键相同）。注意 1 不对应…...
2024/5/7 10:02:18
3dMax 相框
对齐一次不能达成目标时，可以再对齐一次（一次对齐一个轴） 贴图渲染之后贴图才能显示，不然为灰色...
2024/5/1 6:18:18
Catch That Cow（POJ - 3278）
POJ - 3278 传送门 Description Farmer John has been informed of the location of a fugitive cow and wants to catch her immediately. He starts at a point N (0 ≤ N ≤ 100,000) on a number line and the cow is at a point K (0 ≤ K ≤ 100,000) on the same number…...
2024/4/7 13:02:50
机器学习分类算法~~估计器与转换器
...
2024/4/30 19:56:41
POJ 3159 Candies（差分约束+SPAF）
题意： 给n个小朋友分发糖果，但小朋友们之间有嫉妒心。接下来m行，每行三个数，分别表示小朋友A希望B得到的糖果不能比他多x个。要求你计算在满足所有小朋友的条件的情况下最多需要准备多少颗糖。题目： During the ki…...
2024/4/7 13:02:48
病理图像处理个人手札（一）
我们常说的病理图像就是指用玻片在扫描仪下拍摄的高分辨率图像（mm级） 病理组织切片制作过程详解： https://wenku.baidu.com/view/60b5d0fe2af90242a995e58a.html 病理图像先要进行预处理，标准化是很重要的一个步骤主要比较主…...
2024/4/24 9:20:31
Oracle数据库管理常用SQL
-- 创建临时表空间//ORA-02195:尝试创建的PERMANENT对象在TEMPORARY表空间中，导入数据到临时表空间报以上错误 create tablespace tablespace_name tempfile C:\oracle\product\11.2.0\dbhome_1\database\tablespace_name.dbf size 500m autoextend on; -- 创建表空…...
2024/4/7 10:01:57
字符缓冲流BufferedWriter的使用
package cn.itcast_05;import java.io.BufferedWriter; import java.io.FileWriter; import java.io.IOException;/** 字符缓冲流* 字符流为了高效读写，也提共了对应的字符缓冲流* BufferedWriter:字符缓冲输出流* BufferedRead:字符缓冲输入流* 将文本写…...
2024/4/25 7:58:08
接口的定义以及使用方法
接口的定义以及使用方法 package Demo01;//接口的定义以及使用方法 /* 接口就是多个类的公共规范接口是一种引用类型，最重要的内容就是其中的抽象方法如何定义一个接口的格式-public interface 接口名称{//接口内容}备注-换成了关键字Interface之后，编…...
2024/4/7 10:01:55
微信小程序项目_秋泊优选60
56、订单查询页面_动态渲染 pages\order\index.wxml <view class"order_main"><viewwx:for"i{orders}}"wx:key"order_id"class"order_item"><view class"order_no_row"><view class"order_no_te…...
2024/4/7 13:02:47
界面酷炫，功能强大！这款 Linux 性能实时监控工具超好用！老斯机搞它！
对于维护、管理Linux系统来说，它的性能监控非常重要，特别是实时监控数据，这个数据有利于我们判断服务器的负载压力，及时调整资源调配，也有助于更好的服务于业务。所以，今天民工哥给大家安利一款 Linux 性能…...
2024/4/14 9:13:37
Java NIO与Netty
Java 网络IO模型（BIO NIO AIO） BIO同步并阻塞（传统阻塞型）：一个连接一个线程，客户端有连接请求时服务器端就需要启动一个线程进行处理。线程开销大。 NIO同步非阻塞：一个请求一个线程&#xff…...
2024/4/7 13:02:45
React中使用context来共享组件的数据
class组件中使用context： import React, { Component } from react;// 1. 生成一个Context，参数是共享变量的默认值 const userContext React.createContext({nickName: aaa,age: -1, });class Banner extends Component {render() {return (<div&g…...
2024/4/25 10:52:18
学习日志：struct.c程序分析
学习日志：struct.c程序分析1.全部代码2.代码分析3.代码运行及结果分析1.全部代码 #include <stdio.h> #include <stdlib.h>typedef struct {int a[2];double d; } struct_t;double fun(int i) {volatile struct_t s;s.d 3.14;s.a[i] 1073741824; /* …...
2024/4/7 13:02:44
interface and polymorphism
More later P209 P210 abstract class you don’t know what it exactly is, it’s usually abstract name, such as animal, canine, feline. abstract method abstract class can be concrete in subclass all abstract methods MUST be implemented by the first concr…...
2024/4/7 13:02:42

原生JS实现扫雷——项目总结

项目展示图

项目准备

html

CSS

JavaScript

思路

Mine 构造函数

生成随机的雷的排布

创建表格

初始化函数

getAround() 函数

updateNum() 函数

play函数

gameOver函数

其他

js 整合代码

相关文章

最新文章