教程文档示例工程【免费下载链接】website-archiveArchive of the Coding Train website (first version)项目地址https://gitcode.com/gh_mirrors/we/website-archive点击查看免费下载康威生命游戏Conways Game of Life是元胞自动机Cellular Automata最经典的入门案例也是 Coding Challenge #85 的核心主题。本文以该编码挑战为骨架完整讲解规则、二维数组建模、邻居计数与 p5.js 渲染实现并结合仓库中的 sketch.js 与 Processing 版本源码逐行剖析读完你将能独立写出可运行的生命游戏模拟器并理解所有元胞自动机的通用编程模式。一、挑战概述一句话的目标原文档_CodingChallenges/085-the-game-of-life.md对本次挑战的定位非常简洁In this coding challenge, I attempt to code Conways Game of Life cellular automata simulation in JavaScript using the p5.js library.即使用 p5.js 库用 JavaScript 编写康威生命游戏的元胞自动机模拟。挑战视频编号 85发布于 2017-12-11front matter 中的date: 2017-12-11对应仓库目录为CC_085_The_Game_of_Life包含 P5index.htmlsketch.js与 ProcessingCC_085_The_Game_of_Life.pde两套完整实现代码结构几乎一一对应便于跨语言对照学习。二、康威生命游戏的四大规则生命游戏是一个二维的、基于网格grid的元胞自动机每个格子称为一个细胞cell只有两种状态——存活1白色或死亡0黑色。时间按代generation离散推进每一代的状态只由上一代自身状态 周围 8 个邻居的存活数量决定。四条规则这也是后续代码next[i][j]计算的直接依据孤单致死Underpopulation存活细胞若周围存活邻居数neighbors 2下一代死亡。过密致死Overpopulation存活细胞若周围存活邻居数neighbors 3下一代死亡。存活Survival存活细胞若周围存活邻居数neighbors 2或neighbors 3下一代继续存活。繁殖Birth / Reproduction死亡细胞若周围存活邻居数恰好为neighbors 3下一代变为存活。在 sketch.js 中这四条规则被浓缩为两行判断if (state 0 neighbors 3) { next[i][j] 1; // 繁殖死细胞恰好 3 个活邻居 → 复活 } else if (state 1 (neighbors 2 || neighbors 3)) { next[i][j] 0; // 孤单致死 / 过密致死 } else { next[i][j] state; // 其余情况2 或 3 个邻居保持原状态 }Processing 版本CC_085_The_Game_of_Life.pde逻辑完全一致只是把grid换成int[][]、next换成int[][]可见这套规则与语言无关是整个模拟的引擎。规则出处参考康威生命游戏维基百科条目 与 《数学游戏》专栏Scientific American, 1970 年 10 月这两条外部资料被原文档收录在 front matter 的links字段中。三、用二维数组建模网格生命游戏的核心数据结构是二维数组。由于 JavaScript 原生不支持真正的多维数组挑战中专门封装了一个make2DArray(cols, rows)工厂函数来创建数组的数组function make2DArray(cols, rows) { let arr new Array(cols); // 外层列 for (let i 0; i arr.length; i) { arr[i] new Array(rows); // 内层行 } return arr; }对应的全局变量与画布参数sketch.js#L16-L19变量含义取值resolution每个细胞的边长像素10cols列数 width / resolution画布 600px →60rows行数 height / resolution画布 400px →40grid二维数组grid[i][j]取 0 或 1初始随机填充在setup()中画布被设为createCanvas(600, 400)因此网格是60 列 × 40 行、共 2400 个细胞。随后用嵌套for循环对每个细胞做随机初始化grid[i][j] floor(random(2))即以 50% 概率随机生成初始存活/死亡分布——这也是观察生命游戏从混沌演化出稳定图案的经典起点。前置知识如果不熟悉二维数组的创建、初始化与嵌套循环遍历可先阅读仓库内配套教程 《2D Arrays in JavaScript》另外原文档还关联了更早一期的《The Game of Life》Processing 版讲解_more/archive/nature-of-code/7-Cellular-Automata/7.3-The-Game-of-Life.md可对照理解同一算法在 Java 与 JavaScript 中的差异。四、邻居计数与环形环绕边界生命游戏每一代都要为每个细胞统计其8 个邻居中的存活数量。countNeighbors函数用两层for循环遍历i -1..1、j -1..1的 3×3 邻域关键技巧在于边界处理function countNeighbors(grid, x, y) { let sum 0; for (let i -1; i 2; i) { for (let j -1; j 2; j) { let col (x i cols) % cols; // 列方向环绕wrapping let row (y j rows) % rows; // 行方向环绕 sum grid[col][row]; } } sum - grid[x][y]; // 减去自己避免把自己算进邻居 return sum; }这里有两个值得深究的实现细节取模运算实现环形世界torus(x i cols) % cols让网格左、右、上、下边缘互相连通——最左列细胞可以看到最右列的邻居最顶行能看到最底行。这是很多生命游戏实现默认采用的无限平面近似策略避免边界细胞因邻居不足而产生失真。关于取模运算本身的原理原文档关联了 Golan Levin 的 《The Modulo Operator》 客座教程。先加后减避免分支判断循环把 3×3 共 9 个格子的值全部累加包括细胞自己最后用sum - grid[x][y]一次性剔除自身比在循环内加if判断更简洁高效。五、双缓冲为什么必须用next数组这是元胞自动机最容易踩的坑也是本挑战代码中最关键的设计决策。draw()中没有直接修改grid而是先新建一个空的next数组把根据规则计算出的下一代状态全部写入next等整个网格计算完毕后才执行grid next完成整体替换sketch.js#L49-L69。原因在于元胞自动机的状态更新必须同步进行。每个细胞的新状态只能由上一代的全局状态决定如果边遍历边修改grid那么右侧、下方尚未遍历的细胞就会读到已经更新过的邻居导致同一代内传播错误演化结果完全失真。next数组相当于一个缓冲区buffer保证所有细胞都基于同一代快照计算——这也是并行计算中双缓冲double buffering思想的直观体现。渲染部分同样在draw()中完成先background(0)清屏再遍历所有细胞仅对存活细胞grid[i][j] 1绘制白色方块且每格缩小 1 像素rect(x, y, resolution - 1, resolution - 1)以形成网格线background(0); for (let i 0; i cols; i) { for (let j 0; j rows; j) { let x i * resolution; let y j * resolution; if (grid[i][j] 1) { fill(255); stroke(0); rect(x, y, resolution - 1, resolution - 1); } } }六、运行方式P5 网页版与 Processing 版仓库为同一挑战提供了两种运行入口代码逻辑完全同构1. p5.js 网页版推荐零依赖入口文件P5/index.html逻辑文件P5/sketch.jsindex.html通过 CDN 引入 p5.js 1.4.1再加载本地sketch.jsscript typetext/javascript srchttps://cdn.jsdelivr.net/npm/p51.4.1/lib/p5.min.js/script script typetext/javascript srcsketch.js/script直接浏览器打开该 HTML 文件即可看到生命游戏在 600×400 画布上自动演化。2. ProcessingJava版入口文件CC_085_The_Game_of_Life.pde.pde文件用 Processing IDE或processing-java命令行工具打开运行。其源码注释明确标注Originally written using p5.js两种语言的函数一一对应createCanvas↔sizefloor(random(2))↔floor(random(2))background/fill/stroke/rect均同名非常适合作为同一算法、两种语言的对照练习。提示Processing 版同样实现了环形边界(x i cols) % cols与双缓冲int[][] next new int[cols][rows];后grid next;可逐行与 p5.js 版对比加深对语言差异动态类型 vs 静态类型、数组声明方式的理解。七、扩展玩法与社区贡献生命游戏的价值远不止跑起来。原文档的 front matter 中收录了contributions字段记录了社区在本次挑战基础上衍生的大量变体可作为功能扩展的直接灵感清单交互式网格Knut Jackowski 的 editable grid、Ayush Koul 的 Editable, Playable and with brief info、Sungyoung Kim 的 with user interactions!——用鼠标点击绘制/擦除细胞让用户手动摆放图案后再启动演化界面与框架变体React.js 版Fi Graham、Saswat Dash、Melissa Longenberger、vanilla JS 版Shekhar Tyagi、LÖVE/Lua 版vinnyI-afk、Pygame/Python 版Pathik Ghugare、C 语言浏览器版Imtiaz Kabir、terminal commands版Andrew Y视觉效果升级Colorful Game of LifeJamie McCrory、The Greg of LifeGreg Kreisman、Life Game CanvasRyosuke Osaki算法与数据结构优化Rick Sidwell 的 Yet Another Life 使用**稀疏数组sparse arrays**大幅降低大网格的内存占用——从源码结构看这是针对全量二维数组方案的一种典型性能优化方向创意衍生Photo to cellular automataLenoir Christopher把照片像素映射为初始细胞状态、Game of Life With PatternsHoangTran内置经典图案库滑翔机、振荡器等。这些贡献分布在各社区作者的独立仓库中仓库本体的contributions列表_CodingChallenges/085-the-game-of-life.md 的 front matter保留了完整作者与来源链接便于检索和借鉴。八、小结从生命游戏到元胞自动机通过本挑战你实际上掌握了任意二维元胞自动机的通用编程骨架建模用make2DArray构造二维数组表示网格状态演化countNeighbors统计邻域用规则函数生成下一代同步更新next缓冲区 grid next保证一代一快照渲染p5.js 的rect/fill把数组状态可视化。康威生命游戏只是这个框架下规则最经典的一个实例——把countNeighbors换成左右邻居之和就得到一维规则 30/90初等元胞自动机换成连续数值与距离加权就得到 Reaction-Diffusion、流场等更复杂的模拟仓库中的 CC_013_ReactionDiffusion 正是同一编程思路的进阶挑战。理解本次的四个规则与双缓冲机制你就拥有了探索整个元胞自动机家族的第一把钥匙。赞分享教程文档示例工程【免费下载链接】website-archiveArchive of the Coding Train website (first version)项目地址https://gitcode.com/gh_mirrors/we/website-archive点击查看免费下载相关推荐用 p5.js 复刻 Agar.io 基础游戏机制Coding Challenge 32.1 全解析用 p5.js 复刻 Agar.io 基础游戏机制Coding Challenge 32.1 全解析 这篇技术指南围绕 Coding TrainThe Co教程文档示例工程用 Yew 实现康威生命游戏从细胞自动机核心到交互式 Web 界面用 Yew 实现康威生命游戏从细胞自动机核心到交互式 Web 界面 本篇技术指南以 Yew 官方示例 examples/game_of_life https:前端Web框架用 p5.js 复刻经典扫雷游戏Minesweeper Coding Challenge 71 源码级实战解析用 p5.js 复刻经典扫雷游戏Minesweeper Coding Challenge 71 源码级实战解析 导读 本文基于 Coding TrainTh教程文档示例工程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
教程文档示例工程【免费下载链接】website-archiveArchive of the Coding Train website (first version)项目地址https://gitcode.com/gh_mirrors/we/website-archive点击查看免费下载康威生命游戏Conways Game of Life是元胞自动机Cellular Automata最经典的入门案例也是 Coding Challenge #85 的核心主题。本文以该编码挑战为骨架完整讲解规则、二维数组建模、邻居计数与 p5.js 渲染实现并结合仓库中的 sketch.js 与 Processing 版本源码逐行剖析读完你将能独立写出可运行的生命游戏模拟器并理解所有元胞自动机的通用编程模式。一、挑战概述一句话的目标原文档_CodingChallenges/085-the-game-of-life.md对本次挑战的定位非常简洁In this coding challenge, I attempt to code Conways Game of Life cellular automata simulation in JavaScript using the p5.js library.即使用 p5.js 库用 JavaScript 编写康威生命游戏的元胞自动机模拟。挑战视频编号 85发布于 2017-12-11front matter 中的date: 2017-12-11对应仓库目录为CC_085_The_Game_of_Life包含 P5index.htmlsketch.js与 ProcessingCC_085_The_Game_of_Life.pde两套完整实现代码结构几乎一一对应便于跨语言对照学习。二、康威生命游戏的四大规则生命游戏是一个二维的、基于网格grid的元胞自动机每个格子称为一个细胞cell只有两种状态——存活1白色或死亡0黑色。时间按代generation离散推进每一代的状态只由上一代自身状态 周围 8 个邻居的存活数量决定。四条规则这也是后续代码next[i][j]计算的直接依据孤单致死Underpopulation存活细胞若周围存活邻居数neighbors 2下一代死亡。过密致死Overpopulation存活细胞若周围存活邻居数neighbors 3下一代死亡。存活Survival存活细胞若周围存活邻居数neighbors 2或neighbors 3下一代继续存活。繁殖Birth / Reproduction死亡细胞若周围存活邻居数恰好为neighbors 3下一代变为存活。在 sketch.js 中这四条规则被浓缩为两行判断if (state 0 neighbors 3) { next[i][j] 1; // 繁殖死细胞恰好 3 个活邻居 → 复活 } else if (state 1 (neighbors 2 || neighbors 3)) { next[i][j] 0; // 孤单致死 / 过密致死 } else { next[i][j] state; // 其余情况2 或 3 个邻居保持原状态 }Processing 版本CC_085_The_Game_of_Life.pde逻辑完全一致只是把grid换成int[][]、next换成int[][]可见这套规则与语言无关是整个模拟的引擎。规则出处参考康威生命游戏维基百科条目 与 《数学游戏》专栏Scientific American, 1970 年 10 月这两条外部资料被原文档收录在 front matter 的links字段中。三、用二维数组建模网格生命游戏的核心数据结构是二维数组。由于 JavaScript 原生不支持真正的多维数组挑战中专门封装了一个make2DArray(cols, rows)工厂函数来创建数组的数组function make2DArray(cols, rows) { let arr new Array(cols); // 外层列 for (let i 0; i arr.length; i) { arr[i] new Array(rows); // 内层行 } return arr; }对应的全局变量与画布参数sketch.js#L16-L19变量含义取值resolution每个细胞的边长像素10cols列数 width / resolution画布 600px →60rows行数 height / resolution画布 400px →40grid二维数组grid[i][j]取 0 或 1初始随机填充在setup()中画布被设为createCanvas(600, 400)因此网格是60 列 × 40 行、共 2400 个细胞。随后用嵌套for循环对每个细胞做随机初始化grid[i][j] floor(random(2))即以 50% 概率随机生成初始存活/死亡分布——这也是观察生命游戏从混沌演化出稳定图案的经典起点。前置知识如果不熟悉二维数组的创建、初始化与嵌套循环遍历可先阅读仓库内配套教程 《2D Arrays in JavaScript》另外原文档还关联了更早一期的《The Game of Life》Processing 版讲解_more/archive/nature-of-code/7-Cellular-Automata/7.3-The-Game-of-Life.md可对照理解同一算法在 Java 与 JavaScript 中的差异。四、邻居计数与环形环绕边界生命游戏每一代都要为每个细胞统计其8 个邻居中的存活数量。countNeighbors函数用两层for循环遍历i -1..1、j -1..1的 3×3 邻域关键技巧在于边界处理function countNeighbors(grid, x, y) { let sum 0; for (let i -1; i 2; i) { for (let j -1; j 2; j) { let col (x i cols) % cols; // 列方向环绕wrapping let row (y j rows) % rows; // 行方向环绕 sum grid[col][row]; } } sum - grid[x][y]; // 减去自己避免把自己算进邻居 return sum; }这里有两个值得深究的实现细节取模运算实现环形世界torus(x i cols) % cols让网格左、右、上、下边缘互相连通——最左列细胞可以看到最右列的邻居最顶行能看到最底行。这是很多生命游戏实现默认采用的无限平面近似策略避免边界细胞因邻居不足而产生失真。关于取模运算本身的原理原文档关联了 Golan Levin 的 《The Modulo Operator》 客座教程。先加后减避免分支判断循环把 3×3 共 9 个格子的值全部累加包括细胞自己最后用sum - grid[x][y]一次性剔除自身比在循环内加if判断更简洁高效。五、双缓冲为什么必须用next数组这是元胞自动机最容易踩的坑也是本挑战代码中最关键的设计决策。draw()中没有直接修改grid而是先新建一个空的next数组把根据规则计算出的下一代状态全部写入next等整个网格计算完毕后才执行grid next完成整体替换sketch.js#L49-L69。原因在于元胞自动机的状态更新必须同步进行。每个细胞的新状态只能由上一代的全局状态决定如果边遍历边修改grid那么右侧、下方尚未遍历的细胞就会读到已经更新过的邻居导致同一代内传播错误演化结果完全失真。next数组相当于一个缓冲区buffer保证所有细胞都基于同一代快照计算——这也是并行计算中双缓冲double buffering思想的直观体现。渲染部分同样在draw()中完成先background(0)清屏再遍历所有细胞仅对存活细胞grid[i][j] 1绘制白色方块且每格缩小 1 像素rect(x, y, resolution - 1, resolution - 1)以形成网格线background(0); for (let i 0; i cols; i) { for (let j 0; j rows; j) { let x i * resolution; let y j * resolution; if (grid[i][j] 1) { fill(255); stroke(0); rect(x, y, resolution - 1, resolution - 1); } } }六、运行方式P5 网页版与 Processing 版仓库为同一挑战提供了两种运行入口代码逻辑完全同构1. p5.js 网页版推荐零依赖入口文件P5/index.html逻辑文件P5/sketch.jsindex.html通过 CDN 引入 p5.js 1.4.1再加载本地sketch.jsscript typetext/javascript srchttps://cdn.jsdelivr.net/npm/p51.4.1/lib/p5.min.js/script script typetext/javascript srcsketch.js/script直接浏览器打开该 HTML 文件即可看到生命游戏在 600×400 画布上自动演化。2. ProcessingJava版入口文件CC_085_The_Game_of_Life.pde.pde文件用 Processing IDE或processing-java命令行工具打开运行。其源码注释明确标注Originally written using p5.js两种语言的函数一一对应createCanvas↔sizefloor(random(2))↔floor(random(2))background/fill/stroke/rect均同名非常适合作为同一算法、两种语言的对照练习。提示Processing 版同样实现了环形边界(x i cols) % cols与双缓冲int[][] next new int[cols][rows];后grid next;可逐行与 p5.js 版对比加深对语言差异动态类型 vs 静态类型、数组声明方式的理解。七、扩展玩法与社区贡献生命游戏的价值远不止跑起来。原文档的 front matter 中收录了contributions字段记录了社区在本次挑战基础上衍生的大量变体可作为功能扩展的直接灵感清单交互式网格Knut Jackowski 的 editable grid、Ayush Koul 的 Editable, Playable and with brief info、Sungyoung Kim 的 with user interactions!——用鼠标点击绘制/擦除细胞让用户手动摆放图案后再启动演化界面与框架变体React.js 版Fi Graham、Saswat Dash、Melissa Longenberger、vanilla JS 版Shekhar Tyagi、LÖVE/Lua 版vinnyI-afk、Pygame/Python 版Pathik Ghugare、C 语言浏览器版Imtiaz Kabir、terminal commands版Andrew Y视觉效果升级Colorful Game of LifeJamie McCrory、The Greg of LifeGreg Kreisman、Life Game CanvasRyosuke Osaki算法与数据结构优化Rick Sidwell 的 Yet Another Life 使用**稀疏数组sparse arrays**大幅降低大网格的内存占用——从源码结构看这是针对全量二维数组方案的一种典型性能优化方向创意衍生Photo to cellular automataLenoir Christopher把照片像素映射为初始细胞状态、Game of Life With PatternsHoangTran内置经典图案库滑翔机、振荡器等。这些贡献分布在各社区作者的独立仓库中仓库本体的contributions列表_CodingChallenges/085-the-game-of-life.md 的 front matter保留了完整作者与来源链接便于检索和借鉴。八、小结从生命游戏到元胞自动机通过本挑战你实际上掌握了任意二维元胞自动机的通用编程骨架建模用make2DArray构造二维数组表示网格状态演化countNeighbors统计邻域用规则函数生成下一代同步更新next缓冲区 grid next保证一代一快照渲染p5.js 的rect/fill把数组状态可视化。康威生命游戏只是这个框架下规则最经典的一个实例——把countNeighbors换成左右邻居之和就得到一维规则 30/90初等元胞自动机换成连续数值与距离加权就得到 Reaction-Diffusion、流场等更复杂的模拟仓库中的 CC_013_ReactionDiffusion 正是同一编程思路的进阶挑战。理解本次的四个规则与双缓冲机制你就拥有了探索整个元胞自动机家族的第一把钥匙。赞分享教程文档示例工程【免费下载链接】website-archiveArchive of the Coding Train website (first version)项目地址https://gitcode.com/gh_mirrors/we/website-archive点击查看免费下载相关推荐用 p5.js 复刻 Agar.io 基础游戏机制Coding Challenge 32.1 全解析用 p5.js 复刻 Agar.io 基础游戏机制Coding Challenge 32.1 全解析 这篇技术指南围绕 Coding TrainThe Co教程文档示例工程用 Yew 实现康威生命游戏从细胞自动机核心到交互式 Web 界面用 Yew 实现康威生命游戏从细胞自动机核心到交互式 Web 界面 本篇技术指南以 Yew 官方示例 examples/game_of_life https:前端Web框架用 p5.js 复刻经典扫雷游戏Minesweeper Coding Challenge 71 源码级实战解析用 p5.js 复刻经典扫雷游戏Minesweeper Coding Challenge 71 源码级实战解析 导读 本文基于 Coding TrainTh教程文档示例工程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
