需求：

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

所有的灯有相同的点击效果。点击一个灯的时候，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. LUOGU P2921 [USACO08DEC]在农场万圣节Trick or Treat on the Farm

    传送门 解题思路 记忆化搜索,如果搜到环,就将环的大小处理出来. 代码 #include<iostream> #include<cstdio> #include<cstr ...

  2. mytop安装，使用mytop监控MySQL性能 (总结)

    mytop 是一个类似 Linux 下的 top 命令风格的 MySQL 监控工具,可以监控当前的连接用户和正在执行的命令. 1. 安装TermReadKey    下载地址:  wget  http ...

  3. C#中抽象方法与虚方法的区别（转）

    C#中抽象方法与虚方法的区别   一.抽象方法:只在抽象类中定义,方法修饰符不能使用private,virtual,static. 抽象方法如下示: public abstract class Peo ...

  4. sqlserver 大数据量的insert、delete操作优化

    http://blog.csdn.net/lanyuzhen/article/details/7547476 --大批量导出orders表:insert DBCC DROPCLEANBUFFERS   ...

  5. 抽象类 abstract class 接口

    一.抽象类 1.没有具体的实例. 不可实例化,不能创建对象. 2.抽象类有构造器. 二.abstract 方法. 1.没有方法体. 子类必须重写抽象类的所有抽象方法,才能实例化,否则子类也为抽象类. ...

  6. Spring_Aop_(二)

    切面的优先级 @Order(1)注解 指定切面的优先级,值越小优先级越高 @Order(1) @Aspect @Component public class VlidationAspect { @Be ...

  7. 【JZOJ4790】【NOIP2016提高A组模拟9.21】选数问题

    题目描述 在麦克雷的面前有N个数,以及一个R*C的矩阵.现在他的任务是从N个数中取出R*C个,并填入这个矩阵中.矩阵每一行的法值为本行最大值与最小值的差,而整个矩阵的法值为每一行的法值的最大值.现在, ...

  8. jQuery自动过滤单词插件

    在线演示 本地下载

  9. 利用UIWebView打造一个炫酷的视频背景视图（OC & Swift）

    http://www.cocoachina.com/ios/20151023/13860.html 2015-10-6更新:适配 Swift2.0 如有需要,可以通过pjin.elvin@gmail. ...

  10. Notepad++搜索中的正则应用

    假设要查找文件中所有tppabs="*****" 类型的代码 tppabs="http://www.******.com/templates/Alen/Css/Main. ...