HTML、CSS与JavaScript实现点击表格单元格显示相邻隐藏单元格的避地雷游戏功能求助

Hey folks, I'm trying to build a fun little "avoid the mines" game using HTML, CSS, and ideally as little JavaScript as possible. Let me break down what I'm going for and where I'm hitting a wall:

The Game Concept #

The goal is to get from the start tile to the finish tile by clicking on grid tiles in sequential order—without hitting any mine tiles (which would end the game). Here's how the tile reveal should work:

• When you click on an already visible tile, its next adjacent hidden tile should become visible. For example:
  • Clicking tile A2 reveals tile A3
  • Clicking tile A3 reveals tile A4
  • And so on until you reach the finish tile

Right now, I've got a basic table grid styled with CSS. The start tile (A1) is visible by default, and tiles A4/A5 are hidden. When I click on a tile like A2, I can change its background color, but I can't figure out how to make that click trigger the next adjacent tile to become visible.

My Current Code #

Here's the HTML and CSS I've put together so far:

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 lightgray; 
  background-color: white; 
} 

.Tile { 
  border: 1px solid lightgray; 
  background-color: black; 
  cursor: pointer; 
} 

.TileFinish { 
  border: 1px solid lightgray; 
  background-color: black; 
  cursor: pointer; 
} 

#A4, #A5 { 
  visibility: hidden; 
}

HTML:

<table>
  <tr>
    <td class="TileStart" id="A1"></td>
    <td class="Tile" id="A2" onclick="style='background-color: darkgray;'"></td>
    <td class="Tile" id="A3" onclick="style='background-color: darkgray;'"></td>
    <td class="Tile" id="A4" onclick="style='background-color: darkgray;'"></td>
    <td class="TileFinish" id="A5" onclick="style='background-color: white;'"></td>
  </tr>
</table>

What I Need Help With #

I'm stuck on the core functionality: making hidden tiles reveal sequentially when clicking their already visible adjacent tiles. If anyone can help me figure out how to implement this—preferably with minimal JavaScript, but JS solutions are totally welcome too—I'd really appreciate it!

内容来源于stack exchange