如何更改我在网格中单击的框旁边的框的颜色
我有一个 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>
德玛西亚991回答
-
心有法竹
由于点击动作会通过调用影响多个框changeColor，所以最好将其与事件监听器分开const changeColor = function(box){ if (box.style.background === 'black') { box.style.background = "white"; } else { box.style.background = "black"; }}您仍然需要分配一个事件处理程序，我们将非常有创意地调用它 clickHandlerArray.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>
随时随地看视频慕课网APP
相关分类
JavaScript