游戏简介：
这是一个纯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; //自定义属性 index
lights.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; //自定义属性 index
lights.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();