刚发表了计算器源码，正好翻出了开关灯游戏，感觉还是蛮有趣的，就发出来喽！
先来个游戏效果图
纯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>
