基于HTML、CSS（可选JavaScript）实现按序点击表格单元格的避障游戏交互需求咨询

各位好，这是我之前问题的补充——上次没把需求说清楚，有人误以为我要做扫雷克隆（其实不是），还有人对“按序揭示隐藏单元格”的逻辑存疑，这次我尽量把需求讲明白！

我要做的是一款“避障闯关”类的格子游戏，核心是按顺序点击表格里的单元格（我叫它们“tiles”），从起点走到终点。具体交互逻辑如下：

• 点击已揭示的单元格时：把它的背景色改成深灰色
• 同时，要把这个单元格的所有隐藏邻居单元格：设置为可见状态，并且把它们的边框改成白色（标记为可点击的候选）
• 整个过程必须按顺序进行，不能跳步

举个具体例子：假设是5×5的格子，ID从A1到E5，起点A1是已揭示且已点击的状态。当我点击A1的邻居A2时：

1. A2的背景色变为深灰色
2. A2的邻居（A3和B2）要被设置为可见，边框改成白色（表示可以点击了）
3. 后续每点击一个符合条件的单元格（带.Tile或.TileFinish类），都重复这个流程

目前我已经写了基础的HTML和CSS代码，先贴出来：

现有CSS代码 #

body { 
  background-color: black; 
} 
table { 
  border-collapse: collapse; 
  position: absolute; 
} 
td { 
  width: 64px; 
  height: 64px; 
  text-align: center; 
  justify-content: center; 
} 
.TileStart { 
  border: 1px solid white; 
  color: black; 
  background-color: white; 
} 
.Tile { 
  color: white; 
  background-color: black; 
  cursor: pointer; 
  display: none; 
} 
.TileFinish { 
  color: black; 
  background-color: white; 
  cursor: pointer; 
  display: none; 
} 
#A2, #B2 { 
  display: table-cell; 
} 
#A2 { 
  border: 1px solid darkgray; 
} 
#B2 { 
  border: 1px solid white; 
}

现有HTML代码 #

<!DOCTYPE html> 
<html> 
<head> 
  <title>Hidden Tiles Advanced Test</title> 
  <link rel="stylesheet" href="hidden-tiles-advanced-styles.css"> 
  <meta charset="utf-8"> 
  <meta name="description" content="Testing advanced use of hidden cells in tables."> 
</head> 
<body> 
  <table> 
    <tr> 
      <td class="TileStart" id="A1">Start</td> 
      <td class="Tile" id="A2" onclick="style='background-color: darkgray; color: border: 1px solid white;'"></td> 
      <td id="A3"></td> 
      <td id="A4"></td> 
      <td id="A5"></td> 
    </tr> 
    <tr> 
      <td id="B1"></td> 
      <td class="Tile" id="B2" onclick="style='background-color: darkgray; color: border: 1px solid white;'"></td> 
      <td class="Tile" id="B3" onclick="style='background-color: darkgray; color: border: 1px solid white;'"></td> 
      <td class="Tile" id="B4" onclick="style='background-color: darkgray; color: border: 1px solid white;'"></td> 
      <td id="B5"></td> 
    </tr> 
    <tr> 
      <td id="C1"></td> 
      <td class="Tile" id="C2" onclick="style='background-color: darkgray; color: border: 1px solid white;'"></td> 
      <td id="C3"></td> 
      <td class="Tile" id="C4" onclick="style='background-color: darkgray; color: border: 1px solid white;'"></td> 
    </tr>
  </table>
</body> 
</html>

我知道这个需求有点复杂，能用纯HTML/CSS实现当然最好，但如果必须用JS也完全接受。希望这次把需求讲清楚了，期待大家的解答！

内容来源于stack exchange