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

本文将介绍如何使用 JavaScript 和 HTML 创建一个简单的互动表格游戏，其中点击单元格会切换其周围单元格的颜色。我们将讨论如何初始化指定单元格的颜色，并提供一种更简洁的代码实现方案，使代码更易于维护和扩展，同时增加动态生成表格大小的功能。

初始化指定单元格颜色

在游戏开始时，我们可能需要将某些单元格预先设置为红色。一种简单的方法是在 window.onload 事件中使用 JavaScript 来修改这些单元格的背景颜色。

window.onload = function() {
  document.getElementById("zero0").style.backgroundColor = "red";
  document.getElementById("one3").style.backgroundColor = "red";
  document.getElementById("three2").style.backgroundColor = "red";
}

这段代码会在页面加载完成后，将 ID 为 "zero0"、"one3" 和 "three2" 的单元格的背景颜色设置为红色。

代码优化与简化

原始代码中存在大量的重复代码，每个单元格都需要一个单独的函数来处理点击事件。这使得代码难以维护和扩展。我们可以通过以下方法来简化代码：

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

1. 使用数据属性 (data attributes): 将单元格的行号和列号存储在 data-row 和 data-cell 属性中，这样我们就可以在 JavaScript 中轻松地获取这些信息。
2. 事件委托 (Event Delegation): 将点击事件监听器添加到表格本身，而不是每个单元格。这样可以减少事件监听器的数量，提高性能。
3. 使用 CSS 类 (CSS Classes): 使用 CSS 类来控制单元格的颜色，而不是直接修改 style 属性。这样可以更好地分离 HTML、CSS 和 JavaScript。

以下是一个优化的代码示例：

AI发型设计

虚拟发型试穿工具和发型模拟器

下载

    

      
Table game
      
Try to color all of the cells to red

      

        
You won!
        New Game
      

    
  

// 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],
];

const simpleWin = [
  [1, 1, 1, 1, 1],
  [1, 1, 0, 1, 1],
  [1, 0, 0, 0, 1],
  [1, 1, 0, 1, 1],
  [1, 1, 1, 1, 1],
];

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);

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();
  });
});

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

body {
  text-align: center;
  display: flex;
  justify-content: center;
}

table {
  /*border-radius: 10px;*/
  margin-top: 60px;
  border: 1px solid;
  background-color: lightcyan;
  box-shadow: 5px 5px 40px royalblue;
}

td {
  border: 1px solid;
  width: 40px;
  height: 40px;
}

p {
  font-weight: bold;
  font-size: 17px;
}

p span {
  color: red;
}

td {
  background-color: white;
}

.bg-red {
  background-color: red;
}

.invisible {
  display: none;
}

在这个示例中，我们使用 bg-red 类来设置单元格的背景颜色，并使用 invisible 类来控制 "You won!" 消息的显示。

动态生成表格

为了使游戏更具灵活性，我们可以动态地生成表格。这意味着我们可以根据需要更改表格的大小，而无需修改 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 数组的大小动态地创建表格。

总结

通过使用数据属性、事件委托和 CSS 类，我们可以极大地简化 JavaScript 代码，使其更易于维护和扩展。此外，动态生成表格可以使游戏更具灵活性。希望本教程对您有所帮助！