如何用js做关灯游戏

编辑器 Sublime Text 3

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">

//灯的宽度
const LIGHTWIDTH = 40;
//灯的高度
const LIGHTHEIGHT = 40;
//行数
const ROWCOUNT = 10;
//列数
const COLCOUNT = 10;
//灯打开的颜色
const ONCOLOR = 'yellow';
//灯关闭的颜色
const OFFCOLOR = 'black';
//游戏关卡
var gameLevel = 1;

//创建容器标签
var wrapper = document.createElement('div');
wrapper.style.width =LIGHTWIDTH * COLCOUNT +'px';
wrapper.style.height = LIGHTHEIGHT * ROWCOUNT +'px';
//把容器标签添加到 body 标签里
document.body.appendChild(wrapper);

//循环创建灯
for (let i = 1; i <= COLCOUNT * ROWCOUNT;i++){
let light = document.createElement('div');
light.id = i;
light.style.width = LIGHTWIDTH + 'px';
light.style.height = LIGHTHEIGHT + 'px';
light.style.backgroundColor = OFFCOLOR;
light.style.float = 'left';
light.style.border = '1px solid gray';
light.style.boxSizing = 'border-box';
light.onclick = thisClick; //调用函数的时候会通过 this 传递标签

wrapper.appendChild(light);
}

//代码绑定点击事件的处理函数
function thisClick(){
lightClick(this);
}
var lightOnCount = 0;
//灯的点击函数
function lightClick(light){ //light 被点击的标签
//把当前点击的灯进行开关
turnlight(light);
//当前标签所在行数
var row = Math.ceil(parseInt(light.id) / 10);
//开关上下左右的灯

//左边
//通过当前被点击的标签的 id 找到坐标的标签的 id
var leftId = parseInt(light.id) - 1; //parseInt 把 lightid 值装换成整数后再装换
var leftRow = Math.ceil(parseInt(leftId) / 10);
if (row == leftRow){//如果当前标签的行数等于左边标签的行数，左边标签是有效的标签
//通过 id 找到左边的标签
var leftLight = document.getElementById(leftId);//document 表示整个html中的文档
//调用开关灯函数改变标签的背景颜色
turnlight(leftLight);
}

//右边
var rightId = parseInt(light.id) +1;
var rightRow = Math.ceil(parseInt(rightId) / 10);
if(row == rightRow){
var rightlight = document.getElementById(rightId);
turnlight(rightlight);
}

//上边
var upId = parseInt(light.id) -10;
if(upId > 0){
var uplight = document.getElementById(upId);
turnlight(uplight);
}

//下边
var downId = parseInt(light.id) +10;
if(downId <= 100){
var townlight = document.getElementById(downId);
turnlight(townlight);
}
if(lightOnCount ==0){
alert('u win');
gameLevel++;
getLevel();
}

}

//开关灯函数
function turnlight(light){
//如果标签的背景颜色是 yellow
if (light.style.backgroundColor == 'yellow'){
//把标签的背景色改成 black
light.style.backgroundColor = 'black';
lightOnCount--;
}else{
//否则把标签的背景颜色改成 yellow
light.style.backgroundColor = 'yellow';
lightOnCount++;
}
}
function getLevel(){

//生成游戏关卡
for (let i = 0; i < gameLevel; i++){
//产生一个随机的 id
//Math.floor( Math.random() * 100 + 1;
var randomId = Math.floor( Math.random() *COLCOUNT *ROWCOUNT) + 1;
var randomlight = document.getElementById(randomId);
lightClick(randomlight);
// console.log(randomId);
}

}
getLevel();
</script>
</body>
</html>

heml 分为 head + body
head元信息（关于信息的信息） body内容

JavaScript 重要文件 dom bom
dom document object modale => html document
bom brower object modale => 浏览器 window

函数定义：关键字函数名参数列表函数体

注：不是很全能力有限请谅解！

巴特西

如何用js做关灯游戏

最新文章

热门文章