康威生命游戏
许多年前,当我第一次学习编程时,就被约翰·康威(John Conway)的栩栩如生的模拟“生命游戏”着迷。 多年来,在多种平台上有许多用不同语言编写的变体。 无论选择哪种语言,编写自己的《人生游戏》版本都是任何新手程序员的不二之选。 这就是我建议在本文中演示的内容。
但是,由于当今无处不在的浏览器和相关的编程语言的存在,我们可以省去传统的编码环境和语言。 相反,我们可以编写一些版本的《生命游戏》以在浏览器中运行,从而学习一些逻辑编码和数组处理。
游戏板
游戏板由单元格组成。 每个单元在逻辑上可以打开或关闭,这意味着该单元中存在生命形式或该单元为空。 网格可以是我们选择的任何大小,但是通常10 x 10网格是初学者的起点。
同样,我们将从预定的网格或种子生成开始,而不是使用鼠标或键盘输入来输入。 下面的网格显示了我们将使用的种子世代,这将导致仅十一世代的种群数量出现波动。
传播规则
传播规则可以随意设置,但是在游戏的这种简约实现中,我们将使用最简单的规则:
- 如果一个单元格为空,并且恰好有三个邻居,则填充该单元格。
- 如果填充了一个单元并且邻居少于两个或大于三个,则清空该单元。
就这么简单。
adjacent = countAdjacent(i, j);
switch (generationThis[i][j]) {
case 0:
if ( (adjacent == 3) ) {
generationNext[i][j] = 1;
}
break;
case 1:
if ( (adjacent == 2) || (adjacent == 3) ) {
generationNext[i][j] = 1;
}
}
此演示的另一个简化方面是只有一种生命形式。 不止一种生命形式,每种都有其自己的颜色,将进行非常有趣的模拟,但会使编码复杂度的增加不适用于此演示。
世代
这种生命形式的模拟有多种可能的结果:
- 灭绝。
- 稳定的人口。
- 人口波动。
- 开放式人口变化。
通过检查用于存储世代数据的数组,可以使用JavaScript捕获所有这些(除了最后一个)。 一种简单的方法是将三个连续的世代存储在自己的数组中。 然后,在计算出每个新一代之后,比较数组以查找这三个状态。
- 如果新一代完全是空的,生命形式就灭绝了。
- 如果相邻世代相同,则种群稳定。
- 如果后代和上一代相同,则群体在振荡。
这就是所需逻辑的基础,现在让我们考虑如何在浏览器中显示游戏板。
用户界面
HTML,CSS和JavaScript是生活游戏所必需的。 本示例使用CANVAS
元素显示网格。 同样可以使用DIV
元素网格,也可以使用TABLE
网DIV
,但让我们通过使用HTML5和CSS3来更新《生命游戏》。
游戏板只需要一个canvas元素和一个按钮即可计算下一代。
<form>
<p>Generation: <span id="generation"></span> <span id="status"></span></p>
<canvas id="gameboard"></canvas>
<input type="button" value="generate next" id="btnNext">
</form>
一旦页面加载,就可以计算种子的生成,然后每按一次按钮,游戏就会进入下一代。 作为使用按钮的替代方法,可以使用JavaScript的setTimeout()
函数来自动计算每个连续的世代。 但是,最好在确定代码正确运行并且知道可以捕获上面列出的三个生成状态之前,将其保留。
<script src="gameoflife.js"></script>
<script>
$(document).ready(function() {
seedGeneration();
$("#btnNext").click(function(){
nextGeneration();
checkStatus();
copyGrids();
drawGeneration();
});
});
</script>
这就是在浏览器中实现“生活游戏”的最低要求所需要的全部。 本文的完整代码(包括gameoflife.js
文件) 可以下载 。
对该界面的改进将是提供交互式用户输入以设置用于生成种子的单元,但这超出了此演示的范围。
进一步阅读
摘要
在本文中,我们涵盖了编写基于浏览器的John Conway的“生命游戏”版本的基本要素。 除了使用HTML,CSS和JavaScript外,我们已经看到了如何创建在浏览器中本地运行的简单模拟,该模拟传统上是用BASIC和Pascal等语言编写的。
康威生命游戏