如何在PHP井字棋游戏中实现获胜格子高亮变色？

原思路问题确认 #

你之前通过全局变量$wincolor修改CSS背景色的思路是错误的——这种方式会让所有匹配该CSS选择器的元素（包括“再玩一次”按钮）统一变色，根本原因是没有精准区分普通格子和获胜格子，也没有定位到具体的获胜单元格。

正确实现步骤 #

1. 调整win()函数，返回获胜格子坐标 #

不要用全局变量存颜色，而是让win()函数返回获胜格子的坐标集合（无获胜则返回null）。这样能精准定位需要高亮的单元格：

function win($board) {
    // 检查横向获胜
    for ($row = 0; $row < 3; $row++) {
        if ($board[$row][0] !== '' && $board[$row][0] === $board[$row][1] && $board[$row][1] === $board[$row][2]) {
            return [[$row, 0], [$row, 1], [$row, 2]];
        }
    }
    // 检查纵向获胜
    for ($col = 0; $col < 3; $col++) {
        if ($board[0][$col] !== '' && $board[0][$col] === $board[1][$col] && $board[1][$col] === $board[2][$col]) {
            return [[0, $col], [1, $col], [2, $col]];
        }
    }
    // 检查对角线获胜
    if ($board[0][0] !== '' && $board[0][0] === $board[1][1] && $board[1][1] === $board[2][2]) {
        return [[0, 0], [1, 1], [2, 2]];
    }
    if ($board[0][2] !== '' && $board[0][2] === $board[1][1] && $board[1][1] === $board[2][0]) {
        return [[0, 2], [1, 1], [2, 0]];
    }
    // 无获胜返回null
    return null;
}

2. 渲染棋盘时给获胜格子加专属类 #

循环生成棋盘格子时，判断当前格子坐标是否在获胜集合中，若是则添加自定义类（比如winning-cell）：

// 假设$board是你的棋盘二维数组，$winningCells是调用win($board)得到的结果
$winningCells = win($board);

for ($row = 0; $row < 3; $row++) {
    for ($col = 0; $col < 3; $col++) {
        $cellClass = 'board-cell';
        // 检查当前坐标是否属于获胜格子
        if ($winningCells && in_array([$row, $col], $winningCells)) {
            $cellClass .= ' winning-cell';
        }
        // 生成格子按钮
        echo "<input type='button' class='$cellClass' value='{$board[$row][$col]}' disabled />";
    }
    echo "<br>";
}

3. 用CSS单独给获胜格子设置高亮样式 #

在样式表中为winning-cell类单独写样式，确保只作用于目标格子，不会影响其他元素：

/* 普通棋盘格子样式 */
.board-cell {
    width: 60px;
    height: 60px;
    margin: 5px;
    font-size: 24px;
    cursor: pointer;
}

/* 获胜格子高亮样式 */
.winning-cell {
    background-color: #ffd700; /* 金色高亮，可自行修改颜色 */
    border: 2px solid #ff8c00; /* 可选：添加边框强化视觉效果 */
}

/* 再玩一次按钮单独设置样式，避免被影响 */
.reset-btn {
    margin-top: 15px;
    padding: 8px 20px;
    font-size: 16px;
    cursor: pointer;
}

方案优势 #

通过“标记坐标→添加专属类→CSS精准匹配”的流程，能精准定位并高亮获胜格子，完全不会波及“再玩一次”按钮这类无关元素，彻底解决了你之前全局修改CSS导致的样式污染问题。

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