CloseHight.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.content{
margin:auto;
background:red;
font-size:0px;
}
.box{
width:50px;
height: 50px;
border:.5px white solid;
display:inline-block;
}
</style>
</head>
<body>
<div class="content" style="min-width:714px;max-width:714px;">
</div>
<div style="font-size:16px; text-align:center;">您已用<span id="bushu" style="width:20px;height:20px; color:red;"></span>步</div>
</body>
<script type="text/javascript" src="../js/CloseLight.js"></script>
</html>
CloseLight.js
var boxs = document.getElementsByClassName("box");//获取所有指定类名"box"的元素
var divs = document.getElementsByClassName("content");
var count = 0;//声明点击的步数
function initialize(){//初始化游戏界面
var temp = divs[0];
var content ="";
//初始化一个140个方格的背景为黑色的、具有点击事件的游戏背景
for(var i=0; i<140; i++){
content = content + '<div class="box" style="background-color:black;" onclick="myClick('+i+');"></div>';
}
temp.innerHTML = content;
//模拟游戏操作过程,随机点击10个div块
for(var j=0; j<10; j++){
operation(Math.floor(Math.random()*140));
}
}
//点击事件的方法
function myClick(foo){
count++;
var bushu = document.getElementById("bushu");
bushu.innerText = count;
console.log(foo);//在控制台输出块的序号
operation(foo);
isClose();
}
//改变颜色
function changeColor(index){
if(boxs[index].getAttribute("style").includes("black")){//如果div的style中的属性包含black
boxs[index].setAttribute("style","background-color:red;");//将该div的style属性中背景颜色改为red
}else if(boxs[index].getAttribute("style").includes("red")){
boxs[index].setAttribute("style","background-color:black;");
}
}
//点击后对上下左右的影响
function operation(index){
//Up
if(index>13){//当点击的div不是第一行
changeColor(index-14);
}
//Down
if(index<126){//当点击的div不是最后一行
changeColor(index+14);
}
//Left
var left = index % 14;
if(left!=0){//当点击的div不是第一列
changeColor(index-1);
}
//Light
var light = (index+1) % 14;
if(light != 0){/当点击的div不是最后一列
changeColor(index+1);
}
}
//判断是否全部关闭
function isClose(){
for(var j=0;j<boxs.length; j++){//遍历整个div,如果有style属性包含red,则跳出;如果没有style属性包含red,则通关
if(boxs[j].getAttribute("style").includes("red")){
return;
}
}
alert("恭喜您,游戏通过~");
initialize();
}
initialize();