在 CoffeeScript 和 canvas 中创建游戏（2）

look_w

生命游戏的 CoffeeScript 实现您可能想知道为什么  中包含的是 JavaScript 文件 game_of_life.js，而不是 CoffeeScript 文件。许多不同的浏览器还无法理解 CoffeeScript，所以您需要将 CoffeeScript 代码编译为 JavaScript，使浏览器可以解释它。这也是您的 game-of-life 目录中需要两个新目录的原因。第一个目录名为 coffeescripts，包含所有 CoffeeScript 代码。第二个目录名为 javascripts，包含编译后的 JavaScript 代码。
示例实现仅包含一个类，所以您只需创建一个对应的文件。game_of_life.coffee 文件（包含所有 CoffeeScript 代码）位于 coffeescripts 目录中。
编译 CoffeeScript在开始实现游戏逻辑之前，您需要找到一种方式来将 CoffeeScript 代码编译为 JavaScript。幸运的是，CoffeeScript 编译器提供了一些选项来完成此任务。自动将 CoffeeScript 代码编译为 JavaScript 的命令是：

1	coffee --output javascripts/ --watch --compile coffeescripts/

要运行此命令，您需要在您喜欢的命令行工具中导航到 game-of-life 目录。使用 coffee命令将 CoffeeScript 代码编译为 JavaScript。首先，该示例使用了 --output标志来指定输出文件夹。然后在 coffeescripts 目录上使用了 --watch和 --compile标志。
所有这些是何含义？只要 coffeescripts 目录中的一个文件被修改，coffee命令就会发现它，编译它，然后将编译后的 JavaScript 文件保存到 javascripts 目录中。现在您应该了解了我们从不创建  中包含的 game_of_life.js 文件的原因。当在 game_of_life.coffee 文件中编写 CoffeeScript 代码时，它将被编译，结果 JavaScript 代码会自动保存在 game_of_life.js 文件中。
初始化游戏现在已经解决了编译问题，您可以开始编写生命游戏的示例版本了。在文本编辑器中打开文件 game_of_life.coffee。如  中所示，只有一个包含多个属性的 GameOfLife类。
清单 2. GameOfLife类和属性

1 2 3 4 5 6 7 8 9

class GameOfLife currentCellGeneration: null cellSize: 7 numberOfRows: 50 numberOfColumns: 50 seedProbability: 0.5 tickLength: 100 canvas: null drawingContext: null

不言自明的变量和方法名称使得源代码很容易阅读。在  中：

• 因为Conway 的 Game of Life 包含一个二维细胞网格，所以示例也需要一个类似的网格。currentCellGeneration属性将持有一个二维数组中的所有细胞。
• cellSize指定一个细胞的宽度和高度 —在本例中为 7 个像素。
• 属性 numberOfRows和 numberOfColumns用于确定网格的大小。
• Conway 的 Game of Life 需要一种初始细胞模式，这也被称为种子。当创建种子时，使用 seedProbability属性来确定一个细胞的死活。
• tickLength属性指定了游戏更新的时间间隔。在示例中，游戏每 100 毫秒更新一次。
• canvas属性将保存您将要创建的 canvas 元素。
• 要在 canvas 上绘制图形，您需要绘图上下文，该上下文存储在 drawingContext属性中。

GameOfLife类的构造函数负责设置游戏。如  中所示，您需要创建一个 canvas，将它调整为正确的尺寸。然后，您可以使用新创建的 canvas 创建绘图上下文。在这之后，您就可以创建初始种子模式并启动第一次更新来开始游戏循环了。让我们首先创建 canvas。
清单 3. GameOfLife类的构造函数

1 2 3 4 5 6 7 8

constructor: ->   @createCanvas()   @resizeCanvas()   @createDrawingContext()   @seed()   @tick()

因为现代浏览器提供了一个出色的 API 来操作文档对象模型 (DOM)，所以我们的示例不需要任何花哨的东西；您可摆脱外部框架，比如 jQuery。使用 document.createElement方法创建一个新 canvas 元素，然后将它存储在一个同名的属性中。将新创建的元素附加到页面主体中。所有这些都在 createCanvas方法中完成，如  所示。
清单 4. 设置 canvas 元素

1 2 3 4 5 6 7 8 9 10

createCanvas: ->   @canvas = document.createElement 'canvas'   document.body.appendChild @canvas resizeCanvas: ->   @canvas.height = @cellSize * @numberOfRows   @canvas.width = @cellSize * @numberOfColumns createDrawingContext: ->   @drawingContext = @canvas.getContext '2d'

resizeCanvas方法使用 cellSize、numberOfRows和 numberOfColumns来计算 canvas 元素的高度和宽度。清单 4中的第三个方法 createDrawingContext从 canvas 获取二维上下文并存储它供未来使用。
除了这 3 个方法，清单 4中的构造函数还调用了另外两个方法：seed和 tick。它们占据了代码的很大一部分，这些将在后面的各节中探讨。