关于

康威生命游戏是英国数学家约翰·何顿·康威在1970年发明的细胞自动机。

游戏规则很简单,共有四条:

  • 当周围仅有1个或没有存活细胞时, 原来的存活细胞进入死亡状态。(模拟生命数量稀少)
  • 当周围有2个或3个存活细胞时, 网格保持原样。
  • 当周围有4个及以上存活细胞时,原来的存活细胞亦进入死亡状态。(模拟生命数量过多)
  • 当周围有3个存活细胞时,空白网格变成存活细胞。(模拟繁殖)

已经有一些不错的项目在网页实现了它。 不过这些项目通常使用 Canvas 进行绘制(这是最佳方式,当元素较多时性能最好)。 与之不同的是,我借助于 Vue 与 Vite 对其进行了构建,并通过简单的 CSS 与 DOM 实现了它。(主要目的是练习)

忽略性能来看,DOM + CSS 也有其对应的优势,譬如元素较少时其实性能不会比 Canvas 差。 其次,它们可以具有(指相比 Canvas 更方便实现)良好的响应式效果(譬如根据设备放大缩小),暗黑模式。 同时借助 Vue 的响应式数据特性,我们更方便地动态变更数据,比如行、列、绘制时间间隔。 借助组件,我们甚至可以自定义每一个小方块的样式等。

因为我们只是想要一个生命游戏的演示 DEMO,性能来说对我们并不重要。而且实践证明,性能也不算差。

参考