一段需求码道自动写出 563 行、约 15 KB 的单文件生命游戏——B3/S23 规则细胞自动机、速度可调、点击绘制/擦除、三档棋盘尺寸、代数与 FPS 统计、环面边界双击 HTML 就能玩分类: ai-development标签: CodeArts, AI编程, GameOfLife, 网页应用, Canvas难度: 初级读者: 前端开发者、编程学习者、技术写作者1. 开篇钩子我在码道 TUI 里输入了一段需求「做一个康威生命游戏Conway’s Game of Life网页应用单个 HTML 文件即可运行……」约 1 分 57 秒后一个 563 行、约 15 KB 的完整生命游戏就自动生成了基于经典 B3/S23 规则的细胞自动机Canvas 渲染圆角方块细胞「开始/暂停」控制演化、速度滑块 1~60 FPS 实时调节、单步推演随机初始化密度 28%、清空棋盘点击/拖动格子可手动绘制或擦除细胞30x20 / 50x30 / 80x50 三档棋盘尺寸代数、存活细胞数、实时 FPS 三项统计网格线与环面环绕边界开关。深色主题双击 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. 启动 TUIcodeartsAK/SK 获取https://codearts.huaweicloud.com/portal/settings/cli-auth还没有码道立即开通体验https://developer.huaweicloud.com/codeartsco.html?sourcedmzntgwsfsourceaddmzntgwwbwz安装完成后在命令行或 PowerShell 中输入codearts回车即可打开码道 TUI。把开发需求贴进输入框码道会自动分析并生成完整代码。3. 码道能力一览这次开发中码道展示了以下能力自然语言编程我说「生命游戏网页应用」码道直接理解成规则演化 绘制编辑 速度控制 统计可视化一整套方案自主技术选型Cell 状态用二维数组 双缓冲计算下一代B3/S23 规则一次到位渲染用 Canvas 圆角方块工程细节到位速度滑块实时改帧率、点击自动切换绘制/擦除模式、环面边界开关、touch-action 防触屏误滚动自检与收尾生成后自行验证文件存在与大小合理并逐条汇报功能清单4. 任务描述我想要一个康威生命游戏Conway’s Game of Life网页应用具体要求单个 HTML 文件即可运行不需要任何构建步骤基于康威生命游戏规则B3/S23的细胞自动机提供「开始/暂停」按钮控制演化可调节演化速度支持随机初始化、清空棋盘以及点击格子手动绘制/擦除细胞棋盘尺寸可调节如 30x20/50x30/80x50显示当前代数统计用 Canvas 渲染细胞用圆角方块支持网格线开关深色主题界面简洁支持移动端触屏操作5. 开发过程及真实截图我在码道 TUI 中贴入需求后码道开始拆解需求并生成代码生成过程中码道编写规则演化与触屏绘制逻辑代码逐行可见约 1 分 57 秒后码道汇报完成输出功能清单并提示文件位置双击生成的game-of-life.html在浏览器中直接运行点击「随机」后细胞群落开始演化代数与存活细胞数实时跳动6. 代码解析码道生成的代码是一个自包含的单页应用核心逻辑非常清晰规则演化遍历每个格子的 8 邻居统计活细胞数按 B3/S23 规则决定下一代生死functionnextGen(grid,w,h,torus){constnextcreateGrid(w,h);for(lety0;yh;y){for(letx0;xw;x){constncountNeighbors(grid,x,y,w,h,torus);next[y][x]grid[y][x]?(n2||n3):(n3);}}returnnext;}绘制与擦除监听 mousedown/touchstart 定位到格子首次点击根据当前格状态自动切换涂抹模式拖拽连续绘制canvas.addEventListener(mousedown,e{const{x,y}cellFromEvent(e);paintMode!grid[y][x];// 首次点击自动切换setCell(x,y,paintMode);canvas.addEventListener(mousemove,movePaint);});速度调节速度滑块 1~60 对应 FPS用 setTimeout 按间隔驱动演化循环speedRange.addEventListener(input,(){speedspeedRange.value;fpsText.textContentspeed;if(running)restartLoop();});触屏适配touchmove 手动映射到绘制逻辑并用touch-action: none防止页面滚动干扰canvas.addEventListener(touchmove,function(e){constte.touches[0];movePaint({clientX:t.clientX,clientY:t.clientY});},{passive:false});从这些代码可以看出码道不只把功能拼出来双缓冲演化、绘制模式自动切换、环面边界、触屏防滚动这些影响体验的细节也都处理得比较到位。7. 真实运行效果双击game-of-life.html即可开始游戏页面顶部是「康威生命游戏」标题和代数/存活细胞/FPS 三项统计中间是 Canvas 画布深色背景上绿色圆角方块代表活细胞下方依次是「开始/暂停」「单步」「随机」「清空」按钮、速度滑块1~60 FPS、棋盘尺寸下拉30x20/50x30/80x50、网格线与环面两个开关。点击「随机」生成密度 28% 的初始群落点「开始」后细胞按 B3/S23 规则演化滑翔机、振荡器等图案不断涌现点击或拖动画布可在任意位置绘制/擦除细胞切到 80x50 大棋盘看更大规模的演化。深色主题简洁手机上画布自动缩放、触屏可直接涂鸦。8. 能力总结一次生成完整可用从需求到可双击运行的单文件应用全程不到 2 分钟无需手工补代码技术含量扎实B3/S23 规则演化、双缓冲网格、Canvas 渲染、FPS 调速方案专业交互细节到位点击自动切换绘制/擦除、环面边界、网格线开关、触屏适配体验闭环完整工程习惯良好演化/渲染/绘制/统计函数拆分清晰、常量集中、响应式布局代码结构清晰可读9. 总结用码道开发生命游戏这类网页应用最大的感受是「需求即产品」把功能要点说清楚码道就能给出包含完整技术方案与视觉风格的成品。对想快速玩一把细胞自动机、或者刚学前端想看看「Canvas 动画 状态机是怎么写的」的同学让码道先生成一份再对照源码逐行读是很好的学习路径。下一轮我打算让码道继续挑战不同类型的网页应用继续记录真实的开发过程。