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

<!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. Hibernate中Java对象的三种状态

                                                                                     Hibernate中Java对象的三种 ...

  2. 第8章 文件系统管理（2）_挂载、fdisk分区及分配swap分区

    3. fdisk分区 3.1 fdisk命令分区过程 (1)添加新硬盘 (2)查看新硬盘#fdisk –l (3)使用fdisk命令分区:#fdisk /dev/sdb Fdisk交互指令说明 命令 ...

  3. AC日记——苹果树 codevs 1228

    1228 苹果树  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond 题解  查看运行结果     题目描述 Description 在卡卡的房子外面,有一棵 ...

  4. Ajax与JqueryUI和EasyUI错题总结

    Ajax与JqueryUI和EasyUI错题总结 正确答案A,解析:此题考察的是JQuery UI下的menu插件的使用,menu提供ui-state-disabled class 方法禁用任何菜单项 ...

  5. [No000077]打造自己的Eclipse

    下载官网的Eclipse IDE for Java EE Developers 在根目录下的eclipse.ini文件中添加"-Dfile.encoding=UTF-8", 作用: ...

  6. 查找数据库中重复的值的数据，having的使用，count(1),sum等聚会函数

    通过having代替where来使用count(1),sum()等函数.譬如如下数据id value1 21 32 33 53 6 可以写个语句统计value的分组 在这里,可以省略前面的sum(va ...

  7. C#进阶系列——动态Lamada（二：优化）

    前言:前几天写了一篇动态Lamada的文章C#进阶系列——动态Lamada,受园友xiao99的启发,今天打算来重新优化下这个动态Lamada的工具类.在此做个笔记,以免以后忘了. 一.原理分析 上篇 ...

  8. EF6 在 SQLite中使用备忘

    == 菜鸟级选手试验在EF6中使用Sqlite,零EF基础,少量Sqlite基础.经过断断续续的很长时间 - _ -! >>连接 1. 安装 使用目前最新版本EF6.1,Sqlite1.0 ...

  9. .NET 常用框架

    1.Hangfire 2.Lucene.Net 3.Log4Net 4.Quartz.Net 5.Autofac 6.SqlSugar 7.NPOI 8.Senparc.Weixin.MP 9.Aut ...

  10. 关于c++类的内存分配

    参考:这里 虽然有些地方错了,但是也可以一看,大概能加深对c++类相关的内存分配的了解 然后这还不算十分深入,更深入的可以看这里. 这本书是时候读一下了:<深度探索C++对象模型> (待续 ...