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

<!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. POJ1703Find them, Catch them[种类并查集]

    Find them, Catch them Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 42416   Accepted: ...

  2. alexkn android第一行代码－7.广播

    0.Android 中的广播主要可以分为两种类型,标准广播和有序广播.标准广播(Normal broadcasts)是一种完全异步执行的广播,在广播发出之后,所有的 广播接收器几乎都会在同一时刻接收到 ...

  3. WP-Cumulus插件

    链接: 5KB搞定wp-cumulus中文3D Tag问题 WordPress plugin: WP-Cumulus Flash based tag cloud WP-Cumulus支持的3D标签云实 ...

  4. thrift中的超时(timeout)坑

    最近在项目中采用thrift作为后台服务rpc框架,总体用下来性能还不错,跨语言特性使用起来也还行,但是也遇到了一些坑,其中之一就是超时问题(timeout),如果服务端些的某些业务场景耗时较长,th ...

  5. a href=#与 a href=javascript:void(0) 的区别

    a href="#"> 点击链接后,页面会向上滚到页首,# 默认锚点为 #TOP <a href="javascript:void(0)" onCl ...

  6. [Leetcode] Course Schedule

    There are a total of n courses you have to take, labeled from 0 to n - 1. Some courses may have prer ...

  7. @Autowired的使用

    1.benas的xml文件中需要加入如下代码 <bean class="org.springframework.beans.factory.annotation.AutowiredAn ...

  8. spring 整合 mongo

    spring 非常强大,不仅在jdbc访问提供了jdbctemplate,而且在mongo访问上提供了mongoTemplate.闲话不多说,下边开始整合mongoTemplate. ONE: 添加s ...

  9. 【USACO 3.1】Contact（01子串按出现次数排序）

    题意:给你一个01字符串,将长度为a到b之间(包含a.b)的子串按照出现次数排序.注意输入输出格式 题解:01子串对应一个二进制,为了区别11和011这样的不同子串,我们把长度也记录下来,官方题解是在 ...

  10. c# Linq查询

    c#提供的ling查询极大的遍历了集合的查询过程,且使用简单方便,非常的有用. 下面将分别用简单的例子说明:ling基本查询.延迟查询属性.类型筛选.复合from字句.多级排序.分组查询.联合查询.合 ...