JavaScript 实现动态颜色切换的互动表格游戏-js教程-PHP中文网

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

碧海醫心

发布： 2025-09-09 20:19:00

原创

676人浏览过

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

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

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

飞书多维表格

表格形态的AI工作流搭建工具，支持批量化的AI创作与分析任务，接入DeepSeek R1满血版

查看详情

<body>
    <div class="container">
      <h2>Table game</h2>
      <p>Try to color all of the cells to <span onclick="newGame(simpleWin)">red</span></p>

      <div id="youWon" class="invisible">
        <h2>You won!</h2>
        <button onclick="newGame(cellsToStartRed)">New Game</button>
      </div>

    <table>
      <tr data-row="0">
        <td data-cell="0" />
        <td data-cell="1" />
        <td data-cell="2" />
        <td data-cell="3" />
        <td data-cell="4" />
      </tr>
      <tr data-row="1">
        <td data-cell="0" />
        <td data-cell="1" />
        <td data-cell="2" />
        <td data-cell="3" />
        <td data-cell="4" />
      </tr>
      <tr data-row="2">
        <td data-cell="0" />
        <td data-cell="1" />
        <td data-cell="2" />
        <td data-cell="3" />
        <td data-cell="4" />
      </tr>
      <tr data-row="3">
        <td data-cell="0" />
        <td data-cell="1" />
        <td data-cell="2" />
        <td data-cell="3" />
        <td data-cell="4" />
      </tr>
      <tr data-row="4">
        <td data-cell="0" />
        <td data-cell="1" />
        <td data-cell="2" />
        <td data-cell="3" />
        <td data-cell="4" />
      </tr>
    </table>
  </div>
</body>

登录后复制

// 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 += `<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 数组的大小动态地创建表格。