生命游戏：三条规则一运行，方格里自己长出会动的图案

一个方格会不会活到下秒，只由它周围 8 个邻居决定。这三条规则滚起来，屏幕上会自己长出会滑行的图案。

这个 App 做什么

• 自动演化的细胞网格：新生与死亡规则是经典的 Conway B3/S23，方格按局部邻居数推进。
• 点击暂停与继续：拖动鼠标可直接添加活细胞，观察局部扰动如何扩散。
• 常用控制一屏可见：随机种子、清空、单步、速度滑块都放在面板里。
• 三种预设图案按钮：内含滑翔机等结构，一键开局看它能走出多远。
• 界面深色美观：把规则标注清楚，适合边玩边理解细胞自动机。

为什么值得看

• 它把复杂系统里“局部简单规则 + 大量个体”如何冒出全局模式，做成了一个可交互的视觉实验。
• 生命游戏核心只有三条计数规则，却能自发出现滑翔机、振荡子等稳定结构，很适合讲涌现。
• 演化、暂停和速度调节都顺手，打开页面几秒钟就能获得观察结论。

进入 AI 开发者空间

本文用码道 WebUI 版演示，不装任何本地软件，浏览器就能用。先打开：

https://devstation.developer.huaweicloud.com/aidevspace?utm_source=opcsfsq&utm_medium=wbwz

进入后选择「体验版」，首次使用会跳到华为云登录页，扫码登录一次，之后浏览器会话会复用；再按提示点击「同意」，让临时凭据自动配置并创建沙箱。

进入 AI 开发者空间主界面后，等左侧菜单加载出来，找到 CodeArts 并点击右侧的浏览器图标，打开码道 WebUI 对话窗口。

开通后有三种使用方式：WebUI（浏览器对话）、TUI（终端命令行）和桌面 IDE（IDE 插件）。本文用 WebUI 版演示。

准备环境：进入 CodeArts

进入 CodeArts：https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz

浏览器打开 CodeArts 后，按提示开通体验版，再回到上一步的 AI 开发者空间进入码道 WebUI。

任务描述

在码道 WebUI 输入框粘贴以下需求，回车发送：

请在 /workspace/game-of-life 目录下做一个单文件网页应用 index.html：康威生命游戏。画布显示自动演化的细胞网格，点击可暂停/继续，可拖动添加活细胞，提供随机种子、清空、步进、速度滑块、三种预设图案按钮，界面深色美观，规则标注清楚。完成后用 python3 -m http.server 8080 --directory /workspace/game-of-life 启动并告诉我访问地址。

这轮码道具体做了什么

• 在 /workspace/game-of-life 下创建单文件 index.html，把网格渲染、环形邻居、世代推进和控制面板都放进一个文件。
• 写入后没有第三方依赖，随随机种子开局后用 python3 -m http.server 8080 启动并给出预览地址。
• 画布和状态更新分开写，暂停、单步和连续演化互不干扰。

代码亮点

1. COUNT：数清楚每个细胞周围 8 个邻居

const COUNT = (g, r, c) => {
  let n = 0;
  for (let dr = -1; dr <= 1; dr++) {
    for (let dc = -1; dc <= 1; dc++) {
      if (dr === 0 && dc === 0) continue;
      const nr = (r + dr + ROWS) % ROWS;
      const nc = (c + dc + COLS) % COLS;
      n += g[nr][nc];
    }
  }
  return n;
};

这里的邻接采用取模回绕，让边界连到对面，形成环形世界。下一步只根据这个计数和当前的生死状态推进，规则本身不复杂，真正有趣的是它在迭代中长出来的图案。

验证与踩坑

• 随机种子一按，网格立刻从零散的活细胞进入演化状态。
• 滑翔机预设会沿斜对角平移，操作后能看到一个清晰的移动结构。

• 速度滑块拉高后画面仍能保持顺滑，没有出现明显掉帧。

本地复现

这是单文件 index.html，没有第三方依赖。保存到本地后双击用浏览器打开，或起一个本地静态服务：

python3 -m http.server 8080 --directory codearts-conway-life

浏览器访问 http://127.0.0.1:8080 即可。

生成页面和截图已同步到公开 Demo Park 仓库：

• Demo Park 仓库：https://atomgit.com/deli007/demo_park
• 本期目录：https://atomgit.com/deli007/demo_park/tree/main/codearts-conway-life

使用码道体会

• 这类规则简单的模拟，最怕把逻辑全塞进绘制循环。码道 WebUI 先写计数函数，再写世代推进和绘制，脉络比边想边堆容易复现。
• 看到几个图案后会发现：规则有周期性，不是每盘都会持续热闹，这正是细胞自动机值得观察的地方。

总结

生命游戏把三句局部规则还原成可玩的自组织沙盘，滑翔机等结构是很好的入门观察对象。后续还能加有限世界、催化规则或彩色世代，但单文件版本已经够清楚。