js实现开关灯游戏

冷不防 2023-06-05 08:10 118阅读 0赞

需求：

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

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

代码在这里~~~

[https://github.com/sandraryan/practise/blob/master/js/%E5%BC%80%E5%85%B3%E7%81%AF%E6%B8%B8%E6%88%8F2.html][https_github.com_sandraryan_practise_blob_master_js_E5_BC_80_E5_85_B3_E7_81_AF_E6_B8_B8_E6_88_8F2.html]

<!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日历选中一个时间的样子~~~

转载于:https://www.cnblogs.com/sandraryan/p/11360373.html

[https_github.com_sandraryan_practise_blob_master_js_E5_BC_80_E5_85_B3_E7_81_AF_E6_B8_B8_E6_88_8F2.html]: https://github.com/sandraryan/training/tree/master/H5C3