本文讲解如何在 php 井字棋游戏中精准高亮获胜的三个连续方格，通过重构胜利检测逻辑、提取获胜位置索引，并在 html 渲染时动态添加 css 类实现视觉突出。
本文讲解如何在 php 井字棋游戏中精准高亮获胜的三个连续方格，通过重构胜利检测逻辑、提取获胜位置索引，并在 html 渲染时动态添加 css 类实现视觉突出。
要让井字棋中获胜的三个方格以不同颜色高亮（如橙色），关键在于：分离“判定谁赢”与“标记哪几个格子赢”。原代码中 win() 函数仅设置 $winner 和 $msg，未记录具体获胜坐标，导致无法针对性样式化。解决方案是新增一个独立函数 winningTiles()，遍历棋盘，返回获胜方格对应的按钮编号（b1–b9）数组，再在输出表单时为对应 动态添加 CSS 类。
✅ 步骤一：定义获胜位置检测函数
将冗长的 switch 中重复的胜利判断逻辑提取为可复用函数，支持行、列、对角线三种模式：
function winningTiles(array $board): array
{
// 检查三行
for ($i = 0; $i <blockquote><p>⚠️ 注意：该函数应放在 session_start() 之后、HTML 输出之前调用，且需传入当前棋盘状态 $_SESSION['board']。</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5233" title="btpanel phpsite 宝塔面板PHP网站"><img
src="https://img.php.cn/upload/skill/000/000/081/179040786932301.jpg" alt="btpanel phpsite 宝塔面板PHP网站" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill5233" title="btpanel phpsite 宝塔面板PHP网站" class="overflowclass">btpanel phpsite 宝塔面板PHP网站</a>
<p class="overflowclass">宝塔面板 PHP 网站管理：站点创建、删除、启停、PHP 版本切换、域名管理、SSL证书管理、伪静态管理、数据库管理</p>
</div>
<a rel="nofollow" href="/xiazai/skill5233" title="btpanel phpsite 宝塔面板PHP网站" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div></blockquote><h3>✅ 步骤二：在视图中动态应用高亮类</h3><p>替换原有硬编码的 9 个 <input> 标签，改用嵌套循环生成，并根据 $winningTiles 数组决定是否添加 class="winningTile"：</p><pre class="brush:php;toolbar:false;"><?php $winningTiles = winningTiles($_SESSION['board']);
?><style>
input {
height: 250px;
font-size: 5em;
border: 3px solid black;
padding: 20px;
margin-top: 5px;
margin-left: 5px;
}
.winningTile {
background-color: #ff9800; /* 橙色，醒目且兼容性好 */
box-shadow: 0 0 12px rgba(255, 152, 0, 0.6);
}
</style>
✅ 步骤三：整合到主流程（关键修改点）
- 将原 win() 函数中仅设 $winner 的逻辑移除，不再手动调用 win()；
- 在控制器逻辑末尾（即所有 isset($_GET['bX']) 处理完成后），直接调用 $winningTiles = winningTiles($_SESSION['board']);；
- 若 $winningTiles 非空，则视为游戏结束，此时 $winner = $_SESSION['player']，并禁用剩余空格（保持原逻辑）；
- $msg 更新仍由后续逻辑控制（如 $msg = $winner . " WINs";），无需改动。
? 补充说明与最佳实践
- 安全性增强：使用 htmlspecialchars() 输出 value，防止恶意字符注入；
- 可维护性提升：避免重复的 isset() 分支，全部交由统一函数判定；
- 样式扩展友好：.winningTile 可自由定制背景色、边框、阴影等，不影响游戏逻辑；
- 平局处理兼容：当 $winningTiles 为空且 moves === 9 时，自动进入平局分支，不触发高亮。
通过以上重构，获胜方格将精准、稳定、语义清晰地高亮显示，既满足作业要求，也为后续功能扩展（如动画、音效、统计）打下坚实基础。
php免费学习视频：立即使用
踏上前端学习之旅，开启通往精通之路！从前端基础到项目实战，循序渐进，一步一个脚印，迈向巅峰！
