原生js实现扫雷游戏

本文实例为大家分享了js实现扫雷游戏的具体代码，供大家参考，具体内容如下
<!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>
了解更多，学习地址
原生js实现扫雷游戏

猜你喜欢
