如何实现类Google扫雷的棋盘格方块交替配色效果

核心判断逻辑非常简单：对任意坐标为(r,c)的格子，通过r + c的和的奇偶性区分两种配色即可，不需要改动原有核心游戏逻辑，只需要调整CSS和少量DOM类操作代码。

1. 替换原有CSS样式 #

直接把你原来的CSS部分替换成下面的代码，颜色值完全对齐Google扫雷官方配色，同时优化了边框和数字颜色的视觉效果：

body {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  text-align: center;
}

#board {
  width: 500px;
  height: 500px;
  border: 10px solid darkgray;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}

#board div {
  width: 48px;
  height: 48px;
  border: 1px solid rgba(0,0,0,0.1);
  font-size: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 未揭开状态：绿色系交替 */
.tile-green-light {
  background-color: #A2D149;
}
.tile-green-dark {
  background-color: #8FBC3F;
}

/* 已揭开状态：棕色系交替 */
.tile-brown-light {
  background-color: #E5C29F;
  border-color: #D7B895;
}
.tile-brown-dark {
  background-color: #D7B895;
  border-color: #C9AA86;
}

/* 踩雷高亮 */
.tile-mine-hit {
  background-color: #ff4444 !important;
}

/* 数字颜色对齐Google扫雷规范 */
.x1 { color: #1976D2; }
.x2 { color: #388E3C; }
.x3 { color: #D32F2F; }
.x4 { color: #7B1FA2; }
.x5 { color: #795548; }
.x6 { color: #0097A7; }
.x7 { color: #212121; }
.x8 { color: #757575; }

#flag-button {
  width: 100px;
  height: 50px;
  font-size: 30px;
  background-color: lightgray;
  border: none;
  cursor: pointer;
}

2. 修改格子初始化逻辑 #

找到startGame函数里创建方块的循环，给每个新生成的未揭开方块根据奇偶坐标加上对应的绿色类，修改后的循环代码如下：

for (let r = 0; r < rows; r++) {
  let row = [];
  for (let c = 0; c < columns; c++) {
    let tile = document.createElement("div");
    tile.id = r.toString() + "-" + c.toString();
    // 初始化时添加交替绿色类
    if ((r + c) % 2 === 0) {
      tile.classList.add("tile-green-light");
    } else {
      tile.classList.add("tile-green-dark");
    }
    tile.addEventListener("click", clickTile);
    document.getElementById("board").append(tile);
    row.push(tile);
  }
  board.push(row);
}

3. 修改方块揭开时的类切换逻辑 #

找到checkMine函数里标记方块为已点击的代码段，也就是原来的board[r][c].classList.add("tile-clicked");这一行，替换成下面的代码，实现揭开时自动从绿色系切换到对应位置的棕色系：

// 移除未揭开状态的绿色类
board[r][c].classList.remove("tile-green-light", "tile-green-dark");
board[r][c].classList.add("tile-clicked");
// 添加对应位置的棕色类
if ((r + c) % 2 === 0) {
  board[r][c].classList.add("tile-brown-light");
} else {
  board[r][c].classList.add("tile-brown-dark");
}

4. 修改踩雷高亮逻辑 #

找到revealMines函数里原来直接写内联样式改雷块背景的代码tile.style.backgroundColor = "red";，替换成类名操作，避免样式优先级冲突：

tile.innerText = "💣";
tile.classList.add("tile-mine-hit");

修改完成后刷新页面即可实现和示例完全一致的棋盘格交替效果，整个过程没有改动原有游戏的判断逻辑，不会引入新的bug。

内容的提问来源于stack exchange，提问作者Cricket