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

<!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. Spring远程调用技术<1>-RMI

    在java中,我们有多种可以使用的远程调用技术 1.远程方法调用(remote method invocation, RMI)  适用场景:不考虑网络限制时(例如防火墙),访问/发布基于java的服务 ...

  2. java之多线程 一

    概述: 几乎任何的操作系统都支持运行多个任务,通常一个任务就是一个程序,而一个程序就是一个进程.当一个进程运行时,内部可能包括多个顺序执行流,每个顺序执行流就是一个线程. 进程与线程: 进程是指处于运 ...

  3. IE6\7\8下placeholder效果，支持文本框和密码框

    (function($) {  var placeholderfriend = {    focus: function(s) {      s = $(s).hide().prev().show() ...

  4. Learning Roadmap of Robotic Operating System (ROS)

    ROS Wiki: http://wiki.ros.org/ Robots Using ROS Textbooks: A Gentle Introduction to ROS Learning ROS ...

  5. django authenticate

    程序少不了验证用户与权限分配.通过 Django 自带以及我们一些扩展就能够满足验证与权限的需求. 我在使用 Django 遇到的"login(request, user) 之后,再重定向这 ...

  6. IO（四）----对象的序列化

    对象的序列化:   将内存中的对象直接写入到文件设备中. 对象的反序列化: 将文件设备中持久化的数据转换为内存对象. 自定义类只要实现了Serializable接口,便可以通过对象输入输出流对对象进行 ...

  7. Excel到底最多可以有多少行

    平时我们使用的Excel到底最多可以有多少行? 答案:1048576,如图在红框中输入此数字即可看见.

  8. c3p0数据源的使用初步及Mysql8小时问题解决

    原文:http://blog.csdn.net/xby1993/article/details/23707775 c3p0号称是java界最好的数据池. c3p0的配置方式分为三种,分别是 1.set ...

  9. 几个常用的CV知识点

    刚结束一段实习,图像算法工程师.总结一下图像算法的几个基本的操作,图像操作算子各式各样,各显神通,光是滤波filter这一个专题就可以有很多的技巧和功能. 我从做过的两个小项目入手, 简单介绍一下该项 ...

  10. html盒子模型

    http://www.cnblogs.com/sunyunh/archive/2012/09/01/2666841.html