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

代码优化

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

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

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

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 数组，动态生成表格的行和单元格。

总结

通过使用二维数组来表示游戏面板的初始状态，以及使用事件委托、数据属性、CSS 类名和简化的颜色切换逻辑，我们可以大大简化代码，提高代码的可维护性。同时，动态生成表格可以使代码更加灵活，方便修改表格的大小。

注意事项：

• 确保 HTML 结构中包含必要的元素，例如表格、行和单元格。
• 确保 CSS 样式表中包含必要的样式，例如单元格的背景颜色。
• 在测试代码时，可以使用浏览器的开发者工具来调试 JavaScript 代码。
• 注意处理边界情况，例如当用户点击表格边缘的单元格时。

通过以上步骤，你就可以创建一个更加简洁、高效和易于维护的 JavaScript 动态颜色切换游戏。