用JS做关灯游戏（初级）

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

<!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>

转载于:https://www.cnblogs.com/Sabo-dudu/p/5734854.html

用JS做关灯游戏（初级）相关推荐

原生js做打地鼠游戏
学原生js的语法其实是容易的,最主要的练习逻辑思维.对于刚刚学完js的语法的我来说,写这个打地鼠游戏真的花费了我一整天的时间.整体感觉写出来的js代码,其实就是平时练习的一些小案例的代码拼起来的,js ...
也分享自己做的JS扫雷小游戏
看了草根程序猿分享的JS扫雷小游戏想起去年的时候自己也做了一个于是也拿出来分享之先上截图~ 引用了jQuery,节省了很多鼠标点击上的判断界面显然都是照搬Windows的扫雷啦详细的内容注释 ...
用 JS 做一个数独游戏（二）
用 JS 做一个数独游戏(二) 在上一篇博客中,我们通过 Node 运行了我们的 JavaScript 代码,在控制台中打印出来生成好的数独终盘.为了让我们的数独游戏能有良好的体验,这篇博客将会为 ...
[教你做小游戏] 只用几行原生JS，写一个函数，播放音效、播放BGM、切换BGM
我是HullQin,公众号线下聚会游戏的作者(欢迎关注公众号,发送加微信,交个朋友),转发本文前需获得作者HullQin授权.我独立开发了<联机桌游合集>,是个网页,可以很方便的跟朋友联机 ...
用纯JS做俄罗斯方块 - 简要思路介绍（1）
大家都知道俄罗斯方块是一款大众化的游戏了,我很小的时候就玩过,今年已经25岁了,可以说俄罗斯方块确实是历史悠久,做俄罗斯方块是我上个星期开始的想法.也许是由于自己从来没有写过这种东西吧,所以有生疏.代 ...
qt web混合编程_QT做界面真是绝美，并且还可嵌入HTML与JS做界面（许多案例）
1. 这年头想要酷炫, 还是用web最方便, QT自带嵌入式webkit, 然后用d3.js D3.js - Data-Driven Documents什么的, 各种酷炫的互动表随手而来. 这里有各种 ...
mfc做数独游戏_我终于在iPhone上找到了体验最好的数独游戏
我已经被一个 9×9 的格子困住将近 30 分钟,它既让人深陷其中还欲罢不能. 玩<数独 2>这款 app 之前我是抗拒的,因为我对数字超级无感,但抱着朋友告诉我入门很简单后试一试的心态, ...
用js做一个数字华容道
我很喜欢华容道啊,这次用js做一个话不多说上代码 <!DOCTYPE html> <html><head><meta charset="UTF-8 ...
JS开发HTML5游戏《神奇的六边形》（四）
近期出现一款魔性的消除类HTML5游戏<神奇的六边形>,今天我们一起来看看如何通过开源免费的青瓷引擎(www.zuoyouxi.com)来实现这款游戏. (点击图片可进入游戏体验) 因内容 ...
JS开发HTML5游戏《神奇的六边形》（七）
近期出现一款魔性的消除类HTML5游戏<神奇的六边形>,今天我们一起来看看如何通过开源免费的青瓷引擎(www.zuoyouxi.com)来实现这款游戏. (点击这里可进入游戏体验) 因内容 ...

用JS做关灯游戏（初级）

用JS做关灯游戏（初级）相关推荐

最新文章

热门文章