js实现开关灯游戏
Posted sandraryan
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js实现开关灯游戏相关的知识，希望对你有一定的参考价值。
需求：
点击三个按钮，页面出现不同数量的“灯”
所有的灯有相同的点击效果。点击一个灯的时候，this和他的上下左右都会变成另一种背景色。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> body text-align: center; .wrap /* width: 500px; */ margin: 30px auto; .wrap>div border-radius: 50%; box-sizing: border-box; /* width: 50px; height: 50px; */ border: 1px solid pink; background: #000; display: inline-block; text-align: center; line-height: 50px; button width: 100px;height: 50px;background-color: white; outline: none;padding: 0 10px;border: 1px solid lightgray; border-radius: 8px;font-size: 20px;color: gray; </style> </head>
<body>
<div class="wrap"></div>
<button id="btn1">初级</button>
<button id="btn2">中级</button>
<button id="btn3">高级</button>
<script>
//获取元素
var wrap=document.getElementsByClassName("wrap")[0];
var btn1=document.getElementById("btn1");
var btn2=document.getElementById("btn2");
var btn3=document.getElementById("btn3");
var divarr=[];
//行 列
var row=5;col=6;
//小div设置宽高
var w=50 ,h=50;
function creat()
//给外部盒子添加宽度
wrap.style.width=col * w +"px";
//循环创建100个div
for(var i=0;i<col *row;i++)
//动态创建div
var newdiv=document.createElement("div");
//给创建的小盒子设置样式
newdiv.style.width=w+"px";
newdiv.style.height=h+"px";
//给div中写数字
newdiv.innerText=i;
//把创建好的div放到wrap中
wrap.appendChild(newdiv);
//把100个div放到数组里
divarr.push(newdiv);
creat();
//改变颜色函数
function changebg(s)
var bg = getComputedStyle(s).backgroundColor;
if(bg=="rgb(0, 0, 0)")
s.style.backgroundColor="yellow";
else
s.style.backgroundColor="black";
//封装点击事件
function clickBox()
for(var j=0;j<divarr.length;j++)
divarr[j].onclick=function()
//给当前元素绑定点击事件
changebg(this);
var index = divarr.indexOf(this);
if(index > (col -1))
changebg(divarr[index-col]);
//top
if(index < (row -1)*col)
changebg(divarr[index + col]);
//bottom
if(index % col != 0)
changebg(divarr[index-1]);
//left
if(index % col != 0)
changebg(divarr[index+1]);
//right
clickBox();
// 选择灯数量的函数
function resetGame()
wrap.innerHTML = "";
// 清空页面元素
divarr = [];
// 清空数组
creat();
// 重新创建新元素
clickBox();
// 重新绑定点击事件
btn1.onclick = function()
col = 3; row = 3;
resetGame();
btn2.onclick = function()
col = 8; row = 8;
resetGame();
btn3.onclick = function()
col = 10; row = 9;
resetGame();
</script>
</body>
</html>
ps 这个效果有点想windows日历选中一个时间的样子~~~
以上是关于js实现开关灯游戏的主要内容，如果未能解决你的问题，请参考以下文章