如何高亮显示井字棋游戏中的获胜格子-html教程-PHP中文网

如何高亮显示井字棋游戏中的获胜格子

本文介绍在php井字棋游戏中动态识别并高亮获胜三连格的完整实现方案，通过重构胜利检测逻辑、提取获胜位置索引，并在html渲染阶段为对应按钮添加css类，实现精准、可维护的视觉反馈。

本文介绍在php井字棋游戏中动态识别并高亮获胜三连格的完整实现方案，通过重构胜利检测逻辑、提取获胜位置索引，并在html渲染阶段为对应按钮添加css类，实现精准、可维护的视觉反馈。

要让井字棋（Tic Tac Toe）中获胜的三个格子以不同颜色高亮显示，关键在于解耦“胜负判定”与“样式渲染”：不能仅靠全局变量标记胜者（如 $winner），而需明确返回具体获胜格子的位置编号（b1–b9），再在输出表单时为这些格子动态添加 CSS 类。

以下是核心改进步骤：

✅ 1. 新增 winningTiles() 函数 —— 精确返回获胜位置

该函数接收当前棋盘数组，遍历所有8种获胜模式（3行 + 3列 + 2对角线），一旦发现三连相同非空符号（X 或 O），立即返回对应的按钮编号数组 [1,5,9] 等（对应 b1, b5, b9）：

function winningTiles(array $board): array
{
    // 检查3行
    for ($i = 0; $i <blockquote><p>⚠️ 注意：此函数应放在 win() 函数之前或独立定义，且<strong>不依赖全局状态</strong>，纯函数式设计更易测试和复用。</p></blockquote><h3>✅ 2. 替换冗长的 switch 判定逻辑，统一调用 winningTiles()</h3><p>在原有控制器逻辑末尾（即所有 $_GET['b*'] 处理完成后），移除分散的 win() 调用，改为统一检测：</p><pre class="brush:php;toolbar:false;">// 在所有 move 处理完毕后（即 switch 结束后），添加：
$winningTiles = winningTiles($_SESSION['board']);
if (!empty($winningTiles)) {
    $winner = $_SESSION['player'];
    $msg = $winner . " WINs";
    // 可选：禁用剩余空格（保持原逻辑）
    for ($i = 0; $i = 9) {
    $msg = "Tie Game!";
}

这样，$winningTiles 数组始终包含本次获胜的按钮编号（如 [1,5,9]），供视图层使用。

✅ 3. 在 HTML 表单中动态添加 winningTile 类

将原始重复的9个标签替换为嵌套循环，并根据 $b 编号是否在 $winningTiles 中决定是否添加 class="winningTile"：

<style>
input {
    height: 250px;
    font-size: 5em;
    border: 3px solid black;
    padding: 20px;
    margin-top: 5px;
    margin-left: 5px;
}
.winningTile {
    background-color: #ffcc00; /* 金色高亮，醒目且不刺眼 */
    box-shadow: 0 0 12px rgba(255, 204, 0, 0.6);
}
</style>

✅ 优势说明：

✅ 精准控制：仅高亮真正构成三连的3个格子；

✅ 样式解耦：颜色由 CSS .winningTile 统一管理，便于后期调整；

✅ 安全增强：使用 htmlspecialchars() 防止恶意符号注入；

✅ 可维护性：消除9处重复判断，逻辑清晰，易于扩展（如增加动画、音效等）。