游戏简介：

这是一个纯js写的小游戏，游戏开始时会有一些灯点亮，我们需要关掉所有亮着灯进入下一关卡，在点击关灯时会对它四周的灯产生影响，如果灯是亮的就会关掉，否则就会打开。

第一步制作游戏界面

在界面制作过程中要注意控制每行，每列灯的数量添加index onOrOff 自定义属性

for(i=0; i<lightRow * lightCol; i++){// 创建  灯var lightDiv = document.createElement('div');lightDiv.style.width = lightWidth +'px';lightDiv.style.height = lightHight + 'px';lightDiv.style.background = beforeBg;lightDiv.style.border =  lightBorder + 'px solid black';lightDiv.style.borderRadius = '10% 30%';lightDiv.style.boxShadow = beforeSdow;lightDiv.style.display = 'inline-block';lightDiv.style.margin = lightMargin +'px';lightDiv.onOrOff = false;  //添加自定义属性lightDiv.index = i;  //自定义属性 indexlights.push(lightDiv); mainDiv.appendChild(lightDiv);lightDiv.onclick = lightClick;  //点击事件    点亮灯
}

第二步点击改变灯的状态

点击之前判断灯的状态，如果是点亮的就关掉改变它的属性onOrrOff 为false，如果是关的就点亮改变它的属性 onOrOff 为true

//判断灯的状态
function  lightJudge(a){if(a.onOrOff == false){a.style.background = afterBg;a.style.boxShadow = afterSdow;a.onOrOff = true;flag++;}else {a.style.background = beforeBg;a.style.boxShadow = beforeSdow;a.onOrOff = false;flag--;}}

第三步改变点击灯四周的状态

在改变当前灯状态的时候也要改变它四周的灯的状态，如果亮就关掉，如果关掉就打开

function light_on_off(aa){lightJudge(aa);// 当前// 上if(aa.index > lightCol - 1){lightJudge(lights[aa.index - 10]);}// 右if(aa.index % lightCol != (lightCol - 1)){lightJudge(lights[aa.index + 1]);}// 下if(aa.index < lightRow * (lightCol - 1)){lightJudge(lights[aa.index + 10]);}// 左if(aa.index % lightCol != 0){lightJudge(lights[aa.index - 1]);}
}

第四步开始游戏模拟点击

随机产生一个不大于灯个数的随机数用这个数作为下标找数组lights相对应的灯并点击

function startGame(){//产生随机数  并模拟点击for(i=0; i<start_onclick; i++){num = Math.round(Math.random() * lightRow * lightCol -1 );light_on_off(lights[num]);}
}

效果图：

完整代码：

html文件(lights.html)：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><script src="js/lights.js" type="text/javascript" charset="utf-8"></script></body>
</html>

js文件(lights.js)：

//定义变量
var lightRow = 10; // 行数
var lightCol = 10; // 列数
var lightWidth = 40; //灯的宽度
var lightHight = 40; //灯的高度
var lightBorder = 1; //边框宽度
var beforeBg = 'black'; //初始背景
var afterBg = 'yellow'; //开灯背景
var beforeSdow = '0px 0px 10px gray'; //初始阴影
var afterSdow = '3px 3px 20px yellowgreen'; //灯点亮阴影
var lightMargin = 3; //灯的间距
var lights = []; //数组 用来装灯
var start_onclick = 10;  //初始模拟点击次数
var flag = 0;  // 记录分数
var onclick_num = 0;  //记录点亮灯的数量//获取元素
var bob = document.getElementsByTagName('body')[0];//创建 mainDiv
var mainDiv = document.createElement('div');
mainDiv.style.width = lightCol * (lightWidth + lightBorder * 2 + lightMargin *2 ) +'px';
bob.appendChild(mainDiv);for(i=0; i<lightRow * lightCol; i++){// 创建  灯var lightDiv = document.createElement('div');lightDiv.style.width = lightWidth +'px';lightDiv.style.height = lightHight + 'px';lightDiv.style.background = beforeBg;lightDiv.style.border =  lightBorder + 'px solid black';lightDiv.style.borderRadius = '10% 30%';lightDiv.style.boxShadow = beforeSdow;lightDiv.style.display = 'inline-block';lightDiv.style.margin = lightMargin +'px';lightDiv.onOrOff = false;  //添加自定义属性lightDiv.index = i;  //自定义属性 indexlights.push(lightDiv); mainDiv.appendChild(lightDiv);lightDiv.onclick = lightClick;  //点击事件    点亮灯
}//  开始按钮
var btn = document.createElement('button');
btn.innerText = '开始游戏';
btn.style.fontSize = '1.5rem';
btn.style.borderRadius = '10px';
btn.style.outline = 'none';
btn.style.background = 'white';
btn.style.margin = '10px';
btn.onclick = startGame; //添加点击事件   点击开始游戏
mainDiv.appendChild(btn);//灯点亮方法
function lightClick(){light_on_off(this);//传参   this代表当前//当灯全部被关掉时进入下一关if(flag==0){alert( '恭喜进入下一关，总共用了 ' + onclick_num +' 步' );start_onclick += 1;onclick_num = 0;startGame();}else{onclick_num += 1;}
}//判断灯的状态
function  lightJudge(a){if(a.onOrOff == false){a.style.background = afterBg;a.style.boxShadow = afterSdow;a.onOrOff = true;flag++;}else {a.style.background = beforeBg;a.style.boxShadow = beforeSdow;a.onOrOff = false;flag--;}}//点击当前  对它周围的灯产生游戏
function light_on_off(aa){lightJudge(aa);// 当前// 上if(aa.index > lightCol - 1){lightJudge(lights[aa.index - 10]);}// 右if(aa.index % lightCol != (lightCol - 1)){lightJudge(lights[aa.index + 1]);}// 下if(aa.index < lightRow * (lightCol - 1)){lightJudge(lights[aa.index + 10]);}// 左if(aa.index % lightCol != 0){lightJudge(lights[aa.index - 1]);}
}//开始游戏
function startGame(){//产生随机数  并模拟点击for(i=0; i<start_onclick; i++){num = Math.round(Math.random() * lightRow * lightCol -1 );light_on_off(lights[num]);}
}
startGame();

JavaScript 关灯游戏相关推荐

【期望】关灯游戏（金牌导航期望-8）
关灯游戏金牌导航期望-8 题目大意有n盏灯,有些是亮的,有的是暗的,现在如果按一个位置的开关,那么是它因数的位置的灯都会改变开关情况,现在如果用k步不能直接关完,就随机按,直到可以k步关完,就用 ...
经典 HTML5 Javascript 俄罗斯方块游戏
Blockrain.js 是一个使用 HTML5 & JavaScript 开发的经典俄罗斯方块游戏.只需要复制和粘贴一段代码就可以玩起来了.最重要的是,它是响应式的,无论你的显示屏多么宽都能 ...
html5 3d游戏引擎演示,HTML5、JavaScript 3D游戏引擎和框架
由于很多人都在用JavaScript.HTML5和WebGL技术创建基于浏览器的3D游戏,所有JavaScript 3D游戏引擎是一个人们主题.基于浏览器的游戏最棒的地方是平台独立,它们能在iOS.A ...
html关灯游戏,关灯小游戏 - 在线打字测试（dazi.kukuw.com）
关灯小游戏贡献者:随风前行类别:代码时间:2016-09-10 19:12:55 收藏数:11 评分:0 返回上页举报此文章请选择举报理由: 广告/谣言/欺诈政治敏感色情/违法信息垃圾 ...
Android:关灯游戏简单闯关
Demo地址:http://download.csdn.net/detail/yyn_12138/9673802 今天来实现一下5*5的关灯游戏, 其中内置一个不可以点击的石头来增加一下闯关难度先来 ...
视频教程-JavaScript拼图游戏视频教程-JavaScript
JavaScript拼图游戏视频教程拥有6年web前端和后端开发经验,4年授课经验,还曾在百度专业培训过网络营销课程,曾就职于联想集团和当当网,不仅有丰富的项目实战经验还有营销经验,综合实力较强,后 ...
HTML5/Javascript 2D游戏引擎列表
2D Javascript游戏引擎列表 Akihabara Lincense: GPL2/MIT Akihabara 是用于创建8/16位图游戏的js库和工具集合.它通过使用HTML5 Canvas ...
javascript做游戏_我用JavaScript构建了一个角色扮演游戏。你也可以这是如何做。...
javascript做游戏 by Robert Skalko 罗伯特·斯科尔科(Robert Skalko) 我用JavaScript构建了一个角色扮演游戏. 你也可以这是如何做. (I built ...
关灯游戏c语言,关灯游戏 Lights out (一)(极速求解)
关灯游戏(Lights Out) 关灯游戏是Tiger Electronics在1995年发行的一款电子游戏,Parker Brothers在上世纪70年代发布过一款规则与此类似的3×3的游戏, Vu ...
html5 3d游戏引擎演示,Top 10：HTML5、JavaScript 3D游戏引擎和框架
由于很多人都在用JavaScript.HTML5和WebGL技术创建基于浏览器的3D游戏,所有JavaScript 3D游戏引擎是一个人们主题.基于浏览器的游戏最棒的地方是平台独立,它们能在iOS.A ...

JavaScript 关灯游戏

游戏简介：

在界面制作过程中要注意控制每行，每列灯的数量添加index onOrOff 自定义属性

点击之前判断灯的状态，如果是点亮的就关掉改变它的属性onOrrOff 为false，如果是关的就点亮改变它的属性 onOrOff 为true

在改变当前灯状态的时候也要改变它四周的灯的状态，如果亮就关掉，如果关掉就打开

随机产生一个不大于灯个数的随机数用这个数作为下标找数组lights相对应的灯并点击

效果图：

完整代码：

JavaScript 关灯游戏相关推荐

最新文章

热门文章

JavaScript 关灯游戏

游戏简介：

在界面制作过程中要注意 控制每行，每列灯的数量 添加index onOrOff 自定义属性

点击之前判断灯的状态， 如果是点亮的就关掉 改变它的属性onOrrOff 为false，如果是关的就点亮 改变它的属性 onOrOff 为true

在改变当前灯状态的时候也要改变它四周的灯的状态，如果亮就关掉，如果关掉就打开

随机产生一个不大于灯个数的随机数 用这个数作为下标找数组lights相对应的灯并点击

效果图：

完整代码：

JavaScript 关灯游戏相关推荐

最新文章

热门文章

在界面制作过程中要注意控制每行，每列灯的数量添加index onOrOff 自定义属性

点击之前判断灯的状态，如果是点亮的就关掉改变它的属性onOrrOff 为false，如果是关的就点亮改变它的属性 onOrOff 为true

随机产生一个不大于灯个数的随机数用这个数作为下标找数组lights相对应的灯并点击