生活随笔
收集整理的這篇文章主要介紹了
超有意思的网页扫雷
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
直接上代碼：
<!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
>.content
{width
: 600px
;margin
: 0 auto
;height
: 600px
;}.son
{background
-color
: green
;width
: 50px
;height
: 50px
;float
: left
;margin
: 5px
;cursor
: pointer
;line
-height
: 50px
;text
-align
: center
;color
: white
;}.over
{text
-align
: center
;position
: absolute
;left
: 0;top
: 0;right
: 0;bottom
: 0;display
: none
;background
-color
: rgba(33, 55, 56, 0.3);}.ooo
{width
: 120px
;height
: 100px
;margin
: 200px auto
;text
-align
: center
;background
-color
: rgb(231, 230, 219);opacity
: 0.7;}</style
>
</head
>
<body
><div
class="content"><!-- <div
class="son" id
="c00"></div
> --></div
><div
class="over"><div
class="ooo"><p
>游戲結(jié)束！
</p
><button
>再來一次
</button
></div
></div
>
</body
>
<script
>var Minesweeper
= {data
:[],lock
: true,DataView
: function(){var divContent
= document
.getElementsByClassName("content")[0]this.data
= []for(var i
=0;i
<=9;i
++){this.data
[i
] = []for(var j
=0;j
<=9;j
++){var div
= document
.createElement("div")div
.className
= "son"div
.id
= "c"+i
+jdivContent
.appendChild(div
)this.data
[i
][j
] = 0}}for(var i
=0;i
<30;i
++){this.randomNum();}console
.log(this.data
);this.MouseEvent()},MouseEvent
: function(){document
.body
.oncontextmenu = function(e
){e
.preventDefault()}var divSonArr
= document
.getElementsByClassName("son")for(var i
=0;i
<divSonArr
.length
;i
++){divSonArr
[i
].onclick = function(){var x
= Number(this.id
.split("")[1])var y
= Number(this.id
.split("")[2])if(Minesweeper
.lock
){console
.log("niha");Minesweeper
.lock
= falseMinesweeper
.leftDianji(x
,y
)Minesweeper
.rightDianji(x
,y
)Minesweeper
.topDianji(x
,y
)Minesweeper
.botDianji(x
,y
)if(Minesweeper
.data
[x
][y
] == 1){Minesweeper
.newGame();}else{Minesweeper
.dianJi(x
,y
)}}else{if(Minesweeper
.data
[x
][y
] == 1){Minesweeper
.newGame();}else{Minesweeper
.dianJi(x
,y
)}}console
.log(Minesweeper
.data
[x
][y
]);}divSonArr
[i
].oncontextmenu = function(){if(this.innerHTML
== "!!!"){console
.log("右鍵點(diǎn)擊");this.innerHTML
= ""}else{this.innerHTML
= "!!!"}}}},leftDianji
: function(x
,y
){var m
= x
,n
= y
-1;if(m
>=0 && m
<=9 && n
>=0 && n
<=9){if(Minesweeper
.data
[m
][n
] == 0){Minesweeper
.dianJi(m
,n
)Minesweeper
.leftDianji(m
,n
)Minesweeper
.botDianji(m
,n
)}else{return 0}}},rightDianji
: function(x
,y
){var m
= x
,n
= y
+1;if(m
>=0 && m
<=9 && n
>=0 && n
<=9){if(Minesweeper
.data
[m
][n
] == 0){Minesweeper
.dianJi(m
,n
)Minesweeper
.rightDianji(m
,n
)Minesweeper
.botDianji(m
,n
)}else{return 0}}},topDianji
: function(x
,y
){var m
= x
-1,n
= y
;if(m
>=0 && m
<=9 && n
>=0 && n
<=9){if(Minesweeper
.data
[m
][n
] == 0){Minesweeper
.dianJi(m
,n
)Minesweeper
.topDianji(m
,n
)Minesweeper
.rightDianji(m
,n
)}else{return 0}}},botDianji
: function(x
,y
){var m
= x
+1,n
= y
;if(m
>=0 && m
<=9 && n
>=0 && n
<=9){if(Minesweeper
.data
[m
][n
] == 0){Minesweeper
.dianJi(m
,n
)Minesweeper
.botDianji(m
,n
)}else{return 0}}},dianJi
: function(x
,y
){var div
= document
.getElementById("c"+x
+y
)div
.style
.backgroundColor
= "#999999"var num1
= Minesweeper
.top(x
,y
)var num2
= Minesweeper
.mid(x
,y
)var num3
= Minesweeper
.bottom(x
,y
)var num
= num1
+ num2
+ num3
if(num
== 0){div
.innerHTML
= num
}else{div
.innerHTML
= num
}},top
: function(x
,y
){var num
= null;var m
= x
-1,n
= y
-1if(m
>=0 && m
<=9 && n
>=0 && n
<=9){if(Minesweeper
.data
[m
][n
] == 1){num
+= 1}} var m
= x
-1,n
= y
if(m
>=0 && m
<=9 && n
>=0 && n
<=9){if(Minesweeper
.data
[m
][n
] == 1){num
+= 1}} var m
= x
-1,n
= y
+1if(m
>=0 && m
<=9 && n
>=0 && n
<=9){if(Minesweeper
.data
[m
][n
] == 1){num
+= 1}}return num
},bottom
: function(x
,y
){var num
= null;var m
= x
+1,n
= y
-1if(m
>=0 && m
<=9 && n
>=0 && n
<=9){if(Minesweeper
.data
[m
][n
] == 1){num
+= 1}} var m
= x
+1,n
= y
if(m
>=0 && m
<=9 && n
>=0 && n
<=9){if(Minesweeper
.data
[m
][n
] == 1){num
+= 1}} var m
= x
+1,n
= y
+1if(m
>=0 && m
<=9 && n
>=0 && n
<=9){if(Minesweeper
.data
[m
][n
] == 1){num
+= 1}}return num
},mid
: function(x
,y
){var num
= null;var m
= x
,n
= y
-1if(m
>=0 && m
<=9 && n
>=0 && n
<=9){if(Minesweeper
.data
[m
][n
] == 1){num
+= 1}} var m
= x
,n
= y
if(m
>=0 && m
<=9 && n
>=0 && n
<=9){if(Minesweeper
.data
[m
][n
] == 1){num
+= 1}} var m
= x
,n
= y
+1if(m
>=0 && m
<=9 && n
>=0 && n
<=9){if(Minesweeper
.data
[m
][n
] == 1){num
+= 1}}return num
},newGame
: function(){this.lock
= true;for(var i
=0;i
<this.data
.length
;i
++){for(var j
=0;j
<this.data
[i
].length
;j
++){if(this.data
[i
][j
] == 1){var div
= document
.getElementById("c"+i
+j
)div
.innerHTML
= "雷"}}}var over
= document
.getElementsByClassName("over")[0]over
.style
.display
= "block"var button
= document
.getElementsByTagName("button")[0]button
.onclick = function(){over
.style
.display
= "none"var divContent
= document
.getElementsByClassName("content")[0]divContent
.innerHTML
= ""Minesweeper
.DataView();}},getRandom
: function (min
,max
){return Math
.floor(Math
.random() * (max
- min
+ 1)) + min
},randomNum
: function(){while(true){var x
= null,y
= null,z
= null;x
= this.getRandom(0,9);y
= this.getRandom(0,9);if(this.data
[x
][y
] == 0){this.data
[x
][y
] = 1var div
= document
.getElementById("c"+x
+y
)break;}}},}Minesweeper
.DataView()
</script
>
</html
>
總結(jié)
以上是生活随笔為你收集整理的超有意思的网页扫雷的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
