javascript之开关灯游戏

最新推荐文章于 2022-12-12 20:04:44 发布
原创 最新推荐文章于 2022-12-12 20:04:44 发布 · 787 阅读 · 0 ·
CC 4.0 BY-SA版权
anansec
文章标签：

#游戏 #javascript

本文介绍了一款使用纯JavaScript和HTML实现的开关灯游戏，通过点击任意灯泡，可以改变其周围灯泡的状态，目标是点亮所有灯泡。游戏包含10x10的灯泡网格，展示了如何用JavaScript动态创建DOM元素并绑定事件监听器。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

刚发表了计算器源码，正好翻出了开关灯游戏，感觉还是蛮有趣的，就发出来喽！
先来个游戏效果图
在这里插入图片描述
纯javascript实现

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script>
		var wrapper = document.createElement('div');
		wrapper.style.width = "500px";
		wrapper.style.height = "500px";
		for(var i = 1; i <= 100; i++){
			var box = document.createElement('div');
			box.style.width = "50px";
			box.style.height = "50px";
			box.style.boxSizing = "border-box";
			box.style.border = "1px solid gray";
			box.style.backgroundColor = 'black';
			box.style.float='left';
			box.id = i;
			// 函数绑定
			box.onclick = clickLight;
			wrapper.appendChild(box);
		}
		document.body.appendChild(wrapper);
		function clickLight(){
			var box = this;
			var row = Math.ceil(box.id / 10);
			trunLight(box);
			var boxId = parseInt(box.id);
			// 控制左面的灯
			var leftId = box.id - 1;
			var leftRow = Math.ceil(leftId / 10);
			if(row == leftRow){
				trunLight(document.getElementById(leftId));
			}
			// 控制右面的灯
			var rightId = boxId + 1; 
			var rightRow = Math.ceil(rightId / 10);
			if(row == rightRow){
				trunLight(document.getElementById(rightId));
			}
			// 控制上面的灯
			var topId = boxId - 10;
			if(topId > 0){
				trunLight(document.getElementById(topId));
			}
			var bottomId = boxId + 10;
			if(bottomId <= 100){
				trunLight(document.getElementById(bottomId));
			}
		}
		function trunLight(box){
			if(box.style.backgroundColor != 'yellow'){
				box.style.backgroundColor = 'yellow';
			}else{
				box.style.backgroundColor = 'black';
			}
		}
	</script>
</body>
</html>

javascript+html实现

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.wrapp{
			width: 500px;
			height: 500px;
		}
		.box{
			width: 50px;
			height: 50px;
			border: 1px solid grey;
			box-sizing: border-box;
			float: left;
			background-color: black;
			/*禁止用户选择这个标签*/
			/*user-select: none;*/ 
		}
	</style>
</head>
<body>
	<div class="wrapp">
		<div class="box" id="1" onclick="lightCLick(this)"></div>
		<div class="box" id="2" onclick="lightCLick(this)"></div>
		<div class="box" id="3" onclick="lightCLick(this)"></div>
		<div class="box" id="4" onclick="lightCLick(this)"></div>
		<div class="box" id="5" onclick="lightCLick(this)"></div>
		<div class="box" id="6" onclick="lightCLick(this)"></div>
		<div class="box" id="7" onclick="lightCLick(this)"></div>
		<div class="box" id="8" onclick="lightCLick(this)"></div>
		<div class="box" id="9" onclick="lightCLick(this)"></div>
		<div class="box" id="10" onclick="lightCLick(this)"></div>
		<div class="box" id="11" onclick="lightCLick(this)"></div>
		<div class="box" id="12" onclick="lightCLick(this)"></div>
		<div class="box" id="13" onclick="lightCLick(this)"></div>
		<div class="box" id="14" onclick="lightCLick(this)"></div>
		<div class="box" id="15" onclick="lightCLick(this)"></div>
		<div class="box" id="16" onclick="lightCLick(this)"></div>
		<div class="box" id="17" onclick="lightCLick(this)"></div>
		<div class="box" id="18" onclick="lightCLick(this)"></div>
		<div class="box" id="19" onclick="lightCLick(this)"></div>
		<div class="box" id="20" onclick="lightCLick(this)"></div>
		<div class="box" id="21" onclick="lightCLick(this)"></div>
		<div class="box" id="22" onclick="lightCLick(this)"></div>
		<div class="box" id="23" onclick="lightCLick(this)"></div>
		<div class="box" id="24" onclick="lightCLick(this)"></div>
		<div class="box" id="25" onclick="lightCLick(this)"></div>
		<div class="box" id="26" onclick="lightCLick(this)"></div>
		<div class="box" id="27" onclick="lightCLick(this)"></div>
		<div class="box" id="28" onclick="lightCLick(this)"></div>
		<div class="box" id="29" onclick="lightCLick(this)"></div>
		<div class="box" id="30" onclick="lightCLick(this)"></div>
		<div class="box" id="31" onclick="lightCLick(this)"></div>
		<div class="box" id="32" onclick="lightCLick(this)"></div>
		<div class="box" id="33" onclick="lightCLick(this)"></div>
		<div class="box" id="34" onclick="lightCLick(this)"></div>
		<div class="box" id="35" onclick="lightCLick(this)"></div>
		<div class="box" id="36" onclick="lightCLick(this)"></div>
		<div class="box" id="37" onclick="lightCLick(this)"></div>
		<div class="box" id="38" onclick="lightCLick(this)"></div>
		<div class="box" id="39" onclick="lightCLick(this)"></div>
		<div class="box" id="40" onclick="lightCLick(this)"></div>
		<div class="box" id="41" onclick="lightCLick(this)"></div>
		<div class="box" id="42" onclick="lightCLick(this)"></div>
		<div class="box" id="43" onclick="lightCLick(this)"></div>
		<div class="box" id="44" onclick="lightCLick(this)"></div>
		<div class="box" id="45" onclick="lightCLick(this)"></div>
		<div class="box" id="46" onclick="lightCLick(this)"></div>
		<div class="box" id="47" onclick="lightCLick(this)"></div>
		<div class="box" id="48" onclick="lightCLick(this)"></div>
		<div class="box" id="49" onclick="lightCLick(this)"></div>
		<div class="box" id="50" onclick="lightCLick(this)"></div>
		<div class="box" id="51" onclick="lightCLick(this)"></div>
		<div class="box" id="52" onclick="lightCLick(this)"></div>
		<div class="box" id="53" onclick="lightCLick(this)"></div>
		<div class="box" id="54" onclick="lightCLick(this)"></div>
		<div class="box" id="55" onclick="lightCLick(this)"></div>
		<div class="box" id="56" onclick="lightCLick(this)"></div>
		<div class="box" id="57" onclick="lightCLick(this)"></div>
		<div class="box" id="58" onclick="lightCLick(this)"></div>
		<div class="box" id="59" onclick="lightCLick(this)"></div>
		<div class="box" id="60" onclick="lightCLick(this)"></div>
		<div class="box" id="61" onclick="lightCLick(this)"></div>
		<div class="box" id="62" onclick="lightCLick(this)"></div>
		<div class="box" id="63" onclick="lightCLick(this)"></div>
		<div class="box" id="64" onclick="lightCLick(this)"></div>
		<div class="box" id="65" onclick="lightCLick(this)"></div>
		<div class="box" id="66" onclick="lightCLick(this)"></div>
		<div class="box" id="67" onclick="lightCLick(this)"></div>
		<div class="box" id="68" onclick="lightCLick(this)"></div>
		<div class="box" id="69" onclick="lightCLick(this)"></div>
		<div class="box" id="70" onclick="lightCLick(this)"></div>
		<div class="box" id="71" onclick="lightCLick(this)"></div>
		<div class="box" id="72" onclick="lightCLick(this)"></div>
		<div class="box" id="73" onclick="lightCLick(this)"></div>
		<div class="box" id="74" onclick="lightCLick(this)"></div>
		<div class="box" id="75" onclick="lightCLick(this)"></div>
		<div class="box" id="76" onclick="lightCLick(this)"></div>
		<div class="box" id="77" onclick="lightCLick(this)"></div>
		<div class="box" id="78" onclick="lightCLick(this)"></div>
		<div class="box" id="79" onclick="lightCLick(this)"></div>
		<div class="box" id="80" onclick="lightCLick(this)"></div>
		<div class="box" id="81" onclick="lightCLick(this)"></div>
		<div class="box" id="82" onclick="lightCLick(this)"></div>
		<div class="box" id="83" onclick="lightCLick(this)"></div>
		<div class="box" id="84" onclick="lightCLick(this)"></div>
		<div class="box" id="85" onclick="lightCLick(this)"></div>
		<div class="box" id="86" onclick="lightCLick(this)"></div>
		<div class="box" id="87" onclick="lightCLick(this)"></div>
		<div class="box" id="88" onclick="lightCLick(this)"></div>
		<div class="box" id="89" onclick="lightCLick(this)"></div>
		<div class="box" id="90" onclick="lightCLick(this)"></div>
		<div class="box" id="91" onclick="lightCLick(this)"></div>
		<div class="box" id="92" onclick="lightCLick(this)"></div>
		<div class="box" id="93" onclick="lightCLick(this)"></div>
		<div class="box" id="94" onclick="lightCLick(this)"></div>
		<div class="box" id="95" onclick="lightCLick(this)"></div>
		<div class="box" id="96" onclick="lightCLick(this)"></div>
		<div class="box" id="97" onclick="lightCLick(this)"></div>
		<div class="box" id="98" onclick="lightCLick(this)"></div>
		<div class="box" id="99" onclick="lightCLick(this)"></div>
		<div class="box" id="100" onclick="lightCLick(this)"></div>
	</div>
	<script>
		var count = 0;
		alert("游戏规则：点亮所有灯！");
		function lightCLick(light){
			let row = Math.ceil(light.id / 10);
			turnLight(light);
			
			let leftId = light.id - 1;
			let leftRow = Math.ceil(leftId / 10);
			if(row == leftRow){
				turnLight(document.getElementById(leftId));
			}
			let rightId = parseInt(light.id) + 1;
			let rightRow  = Math.ceil(rightId / 10);
			if(row == rightRow){
				turnLight(document.getElementById(rightId));
			}
			let topId = parseInt(light.id) - 10;
			// if(topId >= 1){
				turnLight(document.getElementById(topId));
			// }
			
			let bottomId = parseInt(light.id) + 10;
			// if(bottomId <= 100){
				turnLight(document.getElementById(bottomId));
			// }
			if(count == 0){
				alert('恭喜点亮了所有灯');
			}
		}

		function turnLight(light){
			if(light.style.backgroundColor != 'yellow'){
				light.style.backgroundColor = 'yellow';
				count++;
			}else{
				light.style.backgroundColor='black';
				count--;
			}
		
		}
	</script>
</body>
</html>
JavaScript-灯泡小游戏
m0_51651340的博客
05-17 482
一起来玩关灯小游戏把
js制作的开关灯小游戏
01-24
一个利用JavaScript制作的简单的开关灯小游戏，暂时没有得分
js实现开关灯游戏
deliefu3790的博客
08-15 319
需求： 点击三个按钮，页面出现不同数量的“灯” 所有的灯有相同的点击效果。点击一个灯的时候，this和他的上下左右都会变成另一种背景色。 代码在这里~~~ https://github.com/sandraryan/practise/blob/master/js/%E5%BC%80%E5%85%B3%E7%81%AF%E6%B8%B8%E6%88%8F2.html <...
开关灯游戏JS
ying6089的博客
08-15 542
开关灯游戏流程： 1.循环创建div。 2.给div设置样式，放到数组和wrap中。 3.给每个元素绑定点击事件。 4.给每个元素设置上下左右的元素切换颜色
JavaScript实现开关灯游戏
litong94的博客
09-12 1689
前言 开关的游戏是一款有趣的益智类游戏。在游戏中，你需要通过点击操作来打开或关闭那些灯，每一个开关灯的按钮都与其周围的按钮功能相反. 正文 刚开始学习js 事件，编写这个游戏用来做练习。 主要思路：将所有的灯放进数组，并给创建的灯一个索引值index,索引值与数组下标值一样，方便进行判断。该函数用来判断点击的灯的上下左右能否被点亮。 function clickItem(a){
简易开关灯游戏开发与代码实现
根据提供的文件信息，我们可以推测“开关灯游戏”很可能是一种简单的控制游戏，玩家通过操作开关来控制灯的开启与关闭。这种游戏通常需要基本的编程知识来实现，可以使用多种编程语言来编写，例如Python、JavaScript...
javascript实现点亮灯泡特效示例
12-13
在JavaScript编程语言中，实现点亮灯泡特效是一种常见的交互式网页设计技巧，它可以增强用户体验，增加网站的趣味性。...这种技术广泛应用于各种互动元素和游戏开发中，增强了网页的动态性和交互性。
基于JavaScript的灯光游戏改编：探索MIT许可经典
1. 互动逻辑：游戏中的互动逻辑可能包括对灯光的开关控制、计时器、得分系统以及玩家的胜利或失败条件等。 2. 游戏界面：游戏的用户界面可能会设计成简洁的风格，以确保玩家能够快速理解游戏规则，同时保持足够的...
jQuery+CSS3开关灯动画特效代码
03-20
【jQuery+CSS3 开关灯动画特效代码】是一种在网页设计中实现的交互式效果，它结合了JavaScript库jQuery和CSS3的技术，创造出在黑暗背景下模拟开灯与关灯的效果，给用户带来独特的视觉体验。这个动画特效尤其适用于...
经典小游戏js点灯游戏
m0_69710501的博客
12-12 463
js小游戏
开关灯游戏
12-23
没事可以用来耍耍，实现代码简单，效果已经实现，待继续深入改写
关灯小游戏
12-13
关灯小游戏，无代码加密，
关灯游戏求解算法含代码
08-19
本程序为求解关灯游戏的算法,同时还有一个测试程序,
关灯游戏js
m0_69422950的博客
05-17 507
<!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...
灯泡开关游戏
小紫莹的博客
01-25 5412
游戏规则： 初始时有 n 个灯泡处于关闭状态。第一轮，你将会打开所有灯泡。接下来的第二轮，你将会每两个灯泡关闭第二个。 第三轮，你每三个灯泡就切换第三个灯泡的开关（即，打开变关闭，关闭变打开）。第 i 轮，你每 i 个灯泡就切换第 i 个灯泡的开关。直到第 n 轮，你只需要切换最后一个灯泡的开关。 找出并返回 n轮后有多少个亮着的灯泡。 分析： 初始有n个灯泡关闭 * 第i轮的操作是每i个灯泡切换一次开关（开->闭，闭->开），即切换i的倍数位置的开关。 * 求n轮后亮着的.
iOS小项目一 开关灯小游戏
lh2718的博客
08-27 955
有关iOS UIbutton的小练习，有助于初学者对UIbutton有更好的理解
canvas入门级小游戏《开关灯》思路讲解
andrew1989121的博客
08-19 575
游戏很简单，10行10列布局，每行每列各10盏灯，游戏初始化时随机点亮其中一些灯，点击某盏灯，其上下左右的灯及本身状态反转，如果点击前是灭着的，点击后即点亮，将所有灯全部点亮才算过关。游戏试玩： 下面说说大概思路: 生成画布 创建canvas画布，先是生成10*10阵列的100盏灯，每盏灯之间的间隔为margin = 5px，第一盏灯圆心坐标为它的半径"R, R"，...
关灯游戏 Lights out (二)(首行枚举+位运算，搜索全部解)
MHL_1208980380的博客
01-19 7367
关灯游戏的简介就不介绍了，还不了解的朋友可点击笔者的上一篇博文----关灯游戏 Lights out (一)(极速求解)          在这一篇给大家介绍“关灯游戏”的枚举算法。          枚举算法很简单，就是枚举所有开关操作，然后逐一检索经过各种操作后局面的最终状态，当灯全灭时输出解。          对一个m×n的灯阵，并不需要枚举整个局面2^(m×n)种开关组合。因为任意
关灯游戏 Lights out (一)(极速求解)
热门推荐
MHL_1208980380的博客
01-12 2万+
关灯游戏(Lights Out)         关灯游戏是Tiger Electronics在1995年发行的一款电子游戏。         关灯游戏规则非常简单，在一个M*N阵列里，有若干盏灯亮着(可以全部都亮着)，点击任意一盏灯(不管此灯是亮着还是灭着，都可以点)，那么该灯以及与该灯相邻的上、下、左、右共五盏灯都同时会变成与自身相反状态，即亮的变灭，灭的变亮(由于边角的特殊性，点击边
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

anansec

打赏是我创作路上的加油剂！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值