需求：

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

所有的灯有相同的点击效果。点击一个灯的时候，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. web前端学习（四）JavaScript学习笔记部分（3）-- JavaScript函数+异常处理+事件处理

    1.Javascript函数-了解函数的用途 1.1.函数: 函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块 2.Javascript函数-定义函数 2.1.function必须小写 3. ...

  2. Ubuntu 12.04 安装 IQQ

    1. 安装 IQQ 首先应安装jdk包 2. 百度网盘下载: http://pan.baidu.com/share/home?uk=3071047022 3. 运行 (1) Linux用户给IQQ-1 ...

  3. hdu 3791 二叉搜索树(数据结构)

    二叉搜索树 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submi ...

  4. 洛谷 P1016 旅行家的预算 模拟+贪心

    目录 题面 题目链接 题目描述 输入输出格式 输入格式 输出格式 输入输出样例 输入样例 输出样例 说明 思路 AC代码 总结 题面 题目链接 P1016 旅行家的预算 题目描述 一个旅行家想驾驶汽车 ...

  5. Directx11 教程(1) 基本的windows应用程序框架(1)

    原文:Directx11 教程(1) 基本的windows应用程序框架(1)        在vs2010中,建立一个新的win32工程,名字是: myTutorialD3D11, 注意:同时勾选Cr ...

  6. 关于serialize() FormData serializeArray()表单序列化

    serialize()  FormData  serializeArray()都是序列化表单,实现表单的异步提交 但是serialize()和serializeArray()都是只能序列化表单中的数据 ...

  7. pl/sql基础知识—pl/sql块介绍

    n  介绍 块(block)是pl/sql的基本成型单元,编写pl/sql程序实际上就是编写pl/sql块.要完成相对简单的应用功能,可能只需要编写一个pl/sql块:但是如果要想实现复杂的功能,可能 ...

  8. <> 是不等号的意思

    <> 是不等号的意思,也有的语言可以写作:#  或者 != 1.=表示 等于: 2.<> 表示不等于:(注释:在 SQL 的一些版本中,该操作符可被写成 !=): 3.> ...

  9. Pycurl介绍

    pycurl — A Python interface to the cURL library Pycurl包是一个libcurl的Python接口.pycurl已经成功的在Python2.2到Pyt ...

  10. hdu1421 dp

    用dp[i][j]表示放了i件物品,j对时的最小值. dp[i-2][j-1]表示取当前的 dp[i-1][j]表示不取当前的. #include<stdio.h> #include< ...