您的位置：首页 > Web前端 > JavaScript

原生js实现扫雷游戏

2018-08-24 12:04 447 查看

本文实例为大家分享了js实现扫雷游戏的具体代码，供大家参考，具体内容如下

[code]<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>H5扫雷游戏开发</title>
<style>
*{
padding:0px;
margin:0px;
}
.container{
width:600px;
height:600px;
border:1px solid #f00;
margin:0 auto;
}
.container .block{
width:60px;
height:60px;
background-color: #abcdef;
float:left;
border:1px solid red;
box-sizing:border-box;
cursor: pointer;
}
.container .lei{
/*background: url('dl.jpg') no-repeat center center/ 100% 100%;*/
}
.container .show{
background: url('dl.jpg') no-repeat center center/ 100% 100%;
}
.container .number{
background-color: #fff;
text-align: center;
line-height: 60px;
}
.container .biaoji{
background: url('qz.jpg') no-repeat center center/ 100% 100%;

}
</style>
</head>
<body>
<div class="container">
</div>
</body>
<script>
// 1、动态的创建表格

let container = document.querySelector(".container");
// 行数
for(let i = 0 ;i< 10 ;i++){
// 列数
for(let j = 0;j<10;j++){

// 创建div对象
let divObj = document.createElement("div");

// 添加类
divObj.classList.add('block');
divObj.id = "a"+i+"_"+j;

// 将div对象追加到容器中
container.appendChild(divObj);
}
}

// 2、随机地雷
let count = 10;
// 获取所有盒子的个数
let block = document.querySelectorAll(".block");
do{
// 随机地雷
let random = Math.floor(Math.random()*block.length);
block[random].classList.add("lei");
}while(document.querySelectorAll(".lei").length<count);

// 3、给小方块绑定事件
block.forEach(function(item){
// 鼠标点击
item.onclick=function(){
leftClick(item);
}

// 鼠标右键标记
item.oncontextmenu = function(e){
// 阻止浏览器的默认事件
e.preventDefault();
rightClick(item);
}
});

// 右键点击方法

function rightClick(obj){
// 判断是否可以标记旗子
if (!obj.classList.contains("number")) {
// 标记小旗子
obj.classList.toggle("biaoji");
};
// 判断游戏结束
let biaoji = document.querySelectorAll(".biaoji.lei");
let biaoji2 = document.querySelectorAll(".biaoji");
// 判断扫雷成功
if (biaoji.length == count && biaoji2.length == count) {
alert("通过成功");
};
}
// 左键点击方法

function leftClick(obj){
// 如果标记了小旗子

if (obj.classList.contains("biaoji")) {
return "";
};
// 判断所点击的表格是否是地雷
// 如果是地雷，爆炸所有的地雷
if (obj.classList.contains("lei")) {

alert("游戏结束");

// 获取所有的地雷

let lei = document.querySelectorAll(".lei");

// 显示所有的地雷

lei.forEach(function(item){
item.classList.add("show");
});
return "";
};

// 点击显示数字
obj.classList.add("number");
// 如何计算地雷的个数
// 获取当前点击盒子的ID
let ids = obj.id;
let arr = ids.split("_");
// 获取行号和列号
let x = Number(arr[0].substr(1));
let y = Number(arr[1]);
// 计算附近地雷数
let num=0;
for(let i = x-1;i<=x+1;i++){
for(let j = y-1;j<=y+1;j++){
// 获取附近的对象
let objs = document.querySelector(`#a${i}_${j}`);
// 如果有地雷，数值增加
if (objs && objs.classList.contains("lei")) {
num++;
};
}
}

// 判断如果雷的个数0
if (num) {
obj.innerHTML = num;
};
// 如果是空白区域，扩散
if (num == 0) {
// 行
for(let i = x-1;i <= x+1;i++){
// 列
for(let j = y-1;j <= y+1;j++){
// 获取附近的对象
let objs = document.querySelector(`#a${i}_${j}`);
// 让小方块进行点击
// 如果对象存在，并且未被点击的时候
if (objs && !objs.classList.contains("number")) {
leftClick(objs);
};
}
}
};
}

</script>
</html>

了解更多，学习地址

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航