先看下最终的效果：
首先来分析一个扫雷游戏具有哪些功能
- 需要一个地图来表示扫雷
- 游戏会有不同的难度
- 第一下点击是不会触发雷的
- 每个非雷格子都会显示与它相近的单元格中雷的个数
- 点击一个非雷格子会自动将上下左右的非雷格子点开
- 右击单元格可以进行标注，再次右击可以取消
- 当点击到地雷单元格时就会游戏结束
- 当所有非雷单元格都点开时则游戏胜利
- …
分析完成后我们就开始一步步的实现
1. 相关html和css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
article {
text-align: center;
}
main {
margin: auto;
flex-wrap: wrap;
display: flex;
width: 500px;
height: 500px;
}
main>div {
margin: 5px;
font-size: 0px;
background-color: antiquewhite;
border: 1px solid blue;
}
/*不同难度下单元格不同的样式*/
.width5 {
width: 90px;
height: 90px;
}
.width10 {
width: 40px;
height: 40px;
}
.width20 {
margin: 2.5px;
width: 20px;
height: 20px;
}
/*select鼠标左键点击*/
.select {
font-size: 12px;
background-color: aqua;
}
/*select2鼠标右键点击*/
.select2 {
font-size: 0px;
background-color: blue;
}
</style>
</head>
<body>
<!-- 整个扫雷内容区 -->
<article id="mine">
<button id="start">开始</button>
<select id="select">
<!--value是不同难度下的地图大小，data-level是不同难度下一个非雷单元格周围一圈最多能有多少雷的规定-->
<option value="5" data-level="4">简单</option>
<option value="10" data-level="6">普通</option>
<option value="20" data-level="9">困难</option>
</select>
<button id="reset">reset</button>
<main>
</main>
</article>
<script src="./javascript/4.js"></script>
<script>
var main = document.querySelector('#mine');
//实例化一个扫雷游戏的类
var mines = new MineSweeping(main);
</script>
</body>
</html>
2. 我们使用类来完成相应功能
class MineSweeping {
constructor(root) {
this.btn = root.querySelector('#start');
this.reset = root.querySelector('#reset')
this.main = root.querySelector('main');
this.select = root.querySelector('#select');
}
}
3. 之后我们则是要定义一个地图
这里我们使用二维数组来实现，其中有一点需要注意，在扫雷当中对于边角，边缘，内部的布雷方式是不同，即在内部单元格周围一圈最多可以有8个雷，但在边缘或者边角的话最多就只有5个甚至是3个雷，为了以后在布雷时更方便的对此单元格进行校验（判断周围一圈的雷的数量是否合理，在边角，在边缘，在内部三种情况都需要进行单独判断）我们在定义地图时需要额外再扩大一层，比如我们界面当中的地图是5 * 5的，但我们在定义时的二维数组是6 * 6的，这么做的话我们巧妙地将原本地图边缘区域的单元格变成了内部单元格，进行校验的时候也会更加方便了
this.row = [];
this.col = [];
//传入数组的长度，因为我们定义的地图是一个边长相等的正方形，所以只传一个值就可以了
init = (num) => {
for (let i = 0; i < num; i++) {
for (let j = 0; j < num; j++) {
this.col.push(0);
}
this.row.push(this.col);
this.col = [];
}
}
4. 对地图进行渲染
即把二维数组在html中写出来
addMap = (map) => {
for (let i = 1; i < map[0].length - 1; i++) {
for (let j = 1; j < map[0].length - 1; j++) {
let div = document.createElement('div');
div.className = 'width' + (this.num - 2);
//给div添加自定义属性，表示该div在二维数组中对应的位置
div.setAttribute('data-row', i - 1);
div.setAttribute('data-col', j - 1)
this.main.appendChild(div);
}
}
}
5. 对开始按钮添加点击事件
因为是当用户点击了开始按钮之后我们才进行的初始化地图和渲染地图，所以需要对开始按钮加一个点击事件
constructor(root) {
//num为地雷数量，level为不同难度下单元格周围最大的地雷数量
this.num;
this.level;
}
this.btn.addEventListener('click', this.startInit)
startInit = () => {
this.num = parseInt(this.select.value) + 2;
let index = this.select.selectedIndex;
this.level = parseInt(this.select[index].getAttribute('data-level'));
this.init(this.num)
this.addMap(this.row)
}
6. 现在我们可以实现鼠标左击扫雷的功能
因为如果给每个单元格都添加点击事件的话性能开销就会比较大，我们这里就使用事件委托的形式进行，事件委托即把原本需要添加给子节点的事件委托到父节点中，核心原理就是DOM元素中的事件冒泡
this.main.addEventListener('click', this.gameStart)
gameStart = (e) => {
//这其中的涉及的函数下文会讲到
this.flag && this.initMine(this.row, (this.num - 2) * (this.num - 2) / 2.5, e.target);
this.flag && this.countAroundMines(this.row);
this.flag && this.addMapMine(this.row);
this.flag = false;
this.selectAround(this.row, parseInt(e.target.getAttribute('data-row')) + 1, parseInt(e.target.getAttribute('data-col')) + 1);
this.gameWin();
}
7. 给单元格添加右键点击事件
constructor(root) {
this.main.addEventListener('mousedown', (e) => {
document.oncontextmenu = function (e) {
e.preventDefault();
};
if (e.button == 2) {
e.target.classList.toggle('select2')
}
})
}
8. 定义一个生成指定范围随机数的函数
方便下面布雷功能的展开
//获取一个大于等于min并且小于等于max的随机值
getRandomIntInclusive = (min, max) => {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
9. 限制执行次数
在扫雷游戏中，用户的第一次点击是不会触发雷的，所以我们布雷的功能需要在用户第一次点击之后运行
//传入了三个参数，map为地图，num为地雷的个数，div为当前点击的单元格
initMine = (map, num, div) => {
num = parseInt(num);
let x;
let y;
while (num > 0) {
x = this.getRandomIntInclusive(1, this.num - 2);
y = this.getRandomIntInclusive(1, this.num - 2);
while (map[x][y] == -1 || (div.getAttribute('data-row') == x - 1 && div.getAttribute('data-col') == y - 1) || this.isNumberMines(map, x, y)) {
x = this.getRandomIntInclusive(1, this.num - 2);
y = this.getRandomIntInclusive(1, this.num - 2);
}
//可以布雷时就将二维数组中对应下标的值赋值为-1
map[x][y] = -1;
num--;
}
}
10. 在布雷时需要进行校验
我们首先判断当前单元格是否已经有地雷，然后还需判断这个单元格是否为当前点击的单元格，最后还需判断单元格周围的地雷数量是否合理
while (map[x][y] == -1 || (div.getAttribute('data-row') == x - 1 && div.getAttribute('data-col') == y - 1) || this.isNumberMines(map, x, y)) {
x = this.getRandomIntInclusive(1, this.num - 2);
y = this.getRandomIntInclusive(1, this.num - 2);
}
11. 布雷的校验规则
判断此单元格周围的雷数是否合理，不合理就不能布雷
//传入三个参数，map为地图，x，y为当前单元格坐标
isNumberMines = (map, x, y) => {
//count即周围地雷的数量
let count = 0;
for (let i = x - 1; i < x + 1; i++) {
for (let j = y - 1; j < y + 1; j++) {
if (map[i][j] == -1) {
count++;
}
}
}
//不同难度等级有不同的限制
if (this.level == 9) {
if ((x == 1 && y == 1) || (x == 0 && y == this.num - 2) || (x == this.num - 2 && y == 0) || (x == this.num - 2 && y == this.num - 2)) {
if (count >= 4) {
return true;
}
} else if (x == 1 || y == 0 || x == this.num - 2 || y == this.num - 2) {
if (count >= 6) {
return true;
}
} else {
if (count >= 9) {
return true;
}
}
}
if (this.level == 6) {
if ((x == 1 && y == 1) || (x == 0 && y == this.num - 2) || (x == this.num - 2 && y == 0) || (x == this.num - 2 && y == this.num - 2)) {
if (count >= 4) {
return true;
}
} else if (x == 1 || y == 0 || x == this.num - 2 || y == this.num - 2) {
if (count >= 6) {
return true;
}
} else {
if (count >= 7) {
return true;
}
}
}
if (this.level == 4) {
if ((x == 1 && y == 1) || (x == 0 && y == this.num - 2) || (x == this.num - 2 && y == 0) || (x == this.num - 2 && y == this.num - 2)) {
if (count >= 4) {
return true;
}
} else {
if (count >= 5) {
return true;
}
}
}
}
12. 限制布雷功能执行次数
因为布雷功能只会在第一次点击之后执行一次，以后所有点击都将不会再次执行布雷，所以我们需要一个标志来限制布雷功能的执行次数
class MineSweeping {
constructor(root) {
this.flag = true;
}
gameStart = (e) => {
this.flag && this.initMine(this.row, (this.num - 2) * (this.num - 2) / 2.5, e.target);
this.flag = false;
}
}
13. 统计周围地雷的数量
布完雷之后我们还需要对没有雷的单元格进行统计周围地雷数量，并把统计结果赋值到对应的数组元素当中，同样这个功能也会只执行一次
gameStart = (e) => {
this.flag && this.countAroundMines(this.row);
this.flag = false;
}
//传入一个参数，map为地图
countAroundMines = (map) => {
let count;
for (let i = 1; i < map[0].length - 1; i++) {
for (let j = 1; j < map[0].length - 1; j++) {
count = 0;
if (map[i][j] != -1) {
for (let ii = i - 1; ii <= i + 1; ii++) {
for (let jj = j - 1; jj <= j + 1; jj++) {
if (map[ii][jj] == -1) {
count++;
}
}
}
map[i][j] = count;
}
}
}
}
14. 再次将数据渲染到html中
我们在统计完之后就需要把这些结果，包括地雷，地雷数量等数据渲染到html中，这个功能同样只会执行一次
gameStart = (e) => {
this.flag && this.addMapMine(this.row);
this.flag = false;
}
//传入一个参数，map为地图
addMapMine = (map) => {
//获取到当前html中所有的单元格
let div = this.main.querySelectorAll('div');
let t = 0;
for (let i = 1; i < map[0].length - 1; i++) {
for (let j = 1; j < map[0].length - 1; j++) {
if (map[i][j] == -1) {
div[t++].innerHTML = '雷';
} else {
div[t++].innerHTML = map[i][j];
}
}
}
}
15. 设置点击样式并进行递归
以上做完之后，我们还需对当前单元格设置点击样式，并实现如果点击了非雷单元格则要同时点开其上下左右四个格子，直到遇到地雷为止
selectAround = (map, x, y) => {
let div = this.main.querySelectorAll('div');
//对此刻传入的单元格进行判断，如果不在规定的范围内（x与y的范围，以及单元格本身是否被点击了）则终止函数执行（因为有递归）
if (x < 1 || y < 1 || x > this.num - 2 || y > this.num - 2 || div[(x - 1) * (this.num - 2) + y - 1].classList.contains('select')) {
return;
//如果此时单元格为地雷
} else if (map[x][y] == -1) {
//判断此单元格是否被右键标记，有则移除标记，添加左键点击样式
if (div[(x - 1) * (this.num - 2) + y - 1].classList.contains('select2')) {
div[(x - 1) * (this.num - 2) + y - 1].classList.remove('select2');
}
div[(x - 1) * (this.num - 2) + y - 1].classList.add('select');
//触发游戏结束
this.gameOver();
} else {
if (div[(x - 1) * (this.num - 2) + y - 1].classList.contains('select2')) {
div[(x - 1) * (this.num - 2) + y - 1].classList.remove('select2');
}
div[(x - 1) * (this.num - 2) + y - 1].classList.add('select');
//开始对该单元格上下左右进行递归
if (map[x][y + 1] != -1) {
this.selectAround(map, x, y + 1);
}
if (map[x][y - 1] != -1) {
this.selectAround(map, x, y - 1);
}
if (map[x - 1][y] != -1) {
this.selectAround(map, x - 1, y);
}
if (map[x + 1][y] != -1) {
this.selectAround(map, x + 1, y);
}
}
}
16. 给reset按钮添加事件
constructor(root) {
this.reset.addEventListener('click', this.gameReset)
}
gameReset = () => {
this.flag = true;
this.main.innerHTML = '';
this.row = [];
this.col = [];
}
17. 定义游戏结束功能
gameOver = () => {
setTimeout(() => {
alert('over');
this.gameReset();
}, 100)
}
18. 定义游戏胜利功能
this.main.addEventListener('click', this.gameStart)
gameStart = (e) => {
//每点击一次就判断一次是否胜利
this.gameWin();
}
gameWin = () => {
let flag = true;
let div = this.main.querySelectorAll('div');
for (let i = 0; i < (this.num - 2) * (this.num - 2); i++) {
if (div[i].innerHTML != '雷') {
if (!div[i].classList.contains('select')) {
flag = false;
break;
}
}
}
if (flag) {
setTimeout(() => {
alert('win');
this.gameReset();
}, 100)
}
}
至此，整个扫雷游戏就基本写完了
以下是完整js代码
class MineSweeping {
constructor(root) {
this.btn = root.querySelector('#start');
this.reset = root.querySelector('#reset')
this.main = root.querySelector('main');
this.select = root.querySelector('#select');
this.num;
this.level;
this.flag = true;
this.row = [];
this.col = [];
this.btn.addEventListener('click', this.startInit)
this.main.addEventListener('click', this.gameStart)
this.main.addEventListener('mousedown', (e) => {
document.oncontextmenu = function (e) {
e.preventDefault();
};
if (e.button == 2) {
e.target.classList.toggle('select2')
}
})
this.reset.addEventListener('click', this.gameReset)
}
//因为用户第一次点击时单元格不为雷，所以布雷放在触发点击事件之后并且保证布雷只会执行一次
gameStart = (e) => {
this.flag && this.initMine(this.row, (this.num - 2) * (this.num - 2) / 2.5, e.target);
this.flag && this.countAroundMines(this.row);
this.flag && this.addMapMine(this.row);
this.flag = false;
this.selectAround(this.row, parseInt(e.target.getAttribute('data-row')) + 1, parseInt(e.target.getAttribute('data-col')) + 1);
this.gameWin();
}
//开始初始化地图
startInit = () => {
this.num = parseInt(this.select.value) + 2;
let index = this.select.selectedIndex;
this.level = parseInt(this.select[index].getAttribute('data-level'));
this.init(this.num)
this.addMap(this.row)
}
//定义地图
init = (num) => {
for (let i = 0; i < num; i++) {
for (let j = 0; j < num; j++) {
this.col.push(0);
}
this.row.push(this.col);
this.col = [];
}
}
//开始在二维数组中布雷
initMine = (map, num, div) => {
num = parseInt(num);
let x;
let y;
while (num > 0) {
x = this.getRandomIntInclusive(1, this.num - 2);
y = this.getRandomIntInclusive(1, this.num - 2);
while (map[x][y] == -1 || (div.getAttribute('data-row') == x - 1 && div.getAttribute('data-col') == y - 1) || this.isNumberMines(map, x, y)) {
x = this.getRandomIntInclusive(1, this.num - 2);
y = this.getRandomIntInclusive(1, this.num - 2);
}
map[x][y] = -1;
num--;
}
}
//布雷的校验规则，判断此单元格能否布雷
isNumberMines = (map, x, y) => {
let count = 0;
for (let i = x - 1; i < x + 1; i++) {
for (let j = y - 1; j < y + 1; j++) {
if (map[i][j] == -1) {
count++;
}
}
}
if (this.level == 9) {
if ((x == 1 && y == 1) || (x == 0 && y == this.num - 2) || (x == this.num - 2 && y == 0) || (x == this.num - 2 && y == this.num - 2)) {
if (count >= 4) {
return true;
}
} else if (x == 1 || y == 0 || x == this.num - 2 || y == this.num - 2) {
if (count >= 6) {
return true;
}
} else {
if (count >= 9) {
return true;
}
}
}
if (this.level == 6) {
if ((x == 1 && y == 1) || (x == 0 && y == this.num - 2) || (x == this.num - 2 && y == 0) || (x == this.num - 2 && y == this.num - 2)) {
if (count >= 4) {
return true;
}
} else if (x == 1 || y == 0 || x == this.num - 2 || y == this.num - 2) {
if (count >= 6) {
return true;
}
} else {
if (count >= 7) {
return true;
}
}
}
if (this.level == 4) {
if ((x == 1 && y == 1) || (x == 0 && y == this.num - 2) || (x == this.num - 2 && y == 0) || (x == this.num - 2 && y == this.num - 2)) {
if (count >= 4) {
return true;
}
} else {
if (count >= 5) {
return true;
}
}
}
}
//获取一个大于等于min并且小于等于max的随机值
getRandomIntInclusive = (min, max) => {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
//渲染地图
addMap = (map) => {//0-7
for (let i = 1; i < map[0].length - 1; i++) {
for (let j = 1; j < map[0].length - 1; j++) {
let div = document.createElement('div');
div.className = 'width' + (this.num - 2);
div.setAttribute('data-row', i - 1);
div.setAttribute('data-col', j - 1)
this.main.appendChild(div);
}
}
}
//开始渲染地雷及非雷单元格周围地雷数量
addMapMine = (map) => {
let div = this.main.querySelectorAll('div');
let t = 0;
for (let i = 1; i < map[0].length - 1; i++) {
for (let j = 1; j < map[0].length - 1; j++) {
if (map[i][j] == -1) {
div[t++].innerHTML = '雷';
} else {
div[t++].innerHTML = map[i][j];
}
}
}
}
//在二维数组中统计非雷单元格周围的地雷数量并赋值到对应元素中
countAroundMines = (map) => {
let count;
for (let i = 1; i < map[0].length - 1; i++) {
for (let j = 1; j < map[0].length - 1; j++) {
count = 0;
if (map[i][j] != -1) {
for (let ii = i - 1; ii <= i + 1; ii++) {
for (let jj = j - 1; jj <= j + 1; jj++) {
if (map[ii][jj] == -1) {
count++;
}
}
}
map[i][j] = count;
}
}
}
}
//给点击的单元格设置样式，如果用户点击了非雷单元格则程序会自动帮用户点击此单元格上下左右四个单元格中同样非雷的单元格，直到遇到地雷
selectAround = (map, x, y) => {
let div = this.main.querySelectorAll('div');
if (x < 1 || y < 1 || x > this.num - 2 || y > this.num - 2 || div[(x - 1) * (this.num - 2) + y - 1].classList.contains('select')) {
return;
} else if (map[x][y] == -1) {
if (div[(x - 1) * (this.num - 2) + y - 1].classList.contains('select2')) {
div[(x - 1) * (this.num - 2) + y - 1].classList.remove('select2');
}
div[(x - 1) * (this.num - 2) + y - 1].classList.add('select');
//如果点击了地雷则触发游戏结束
this.gameOver();
} else {
if (div[(x - 1) * (this.num - 2) + y - 1].classList.contains('select2')) {
div[(x - 1) * (this.num - 2) + y - 1].classList.remove('select2');
}
div[(x - 1) * (this.num - 2) + y - 1].classList.add('select');
if (map[x][y + 1] != -1) {
this.selectAround(map, x, y + 1);
}
if (map[x][y - 1] != -1) {
this.selectAround(map, x, y - 1);
}
if (map[x - 1][y] != -1) {
this.selectAround(map, x - 1, y);
}
if (map[x + 1][y] != -1) {
this.selectAround(map, x + 1, y);
}
}
}
//重置游戏
gameReset = () => {
this.flag = true;
this.main.innerHTML = '';
this.row = [];
this.col = [];
}
//游戏结束
gameOver = () => {
setTimeout(() => {
alert('over');
this.gameReset();
}, 100)
}
//游戏胜利
gameWin = () => {
let flag = true;
let div = this.main.querySelectorAll('div');
for (let i = 0; i < (this.num - 2) * (this.num - 2); i++) {
if (div[i].innerHTML != '雷') {
if (!div[i].classList.contains('select')) {
flag = false;
break;
}
}
}
if (flag) {
setTimeout(() => {
alert('win');
this.gameReset();
}, 100)
}
}
}
结语（碎碎念
第一次写这种教程也不知道怎么样写才能带来更好的阅读体验，如果觉得写的不行的话非常抱歉
这是我第一次进行知识输出，以前则是一直只有输入，感觉写完这篇文章之后自己确实有点感悟，但具体在哪还没感觉出来
其实代码写的还有很多问题的，就比如那个布雷功能，只能对当前已经布置下的地雷进行校验，未来要是在另一个位置布雷则会影响之前已经布下的地雷，具体来说就是简单难度最多一圈只有4个雷，但实际运行下来最多却有5个。另外样式也不美观，自己需要学习的地方还有很多。
如果这篇文章有帮到你的话我会很高兴，
最后，祝我们变得更强:）。
133
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
