解密「生命游戏」：从文档代码到拓扑结构

背景简介

「生命游戏」（Game of Life）是由数学家约翰·康威（John Horton Conway）在1970年发明的细胞自动机模型。它在计算机科学和数学中具有重要地位，尽管它被设计为一个零玩家游戏，却因其简单的规则和复杂的行为而受到广泛研究和欣赏。在本文中，我们将通过分析文档代码清单9.4来探讨「生命游戏」的实现过程，并理解其背后的拓扑结构。

「生命游戏」的拓扑结构

在「生命游戏」中，细胞被放置在一个虚拟的二维网格上，每个细胞都有两种状态：活着或死亡。细胞的状态在每一代中根据周围邻居细胞的数量来进行更新。这种网格可以被视为一个环面拓扑结构，即网格的左右边界以及上下边界都是相邻的。

游戏规则与代码实现

游戏的规则非常简单：如果一个活细胞周围有2个或3个活邻居，它将在下一代中继续活着；如果一个死细胞周围有恰好3个活邻居，它将变成活细胞。代码清单9.4中的JavaScript实现正是基于这些规则。

<!-- 游戏「生命」的HTML和JavaScript代码 -->
<script type="text/javascript">
    // 定义网格的宽度和高度
    var Nx=200, Ny=100;
    // 其他变量定义...
    function init(B){
        // 初始化网格的代码
    }
    // 其他函数定义...
</script>

在上述代码中，我们看到如何定义网格参数，以及如何使用JavaScript中的函数来初始化网格，并根据游戏规则更新每个细胞的状态。

网页中游戏的动态显示

为了在网页中展示「生命游戏」，我们需要在HTML中定义一个画布元素，并使用JavaScript来绘制网格和细胞。通过设定定时器（setInterval），我们可以周期性地重新计算并绘制细胞的状态，从而实现动态显示效果。

// 画布设置及动态显示相关的JavaScript代码
window.onload=function(){
    // 获取画布元素，设定尺寸
    var cnv = document.getElementById("mycanvas");
    cnv.width = Nx * dz;
    cnv.height = Ny * dz;
    // 获取绘图上下文
    var ctx = cnv.getContext("2d");
    // 定义一个函数来绘制细胞
    function show(B){
        // 清除画布
        ctx.clearRect(0,0,cnv.width,cnv.height);
        // 根据细胞状态绘制方块
        for(var i=0; i<B.length; i++){
            for(var j=0; j<B[i].length; j++){
                if(B[i][j]==1){
                    ctx.fillRect(dz*j,dz*i,dz,dz);
                }
            }
        }
    }
    // 其他函数定义...
}

通过上述方法，我们可以在网页上展示出动态更新的「生命游戏」网格。

总结与启发

「生命游戏」不仅是一个简单的游戏，更是一个探索复杂系统和自组织行为的有力工具。通过代码清单9.4的解析，我们学习了如何使用JavaScript来实现这一模型，并理解了其背后的拓扑环面结构。同时，本文也展示了如何将这样的算法应用到网页编程中，使它能够以动态形式展现出来。游戏的实现和网页上的动态显示都提供了一个很好的编程实践案例，对于学习编程和算法的人来说具有很大的启发意义。