需求：

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

所有的灯有相同的点击效果。点击一个灯的时候，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. C++多态小结

    C++ 多态 多态 多态按字面的意思就是多种形态.当类之间存在层次结构,并且类之间是通过继承关联时,就会用到多态. C++ 多态意味着调用成员函数时,会根据调用函数的对象的类型来执行不同的函数. 多态 ...

  2. SQL —— 存储过程

    一.什么是存储过程 预先存储好的SQL程序. 保存在SQL Server中(跟视图的存储方式一样) 通过名称和参数执行. 二.存储过程的优点 执行速度更快 允许模块化程序设计 提高系统安全性 减少网络 ...

  3. 设置程序PrivatePath，配置引用程序集的路径（分离exe和dll）

    原文:设置程序PrivatePath,配置引用程序集的路径(分离exe和dll) 有时候我们想让程序的exe文件和dll文件分开在不同目录,这时候可以有3种方法 1.在app.config中配置 &l ...

  4. php实现图片以base64显示的方法达到效果

    目前Data URI scheme支持的类型有: data:text/plain,文本数据data:text/html,HTML代码data:text/html;base64,base64编码的HTM ...

  5. 如何建一个Liferay 7的theme

    首先附上原文链接Creating theme and Deploying in liferay 7 by using Eclipse 1.第一步:建一个Liferay module 项目,选择them ...

  6. JQuery--动画和DOM的增删查改常用函数总结

    jQuery的动画api animate jQuery设置动画 animate({属性集合},时间); animate({属性集合},时间,回调函数); animate({属性集合},时间,运动曲线, ...

  7. XSD 命令及 WSDL 命令

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

  8. nginx简介 （转）

    1.Nginx概述 2.Nginx安装与控制指令 3.Nginx如何工作 4.Nginx配置实例 4.1如何配置Linux下Nginx 4.1.1配置Nginx代理HTTP请求到Tomcat 4.1. ...

  9. oracle编写分页过程

    有了上面的基础,相信大家可以完成分页存储过程了,要求,请大家编写一个存储过程,要求可以输入表名.每页显示记录数.当前页.排序字段(deptno降序).返回总记录数,总页数和返回结果集. 把一个字符串, ...

  10. C89标准库函数手册

    http://zh.cppreference.com/w/c 前言 ANSI C(C89)标准库函数共有15个头文件.这15个头文件分别为: 1.<assert.h>            ...