个人中心
文章发布
退出
作者热门文章
- ubuntu12.04环境下使用kvm ioctl接口实现最简单的虚拟机
- Ubuntu 通过无线网络安装Ubuntu Server启动系统后连接无线网络的方法
- 在Ubuntu上搭建网桥的方法
- ubuntu 虚拟机上网方式及相关配置详解
27
4
CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.
这篇CFSDN的博客文章原生js实现自定义难度的扫雷游戏由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.
本文实例为大家分享了js实现扫雷游戏的具体代码，供大家参考，具体内容如下 。
游戏功能:
1、有四个难度 2、可以自定难度 。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1.0"
>
<
title
>扫雷</
title
>
<
script
src
=
"js/mine.js"
></
script
>
<
link
rel
=
"stylesheet"
href
=
"./css/mine.css"
>
</
head
>
<!--
需求分析：
1.游戏的区域：
9*9的区域
2.方格可以打开与标记
左键打开，显示数字，为周围格子的地雷数，右键标记
3.地雷
地雷随机分布
4.踩到地雷时，游戏结束
所有的地雷显示出来
5.连锁开大空方格
6.剩余地雷数与计时器
7.游戏胜利条件
所有的方格除了地雷都被打开了，则游戏胜利
一个方格所包含的信息：
坐标 x y
是否是一个地雷
周围的地雷数 = 9
二维数组中存储的是周围的地雷数
-->
<
body
>
<
div
class
=
"level"
>
<
button
type
=
"button"
name
=
"button"
class
=
"choice-level"
>自定义</
button
>
<
button
type
=
"button"
name
=
"button"
class
=
"choice-level"
>初级</
button
>
<
button
type
=
"button"
name
=
"button"
class
=
"choice-level"
>中级</
button
>
<
button
type
=
"button"
name
=
"button"
class
=
"choice-level"
>高级</
button
>
<
button
type
=
"button"
name
=
"button"
class
=
"choice-level"
>魔鬼级</
button
>
<
button
type
=
"button"
name
=
"button"
class
=
"restart"
>重新开始</
button
>
</
div
>
<
div
class
=
"gameBox"
></
div
>
<
div
class
=
"info"
>
<
p
>剩余雷数：
<
span
class
=
"residue"
></
span
>
</
p
>
<
p
>
TIME：
<
span
class
=
"tick"
></
span
>S
</
p
>
</
div
>
</
body
>
</
html
>
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
|
*{
margin
:
0
;
padding
:
0
;
}
.gameBox{
margin-top
:
30px
;
}
body{
font-size
:
0
;
}
ul{
list-style
:
none
;
text-align
:
center
;
overflow
:
hidden
;
}
.col{
display
: inline-
block
;
width
:
22px
;
height
:
22px
;
line-height
:
22px
;
background-color
: rgba(
32
,
226
,
255
,
0.4
);
border
:
1px
solid
rgb
(
129
,
129
,
129
);
font-size
:
16px
;
margin
:
1.5px
;
vertical-align
:
top
;
position
:
relative
;
}
.col:hover{
background-color
:
#0af
;
}
.col span{
cursor
:
default
;
}
.
hide
{
display
:
none
;
}
.boom{
background
:
url
(
"../img/boom.svg"
)
no-repeat
2.5px
2px
;
background-
size
:
18px
18px
;
}
.num
-1
{
color
:
rgb
(
8
,
153
,
235
);
}
.num
-2
{
color
:
rgb
(
255
,
45
,
178
);
}
.num
-3
{
color
:
#16a085
;
}
.num
-4
{
color
:
#8e44ad
;
}
.num
-5
{
color
:
rgb
(
255
,
167
,
45
);
}
.num
-6
{
color
:
rgb
(
8
,
126
,
176
);
}
.num
-7
{
color
:
#e67e22
;
}
.num
-8
{
color
:
#c0392b
;
}
.img-flag{
width
:
18px
;
height
:
18px
;
position
:
absolute
;
top
:
3px
;
left
:
3px
;
}
.
level
{
margin-top
:
30px
;
font-size
:
20px
;
text-align
:
center
;
}
.
level
button{
padding
:
5px
8px
;
background-color
:
rgb
(
67
,
183
,
189
);
border
:
none
;
outline
:
none
;
border-radius:
3px
;
cursor
:
pointer
;
color
:
#fff
;
}
.
level
button:hover{
background-color
:
rgb
(
23
,
132
,
138
);
}
.info{
margin-top
:
30px
;
font-size
:
16px
;
text-align
:
center
;
}
.info p{
display
: inline-
block
;
width
:
130px
;
margin
:
0
auto
;
}
.info p span{
color
:
rgb
(
67
,
183
,
189
);
}
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
|
window.onload =
function
() {
var
row = 4;
var
col = 4;
var
num = 1;
// 判断踩雷之后不能胜利
var
gg =
false
;
// 生成地图
function
mineMap(r, c, num) {
// 定义行
var
map = [];
//给行数，生成二维数组
for
(
var
i = 0; i < r; i++) {
map[i] =
new
Array()
}
// 赋值
for
(
var
i = 0; i < map.length; i++) {
for
(
var
j = 0; j < c; j++) {
// //周围的地雷数
map[i][j] = 0;
}
}
var
plus =
function
(array, x, y) {
if
(x >= 0 && x < r && y >= 0 && y < c) {
if
(array[x][y] !== 9) {
array[x][y]++
}
}
}
for
(
var
i = 0; i < num; i++) {
var
x = Math.floor(Math.random() * r)
var
y = Math.floor(Math.random() * c)
if
(map[x][y] != 9) {
map[x][y] = 9
//上下6个 +1
for
(
var
j = -1; j < 2; j++) {
//上三个
plus(map, x - 1, y + j)
//下三个
plus(map, x + 1, y + j)
}
//左右2个 +1
plus(map, x, y - 1)
plus(map, x, y + 1)
}
else
{
//重新随机
num++
}
}
return
map;
}
//先通过x轴数量写入ul，再讲过y轴的属性写入li
function
writeHtml(map) {
// 获取盒子
var
gameBox = document.querySelector(
".gameBox"
);
// 声明空字符串，存放生成的ul、li
var
gridHTML =
""
;
for
(
var
i = 0; i < map.length; i++) {
gridHTML +=
'<ul class = "row" data-x="'
+ i +
'">'
;
//生成li
for
(
var
j = 0; j < map[0].length; j++) {
var
m = map[i][j]
if
(m == 0) {
m =
""
;
}
gridHTML +=
"<li class='col' data-y="
+ j +
">"
+
"<span class='hide num-"
+ m +
"'>"
+ m +
"</span>"
+
"<img src='img/flag.svg' class='img-flag hide'>"
+
"</li>"
}
gridHTML +=
'</ul>'
gameBox.innerHTML = gridHTML;
}
}
//给方格绑定事件， 点开数字 地雷 右键标记
function
show() {
// 获取行ul
var
rows = document.querySelectorAll(
".row"
);
// 遍历所有ul
for
(
var
i = 0; i < rows.length; i++) {
var
element = rows[i];
// 添加点击事件
element.onclick =
function
(event) {
// 当前点击元素
var
el = event.target;
// 判断是否为li
if
(el.nodeName !=
"LI"
) {
return
;
}
//todo 判断是否被打开以及标记了
if
(el.style.background ==
"white"
|| !el.children[1].classList.contains(
"hide"
)) {
return
;
}
// 获取span标签内容
var
mineNum = el.children[0].innerHTML;
if
(mineNum !==
"9"
&& el.style.background !==
"white"
) {
// 空白连锁打开
if
(mineNum ==
""
) {
var
x = parseInt(el.parentNode.dataset.x);
var
y = parseInt(el.dataset.y);
showNoMine(x, y);
}
// li背景变白色；span显示
el.style.background =
"white"
;
el.children[0].style.display =
"inline"
;
// 判断打开数量
clearMineNum++;
// 胜利函数
judgeVictory()
}
else
if
(mineNum ==
"9"
) {
// 清除胜利计时器
clearInterval(stopTime);
// li添加类名
el.classList.add(
"boom"
);
alert(
"你真菜！"
)
gg =
true
;
// 显示所有地雷,获取所有li
var
all = document.querySelectorAll(
".col"
);
// 放置所有的地雷
var
ff = [];
var
allnum = 0;
// 遍历所有li
for
(
var
i = 0; i < all.length; i++) {
if
(all[i].children[0].innerHTML ==
"9"
) {
// 雷赋值给数组
ff[allnum] = all[i];
allnum++;
}
}
// 设置一个计时器一个一个打开雷
allnum = 0;
var
stop = setInterval(
function
() {
ff[allnum].classList.add(
"boom"
)
allnum++;
// 判断结束条件
if
(allnum == ff.length) {
// 清除计时器
clearInterval(stop);
}
}, 30)
}
}
// 右键标记地雷
element.oncontextmenu =
function
(event) {
// 阻止右键菜单
event.preventDefault();
// 获取当前点击节点
var
el = event.target;
// 判断是否是
if
(el.parentNode.nodeName ==
"LI"
) {
el = el.parentNode;
}
if
(el.nodeName !=
"LI"
) {
return
;
}
// 获取img
var
classList = el.children[1].classList;
// 剩余雷数
var
residue = document.querySelector(
".residue"
);
var
mineNum = parseInt(residue.innerHTML);
// 如果没有旗子，没有被点开，可以插旗子
if
(classList.contains(
"hide"
) && el.style.background !=
"white"
) {
// 移除隐藏
classList.remove(
"hide"
);
// 获取雷数
mineNum--;
}
else
if
(el.style.background !=
"white"
) {
classList.add(
"hide"
);
// 判断雷数
if
(mineNum < num) {
mineNum++;
}
}
// 剩余雷数
residue.innerHTML = mineNum;
}
}
}
function
judgeVictory() {
//游戏胜利
if
(clearMineNum === (row * col - num)) {
//做一个小动画
var
all = document.querySelectorAll(
".col"
);
var
allNum = 0;
var
stop = setInterval(
function
() {
var
r = Math.floor(Math.random() * 256)
var
g = Math.floor(Math.random() * 256)
var
b = Math.floor(Math.random() * 256)
all[allNum].style.background =
"rgba("
+ r +
","
+ g +
","
+ b +
",0.6)"
;
//将旗子和span都隐藏
all[allNum].children[0].style.display =
"none"
all[allNum].children[1].style.display =
"none"
allNum++
if
(allNum === all.length) {
clearInterval(stop)
if
(!gg) {
alert(
"大吉大利，今晚吃鸡"
)
init(row, col, num)
}
}
}, 20)
}
}
//自动打开空格
function
showNoMine(x, y) {
for
(
var
i = -1; i <= 1; i++) {
if
(x + i >= 0 && x + i < row) {
// 获取当前行
var
rowElement = document.querySelectorAll(
".row"
)[x + i];
for
(
var
j = -1; j <= 1; j++) {
if
(y + j >= 0 && y + j < col) {
//获取当前单元格
var
el = rowElement.children[y + j]
//自动打开必须是未打开的方格
if
(el.style.background !=
"white"
) {
el.style.background =
"white"
el.children[0].style.display =
"inline"
//打开方格数量+1
clearMineNum++
//判断游戏是否胜利
judgeVictory(clearMineNum)
if
(el.children[0].innerText ===
""
) {
showNoMine(x + i, y + j)
}
}
}
}
}
// if (x + i >= 0 && x + i < row) {
// // 获取当前行
// var rowElement = document.querySelectorAll(".row")[x + i];
// for (var j = -1; j <= 1; j++ && y + j < col) {
// // 获取当前单元格
// var el = rowElement.children[y + j];
// if (el.style.background !== "white") {
// el.style.background = "white";
// el.children[0].style.display = "inline";
// // 打开放格数量加1
// clearMineNum++;
// // 判断游戏是否胜利
// judgeVictory(clearMineNum);
// // 判断打开周围的放格周围是否为空
// if (el.children[0].innerHTML === "") {
// showNoMine(x + i, y + j)
// }
// }
// }
// }
}
}
//初始化方法
var
stopTime;
function
init(row, col, num) {
//数据初始化
clearMineNum = 0
gg =
false
;
//清除原来的地图，生成新的地图
var
box = document.querySelector(
".gameBox"
)
box.innerHTML =
""
;
var
map = mineMap(row, col, num);
// 新建地图
writeHtml(map);
show()
//将雷数写入html中
var
residue = document.querySelector(
".residue"
)
residue.innerHTML = num
// 获取计时
var
tick = document.querySelector(
".tick"
);
var
i = 0;
// 初始化
tick.innerHTML = i;
// 清除计时
clearInterval(stopTime);
// 时间计时器
stopTime = setInterval(
function
() {
tick.innerHTML = ++i
}, 1000)
}
// 重置
var
restart = document.querySelector(
".restart"
);
restart.onclick =
function
(event) {
//阻止冒泡
event.stopPropagation()
init(row, col, num)
}
// 自定义
var
level = document.querySelector(
".level"
)
level.onclick =
function
(event) {
var
el = event.target;
switch
(el.innerHTML) {
case
"初级"
:
row = 9;
col = 9;
num = 10;
init(row, col, num)
break
;
case
"中级"
:
row = 16;
col = 16;
num = 40;
init(row, col, num)
break
;
case
"高级"
:
row = 16;
col = 30;
num = 479;
init(row, col, num)
break
;
case
"魔鬼级"
:
row = 40;
col = 50;
num = 300;
init(row, col, num)
break
;
case
"自定义"
:
row = prompt(
"请输入列数！"
);
col = prompt(
"请输入行数！"
);
num = prompt(
"请输入你想要的雷数，（请慎重选择）"
);
init(row, col, num);
break
;
default
:
row = 9;
col = 9;
num = 10;
init(row, col, num)
break
;
}
}
init(row, col, num)
}
|
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我.
原文链接：https://blog.csdn.net/a754334599/article/details/112969475 。
最后此篇关于原生js实现自定义难度的扫雷游戏的文章就讲到这里了,如果你想了解更多关于原生js实现自定义难度的扫雷游戏的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。
27
4
0
1）扫雷 简介 扫雷 是一种经典的单人电脑游戏，最初由微软公司在 1990 年代开发并内置在 Windows 操作系统中。游戏的目标是在一个由方块组成的网格上揭开所有非地雷的方块，而不触发地雷。每个
我正在制作 MineSweeper 的 Angular 版本，但我遇到了事件问题。我的意思是，我有这样的字段组件: import {Component, Input, OnInit} from '@a
我正在尝试制作一个简单的扫雷器，在 n*n 板上埋下 n*n/3 个地雷。地雷用*标记，空格用0标记。(它还不能作为游戏运行:我正在尝试制作扫雷的“答卷”)请注意，我还没有使用过任何有目的的方法。 我
我必须制作一个扫雷 GUI，但我不知道如何使每个按钮都有自己的 mouseAdapter。当我单击某个按钮时，它会更改屏幕上的每个按钮，而不仅仅是我单击的按钮。我可以提供一些关于如何执行此操作的指示吗
我想制作一款扫雷游戏。首先，这适用于按钮。我想我将研究二维数组，并且会有类似 boolean 数组来显示炸弹在哪里，例如，如果 booleanArray[0][4] 为 true，则有炸弹。 现在，我
我遇到了这个奇怪的问题，但我似乎无法弄清楚。我有一个按钮，上面写着“新游戏”。在我玩一次游戏后，然后按“新游戏”返回到 initGame() ，我遇到一个问题，因为我无法右键单击前一个游戏的地雷单元格
我现在面临一个问题，我认为我的 main 正在一遍又一遍地执行一个方法，而不是一次。如果我根据一个例子来解释一下就更好了。我已经能够编写扫雷游戏了。但我把这一切都写在一个 MAIN 类中。这次我尝试再
几个月来我一直在尝试创建自己的扫雷游戏(为了好玩)。唯一让我真正困惑的是如何使用递归函数(flood-fill)来填充游戏中的空白区域。 洪水填充仅部分起作用。它不会从任何单击的节点延伸到右侧或底部节
我正在尝试在 C++11 中使用 Qt 编写扫雷程序。 如果我按下一个带有 0 个炸弹的按钮，我想检查这个按钮周围的按钮以及它们是否也有 0 个炸弹。如果他们有 0 颗炸弹，我想检查按钮。 (图:红色
我想做的是能够“转动”每个相邻的 0，就像普通的扫雷游戏一样。 #include #include #include #include #include int buscamina(); u
有没有办法让某些事件 Action 特定于鼠标左键和右键单击？ 我正在创建一个扫雷器图形用户界面，所以当左键单击一个方 block 时，它会被发现，而当它被右键单击时，它会被标记。 我不确定如何从语法
我正在尝试制作一个控制台版本的扫雷。 尽管我目前很努力，但我无法弄清楚扫雷的“洪水填充”部分，如果所选方格的周围邻居不包含炸弹，我们现在必须检查这些相邻方格以找到相邻方格炸弹。 下面的代码适用于所选方
我是论坛新手，因此如果这不符合该网站的标准，我想表示歉意，但是我对 2D 阵列扫雷程序有疑问。 我试图在棋盘上随机放置地雷，棋盘是通过数组构建的。不幸的是，地雷被随机放置在对角线上，而不是整个棋盘上。
我是 Java 编程新手，想寻求您的帮助。我正在尝试使用 Java 开发一个简单的扫雷游戏。但是，我不断收到错误“线程“main”java.lang.ArrayIndexOutOfBoundsExce
我在这段代码上工作了几个小时，终于接近完成了。一旦我弄清楚如何添加通过右键单击标记地雷的功能，我将添加一个地雷计数器和一个计时器。我了解到 JButton 无法识别右键单击，因此我必须使用 Mouse
for (var i = 0; i < 10; i++) { bommen[i] = [ Math.floor(Math.random() * 10), Math.floor(
我正在完成大学的一项作业，我们获得了扫雷游戏的源代码，并且我们有一定的实现要求。其中之一是，所有游戏都是在用户登录后从磁盘读取的，用户可以随时保存游戏进度。我一直在阅读序列化来保存/加载游戏进度，但我
我正在尝试用 Java 制作类似扫雷的游戏，并且我已经完成了其中的大部分工作。我需要帮助的是 FloodFill - http://en.wikipedia.org/wiki/Flood_fill .
我正在尝试为我正在制作的扫雷游戏制作一个函数。该函数的目的是根据给定的 x 和 y(它所在的位置)显示一个元素。这可能不是实现它的最优雅的方法，但我正在为每个标题为 newField 的图 block
这款游戏是扫雷。我试图实现的人工智能将采用已经在计算机上运行的扫雷游戏实例(本例为 Windows 7)，获取窗口的矩形尺寸，计算窗口的位置，将其推送到前台在屏幕上，单击左上角的方 block ，然后
我是一名优秀的程序员,十分优秀！