JavaScript 关灯游戏

最新推荐文章于 2023-11-10 18:39:29 发布

Joke丿而已

最新推荐文章于 2023-11-10 18:39:29 发布

阅读量1k

点赞数

分类专栏： JavaScript 学习阶段文章标签： javascript 游戏

本文链接：https://blog.csdn.net/xiaoquan1224/article/details/52644876

版权

JavaScript 学习阶段专栏收录该内容

7 篇文章 0 订阅

订阅专栏

游戏简介：

这是一个纯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();