关灯游戏js

江淼11

于 2022-05-17 22:20:11 发布

阅读量427

点赞数 1

分类专栏： js 文章标签： javascript 游戏 html

本文链接：https://blog.csdn.net/m0_69422950/article/details/124831591

版权

js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

	<!DOCTYPE html>
	<html lang="zh-CN">

	<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>
	* {
	margin: 0;
	padding: 0;
	}

	.wrap {
	width: 500px;
	height: 500px;
	box-shadow: 0 0 3px #333;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;

	justify-content: space-around;
	align-content: space-around;
	}

	.wrap div {
	width: 80px;
	height: 80px;
	margin: 5px;
	background-image: url(./img/close.png);
	background-size: 100% 100%;

	}

	.wrap .open {
	background-image: url(./img/open.png);
	}
	</style>
	</head>

	<body>
	<div class="wrap">
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	</div>
	</body>
	<script>
	// 需要进行改变的灯放入数组
	var ds = $$('.wrap div');
	//关卡
	var level = 1;
	// opend的个数
	var count = 0;
	// 点击事件
	for (var i = 0; i < ds.length; i++) {
	ds[i].index = i;
	ds[i].onclick = function () {
	getIndexs(this.index);
	}


	}

	function getIndexs(index) {
	var arr = []; //存放需要改变状态灯的下标
	if (index == 0) {
	arr = [0, 1, 5];
	} else if (index == 4) {
	arr = [4, 3, 9]
	}
	else if (index == 20) {
	arr = [20, 21, 15]
	}
	else if (index == 24) {
	arr = [24, 23, 19]
	}
	else if (index < 4) {
	arr = [index, index + 1, index - 1, index + 5]
	}
	else if (index > 20) {
	arr = [index, index + 1, index - 1, index - 5]
	}
	else if (index % 5 == 0) {
	arr = [index, index + 5, index - 5, index + 1]
	}
	else if (index % 5 == 4) {
	arr = [index, index + 5, index - 5, index - 1]
	} else {
	arr = [index, index + 1, index - 1, index + 5, index - 5]
	}

	changeLight(arr);


	}



	function changeLight(arr) {
	for (var i = 0; i < arr.length; i++) {
	var n = arr[i];
	if (ds[n].className === "") {
	ds[n].className = 'open';
	count++;
	} else {
	ds[n].className = '';
	count--;
	}
	}
	//判断是否进入下一关卡
	if (count === 0){
	level++;
	setTimeout( function() {
	alert('恭喜你进入关卡' + level);
	start();
	}, 0);


	}
	}

	// 简化一下query和queryall
	function $(str) {
	return document.querySelector(str);
	}
	function $$(str) {
	return document.querySelectorAll(str);
	}

	//游戏开始
	function start() {
	//根据关卡点亮灯
	for (var i = 0; i < level; i++) {
	var n = rand(0, ds.length);
	getIndexs(n);

	}
	}
	start();
	function rand(min, max) {
	return Math.floor(Math.random() * (max - min) + min)
	}
	</script>

	</html>

江淼11

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关灯游戏js

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initia...
复制链接

扫一扫

专栏目录