需求：

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

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

代码在这里~~~

文章地址 https://www.cnblogs.com/sandraryan/

<!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实现开关灯游戏的更多相关文章

  1. JS开发HTML5游戏《神奇的六边形》（一）

    近期出现一款魔性的消除类HTML5游戏<神奇的六边形>,今天我们一起来看看如何通过开源免费的青瓷引擎(www.zuoyouxi.com)来实现这款游戏. (点击图片可进入游戏体验) 因内容 ...

  2. JS开发HTML5游戏《神奇的六边形》（二）

    近期出现一款魔性的消除类HTML5游戏<神奇的六边形>,今天我们一起来看看如何通过开源免费的青瓷引擎(www.zuoyouxi.com)来实现这款游戏. (点击图片可进入游戏体验) 因内容 ...

  3. JS开发HTML5游戏《神奇的六边形》（四）

    近期出现一款魔性的消除类HTML5游戏<神奇的六边形>,今天我们一起来看看如何通过开源免费的青瓷引擎(www.zuoyouxi.com)来实现这款游戏. (点击图片可进入游戏体验) 因内容 ...

  4. JS开发HTML5游戏《神奇的六边形》（三）

    近期出现一款魔性的消除类HTML5游戏<神奇的六边形>,今天我们一起来看看如何通过开源免费的青瓷引擎(www.zuoyouxi.com)来实现这款游戏. (点击图片可进入游戏体验) 因内容 ...

  5. JS贪吃蛇游戏

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  6. Vue.js实现拼图游戏

    Vue.js实现拼图游戏 之前写过一篇<基于Vue.js的表格分页组件>的文章,主要介绍了Vue组件的编写方法,有兴趣的可以访问这里进行阅读:http://www.cnblogs.com/ ...

  7. 使用html+css+js实现弹球游戏

    使用html+css+js实现弹球游戏 效果图: 代码如下,复制即可使用: <!doctype html> <head> <style type="text/c ...

  8. 使用JS实现俄罗斯方块游戏

    简单的JS俄罗斯方块游戏源码 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html> <head> <meta charset=&q ...

  9. pixi.js 微信小游戏 入手

    pixi是什么?一款h5游戏引擎 优点:简单简洁性能第一 缺点:大多数用的国产三大引擎,pixi资料少,工具少, 为什么学,装逼 用pixi开发小游戏行吗? 行.但要简单处理下 下载官网上的 weap ...

随机推荐

  1. SaaS launch Kit成回收宝和友盟云合作纽带，帮助提升3倍上云效率

    导语:叶飞表示,全球二手手机市场未来几年将发生巨大变革, 回收宝正进行积极布局.与阿里云开展紧密技术合作,回收宝期待成为这一变革的引领者. 7月26日,在阿里云上海峰会上,阿里云了发布SaaS生态战略 ...

  2. (转)Cookie存中文乱码的问题

    有个奇怪的问题:登录页面中使用Cookie存值,Cookie中要存中文汉字.代码在本地调试,一切OK,汉字也能顺利存到Cookie和从Cookie中读出,但是放到服务器上不管用了,好好的汉字成了乱码, ...

  3. ubuntu安装verilog

    1.安装verilog sudo apt-get install verilog 2.安装gtkwave sudo apt-get install gtkwave 3.安装dinotrace(和gtk ...

  4. 【JZOJ5068】【GDSOI2017第二轮模拟】树 动态规划+prufer序列

    题面 有n个点,它们从1到n进行标号,第i个点的限制为度数不能超过A[i]. 现在对于每个s (1 <= s <= n),问从这n个点中选出一些点组成大小为s的有标号无根树的方案数. 10 ...

  5. vs2015卸载、vs2008安装Visual Assist x

    卸载2015 参考博文 1. 手动卸载VS2015的主要部分: win10系统: 控制面板---程序和功能--Microsoft Visual Studio 2015---更改卸载 2. 下载工具并解 ...

  6. OSGi教程：Resource API Specification

    此教程基于OSGi Core Release 7 OSGi Resource API规范 详细内容上面英文教程有详细解答 下面主要是一些个人见解,若有不当之处,欢迎指出: Resource:就是能够被 ...

  7. 阿里云MVP：开发者的超能力，用技术创造更好世界

    阿里云MVP:开发者的超能力,用技术创造更好世界 2019年3月,第8期阿里云MVP(最有价值专家)完成终审,截至目前,全球已有27个国家和地区.近500位云计算专家和优秀开发者成为阿里云MVP.阿里 ...

  8. man命令及help命令

    一.man命令 man命令常用工具命令 man命令是Linux下的帮助指令,通过man指令可以查看Linux中的指令帮助.配置文件帮助和编程帮助等信息. 语法: man(选项)(参数) 选项: -a: ...

  9. Spring-data-jpa时间按照between and 查询

    需求:根据一个String类型的year,要求查询出该年的所有记录: 比如根据2018年查询出2018年01月01日到2018年12月31日之间的记录: public List<Rain> ...

  10. bzoj1821 部落划分

    Description 聪聪研究发现,荒岛野人总是过着群居的生活,但是,并不是整个荒岛上的所有野人都属于同一个部落,野人们总是拉帮结派形成属于自己的部落,不同的部落之间则经常发生争斗.只是,这一切都成 ...