用码道 AI 编程助手开发康威生命游戏网页应用

分类: 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 -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. 自然语言编程：我说「生命游戏网页应用」，码道直接理解成规则演化 + 绘制编辑 + 速度控制 + 统计可视化一整套方案
2. 自主技术选型：Cell 状态用二维数组 + 双缓冲计算下一代，B3/S23 规则一次到位；渲染用 Canvas 圆角方块
3. 工程细节到位：速度滑块实时改帧率、点击自动切换绘制/擦除模式、环面边界开关、touch-action 防触屏误滚动
4. 自检与收尾：生成后自行验证文件存在与大小合理，并逐条汇报功能清单

4. 任务描述

我想要一个康威生命游戏（Conway’s Game of Life）网页应用，具体要求：

1. 单个 HTML 文件即可运行，不需要任何构建步骤
2. 基于康威生命游戏规则（B3/S23）的细胞自动机
3. 提供「开始/暂停」按钮控制演化，可调节演化速度
4. 支持随机初始化、清空棋盘，以及点击格子手动绘制/擦除细胞
5. 棋盘尺寸可调节（如 30x20/50x30/80x50）
6. 显示当前代数统计
7. 用 Canvas 渲染，细胞用圆角方块，支持网格线开关
8. 深色主题，界面简洁，支持移动端触屏操作

5. 开发过程及真实截图

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

生成过程中，码道编写规则演化与触屏绘制逻辑，代码逐行可见：

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

双击生成的 game-of-life.html 在浏览器中直接运行，点击「随机」后细胞群落开始演化，代数与存活细胞数实时跳动：

6. 代码解析

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

规则演化：遍历每个格子的 8 邻居统计活细胞数，按 B3/S23 规则决定下一代生死：

function nextGen(grid, w, h, torus) {const next = createGrid(w, h);for (let y = 0; y < h; y++) {for (let x = 0; x < w; x++) {const n = countNeighbors(grid, x, y, w, h, torus);next[y][x] = grid[y][x] ? (n === 2 || n === 3) : (n === 3);}}return next;}

绘制与擦除：监听 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', () => {speed = +speedRange.value;fpsText.textContent = speed;if (running) restartLoop();});

触屏适配：touchmove 手动映射到绘制逻辑并用 touch-action: none 防止页面滚动干扰：

canvas.addEventListener('touchmove', function (e) {const t = e.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. 能力总结

1. 一次生成完整可用：从需求到可双击运行的单文件应用，全程不到 2 分钟，无需手工补代码
2. 技术含量扎实：B3/S23 规则演化、双缓冲网格、Canvas 渲染、FPS 调速，方案专业
3. 交互细节到位：点击自动切换绘制/擦除、环面边界、网格线开关、触屏适配，体验闭环完整
4. 工程习惯良好：演化/渲染/绘制/统计函数拆分清晰、常量集中、响应式布局，代码结构清晰可读

9. 总结

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