需求：

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

所有的灯有相同的点击效果。点击一个灯的时候，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. go struct 工厂

  2. Vue.之.安装

    Vue.之.安装 第一步npm安装 首先:先从nodejs.org中下载nodejs   直到Finish完成安装. 打开控制命令行程序(CMD),检查是否正常 使用淘宝NPM 镜像 国内直接使用np ...

  3. 为什么你应该使用OpenGL而不是DirectX?

    这是一篇很意思的博文,原文链接为:http://blog.wolfire.com/2010/01/Why-you-should-use-OpenGL-and-not-DirectX 大家可以思考一下: ...

  4. thinkphp---display与fetch区别

    区别: ① display方法直接输出模板文件渲染后的内容,fetch方法是返回模板文件渲染后的内容 ② 有时候我们不想直接输出模板内容,而是希望对内容再进行一些处理后输出, 就可以使用fetch方法 ...

  5. XSD 命令及 WSDL 命令

    [XSD] 方法一:通过Xsd2Code工具生成相应代码(制作XSD工具有:Altova XMLSpy) 方法二:通过XSD命令生成相应代码 XML 架构定义 (Xsd.exe) 工具从 XDR.XM ...

  6. Directx11教程(51) 简单的billboard

    原文:Directx11教程(51) 简单的billboard        billboard称作公告板,通常用一个quad(四边形)表示[有的billboard用两个正交的quad表示],它的特点 ...

  7. ACK容器服务虚拟节点使用阿里云日志服务来收集业务容器日志

    按照这篇博文的介绍,可以在ACK集群上通过Helm的方式部署虚拟节点,提升集群的弹性能力.现在,通过虚拟节点部署的ECI弹性容器实例也支持将stdout输出.日志文件同步到阿里云日志服务(SLS)进行 ...

  8. Hdu 1867 KMP

    题目链接 题目意思: 给出两个字符串a, b, 求最长的公共字串c, c是a的后缀,也是b的前缀. 本题没有具体说明哪个字符串是文本串和匹配串, 所以都要考虑 思路: 查找的时候, 当文本串结束的时候 ...

  9. EasyUI 网格 一主多从 从表使用自定义树状展开

    <table id="Table1" class="easyui-datagrid" title="标题" style="w ...

  10. Python学习之路12☞模块与包

    一 模块 1.1 什么是模块? 一个模块就是一个包含了python定义和声明的文件,文件名就是模块名字加上.py的后缀. 1.2 为何要使用模块? 如果你退出python解释器然后重新进入,那么你之前 ...