生命游戏

它并不是真正的“游戏”——更像是数学家约翰·何顿·康威的一套规则。想象一个细胞网格，就像电子表格或一个 <table>。每个单元格要么存活，要么死亡。“回合”一个接一个地进行。在每一轮中，都有一些规则决定活细胞是否应该继续存活或死亡，以及死细胞是否应该继续死亡或变成活细胞。

规则

它有点像模拟现实生活环境。细胞可能因人口过少或过多而死亡，并且只能在完美的情况下存活。规则非常简单

1. 活细胞 – 活邻居少于 2 个 – 死亡（人口过少）。
2. 活细胞 – 2 或 3 个邻居 – 继续存活（完美情况）。
3. 活细胞 – 活邻居超过 3 个 – 死亡（人口过多）。
4. 死细胞 – 恰好有三个活邻居 – 变成活细胞（繁殖）。

为什么要谈论这个？

我对此感到非常怀旧。生命游戏的视觉版本是我在高中做的第一个编程项目。或者如果不是第一个，那就是第一个让我“恍然大悟”的项目，让我意识到编程和设计可以非常有趣和令人着迷。

给任何程序员提出这个问题，他们可能会用稍微不同的方式解决它。

• 应该用什么语言编写？
• 我们如何将其干净地构建？
• 我们如何使其计算速度更快？
• 在它变慢之前，我们可以把它做多大？
• 我们如何最好地存储数据和状态？
• 如何处理边缘？

给任何设计师提出这个问题，结果看起来都会不同。

• 什么颜色有意义？
• 除了存活和死亡之外，我们是否应该为状态使用不同的颜色？
• 单元格应该多大才有趣？
• 回合的速度应该多快才有趣，而不是让人不知所措？
• 你能与之互动吗？
• 你能向前和向后穿越时间吗？
• 如何打开和关闭单元格？点击？拖动？随机化？
• 可以创建哪些最有趣的形状？我们能否展示这些形状？

我之所以提出这一点，还因为我记得几年前尝试制作一个演示，那个演示非常糟糕，以至于我嫉妒所有那些酷炫的演示。我基本上使用 jQuery 查询 DOM 以获取每个单元格的邻居，效率低下得我可能应该被天线打一顿。

示例

我的第一个版本是在旧款苹果电脑上的 Turbo Pascal 上开发的。我很高兴地知道，这个小小的视觉数学练习如今仍然活跃，人们正在使用我构建的工具来制作版本。即使在使用相同技术的演示中，方法也可能有所不同！我还有一个集合。

Canvas 上的 JavaScript

带有一点 jQuery

查看 John H Moore 在 CodePen 上创作的笔 康威的生命游戏（@john-h-moore）。

不带 jQuery

查看 Qbit 在 CodePen 上创作的笔 生命游戏（@Qbit42）。

查看 Dennis Kerzig 在 CodePen 上创作的笔 Canvas 上的生命游戏（@wottpal）。

<table> 上的 JavaScript

查看 Alan R. Soares 在 CodePen 上创作的笔 payKn（@alanrsoares）。

Backbone.js

查看 Eric Miller 在 CodePen 上创作的笔 Backbone 中的生命游戏（@SimpleAsCouldBe）。

使用 CSS box-shadow 绘制单元格

查看 Joris van de Donk 在 CodePen 上创作的笔 box-shadow 生命游戏（@jorisvddonk）。

在 CoffeeScript 中

查看 Hanganu Petru-Alin 在 CodePen 上创作的笔 mctCv（@Lynku）。

在 D3.js 中

快速！

查看 Reed Spool 在 CodePen 上创作的笔 生命游戏 – D3（@reedspool）。

---

这些仅仅是前端示例，但您可以在任何语言中轻松找到示例。查看 Golly 以获取原生应用程序版本，并查看维基百科页面以获取更多信息。关于生命游戏，一个特别有趣的事情是各种奇怪的结构都是可能的，这些结构以奇怪的方式“创造生命”或维持生命。

我从未见过纯 CSS 版本。这可能吗？使用奇怪的定位和复杂的选取器会非常复杂。但是他们说 Sass 是“图灵完备的”，这意味着它是可能的，对吧？或者是否有其他限制在起作用？

我很想看看生命游戏的更多奇怪的前端示例。或者您过去关于它的任何故事 =）。