【html|HTML版扫雷】页面初始化界面：
文章图片
踩雷结束游戏图：
文章图片
直接上HTML代码！
扫雷 - 锐客网
>
html, body{
margin: 0;
padding: 0;
}
.main {
display: flex;
flex-shrink: 0;
align-items: center;
flex-direction: column;
justify-content: center;
}
#box{
border: 5px solid black;
overflow: hidden;
width: 900px;
min-width: 900px;
background-color: #ccc;
/* background: url('https://ftp.bmp.ovh/imgs/2020/08/8d1866509f36d99f.jpg') no-repeat;
*/
background-size: 900px 450px;
}
#box > div{
cursor: pointer;
}
#box > .block{
width: 20px;
height: 20px;
background-color: rgb(192, 192, 192);
float: left;
border-left:5px solid #fff;
border-top:5px solid #fff;
border-bottom:5px solid rgb(128, 128, 128);
border-right:5px solid rgb(128, 128, 128);
}
#box > .block:hover{
background-color: rgb(192, 192, 192);
border:0;
border-top: 2px solid rgb(138, 138, 138);
border-left: 2px solid rgb(138, 138, 138);
width: 28px;
height: 28px;
}
#box > .show{
width: 30px;
height: 30px;
background-color: rgba(0, 0, 0, 0.1);
color: #fff;
/* background-color: transparent;
*/
float: left;
font-size: 16px;
line-height: 30px;
text-align: center;
font-weight: bold;
}
#box > .bomb{
width: 24px;
height: 24px;
border: 3px solid rgba(255, 100, 100, 0.4);
background-color: rgba(0, 0, 0, 0.1);
float: left;
}
.main .header {
flex-shrink: 0;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
}
.main #time{
width: 100px;
height: 40px;
margin-right: 40px;
line-height: 40px;
background: #ccc;
border-radius: 5px;
font-size: 24px;
font-weight: bold;
text-align: center;
}
.main input {
border: 0;
padding: 0;
margin: 0;
box-sizing: border-box;
height: 40px;
width: 100px;
border: 2px #ccc solid;
border-radius: 5px;
font-size: 24px;
font-weight: 600;
padding: 0 5px;
}
.main .num {
margin-right: 40px;
}
.main .restart {
width: 100px;
height: 40px;
background-color: #ededed;
border-radius: 5px;
font-size: 24px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.main .restart:hover {
background-color: #ccc;
}
0
重开
>
class sweep{
constructor(item) {
this.item = document.querySelector(item)
this.bombNum = 99// 炸弹数量(默认)
this.allBlock = []// 全部地块DOM列表
this.blockList = [] // 无炸弹地块列表
this.bombList = []// 有炸弹地块列表
this.showList = []// 揭开地块的列表
this.blockObj = []// 地块对象
this.flagList = new Set()// 旗子列表
this.begin = false// 开始
this.timer = null// 计时器this.init()
}// 启动器
init () {
this.conTextMenu()
this.createFloor()
this.clickBlock()
}// 生成地形
createFloor () {
let frg = document.createDocumentFragment()
for(let j = 0;
j < 450;
j++){
let div = document.createElement('div')
this.blockList.push(j)
this.blockObj.push({
id: j,
x: j%30,
y: parseInt(j/30)
})
div.dataset.id = j
div.className = 'block'
this.allBlock.push(div)
frg.appendChild(div)
}
this.item.appendChild(frg)
}// 生成炸弹
createBomb (arr) {
this.bombNum = parseInt(document.querySelector('#num').value)
arr.forEach((item) => {
this.blockList.splice(this.blockList.indexOf(item), 1)
})
for(let i = 0;
i < this.bombNum;
i++){
this.bombList.push(this.blockList.splice(parseInt(Math.random() * this.blockList.length), 1)[0])
}
arr.forEach((item) => {
this.blockList.push(item)
})
}// 点击事件
clickBlock () {
// 单击
this.item.addEventListener('click', (e) => {
e = e || window.event
let target = e.target || e.srcElement
if(!this.begin){
this.begin = true
this.setTime()
let arr = this.getBlock(target.dataset.id - 0)
arr.push(target.dataset.id - 0)
this.createBomb(arr)
}
if(target.className === 'block'){
this.show(target)
if(!this.blockList.some((item) => {return this.allBlock[item].className !== 'show'})){
this.victory()
return
}
}
})// 选中事件
this.item.addEventListener('selectstart', (e) => {
e = e || window.event
e.preventDefault()
})// 双击事件
this.item.addEventListener('dblclick', (e) => {
e = e || window.event
let target = e.target || e.srcElement
if(target.className === 'show'){
let num = target.dataset.id - 0
let arr = this.getBlock(num)
if(arr.some((item) => { return this.bombList.indexOf(item) !== -1 && this.allBlock[item].className !== 'bomb' })){
if(target.innerText - 0 && arr.filter((item) => { return this.allBlock[item].className === 'bomb'}).length === target.innerText - 0){
this.fail()
}
} else {
arr.forEach((item) => {
if(this.allBlock[item].className === 'block'){
this.show(this.allBlock[item])
}
})
if(this.showList.length === this.blockList.length) {
this.victory()
}
}
}
})
}// 判断方块四周
show (item) {
let sum = 0
let num = parseInt(item.dataset.id)
if(this.bombList.some((i) => { return i === parseInt(item.dataset.id) })){
this.fail()
} else {
this.showList.push(parseInt(item.dataset.id))
let arr = this.getBlock(num)
arr.forEach((one) => {
if(this.bombList.some((i) => {return i === one})){
sum ++
}
})
item.className = 'show'
if(sum){
item.innerText = sum
} else {// 追加 show
arr.forEach((num) => {
if(this.allBlock[num].className === 'block'){
this.show(this.allBlock[num])
}
})
}
}
}// 获取到四周的方块
getBlock(num) {
let arr = []
if(num === 0){
arr = [num + 1, num + 30, num + 31]
} else if (num === 29){
arr = [num - 1, num + 30, num + 29]
} else if (num === 420){
arr = [num + 1, num - 30, num - 29]
} else if (num === 449){
arr = [num - 1, num - 30, num - 31]
} else if (num < 29){
arr = [num + 1, num - 1, num + 30, num + 31, num + 29]
} else if (num > 420){
arr = [num + 1, num - 1, num - 30, num - 29, num - 31]
} else if (num % 30 === 0){
arr = [num + 1, num - 30, num - 29, num + 30, num + 31]
} else if (num % 30 === 29){
arr = [num - 1, num - 30, num - 31, num + 30, num + 29]
} else {
arr = [num + 1, num - 1, num + 29, num + 30, num + 31, num - 30, num - 31, num - 29]
}
return arr
}// 计时器
setTime(){
let t = document.getElementById('time')
let s = t.innerText - 0
this.timer = setInterval(() => {
s ++
t.innerText = s
}, 1000)
}// 失败
fail (){
let bool = confirm('踩到雷，失败了！')
if(bool){
window.location.reload()
}
}// 成功
victory (){
alert('成功了！成功了！带成功！')
clearInterval(this.timer)
alert('你的生命减少了 ' + document.querySelector('#time').innerText + ' 秒')
}// 右键事件
conTextMenu () {
this.item.addEventListener('contextmenu', (e) => {
e = e || window.event
let target = e.target || e.srcElement
try {e.preventDefault()} catch (err) {e.returnValue = https://www.it610.com/article/false}
if(target.className ==='block'){
target.className = 'bomb'
this.flagList.add(parseInt(target.dataset.id))
} else if (target.className === 'bomb'){
target.className = 'block'
this.flagList.delete(parseInt(target.dataset.id))
}
if(this.flagList.size === this.bombNum) {
let flagAllBomb = this.bombList.every(item => {
return this.flagList.has(item)
})
if(flagAllBomb) {
this.victory()
}
}
})
}
}let first = new sweep('#box')
推荐阅读
- 前端|HTML 实现扫雷游戏
- 无法在wordpress主题上加载自定义CSS
- 当你开始向下滚动时，顶部标题图像会抖动/抽搐，为什么（ [关闭]）
- 无法在WordPress中应用Styles.css
- 将WordPress更改为RTL时出现奇怪的空白
- 侧边栏在小屏幕的底部
- 显示帖子缩略图而不是占位符placeholder
- html|CSS学习
- web|Web——CSS页面背景