JavaScript 动态颜色切换游戏：初始状态设置与代码优化-js教程-PHP中文网

JavaScript 动态颜色切换游戏：初始状态设置与代码优化

DDD

发布： 2025-09-09 21:09:01

原创

748人浏览过

javascript 动态颜色切换游戏：初始状态设置与代码优化

本文将指导你如何在 JavaScript 和 HTML 构建的颜色切换游戏中，预先设置某些单元格为红色，以及如何优化代码结构，使其更加简洁和易于维护。我们将探讨如何使用二维数组来表示游戏初始状态，并利用更高效的事件监听和状态更新方法来简化代码。

初始状态设置

要在游戏开始时将某些单元格设置为红色，最有效的方法是使用一个二维数组来表示游戏面板的初始状态。数组中的每个元素代表一个单元格，可以使用 0 和 1 分别表示白色和红色。

// 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免费学习笔记（深入）”；

代码优化

原始代码中存在大量的重复代码，每个单元格都需要一个单独的函数来处理点击事件。这不仅增加了代码的复杂性，也降低了代码的可维护性。我们可以通过以下方式来优化代码：

使用事件委托： 将点击事件监听器添加到表格元素上，而不是每个单元格上。这样可以减少事件监听器的数量，提高性能。
使用数据属性： 在 HTML 元素中使用 data-* 属性来存储单元格的坐标信息。这样可以避免使用 id 属性，使代码更加灵活。
使用 CSS 类名： 使用 CSS 类名来切换单元格的颜色，而不是直接修改 style 属性。这样可以使代码更加清晰，也方便进行样式管理。
简化颜色切换逻辑： 使用 classList.toggle() 方法来切换单元格的颜色，而不是使用 if...else 语句。

以下是优化后的代码示例：

AI角色脑洞生成器

一键打造完整角色设定，轻松创造专属小说漫画游戏角色背景故事

176

查看详情

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 中硬编码。这样可以方便地修改表格的大小，而无需修改 HTML 代码。

const table = document.querySelector("table");
cellsToStartRed.forEach((row, rowNo) => {
    table.innerHTML += `<tr data-row="${rowNo}"></tr>`;

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

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

登录后复制

这段代码首先获取到表格元素，然后遍历 cellsToStartRed 数组，动态生成表格的行和单元格。