游戲規(guī)則：
關(guān)燈游戲的原理是這樣的哪轿，如果我們有10x10共100盞燈稚虎，開始時(shí)都處于關(guān)閉狀態(tài)，100盞燈全部點(diǎn)亮?xí)r配名，游戲結(jié)束。但是每次只能打開/關(guān)閉一盞燈晋辆，由于電路設(shè)計(jì)的原因渠脉，和它相鄰的四盞燈也會(huì)改變關(guān)閉/打開狀態(tài)，所以要把100盞燈全部打開多多思考瓶佳。
游戲算法分析：
我們可以用一盞燈來分析問題芋膘，根據(jù)游戲規(guī)則可知，第一次點(diǎn)擊燈時(shí)，燈會(huì)被點(diǎn)亮为朋，第二次點(diǎn)擊燈時(shí)臂拓，燈又會(huì)被熄滅，在點(diǎn)擊燈的同時(shí)它的上下左右也會(huì)跟著點(diǎn)亮习寸，同理第二次點(diǎn)擊時(shí)燈會(huì)被熄滅胶惰。
在寫算法餓時(shí)候就應(yīng)該考慮如何操作才能獲取它的上下左右，讓其上下左右同時(shí)跟著點(diǎn)亮/熄滅,這個(gè)時(shí)候我們可以定義一個(gè)數(shù)組霞溪，通過計(jì)算其上下左右的下標(biāo)來來控制其燈的狀態(tài)孵滞。
這是我寫的關(guān)燈游戲的效果圖：
//這是定義外面大的div的樣式
* {
margin: 0px;
padding: 0px;
}
#wrap {
width: 500px;
height: 500px;
margin: 0 auto;
position: relative;
}
//這是用js實(shí)現(xiàn)關(guān)燈游戲的算法
// 獲取wrap div
var wrap = document.getElementById('wrap');
// 定義空數(shù)組，保存所有的lights
var lights = [];
for (var i = 0; i < 10; i++) {
for (var j = 0; j < 10; j ++) {
// 生成div鸯匹，用作關(guān)燈游戲的燈
var aLight = document.createElement('div');
// 為wrap添加子標(biāo)簽
wrap.appendChild(aLight);
// 設(shè)置aLight的樣式
aLight.style.width = '10%';
aLight.style.height = '10%';
aLight.style.border = '1px solid gray';
aLight.style.backgroundColor = 'black';
aLight.style.position = 'absolute';
aLight.style.top = i * 10 + '%';
aLight.style.left = j * 10 + '%';
aLight.index = lights.length;
// 同時(shí)alight將保存在lights數(shù)組中
lights.push(aLight);
aLight.onclick = function () {
// 首先改變當(dāng)前點(diǎn)擊lights的顏色
// event.target 是指當(dāng)前正在接受事件對象
// 如果是點(diǎn)擊div坊饶，則就是被點(diǎn)擊div的本身
var currentLight = event.target;
if (currentLight.style.backgroundColor == 'black') {
currentLight.style.backgroundColor = 'yellow';
}else {
currentLight.style.backgroundColor = 'black';
}
// 獲取上邊的燈
if (currentLight.index >= 10) {
var topLight = lights[currentLight.index - 10];
topLight.style.backgroundColor =
(topLight.style.backgroundColor == 'black') ? 'yellow' : 'black';
}
// 獲取下邊的燈
if (currentLight.index + 10 < lights.length) {
var bottomLight = lights[currentLight.index + 10];
bottomLight.style.backgroundColor =
(bottomLight.style.backgroundColor == 'black') ? 'yellow' : 'black';
}
// 獲取左邊的燈
if (currentLight.index % 10 != 0) {
var leftLight = lights[currentLight.index - 1];
leftLight.style.backgroundColor =
(leftLight.style.backgroundColor == 'black') ? 'yellow' : 'black';
}
// 獲取右邊的燈
if (currentLight.index % 10 != 9) {
var rightLight = lights[currentLight.index + 1];
rightLight.style.backgroundColor =
(rightLight.style.backgroundColor == 'black') ? 'yellow' : 'black';
}
}
}
}
