用码道 AI 编程助手开发五子棋网页游戏

分类: ai-development

标签: CodeArts, AI编程, Gomoku, 网页小游戏, Canvas

难度: 中级

读者: 前端开发者、编程学习者、技术写作者

1. 开篇钩子

我在码道 TUI 里输入了一段需求：「做一个五子棋（Gomoku）网页游戏，单个 HTML 文件即可运行……」约 5 分 18 秒后，一个 472 行、约 14 KB 的完整五子棋游戏就自动生成了：Canvas 绘制 15x15 木色渐变棋盘，带星位标记；玩家执黑先手，AI 执白自动回应，AI 用四方向连子评估的启发式评分选点——连五 199999、活四 10000、冲四/活三 1000、冲三 100、活二 100、眠二 10，进攻分与防守分×8.9 综合决策，必防对方成五；最后落子红圈高亮，五连珠时红色连线高亮并弹窗提示胜负；「新游戏」重置、「悔棋」撤销到玩家上一手前，棋盘状态与胜负数用 localStorage 持久化。双击 HTML 就能和 AI 对弈。

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. 自然语言编程：我说「五子棋网页游戏」，码道直接理解成棋盘绘制 + AI 启发式评分 + 落子交互 + 胜负判定 + 持久化一整套方案
2. 自主技术选型：AI 用四方向连子棋型评分（连五/活四/冲四/活三等），进攻分与防守分加权综合，优先成五、必防对方成五
3. 工程细节到位：最后落子红圈高亮、获胜连线高亮、悔棋撤销至玩家上一手、localStorage 续局、高 DPI 适配
4. 自检与收尾：生成后自行验证关键逻辑并简要汇报实现要点

4. 任务描述

我想要一个五子棋（Gomoku）网页游戏，具体要求：

1. 单个 HTML 文件即可运行，不需要任何构建步骤
2. 15x15 棋盘，玩家执黑先手、AI 执白后手
3. AI 使用启发式评分（评估连子、活四、冲四、活三等棋型）选择落点
4. 点击棋盘交叉点落子，AI 自动回应并高亮最后落子
5. 五子连珠时弹出胜负提示并高亮获胜连线
6. 提供「新游戏」和「悔棋」按钮
7. 局面记录（棋盘状态、胜负数）用 localStorage 持久化
8. 木色棋盘背景，界面简洁，支持移动端触屏操作

5. 开发过程及真实截图

我在码道 TUI 中贴入需求后，码道开始拆解需求并生成代码：

生成过程中，码道设计 AI 评分与防守逻辑、胜负判定，代码逐行可见：

约 5 分 18 秒后，码道汇报完成，输出实现要点，并提示文件位置：

双击生成的 gomoku.html 在浏览器中直接运行，玩家落黑子后 AI 自动应白子，棋盘与统计正常：

6. 代码解析

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

棋盘与落子：Canvas 绘制 15x15 木色渐变棋盘，点击时把鼠标坐标映射到最近的交叉点，落黑子后调用 AI：

function getPos(clientX, clientY) {const rect = canvas.getBoundingClientRect();const cx = (clientX - rect.left) / rect.width * w;const cy = (clientY - rect.top) / rect.height * h;return { x: Math.round(cx), y: Math.round(cy) };}

AI 评分：对每个空点沿横竖撇捺四方向统计连子棋型，按分值表评分，进攻分 + 防守分×8.9 综合选点：

// 棋型分值: 连五 199999 / 活四 10000 / 冲四 1000 / 活三 1000 / 冲三 100 / 活二 100 / 眠二 10const score = attackScore * 1.0 + defendScore * 8.9;

胜负判定：落子后沿四方向检查是否五连，命中则红色连线高亮并弹窗：

function endGame(text) {gameOver = true;draw();saveState();document.getElementById('modalText').textContent = text;document.getElementById('modal').classList.add('show');}

持久化：棋盘状态、落子历史与胜负数写入 localStorage，刷新页面自动恢复对局：

function saveState() {localStorage.setItem('gomokuBoard', JSON.stringify(board));localStorage.setItem('gomokuStats', JSON.stringify(stats));}

从这些代码可以看出，码道不只把功能拼出来，棋型评分、防守权重、悔棋历史、续局恢复这些影响体验的细节也都处理得比较到位。

7. 真实运行效果

双击 gomoku.html 即可开始对弈：页面顶部显示「胜 0 负 0」统计，中间是 15x15 木色渐变棋盘，星位标记清晰；点击棋盘交叉点落下黑子，AI 几乎立即在合理位置落下白子并高亮；玩家可通过「悔棋」撤销到上一手重新思考，「新游戏」随时重置。当一方五子连珠时，获胜连线红色高亮并弹出胜负弹窗，点击「再来一局」继续。棋局中途刷新页面可自动恢复。木色棋盘配合黑白棋子，视觉舒适，手机上棋盘自动缩放、触屏可直接落子。

8. 能力总结

1. 一次生成完整可用：从需求到可双击运行的单文件游戏，全程约 5 分半，无需手工补代码
2. 技术含量扎实：四方向棋型评分、进攻/防守加权、五连判定与连线高亮，AI 有一定棋力
3. 交互细节到位：红圈高亮最后落子、悔棋撤销、胜负数持久化、刷新续局，体验闭环完整
4. 工程习惯良好：棋盘/评分/判定/持久化函数拆分清晰、高分 DPI 适配、移动端触屏支持，代码结构清晰可读

9. 总结

用码道开发五子棋这类网页游戏，最大的感受是「需求即产品」：把功能要点说清楚，码道就能给出包含完整技术方案与视觉风格的成品。对想快速体验人机对弈、或者刚学前端想看看「启发式评分 AI 是怎么写的」的同学，让码道先生成一份，再对照源码逐行读，是很好的学习路径。下一轮，我打算让码道继续挑战不同类型的网页应用，继续记录真实的开发过程。