前端开发JS扫雷小游戏
摘要： 前端开发 代码编辑器 头脑王者开发前端代码 前端开发基础代码大全 html 代码片段 <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UT……
| 前端开发 代码编辑器 |
| 头脑王者开发前端代码 |
| 前端开发基础代码大全 |
html 代码片段
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
#saoLei {
margin: 50px auto;
border: 1px solid #333;
border-radius: 5px;
overflow: hidden;
}
#saoLei p {
width: 18px;
height: 18px;
line-height: 20px;
background: #ccc;
position: relative;
color: #fff;
text-align: center;
float: left;
border: 1px solid #333;
font-size: 12px;
}
#saoLei p.lei {
background: url(https://raw.githubusercontent.com/zaiYe/ife/master/lei.jpg)
no-repeat center;
}
#saoLei p::after {
content: attr(data-num);
position: absolute;
width: 18px;
height: 18px;
left: 0;
}
#saoLei p.lei::after {
content: ”;
}
#saoLei span {
position: absolute;
left: -1px;
top: -1px;
width: 18px;
height: 18px;
background: #999;
cursor: pointer;
z-index: 1;
border: 1px solid #333;
}
#saoLei span:active {
background: #333;
}
#saoLei span.yellow {
background: yellow;
}
#saoLei span.liang {
background: #eee;
}
</style>
<script>
function SaoLei(row, col, n) {
//行，列，雷数
this.rootEle = document.createElement(‘div’)
this.rootEle.setAttribute(‘id’, ‘saoLei’)
this.rootEle.oncontextmenu = function() {
return false
}
this.grids = [] //格子数组
this.row = row
this.col = col
this.leiNum = n
this.leiArr = []
this.count = 0
this.win = row * col – n
this.init()
}
SaoLei.prototype = {
init: function() {
var self = this
this.rootEle.innerHTML = ”
this.rootEle.style.cssText =
‘height:’ +
this.row * 20 +
‘px;width:’ +
this.col * 20 +
‘px;’
document.body.appendChild(this.rootEle)
for (var i = 0; i < this.row; i++) {
var arr = []
for (var k = 0; k < this.col; k++) {
var dP = document.createElement(‘p’)
dP.onmousedown = function() {
if (!this.flag) {
this.flag = true
}
var pos = self.getPos(this)
var arr = self.roundGrid(pos.x, pos.y)
var flag = self.flagNum(arr)
if (flag[0] == self.getNum(pos.x, pos.y)) {
for (var i = 0; i < flag[1].length; i++) {
flag[1][i].getElementsByTagName(
‘span’,
)[0].style.display = ‘none’
self.count++
if (flag[1][i].className == ‘lei’) {
alert(‘You lose!’)
return
}
} //循环必须要分开。
for (var j = 0; j < flag[1].length; j++) {
var cPos = self.getPos(flag[1][j])
var x = cPos.x,
y = cPos.y
if (self.getNum(x, y) == 0) {
self.bE(x, y)
}
if (self.count == self.win) {
alert(‘You win!’)
}
}
} else {
self.toggleLight(arr, ‘liang’)
}
}
dP.onmouseup = dP.onmousemove = function() {
if (this.flag) {
var pos = self.getPos(this)
self.toggleLight(
self.roundGrid(pos.x, pos.y),
”,
)
this.flag = false
}
}
var dSpan = document.createElement(‘span’)
dSpan.onmousedown = function(event) {
event.stopPropagation()
var btnNum = event.button
if (btnNum == 2) {
this.classList.toggle(‘yellow’)
} else if (btnNum == 0) {
if (this.className == ‘yellow’) {
this.className = ”
return
}
this.style.display = ‘none’
self.count++
var pos = self.getPos(this)
var x = pos.x,
y = pos.y
if (getParentEle(this).className == ‘lei’) {
alert(‘You lose!’)
return
}
if (self.getNum(x, y) == 0) {
self.bE(x, y)
}
}
if (self.count == self.win) {
alert(‘You win!’)
}
}
dP.appendChild(dSpan)
dP.setAttribute(‘data-num’, 0)
dP.setAttribute(‘data-pos’, i + ‘,’ + k)
arr.push(dP)
this.rootEle.appendChild(dP)
}
this.grids.push(arr)
}
for (var j = 0; j < this.leiNum; j++) {
this.createLei()
}
},
getPos: function(node) {
var pos = ”
pos = ele.getAttribute(‘data-pos’).split(‘,’)
return { x: parseInt(pos[0]), y: parseInt(pos[1]) }
},
getNum: function(x, y) {
return parseInt(this.grids[x][y].getAttribute(‘data-num’))
},
createLei: function() {
var x = Math.floor(Math.random() * this.row)
var y = Math.floor(Math.random() * this.col)
if (this.grids[x][y].className != ‘lei’) {
this.grids[x][y].className = ‘lei’
this.leiArr.push(this.grids[x][y])
this.updateNum(x, y)
} else {
this.createLei()
}
},
updateNum: function(x, y) {
var roundArr = this.roundGrid(x, y),
pos,
self = this
roundArr.forEach(function(ele, index, arr) {
pos = self.getPos(ele)
ele.setAttribute(
‘data-num’,
self.getNum(pos.x, pos.y) + 1,
)
})
},
roundGrid: function(x, y) {
var arr = [],
self = this
function isInAdd(n, m) {
if (self.inGrid(n, m)) {
arr.push(self.grids[n][m])
}
}
isInAdd(x – 1, y – 1)
isInAdd(x – 1, y)
isInAdd(x – 1, y + 1)
isInAdd(x, y – 1)
isInAdd(x, y + 1)
isInAdd(x + 1, y – 1)
isInAdd(x + 1, y)
isInAdd(x + 1, y + 1)
return arr
},
inGrid: function(x, y) {
return (
this.grids[x] != undefined &&
this.grids[x][y] != undefined
)
},
bE: function(x, y) {
//蝴蝶效应
if (!this.bE.cache) {
this.bE.cache = {}
} //利用缓存消除堆栈溢出 赞机智的自己
if (!this.bE.cache[x + ‘-‘ + y]) {
this.bE.cache[x + ‘-‘ + y] = 1
} else {
return
}
var roundArr = this.roundGrid(x, y),
self = this
roundArr.forEach(function(ele, index, arr) {
var pos = self.getPos(ele)
hideSpan(pos.x, pos.y)
})
function hideSpan(x, y) {
if (self.inGrid(x, y)) {
if (
self.grids[x][y].getElementsByTagName(‘span’)[0]
.style.display != ‘none’
) {
self.grids[x][y].getElementsByTagName(
‘span’,
)[0].style.display = ‘none’
self.count++
}
if (self.getNum(x, y) == 0) {
self.bE(x, y)
}
}
}
},
toggleLight: function(arr, classname) {
arr.forEach(function(ele, index) {
var childSpan = ele.getElementsByTagName(‘span’)[0]
if (
childSpan.style.display != ‘none’ &&
childSpan.className != ‘yellow’
) {
childSpan.className = classname
}
})
},
flagNum: function(arr) {
var n = 0,
arr1 = []
for (var i = 0; i < arr.length; i++) {
if (
arr[i].getElementsByTagName(‘span’)[0].className ==
‘yellow’
) {
n++
continue
}
if (
arr[i].getElementsByTagName(‘span’)[0].style
.display != ‘none’
) {
arr1.push(arr[i])
}
}
return [n, arr1]
},
}
function getParentEle(node) {
if (node.parentNode.nodeType == 1) {
return node.parentNode
} else {
return getParentEle(node.parentNode)
}
}
</script>
</head>
<body>
<h1 id=”hh”></h1>
<script>
window.onload = function() {
var sl = new SaoLei(9, 9, 10) //row ，col ，雷数
document.getElementById(‘hh’).innerHTML = ‘总雷数’ + sl.leiNum
}
</script>
</body>
</html>
| 前端开发每天多少行代码 |
| 前端开发是写代码吗 |
| 前端代码开发规范文档 |
» 本文来自：前端开发者 » 《前端开发JS扫雷小游戏》
» 本文链接地址：https://www.rokub.com/6388.html
» 您也可以订阅本站：https://www.rokub.com
近期评论