发布时间：2025-12-09 19:10:09 浏览次数：4
这是一个纯js写的小游戏，游戏开始时会有一些灯点亮，我们需要关掉所有亮着灯进入下一关卡，在点击关灯时会对它四周的灯产生影响，如果灯是亮的就会关掉，否则就会打开。
第一步 制作游戏界面
第二步 点击改变灯的状态
第三步 改变点击灯四周的状态
第四步 开始游戏模拟点击
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('p');mainDiv.style.width = lightCol * (lightWidth + lightBorder * 2 + lightMargin *2 ) +'px'; bob.appendChild(mainDiv);for(i=0; i<lightRow * lightCol; i++){// 创建 灯var lightDiv = document.createElement('p');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();
免责声明：本站内容（文字信息+图片素材）来源于互联网公开数据整理或转载，仅用于学习参考，如有侵权问题，请及时联系本站删除，我们将在5个工作日内处理。联系邮箱：303555158#qq.com（把#换成@）
微信便捷交流