（⼩游戏）详解前端扫雷代码：HTML+JS+DIV实现原理游戏地址：
先了解⼀下扫雷这个游戏规则：
我们可以先，打开你的电脑——》程序——》游戏——》扫雷，先玩⼏分钟，你就会得到规律：
点击任意⽅块，会出现2种结果：
1. 如果是就引爆，游戏则结束。
2. 如果不是，那么游戏继续。
1、点击任意⽅块是就引爆，游戏结束：
2、点击任意⽅块不是，游戏继续：
游戏继续的同时，我们会发现，我才按了⼀下
就会出现两种情况：
1. 有的的区域只出现了⼀个⼩⽩空格，如红⾊区域。
2. 有的区域是出现很多空⽩边，如橙⾊区域。
1、红⾊区域你会发现，⼩⽅格显⽰数字2。这个⽅格不是，变⽩。然后计算以该⽅格四周的数，存在则游戏结束；
2、橙⾊区域你会发现，我所点击⼩⽅格不是，并且它四周的数为0，该⽅格变⽩后，它四周的⼩⽅格继续计算他们四周的数。以此类推，直到四周存在，或者以到边界；
如下图所⽰：以左上⼩⽅格为例⼦。这样有8种结果；
现在我们算是明⽩，扫雷应该怎么玩了对吧。
现在我们开始挽起袖⼦，写代码：
2.1、我们先开始画雷区。
我⽤all数组表⽰雷区，all【i】【j】=【1，-1】；表⽰第i⾏，j列的⼩⽅格。
【1，-1】
实现特效的代码js第⼀个数值表⽰，该⽅格是不是，⼤于0为；
第⼆个则表⽰，它周围存在的数。默认为-1，这⾥的数值⼀会要在⽅格上显⽰；
// 开始画雷区
painBomb() {
for (let i = 0; i < this.height; i++) {
this.all[i] = [];
for (let j = 0; j < this.width; j++) {
this.all[i][j] = [0, -1];
}
}
},
我的⼩⽅块是由⽆数个div放在游戏区域：对应all，显⽰我的雷区，⼩⽅格则就显⽰all【n】【m】【1】即它周围的数；
<div class="playStage">
<div class="coverY" v-for="n in height-2" v-if="all.length">
<!-- x值 -->
<div class="coverX titlex" v-for="m in width-2" v-if="all[n-1]" @click="click(n,m)" :class="{safe: all[n][m][1]>=0,whiteText: all[n][m][1]==0,bered: all[n][m]                        {{all[n][m][1]}}
</div>
</div>
</div>
为了省去⼀些⿇烦，我把雷区的上下左右边去掉，不显⽰。
这⾥的⿇烦是：若我点击蓝⾊⽅块，那么我就得多⼀道⼯序，去计算除去靠近它的5个⼩⽅格的数。
这样得不偿失，还多写⼏⾏代码。所以我就默认最外框不可点击，并且不存在；
这样，⼩红框内区域的任何⼀个⼩⽅格点击以后都可以⽤同⼀个⽅法来判断了。
2.2、接下来就是写点击⼀个⼩⽅格，⽤到的⽅法：
// 点击⼩⽅格
click(x, y) {
if (this.all[x][y][0] == 1) {
this.showBomb();
alert("你踩到雷啦！")
return;
} else {
this.andThen(x, y);
this.ifOk();
}
},
如果这个⼩⽅格是，那么就结束游戏。并且显⽰我的所有：showBomb（）。
这⾥我把的值改成2.在页⾯上便会显⽰红⾊；
:
class="{safe: all[n][m][1]>=0,whiteText: all[n][m][1]==0,bered: all[n][m][0]==2}"
// 显⽰
showBomb() {
for (var i = 1; i < this.height - 1; i++) {
for (var j = 1; j < this.width - 1; j++) {
if (this.all[i][j][1] == -1 && this.all[i][j][0] == 1) {
this.$set(this.all, i, this.all[i])
this.$set(this.all[i], j, this.all[i][j]);
this.$set(this.all[i][j], 0, 2);
}
}
}
}
如果该⼩⽅块不是的话，那么我们就可以进⾏⼀步，andThen（）⽅法；
开始之前都要先判断⼀下，这个它是否是，或者它是否已经写上它周围的数，若满⾜，那我们就不需要⽩忙活了，直接return；
在使⽤andThen（）⽅法，要开始计算该⼩⽅格四周的数，⼀共有8个⼩⽅格，都分别判断⼀下。（这⾥⾃⼰也要判断⼀下，因为⼀会还要在调⽤⾃⾝；）
若⾃⼰是的话，那么就停⽌。
andThen(x, y) {
if (this.all[x][y][0] == 1 || this.all[x][y][1] > -1) {
return;
}
this.num = 0;
try {
if (this.all[x - 1][y - 1][0] == 1) {
this.num += 1;
}
if (this.all[x - 1][y][0] == 1) {
this.num += 1;
}
if (this.all[x - 1][y + 1][0] == 1) {
this.num += 1;
}
if (this.all[x][y - 1][0] == 1) {
this.num += 1;
}
if (this.all[x][y][0] == 1) {
return;
}
if (this.all[x][y + 1][0] == 1) {
this.num += 1;
}
if (this.all[x + 1][y - 1][0] == 1) {
this.num += 1;
}
if (this.all[x + 1][y][0] == 1) {
this.num += 1;
}
if (this.all[x + 1][y + 1][0] == 1) {
this.num += 1;
}
this.$set(this.all, x, this.all[x])
this.$set(this.all[x], y, this.all[x][y]);
this.$set(this.all[x][y], 1, this.num);
if (this.num == 0) {
this.andThen(x - 1, y - 1);
this.andThen(x - 1, y);
this.andThen(x - 1, y + 1);
this.andThen(x, y - 1);
this.andThen(x, y + 1);
this.andThen(x + 1, y - 1);
this.andThen(x + 1, y);
this.andThen(x + 1, y + 1);
} else {
return;
}
} catch (error) {}
},
因为x的取值范围在1~width-2；y的取值范围在1~height-2。这⾥我就直接⽤try{  }catch（）{ } 。最后把得出的数赋值给⾃⼰的第⼆个数值；这时候div对应的⼩⽅格也会展⽰周围的数：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。