如果相邻单元格有类，如何签入css网格

Question

我试着用html、css和javascript创建一个简单的游戏来练习(我正在学习)。我有一个网格：

烧烤游戏

我想要实现的是，当你点击一个细胞，它变成绿色，但只有当一个相邻的细胞已经绿色。但如果这个细胞有“死亡”类，那么它就变红了。

我知道我可以手工编写每个细胞的代码，就像这样：

b21.addEventListener("click", () => {
if ((b11.classList.contains("green") || b31.classList.contains("green") || 
b22.classList.contains("green")) && !(b21.classList.contains("death")))
    b21.classList.add("green");
else if (b21.classList.contains("death"))
    b21.classList.add("red");

})

我肯定还有更好的办法。更优雅更实用但我不知道怎么做。我需要在单击事件中检查哪些类有相邻的单元格。

谢谢！！

Answer 1

你可以这样做：

创建一个对象数组，其中定义相邻的单元格和单元格本身。

const grid = [
  { 
    adjacentCells: ['b12', 'b21'],
    cell: b11, //DOM element
    id: 'b11',
  },
  {
    adjacentCells: ['b11', 'b13', 'b22'],
    cell: b12,
    id: 'b12',
  },
  ...
]

然后迭代数组并将eventListener添加到每个DOM元素中：

grid.forEach((element) => {
  element.cell.addEventListener("click", function establishColor() {
    if (this.classList.contains("death")) {
      this.classList.add("red");
    } else {
      element.adjacentCells.forEach((e) => {
        const selectedCell = grid.find((cell) => cell.id === e);
        if (selectedCell && selectedCell.cell.classList.contains("green") && !this.classList.add("green")) {
          this.classList.add("green");
        }
      });
    }
  });
});