JavaScript 关灯游戏

游戏简介:

这是一个纯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();
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值