一段需求码道自动写出 472 行、约 14 KB 的单文件五子棋游戏——15x15 木色棋盘、启发式 AI 评分连五/活四/冲四/活三、点击落子 AI 自动回应、五连珠高亮弹窗、悔棋与胜负数持久化双击 HTML 就能下分类: 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-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. 启动 TUIcodeartsAK/SK 获取https://codearts.huaweicloud.com/portal/settings/cli-auth还没有码道立即开通体验https://developer.huaweicloud.com/codeartsco.html?sourcedmzntgwsfsourceaddmzntgwwbwz安装完成后在命令行或 PowerShell 中输入codearts回车即可打开码道 TUI。把开发需求贴进输入框码道会自动分析并生成完整代码。3. 码道能力一览这次开发中码道展示了以下能力自然语言编程我说「五子棋网页游戏」码道直接理解成棋盘绘制 AI 启发式评分 落子交互 胜负判定 持久化一整套方案自主技术选型AI 用四方向连子棋型评分连五/活四/冲四/活三等进攻分与防守分加权综合优先成五、必防对方成五工程细节到位最后落子红圈高亮、获胜连线高亮、悔棋撤销至玩家上一手、localStorage 续局、高 DPI 适配自检与收尾生成后自行验证关键逻辑并简要汇报实现要点4. 任务描述我想要一个五子棋Gomoku网页游戏具体要求单个 HTML 文件即可运行不需要任何构建步骤15x15 棋盘玩家执黑先手、AI 执白后手AI 使用启发式评分评估连子、活四、冲四、活三等棋型选择落点点击棋盘交叉点落子AI 自动回应并高亮最后落子五子连珠时弹出胜负提示并高亮获胜连线提供「新游戏」和「悔棋」按钮局面记录棋盘状态、胜负数用 localStorage 持久化木色棋盘背景界面简洁支持移动端触屏操作5. 开发过程及真实截图我在码道 TUI 中贴入需求后码道开始拆解需求并生成代码生成过程中码道设计 AI 评分与防守逻辑、胜负判定代码逐行可见约 5 分 18 秒后码道汇报完成输出实现要点并提示文件位置双击生成的gomoku.html在浏览器中直接运行玩家落黑子后 AI 自动应白子棋盘与统计正常6. 代码解析码道生成的代码是一个自包含的单页应用核心逻辑非常清晰棋盘与落子Canvas 绘制 15x15 木色渐变棋盘点击时把鼠标坐标映射到最近的交叉点落黑子后调用 AIfunctiongetPos(clientX,clientY){constrectcanvas.getBoundingClientRect();constcx(clientX-rect.left)/rect.width*w;constcy(clientY-rect.top)/rect.height*h;return{x:Math.round(cx),y:Math.round(cy)};}AI 评分对每个空点沿横竖撇捺四方向统计连子棋型按分值表评分进攻分 防守分×8.9 综合选点// 棋型分值: 连五 199999 / 活四 10000 / 冲四 1000 / 活三 1000 / 冲三 100 / 活二 100 / 眠二 10constscoreattackScore*1.0defendScore*8.9;胜负判定落子后沿四方向检查是否五连命中则红色连线高亮并弹窗functionendGame(text){gameOvertrue;draw();saveState();document.getElementById(modalText).textContenttext;document.getElementById(modal).classList.add(show);}持久化棋盘状态、落子历史与胜负数写入 localStorage刷新页面自动恢复对局functionsaveState(){localStorage.setItem(gomokuBoard,JSON.stringify(board));localStorage.setItem(gomokuStats,JSON.stringify(stats));}从这些代码可以看出码道不只把功能拼出来棋型评分、防守权重、悔棋历史、续局恢复这些影响体验的细节也都处理得比较到位。7. 真实运行效果双击gomoku.html即可开始对弈页面顶部显示「胜 0 负 0」统计中间是 15x15 木色渐变棋盘星位标记清晰点击棋盘交叉点落下黑子AI 几乎立即在合理位置落下白子并高亮玩家可通过「悔棋」撤销到上一手重新思考「新游戏」随时重置。当一方五子连珠时获胜连线红色高亮并弹出胜负弹窗点击「再来一局」继续。棋局中途刷新页面可自动恢复。木色棋盘配合黑白棋子视觉舒适手机上棋盘自动缩放、触屏可直接落子。8. 能力总结一次生成完整可用从需求到可双击运行的单文件游戏全程约 5 分半无需手工补代码技术含量扎实四方向棋型评分、进攻/防守加权、五连判定与连线高亮AI 有一定棋力交互细节到位红圈高亮最后落子、悔棋撤销、胜负数持久化、刷新续局体验闭环完整工程习惯良好棋盘/评分/判定/持久化函数拆分清晰、高分 DPI 适配、移动端触屏支持代码结构清晰可读9. 总结用码道开发五子棋这类网页游戏最大的感受是「需求即产品」把功能要点说清楚码道就能给出包含完整技术方案与视觉风格的成品。对想快速体验人机对弈、或者刚学前端想看看「启发式评分 AI 是怎么写的」的同学让码道先生成一份再对照源码逐行读是很好的学习路径。下一轮我打算让码道继续挑战不同类型的网页应用继续记录真实的开发过程。 用码道 AI 编程助手开发五子棋网页游戏
一段需求码道自动写出 472 行、约 14 KB 的单文件五子棋游戏——15x15 木色棋盘、启发式 AI 评分连五/活四/冲四/活三、点击落子 AI 自动回应、五连珠高亮弹窗、悔棋与胜负数持久化双击 HTML 就能下分类: 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-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. 启动 TUIcodeartsAK/SK 获取https://codearts.huaweicloud.com/portal/settings/cli-auth还没有码道立即开通体验https://developer.huaweicloud.com/codeartsco.html?sourcedmzntgwsfsourceaddmzntgwwbwz安装完成后在命令行或 PowerShell 中输入codearts回车即可打开码道 TUI。把开发需求贴进输入框码道会自动分析并生成完整代码。3. 码道能力一览这次开发中码道展示了以下能力自然语言编程我说「五子棋网页游戏」码道直接理解成棋盘绘制 AI 启发式评分 落子交互 胜负判定 持久化一整套方案自主技术选型AI 用四方向连子棋型评分连五/活四/冲四/活三等进攻分与防守分加权综合优先成五、必防对方成五工程细节到位最后落子红圈高亮、获胜连线高亮、悔棋撤销至玩家上一手、localStorage 续局、高 DPI 适配自检与收尾生成后自行验证关键逻辑并简要汇报实现要点4. 任务描述我想要一个五子棋Gomoku网页游戏具体要求单个 HTML 文件即可运行不需要任何构建步骤15x15 棋盘玩家执黑先手、AI 执白后手AI 使用启发式评分评估连子、活四、冲四、活三等棋型选择落点点击棋盘交叉点落子AI 自动回应并高亮最后落子五子连珠时弹出胜负提示并高亮获胜连线提供「新游戏」和「悔棋」按钮局面记录棋盘状态、胜负数用 localStorage 持久化木色棋盘背景界面简洁支持移动端触屏操作5. 开发过程及真实截图我在码道 TUI 中贴入需求后码道开始拆解需求并生成代码生成过程中码道设计 AI 评分与防守逻辑、胜负判定代码逐行可见约 5 分 18 秒后码道汇报完成输出实现要点并提示文件位置双击生成的gomoku.html在浏览器中直接运行玩家落黑子后 AI 自动应白子棋盘与统计正常6. 代码解析码道生成的代码是一个自包含的单页应用核心逻辑非常清晰棋盘与落子Canvas 绘制 15x15 木色渐变棋盘点击时把鼠标坐标映射到最近的交叉点落黑子后调用 AIfunctiongetPos(clientX,clientY){constrectcanvas.getBoundingClientRect();constcx(clientX-rect.left)/rect.width*w;constcy(clientY-rect.top)/rect.height*h;return{x:Math.round(cx),y:Math.round(cy)};}AI 评分对每个空点沿横竖撇捺四方向统计连子棋型按分值表评分进攻分 防守分×8.9 综合选点// 棋型分值: 连五 199999 / 活四 10000 / 冲四 1000 / 活三 1000 / 冲三 100 / 活二 100 / 眠二 10constscoreattackScore*1.0defendScore*8.9;胜负判定落子后沿四方向检查是否五连命中则红色连线高亮并弹窗functionendGame(text){gameOvertrue;draw();saveState();document.getElementById(modalText).textContenttext;document.getElementById(modal).classList.add(show);}持久化棋盘状态、落子历史与胜负数写入 localStorage刷新页面自动恢复对局functionsaveState(){localStorage.setItem(gomokuBoard,JSON.stringify(board));localStorage.setItem(gomokuStats,JSON.stringify(stats));}从这些代码可以看出码道不只把功能拼出来棋型评分、防守权重、悔棋历史、续局恢复这些影响体验的细节也都处理得比较到位。7. 真实运行效果双击gomoku.html即可开始对弈页面顶部显示「胜 0 负 0」统计中间是 15x15 木色渐变棋盘星位标记清晰点击棋盘交叉点落下黑子AI 几乎立即在合理位置落下白子并高亮玩家可通过「悔棋」撤销到上一手重新思考「新游戏」随时重置。当一方五子连珠时获胜连线红色高亮并弹出胜负弹窗点击「再来一局」继续。棋局中途刷新页面可自动恢复。木色棋盘配合黑白棋子视觉舒适手机上棋盘自动缩放、触屏可直接落子。8. 能力总结一次生成完整可用从需求到可双击运行的单文件游戏全程约 5 分半无需手工补代码技术含量扎实四方向棋型评分、进攻/防守加权、五连判定与连线高亮AI 有一定棋力交互细节到位红圈高亮最后落子、悔棋撤销、胜负数持久化、刷新续局体验闭环完整工程习惯良好棋盘/评分/判定/持久化函数拆分清晰、高分 DPI 适配、移动端触屏支持代码结构清晰可读9. 总结用码道开发五子棋这类网页游戏最大的感受是「需求即产品」把功能要点说清楚码道就能给出包含完整技术方案与视觉风格的成品。对想快速体验人机对弈、或者刚学前端想看看「启发式评分 AI 是怎么写的」的同学让码道先生成一份再对照源码逐行读是很好的学习路径。下一轮我打算让码道继续挑战不同类型的网页应用继续记录真实的开发过程。