用码道 AI 编程助手开发井字棋（Tic-Tac-Toe）网页小游戏-平芜编程栈

一段需求，码道自动写出 329 行、约 9 KB 的单文件井字棋游戏——玩家执 X 对战 Minimax 最优 AI，3x3 棋盘点击落子、AI 自动回应，胜负平局弹窗提示、统计持久化，双击 HTML 就能玩

分类: ai-development
标签: CodeArts, AI编程, TicTacToe, 网页小游戏, Minimax
难度: 初级
读者: 前端开发者、编程学习者、技术写作者

1. 开篇钩子

我在码道 TUI 里输入了一段需求：「做一个井字棋（Tic-Tac-Toe）网页小游戏，单个 HTML 文件即可运行……」约 1 分 22 秒后，一个 329 行、约 9 KB 的完整井字棋游戏就自动生成了：玩家执 X、AI 执 O，AI 使用 Minimax 极小化极大算法保证最优落子，玩家最多只能逼平；3x3 棋盘点击落子、AI 自动回应，胜负平局都会弹出提示并高亮获胜连线；胜/负/平局统计保存在 localStorage，刷新页面也不丢。双击 HTML 就能开局。

2. 码道 TUI 安装

复制下面的命令到终端，3 步完成安装：

# 1. 一键安装sh-c"$(curl-Lhttps://cnnorth4-cloudide-marketplace.obs.cn-north-4.myhuaweicloud.com/codearts/cli_tui/install_script/install.sh)"# 2. 配置环境变量exportPATH=~/.codeartsdoer/installers:$PATHexportCODEARTS_CLI_AK=你的AKexportCODEARTS_CLI_SK=你的SK# 3. 启动 TUIcodearts

AK/SK 获取：https://codearts.huaweicloud.com/portal/settings/cli-auth

👉还没有码道？立即开通体验：https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz

安装完成后，在命令行或 PowerShell 中输入codearts回车，即可打开码道 TUI。把开发需求贴进输入框，码道会自动分析并生成完整代码。

3. 码道能力一览

这次开发中，码道展示了以下能力：

自然语言编程：我说「井字棋网页小游戏」，码道直接理解成 Minimax AI + 3x3 棋盘 + 回合管理 + 胜负判定 + 统计持久化一整套方案
自主产品设计：自动选择了深色渐变背景、玻璃拟态卡片、渐变标题与按钮、蓝粉双色 X/O 标记等视觉与交互设计
工程细节到位：Minimax 带深度加权让 AI 尽早获胜、AI 落子延迟 320ms 更自然、获胜连线高亮、移动端触屏适配
自检与收尾：生成后自行验证文件落盘，并逐条汇报功能清单

4. 任务描述

我想要一个井字棋（Tic-Tac-Toe）网页小游戏，具体要求：

单个 HTML 文件即可运行，不需要任何构建步骤
玩家执 X，电脑 AI 执 O，AI 使用 Minimax 极小化极大算法保证最优落子
3x3 棋盘，玩家点击空格落子，AI 自动回应
实时显示当前回合与胜负结果，分出胜负或平局后弹出提示并支持重新开始
记录玩家胜/负/平局统计，使用 localStorage 持久化
深色渐变背景，界面简洁现代，支持移动端触屏操作

5. 开发过程及真实截图

我在码道 TUI 中贴入需求后，码道先拆解需求，列出功能清单后开始写代码：

生成过程中，码道先做需求分析（Thinking），随后直接开始写代码：

约 1 分 22 秒后，码道汇报完成，输出功能清单，并提示文件位置：

双击生成的tic-tac-toe.html在浏览器中直接运行，井字棋界面、回合状态与棋盘都正常，落子后 AI 会自动回应：

6. 代码解析

码道生成的代码是一个自包含的单页应用，核心逻辑非常清晰：

Minimax 决策：AI 通过递归搜索所有落子分支，选取对自己最有利、对玩家最不利的走法，带深度加权让「尽早获胜」优于「晚点获胜」：

functionminimax(b,depth,isMax){constw=winner(b);if(w===AI)return10-depth;if(w===HUMAN)returndepth-10;if(b.every(c=>c!==''))return0;// 递归取最大/最小分值}

胜负判定与高亮：预先定义 8 条获胜连线，winner()检测三连，胜方连线高亮并弹出结果：

functionwinner(b){for(const[a,c,d]ofWIN_LINES){if(b[a]&&b[a]===b[c]&&b[a]===b[d])returnb[a];}returnnull;}

回合管理与 AI 回应：玩家点击落子后锁定aiThinking状态，AI 延迟 320ms 落子更自然：

functiononCellClick(i){if(gameOver||aiThinking)return;if(board[i]!=='')return;board[i]=HUMAN;renderCell(i);if(checkEnd())return;aiThinking=true;setStatus('AI 思考中…','o');setTimeout(aiMove,320);}

统计与持久化：胜/负/平局写入 localStorage 的ttt_stats，刷新页面不丢：

functionsaveStats(){localStorage.setItem('ttt_stats',JSON.stringify(stats));}

从这些代码可以看出，码道不只把功能拼出来，Minimax 决策、回合状态锁、移动端适配这些影响体验的细节也都处理得比较到位。

7. 真实运行效果

双击tic-tac-toe.html即可开始游戏：页面显示「你执 X · AI 执 O · Minimax 最优」，点击任意空格落下蓝色 X，状态栏切换为「AI 思考中…」，AI 在约 320ms 后以粉色 O 回应；分出胜负时获胜连线会高亮并弹出结果弹窗，平局也有提示；下方统计区实时累计胜/负/平局次数并持久化到 localStorage；「重新开始」按钮随时可重置对局。深色渐变背景配合玻璃拟态卡片与渐变按钮，观感精致。

8. 能力总结

一次生成完整可玩：从需求到可双击运行的单文件游戏，全程约 1 分半，无需手工补代码
AI 对战有含金量：Minimax 最优决策，玩家最多只能逼平，对战体验真实
交互细节到位：回合状态切换、获胜连线高亮、结果弹窗、重新开始、触屏适配，体验闭环完整
工程习惯良好：数据与 DOM 分离、状态锁防连点、localStorage 持久化，代码结构清晰可读

9. 总结

用码道开发井字棋这类网页小游戏，最大的感受是「需求即产品」：把玩法要点说清楚，码道就能给出包含完整交互、动画和视觉风格的成品。对想快速验证创意、或者刚学前端想看看「一个完整应用是怎么写的」的同学，让码道先生成一份，再对照源码逐行读，是很好的学习路径。下一轮，我打算让码道继续挑战不同玩法的小游戏，继续记录真实的开发过程。