电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛

标题: 在 CoffeeScript 和 canvas 中创建游戏（2） [打印本页]

作者: look_w 时间: 2018-10-19 20:33 标题: 在 CoffeeScript 和 canvas 中创建游戏（2）

生命游戏的 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。它们占据了代码的很大一部分，这些将在后面的各节中探讨。

欢迎光临电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/)