在 CoffeeScript 和 canvas 中创建游戏（1）
|
- UID
- 1066743
|
在 CoffeeScript 和 canvas 中创建游戏（1）
简介小游戏是学习新技术的一种有趣方式。本文将引导您使用 CoffeeScript 和 HTML5 canvas元素亲自实现Conway 的 Game of Life 。尽管Conway 的 Game of Life 可能算不上一个游戏，但它是一个非常容易管理的出色的小任务。
常用缩写词- CSS：级联样式表
- DOM：文档对象模型
- HTML：超文本标记语言
在技术方面，您将需要：
- 一个可处理 HTML5 canvas元素的最新的 Web 浏览器。
- CoffeeScript，这是一种编译为 JavaScript 的小型编程语言。建议您花 10 分钟在网上了解一下 CoffeeScript 功能，或者阅读免费的在线图书 The Little Book on CoffeeScript（请参见 ）。
- CoffeeScript 编译器用于编写 CoffeeScript。建议安装 Node.js，使用 Node Package Manager (NPM) 安装它（请参见 ）。本文中的示例使用了 1.3.3 版的 CoffeeScript 编译器。
- 您最喜欢的文本编辑器。
您可 本文中使用的示例的源代码。
Conway 的 Game of Life 游戏Conway 的 Game of Life 基本上是在一个包含方形细胞的二维正交网格上进行的一种模拟。每个细胞具有两种可能的状态：死或活。该游戏提供定期更新（也称为记号）。每次更新时，当前一代细胞会演化为下一代细胞。在一次更新期间，以下规则适用于每个细胞：
- 如果一个活细胞的活邻居少于 2 个，那么它将由于人口不足而死去。
- 具有两个或 3 个活邻居的活细胞会存活到下一代。
- 具有超过 3 个活邻居的活细胞会由于人口过多而死去。
- 刚好具有 3 个活邻居的死细胞会由于繁殖而变为活细胞。
第一代细胞是随机创建的。在这之后，该模拟会运行到所有细胞都死去或出现模式。请参见 ，了解有关不同模式的更多信息和Conway 的 Game of Life 历史。
显示了本文中的练习的最终结果。您也可以在线查看结果并自行体验（请参阅 中作者的Conway 的 Game of Life 版本）。
图 1. Conway 的 Game of Life 的实现示例 实现在本文中，Conway 的 Game of Life 实现包含两部分：第一部分是 ，它是第二部分需要的基础工作；第二部分是游戏的实际 。
HTML5 标记和 CSS第一步是创建一个名为 game-of-life 的目录，您的所有示例文件都将保存在这里。标记和 CSS 需要一个存放位置，所以要在新的 game-of-life 目录中创建一个新 index.html 文件。 显示了Conway 的 Game of Life 实现需要的 HTML5 标记和 CSS。
清单 1. index.html 文件的标记和 CSS1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| <html>
<head>
<title>Game of Life</title>
<script type="text/javascript" src="javascripts/game_of_life.js">
</script>
<style type="text/css">
body {
background-color: rgb(38, 38, 38);
}
canvas {
border: 1px solid rgba(242, 198, 65, 0.1);
margin: 50px auto 0 auto;
display: block;
}
</style>
</head>
<body>
<script type="text/javascript">
new GameOfLife();
</script>
</body>
</html>
|
提供了游戏的名称，包含一个来自 javascripts 目录的 JavaScript 文件 game_of_life.js。不要担心，我们将使用 CoffeeScript 进行编程。将此行放在 index.html 文件中，即使 game_of_life.js 文件还不存在。
添加一个简单的样式，使此生命游戏更加美观。为 body 元素提供一个暗背景，为 canvas 元素添加一个边框。借助 CSS 属性 margin 和 display，您可确保 canvas 放在了屏幕的中心。
为了启动游戏，该代码向标记的主体添加一个小脚本块并创建一个新 GameOfLife实例。 |
|
|
|
|
|
