我有一个 5x5 的网格，只要你点击它，每个盒子都会变成黑色或白色。这个网格模拟了熄灯游戏，到目前为止我只能改变我点击的盒子的颜色，但我还需要改变水平和垂直距离 1 长度的盒子的颜色。我有一种感觉，我需要使用 javascript 将网格变成一个数组，但我不知道该怎么做。以下代码是我到目前为止所拥有的。var grid = document.getElementsByClassName("box");Array.from(grid).forEach(click => click.addEventListener("click", function changeColor() { if (click.style.background === 'black') { click.style.background = "white"; } else { click.style.background = "black"; }}));body { background-color: lightblue; margin: 40px;}.wrapper { display: grid; grid-template-columns: 100px 100px 100px 100px 100px; grid-gap: 3px;}.box { background-color: #fff; padding: 50px;}<!DOCTYPE html><html> <head> <title>Lights Out Game</title> <link href="lights_out.css" rel="stylesheet" type="text/css"> <script type="module" src="Lightsout.js?v=5"></script> </head> <body> <h1>Lights Out</h1> <button type="button">Reset board</button> <div class="wrapper"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> <article> Click on each box until all the boxes are black.</article> </body>
1 回答
心有法竹
TA贡献1866条经验 获得超5个赞
由于点击动作会通过调用影响多个框changeColor，所以最好将其与事件监听器分开
const changeColor = function(box){
if (box.style.background === 'black') {
box.style.background = "white";
} else {
box.style.background = "black";
}
}
您仍然需要分配一个事件处理程序，我们将非常有创意地调用它 clickHandler
Array.from(grid).forEach(box => click.addEventListener("click", () => clickHandler(box)))
区分每个盒子会很有用；可以通过id为它们中的每一个添加一个属性同时分配侦听器来完成，这样上面的行就变成了
Array.from(grid).forEach(
(box, index) => {
box.addEventListener("click", () => clickHandler(box))
box.id = index
}
)
最后，您需要确定单击某个框时需要更改哪些框。这可以在clickHandler函数中定义
let boxes = Array.from(grid)
const clickHandler= function(box){
// get the box id, which will coincide with its position in the array
index = parseInt(c.id)
// determine the adjacent boxes' indexes
up = index - 5
down = index + 5
left = index - 1
right = index + 1
// Make sure the index is not out of bounds and change color
if(up > 0)
changeColor(boxes[up])
if(down < 25)
changeColor(boxes[down])
// Make sure the left and right indexes are in the same row
if(Math.floor(index / 5) == Math.floor(left / 5))
changeColor(boxes[left])
if(Math.floor(index / 5) == Math.floor(right / 5))
changeColor(boxes[right])
// change the color of the box that was clicked
changeColor(boxes[index])
}
放在一起应该是这样的：
const grid = document.getElementsByClassName('box')
const changeColor = function(box){
if (box.style.background === 'black') {
box.style.background = "white";
} else {
box.style.background = "black";
}
}
Array.from(grid).forEach(
(box, index) => {
box.addEventListener("click", () => clickHandler(box))
box.id = index
}
)
let boxes = Array.from(grid)
const clickHandler= function(box){
// get the box id, which will coincide with its position in the array
index = parseInt(box.id)
// determine the adjacent boxes' indexes
up = index - 5
down = index + 5
left = index - 1
right = index + 1
// Make sure the index is not out of bounds and change color
if(up > 0)
changeColor(boxes[up])
if(down < 25)
changeColor(boxes[down])
// Make sure the left and right indexes are in the same row
if(Math.floor(index / 5) == Math.floor(left / 5))
changeColor(boxes[left])
if(Math.floor(index / 5) == Math.floor(right / 5))
changeColor(boxes[right])
// change the color of the box that was clicked
changeColor(boxes[index])
}
body {
background-color: lightblue;
margin: 40px;
}
.wrapper {
display: grid;
grid-template-columns: 100px 100px 100px 100px 100px;
grid-gap: 3px;
}
.box {
background-color: #fff;
padding: 50px;
}
<!DOCTYPE html>
<html>
<head>
<title>Lights Out Game</title>
<link href="lights_out.css" rel="stylesheet" type="text/css">
<script type="module" src="Lightsout.js?v=5"></script>
</head>
<body>
<h1>Lights Out</h1>
<button type="button">Reset board</button>
<div class="wrapper">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<article> Click on each box until all the boxes are black.</article>
</body>
添加回答
举报
0/150
提交
取消