这是一个很有意思的游戏，可以试着玩下。

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
#wrap {
width: 500px;
height: 500px;
margin: auto;
position: relative;
}
</style>
</head>
<body>
<div id="wrap">

</div>
</body>
<script type="text/javascript">
var wrap = document.getElementById('wrap');
var lights = [];                       // 定义数组   
for (var i = 0; i < 10; i++) {   
for (var j = 0; j < 10; j++) {
var aLight = document.createElement('div');  // 定义一个新的div  关灯游戏的灯
wrap.appendChild(aLight);                          //把aLight放入wrap中
aLight.style.width = '10%';                        //定义宽度
aLight.style.height = '10%';                       //定义高度
aLight.style.border = '1px solid blue';
aLight.style.background = 'black';
aLight.style.position = 'absolute';
aLight.style.left = j * 10 + '%';       // j * 10 ＋ '%' 表示横向的长度 当j ＝ 9 是 长度为500px 即 开始下一行
aLight.style.top = i * 10 + "%";     //  i* 10 ＋ '%' 表示丛向的长度 当i  ＝ 9 是 长度为500px 即 开始下一列
aLight.index = lights.length;
lights.push(aLight);                 // 将aLight 放入到数组 lights 中

aLight.onclick = function(){          // 点击事件 函数运行
var currentLight = event.target;  //首先改变当前颜色的light的颜色 。 event.target 是指当前正在接受事件的对象。 如果点击div 则就是点击div本身
if (currentLight.style.backgroundColor == 'black') {    // 如果背景色为黑色
currentLight.style.backgroundColor = 'red';             //  则变成红色
}else {
currentLight.style.backgroundColor = 'black';        // 否则继续变为黑色
}
if (currentLight.index >= 10) {    // 获取上面那一行的灯
var topLight = lights[currentLight.index - 10];
topLight.style.backgroundColor = (topLight.style.backgroundColor == 'black') ? 'red' : 'black';
}
if (currentLight.index + 10 < lights.length) {     //获取下面那行的灯
var bottomLight = lights[currentLight.index + 10];
bottomLight.style.backgroundColor = (bottomLight.style.backgroundColor == 'black') ? 'red' : 'black';
}
if (currentLight.index % 10 != 0) {           //获取左边那行的灯
var leftLight = lights[currentLight.index - 1];
leftLight.style.backgroundColor = (leftLight.style.backgroundColor == 'black') ? 'red' : 'black';
}
if (currentLight.index % 10 != 9) {       //  获取右边那行的灯
var rightLight = lights[currentLight.index + 1];
rightLight.style.backgroundColor = (rightLight.style.backgroundColor == 'black') ?'red' : 'black';
}
}
}
}
</script>
</html>

用JS做关灯游戏（初级）的更多相关文章

  1. 如何用js做关灯游戏

    编辑器  Sublime Text 3 <!DOCTYPE html><html lang="en"><head> <meta chars ...

  2. js canvas游戏初级demo-躲避障碍物

    在线演示地址 http://200ok.fun:3100/html/game_demo.html 继上次js canvas游戏初级demo-上下左右移动(https://www.cnblogs.com ...

  3. 用 JS 做一个数独游戏（二）

    用 JS 做一个数独游戏(二) 在 上一篇博客 中,我们通过 Node 运行了我们的 JavaScript 代码,在控制台中打印出来生成好的数独终盘.为了让我们的数独游戏能有良好的体验,这篇博客将会为 ...

  4. 用 JS 做一个数独游戏（一）

    用 JS 做一个数独游戏(一) 数独的棋盘由 9x9 的方格组成,每一行的数字包含 1 ~ 9 九个数字,并且每一列包含 1 ~ 9 这 9 个不重复的数字,另外,整个棋盘分为 9 个 3x3 的块, ...

  5. 用纯JS做俄罗斯方块 - 简要思路介绍（1）

    大家都知道俄罗斯方块是一款大众化的游戏了,我很小的时候就玩过,今年已经25岁了,可以说俄罗斯方块确实是历史悠久,做俄罗斯方块是我上个星期开始的想法.也许是由于自己从来没有写过这种东西吧,所以有生疏.代 ...

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

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

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

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

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

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

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

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

随机推荐

  1. Jsp 错题分析

    ArrayList删除元素通过RemoveAt(int index)来删除指定索引值的元素 运行时异常都是RuntimeException类及其子类异常,如NullPointerException.I ...

  2. java 移位运算符

    java中有三种移位运算符 <<      :     左移运算符,num << 1,相当于num乘以2 >>      :     右移运算符,num >& ...

  3. 第7章 权限管理（3）_文件系统属性和sudo权限

    3. 文件系统属性chattr权限 (1)chattr命令 命令格式: #chattr [+-=][选项] 文件或目录名 +.-.= 分别表示增加权限.删除权限和赋于某种权限 选项 i:主要用来防止对 ...

  4. 奇虎360诉腾讯QQ垄断案之我见（3Q大战之我见）

    这两款软件我都在用,要说时间最长感情最深的应该是腾讯QQ,1999年诞生的那年就在用QQ了! 不过感情归感情,个人看法归个人看法,不能用感情来判断. 正所谓外行看热闹,内行看门道.从事实上讲在使用这两 ...

  5. 无法识别特性“configProtectionProvider”的解决方案

    在使用.Net自身提供的加密本配置文件后再用System.Configuration.ConfigurationManager.AppSettings["key"]获取值时会抛出异 ...

  6. .Net Core Linux centos7行—vscode开发，linux部署运行

    前面搭建好啦linux运行环境,下面搭建windows下的开发环境.并完成调试 参考地址:https://www.microsoft.com/net/core#windows. 按照步骤来就好.安装. ...

  7. SVN合并代码

    分之合并主干代码, 修改冲突后提交, 更新本地代码, 主干合并分之,

  8. C++ URLDecode和URLEncode实现——仅限gb2312，非utf8

    转载--http://blog.163.com/zhangjie_0303/blog/static/9908270620148251658993/   #include <iostream> ...

  9. Java中使用Jedis操作Redis（转载）

    整理 1.字符串 添加:set keyname value 查询:get keyname 拼接:append keyname value 删除:del keyname 添加多个: mset keyna ...

  10. Python【第四章】：socket

    ocket通常也称作"套接字",用于描述IP地址和端口,是一个通信链的句柄,应用程序通常通过"套接字"向网络发出请求或者应答网络请求. socket起源于Uni ...