JavaScript实现动态颜色切换的互动表格游戏

本文将指导你如何使用JavaScript和HTML创建一个简单的互动表格游戏，该游戏允许用户通过点击单元格来切换其颜色以及周围单元格的颜色。我们将讨论如何初始化特定单元格的颜色，并提供代码优化建议，以简化实现并提高可维护性，最终实现动态调整表格大小的功能。

初始化单元格颜色

在游戏开始时，我们可能需要将某些单元格预设为红色。一种有效的方法是使用二维数组来表示初始状态。数组中的每个元素代表一个单元格，例如，1 代表红色，0 代表白色。

// 0=white, 1=red
const cellsToStartRed = [
  [1, 0, 0, 0, 0],
  [0, 0, 0, 1, 0],
  [0, 0, 0, 0, 0],
  [0, 0, 1, 0, 0],
  [0, 0, 0, 0, 0],
];

然后，在页面加载后，遍历这个数组，根据数组的值设置对应单元格的背景颜色。

function newGame(startConfig) {
  document.querySelector("#youWon").classList.add("invisible");

  startConfig.forEach((row, rowNo) => {
    row.forEach((cell, cellNo) => {
      // clear table
      document.querySelector(`tr[data-row="${rowNo}"] td[data-cell="${cellNo}"]`).classList.remove("bg-red");

      if (cell === 1) document.querySelector(`tr[data-row="${rowNo}"] td[data-cell="${cellNo}"]`).classList.add("bg-red");
    });
  });
}

newGame(cellsToStartRed);

这段代码首先获取表格中所有的单元格，然后遍历 cellsToStartRed 数组。如果数组中某个元素的值为 1，则将对应的单元格的背景颜色设置为红色。

立即学习“Java免费学习笔记（深入）”；

简化颜色切换逻辑

原始代码中，为每个单元格都定义了一个单独的函数来处理点击事件，这导致大量的重复代码。我们可以使用事件监听器和一些逻辑来简化这个过程。

首先，为每个单元格添加一个点击事件监听器：

Replit Agent

Replit最新推出的AI编程工具，可以帮助用户从零开始自动构建应用程序。

下载

const cells = document.querySelectorAll("td[data-cell]");
cells.forEach((cell) => {
  cell.addEventListener("click", () => {
    const rowNo = parseInt(cell.parentNode.getAttribute("data-row"));
    const cellNo = parseInt(cell.getAttribute("data-cell"));

    cell.classList.toggle("bg-red");

    //left
    if (cellNo > 0) document.querySelector(`tr[data-row="${rowNo}"] td[data-cell="${cellNo - 1}"]`).classList.toggle("bg-red");
    //right
    if (cellNo < cellsToStartRed[rowNo].length - 1) document.querySelector(`tr[data-row="${rowNo}"] td[data-cell="${cellNo + 1}"]`).classList.toggle("bg-red");
    //top
    if (rowNo > 0) document.querySelector(`tr[data-row="${rowNo - 1}"] td[data-cell="${cellNo}"]`).classList.toggle("bg-red");
    //bottom
    if (rowNo < cellsToStartRed.length - 1) document.querySelector(`tr[data-row="${rowNo + 1}"] td[data-cell="${cellNo}"]`).classList.toggle("bg-red");

    checkIfWon();
  });
});

这段代码为每个单元格添加了一个点击事件监听器。当单元格被点击时，它会切换单元格本身的颜色，以及周围单元格的颜色。

动态生成表格

为了使游戏更具灵活性，我们可以动态地生成表格。这意味着我们可以根据需要更改表格的大小，而无需修改 HTML 代码。

const table = document.querySelector("table");
cellsToStartRed.forEach((row, rowNo) => {
    table.innerHTML += ``;

    row.forEach((cell, cellNo) => {
      document.querySelector(`tr[data-row="${rowNo}"]`).innerHTML += ``;

      if (cell === 1) document.querySelector(`tr[data-row="${rowNo}"] td[data-cell="${cellNo}"]`).classList.add("bg-red");
    });
  });

这段代码首先清空表格的内容，然后遍历 cellsToStartRed 数组，动态地生成表格的行和单元格。

检查游戏是否胜利

为了让游戏更有趣，我们可以添加一个检查游戏是否胜利的函数。这个函数会检查所有的单元格是否都变成了红色。

function checkIfWon() {
  if ([...cells].every((cell) => cell.classList.contains("bg-red"))) {
    document.querySelector("#youWon").classList.remove("invisible");
  }
}

这段代码首先获取表格中所有的单元格，然后使用 every 方法检查是否所有的单元格都包含 bg-red 类。如果所有的单元格都包含 bg-red 类，则显示 "You won!" 的消息。

总结

通过使用二维数组来表示初始状态，使用事件监听器来简化颜色切换逻辑，以及动态地生成表格，我们可以创建一个更灵活、更可维护的互动表格游戏。此外，添加检查游戏是否胜利的函数，可以使游戏更有趣。