用JS做关灯游戏（初级）

最新推荐文章于 2022-11-22 19:41:57 发布

asd386322349

最新推荐文章于 2022-11-22 19:41:57 发布

阅读量242

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Sabo-dudu/p/5734854.html

版权

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

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

asd386322349

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
用JS做关灯游戏（初级）

这是一个很有意思的游戏，可以试着玩下。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style media="screen"> #wrap { width: 5...
复制链接

扫一扫