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

分类: 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 -L https://cnnorth4-cloudide-marketplace.obs.cn-north-4.myhuaweicloud.com/codearts/cli_tui/install_script/install.sh)"# 2. 配置环境变量export PATH=~/.codeartsdoer/installers:$PATHexport CODEARTS_CLI_AK=你的AKexport CODEARTS_CLI_SK=你的SK# 3. 启动 TUIcodearts

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

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

3. 码道能力一览

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

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

4. 任务描述

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

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

5. 开发过程及真实截图

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

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

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

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

6. 代码解析

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

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

function minimax(b, depth, isMax) {const w = winner(b);if (w === AI) return 10 - depth;if (w === HUMAN) return depth - 10;if (b.every(c => c !== '')) return 0;// 递归取最大/最小分值}

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

function winner(b) {for (const [a, c, d] of WIN_LINES) {if (b[a] && b[a] === b[c] && b[a] === b[d]) return b[a];}return null;}

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

function onCellClick(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，刷新页面不丢：

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

9. 总结

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