js实现开关灯游戏

需求：

点击三个按钮，页面出现不同数量的“灯”

所有的灯有相同的点击效果。点击一个灯的时候，this和他的上下左右都会变成另一种背景色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            text-align: center;
        }
        .wrap{
            /* width: 500px; */
            margin: 30px auto;
        }
        .wrap>div{
            border-radius: 50%;
            box-sizing: border-box;
            /* width: 50px;
            height: 50px; */
            border: 1px solid pink;
            background: #000;
            display: inline-block;
            text-align: center;
            line-height: 50px;
        }
        button {
            width: 100px;height: 50px;background-color: white;
            outline: none;padding: 0 10px;border: 1px solid lightgray;
            border-radius: 8px;font-size: 20px;color: gray;
        }
    </style>
</head>

<body>
    <div class="wrap"></div>
     <button id="btn1">初级</button>
     <button id="btn2">中级</button>
     <button id="btn3">高级</button>
    <script>
        
        //获取元素
        var wrap=document.getElementsByClassName("wrap")[0];
        var btn1=document.getElementById("btn1");
        var btn2=document.getElementById("btn2");
        var btn3=document.getElementById("btn3");
        var divarr=[];
        //行 列
        var row=5;col=6;
        //小div设置宽高
        var w=50 ,h=50;
        function creat(){
            //给外部盒子添加宽度
            wrap.style.width=col * w +"px";
            //循环创建100个div
            for(var i=0;i<col *row;i++){
                //动态创建div
                var newdiv=document.createElement("div");
                //给创建的小盒子设置样式
                newdiv.style.width=w+"px";
                newdiv.style.height=h+"px";
                //给div中写数字

                newdiv.innerText=i;

                //把创建好的div放到wrap中
                wrap.appendChild(newdiv);
                //把100个div放到数组里
                divarr.push(newdiv);
            }
        }
        creat();
        //改变颜色函数

        function changebg(s){
              var bg = getComputedStyle(s).backgroundColor;
              if(bg=="rgb(0, 0, 0)"){
                  s.style.backgroundColor="yellow";
              }else{
                  s.style.backgroundColor="black";
              }
        }

        //封装点击事件
        function clickBox(){
            for(var j=0;j<divarr.length;j++){

              divarr[j].onclick=function(){
                  //给当前元素绑定点击事件
                  changebg(this);
                var index = divarr.indexOf(this);                  
                  if(index > (col -1)){
                      changebg(divarr[index-col]);
                      //top
                  }
                  if(index < (row -1)*col) {
                      changebg(divarr[index + col]);
                      //bottom
                  }
                  if(index % col != 0){
                    changebg(divarr[index-1]);
                  }
                  //left
                  if(index % col != 0){
                    changebg(divarr[index+1]);
                  }
                  //right
              }
            }
        }
    clickBox();   
    // 选择灯数量的函数
    function resetGame(){
        wrap.innerHTML = "";
        // 清空页面元素
        divarr = [];
        // 清空数组
        creat();
        // 重新创建新元素
        clickBox();
        // 重新绑定点击事件
    }
    btn1.onclick = function(){
        col = 3; row = 3;
        resetGame();
    }    
    btn2.onclick = function(){
        col = 8; row = 8;
        resetGame();

    }    
    btn3.onclick = function(){
        col = 10; row = 9;
        resetGame();

    }         
    </script>
</body>
</html>

ps 这个效果有点想windows日历选中一个时间的样子~~~

js实现开关灯游戏

猜你喜欢