零、简介
当我在 20 世纪 70 年代第一次学习编程时，你通常会编写相当无聊的程序；例如打印前 100 个素数。从那以后发生了很多变化，学习编程变得更加令人兴奋。还有什么比创造自己的电脑游戏更令人兴奋的呢？玩游戏很有趣，但创造游戏更有趣。现在是你来决定谜题的复杂程度，敌人的行为和武器的威力。
在过去的 30 年里，我用许多不同的语言开发了许多游戏。我创作了可以在可编程计算器、文本终端、大型计算机上运行的游戏，最近还可以在移动设备和网络浏览器上运行。每一次，让电脑做我想让它做的事情，并让玩家参与高要求的挑战，都是非常令人满意的。这本书将带给你快乐。
这本书将教你如何用 JavaScript 编程，这是网络上最重要的语言。它提供了对语言和编程范例的彻底处理。当然，也有许多其他的书试图做同样的事情。但这本书的独特之处在于，它以最令人兴奋的方式做到了这一点:在创造游戏的同时。而且不仅仅是原型游戏，而是看起来很美，实际上玩起来很有趣的完整游戏。
这本书围绕重要的游戏开发概念展开，你可以将这些概念直接应用到你创建的游戏中。你学习游戏循环，精灵和动画，玩家互动，关卡，高分，甚至一些基本的游戏物理。在此过程中，您将逐渐了解 JavaScript 的所有主要语言概念。
这本书使用 HTML5(准确地说是画布)来运行游戏。HTML5 是新的网络标准，所有现代浏览器都支持它，包括个人电脑、平板电脑和智能手机。因此，您可以将自己创建的游戏放在任何网站上，这样您所有的朋友(以及世界上的其他人)都可以玩并享受这些游戏。一旦你创建了书中的例子，你可以开始改变它们，然后继续设计和编程你自己的原创游戏。
一旦你的游戏达到足够的质量，你就可以在全世界发行，甚至出售。这本书包含了一些关于制作和出版你自己的游戏的章节，让你开始。但是，不要忘记，游戏开发是一项多学科的活动。除了程序员(你)之外，你可能需要一个艺术家来创造视觉效果，还需要一个人来为游戏制作音频。但是这样的人很容易在网上找到。而当你有了一个强大的团队，你就可以组建自己的游戏公司。很多成功的公司都是这样开始的。
因此，阅读这本书可能是你在游戏开发职业道路上的第一步。用你制作的游戏给你自己和游戏社区带来惊喜。享受旅程。
—马克·奥维马斯
介绍
随着 HTML5 标准的出现，基于 web 的应用开发变得非常流行。越来越多的游戏公司转向用 JavaScript 开发游戏，因为目前这是唯一真正独立于平台的方法，可以在我们现在拥有的各种设备上工作，从台式电脑到智能手机和平板电脑。在这本书里，你学习如何制作自己的游戏。同时，你深入学习了过去十年中最流行的编程语言之一:JavaScript。在你读完这本书之后，你将能够制作出可以进行商业开发的游戏，这些游戏可以在任何浏览器的 PC 或 MAC 上运行，也可以在平板电脑或智能手机上运行。您获得的技能将帮助您创建专业外观的游戏，并帮助您构建其他类型的基于 web 的应用。正如你将看到的，构建游戏和玩游戏一样有趣(甚至更多！).
这本书是给谁的
这本书是给任何有兴趣学习如何创建自己的游戏的人的。如果你之前没有(JavaScript)编程经验，不要担心。这本书教你所有你需要知道的。如果你已经知道如何编程，那么这本书对你来说仍然是有趣的。我将向您展示如何为游戏开发设计一个完整的软件架构，以满足 2D 游戏程序员的所有需求。这本书举例说明了这种软件架构在四个不同游戏中的用法。这些游戏的代码是精心开发的，考虑到了组织代码的适当方式，并使其干净、健壮、易于扩展。
本书的结构
本书的每一章都有自己的示例程序集。你可以在属于这本书的网站上找到所有的例子。我基于这些例子解释所有的编程概念。
这本书在全球分为六个部分。以下是每个部分的概述。
第一部分
这一部分概述了 JavaScript 编程语言，并介绍了它的主要特性。我将介绍最重要的游戏编程结构——游戏循环，并向您展示如何用 JavaScript 实现它。我用一个使用 HTML5 canvas 对象的非常简单的 JavaScript 应用来说明游戏循环。您将学习对表示游戏世界有用的变量和数据结构，并了解如何在程序中包含游戏素材，如精灵和声音。
这一部分着重于你创建的第一个游戏:画家游戏。游戏的目标是收集三种不同颜色的颜料:红色、绿色和蓝色。颜料从空中落在由气球保持漂浮的罐子里，在颜料从屏幕底部落下之前，你必须确保每个罐子都有正确的颜色。我向你展示了如何通过阅读鼠标、键盘或触摸输入来对玩家的行为做出反应。我引入了作为对象蓝图的类(也称为该类的实例)。您将了解到构造函数方法是负责创建它们所属的类的实例的方法。
您将学习如何编写自己的方法、属性和类，以及如何使用这些编程概念来设计不同的游戏对象类。你看游戏对象应该如何相互作用。作为这种交互的一个例子，您将看到如何处理游戏对象之间的基本碰撞。您将了解继承是如何在 JavaScript 中实现的，以便游戏对象类可以按层次构建。向您介绍了多态性的概念，它允许您自动调用方法的正确版本。通过添加一些额外的功能，如动作效果、声音、音乐以及维护和显示分数，您就完成了画师游戏。
你在本书中开发的第二个游戏是宝石果酱:一个益智游戏，玩家需要找到宝石的组合。每当玩家做出有效的宝石组合，他们就获得点数。您首先要处理在不同移动设备上观看游戏的问题。您将看到如何自动调整画布大小以适应不同的屏幕大小，或者因为播放器旋转手机或平板电脑屏幕。引入了一种方法来自动缩放子画面并缩放鼠标和触摸位置以对此进行补偿，从而在不同画布大小之间无缝切换。
你将学习如何创建游戏对象的结构。引入场景图作为这种结构的表示。你还会了解到游戏对象的局部和全局(世界)位置。游戏对象之间的交互是通过向游戏对象添加标识符来实现的，因此您可以在列表或层次结构中搜索它们。为了完成游戏，你添加了漂亮的视觉效果，如闪光。
这部分介绍游戏企鹅配对，这是一个益智游戏，目标是让成对的企鹅颜色相同。玩家可以通过点击并选择企鹅移动的方向来移动企鹅。一只企鹅移动，直到它被游戏中的另一个角色(企鹅、海豹、鲨鱼或冰山)阻止或从游戏场地掉落，在这种情况下，企鹅落入水中并被饥饿的鲨鱼吃掉。在游戏的不同关卡中，你引入新的游戏元素来保持游戏的刺激。例如，有一种特殊的企鹅可以与任何其他企鹅匹配，企鹅可以卡在一个洞里(意味着它们不能再动了)，你可以在板上放置吃企鹅的鲨鱼。
我引入了精灵带和精灵片的概念，允许你在同一个图像中存储几个精灵。您可以为菜单创建各种有用的 GUI 元素，例如开/关按钮和滑块按钮。您将学习一个用于处理不同游戏状态的类设计，比如菜单、标题屏幕等等。你会看到不同的状态如何成为游戏循环的一部分，以及你如何在它们之间切换。
许多游戏由不同的关卡组成。尤其是在拼图、迷宫类游戏等休闲游戏中，游戏可能会有几百个关卡。您将看到如何使用对象文字的力量来表示基于瓦片的游戏世界。您还将看到如何使用 HTML5 本地存储来存储玩家在游戏中的进度，并在游戏再次开始时调用这些信息。您将了解到 JSON 是序列化对象文字的有用工具。
第五部分
你在这本书里开发的最后一个游戏是一个叫滴答滴答的平台游戏。你首先设计出游戏的框架，这个框架主要是基于为之前的游戏编写的代码。你会看到如何添加动画:在你到目前为止开发的游戏中，游戏对象可以在屏幕上四处移动，但是在游戏中添加像奔跑的角色这样的东西稍微有点挑战性。
在嘀嗒嘀嗒游戏中，角色需要与游戏世界进行互动，这需要一个基本的物理系统。物理学有两个方面:赋予角色跳跃或坠落的能力，以及处理和响应角色与其他游戏对象之间的碰撞。你也给游戏中的敌人增加一些基础智力。因此，玩家有不同的游戏选项，必须制定不同的策略来完成每一关。你利用遗传来创造敌人行为的多样性。为了完成游戏，您需要在背景中添加山脉和云彩，以使游戏在视觉上更具吸引力。
这本书的最后一部分讨论了游戏制作和出版。这部分的内容很大程度上是基于对两位游戏行业人士的采访。第一个是 Mark Overmars，Gamemaker 工具的创造者，现任 Tingly Games 的 CTO。第二个是彼得·维斯特巴卡(Peter Vesterbacka)，Rovio Entertainment 的雄鹰，愤怒的小鸟游戏的创造者。这一部分包含了彼得和马克关于游戏制作和游戏出版的许多想法和提示。
涵盖了各种主题，包括编写连贯的 JavaScript 代码、使用第三方库、为您的游戏创建/购买游戏素材(如精灵和声音)、在游戏制作团队工作、游戏的各种测试阶段、处理本地化以及销售和营销游戏的策略。
注意这本书有一个附带的网站，你可以在那里下载所有的示例程序、附带的游戏资源(精灵和声音)以及其他额外的东西。网址是www.apress.com/9781430265382。去那里按照说明拿额外的材料。
获取和安装工具
为了用 HTML5 和 JavaScript 开发电脑游戏，在你的电脑上安装一些工具会很有用。显然，你需要某种浏览器来运行和测试你正在开发的游戏。你甚至可能想在你的电脑上安装几种不同的浏览器，以确保你的游戏能在所有主流浏览器上运行。JavaScript 刚刚发明的时候，浏览器处理 JavaScript 代码的方式有很多不同。一些脚本在一个浏览器上运行良好，但在其他浏览器上出现错误。幸运的是，这在今天已经不是什么问题了。本书提供的几乎所有代码都可以在任何浏览器上正常运行。但在某些情况下，您必须处理浏览器差异。所以，我建议你至少安装两个浏览器来测试你的游戏。在 Windows 电脑上，你已经有了 Internet Explorer，在 Mac 电脑上，你已经有了 Safari。对于测试游戏来说，我发现火狐浏览器(www.mozilla.org/en-US/firefox/new)和 Chrome 浏览器(https://www.google.com/chrome)效果相当不错。Chrome 有一个叫做开发者工具的东西，可以通过进入工具
开发者工具进入菜单。在那里，您可以看到一个控制台(用于调试)，在脚本中设置断点，等等。当你想用 Firefox 测试你的游戏时，你必须安装一个名为 Firebug ( http://getfirebug.com/)的插件，它的功能集类似于 Chrome 的开发者工具。
除了可以让你测试游戏的浏览器之外，安装一个编辑器来编辑 JavaScript 和 HTML 文件也很有用。显然，您可以用任何文本编辑器来做这件事。然而，有几个专注于 web 开发的编辑器是可用的。这意味着它们提供了诸如代码补全、语法高亮、代码重构等特性。作为编辑环境的一部分，这些都是非常有用的东西。有付费和免费的编辑。好的付费编辑是 WebStorm ( www.jetbrains.com/webstorm)。一个好的免费编辑器的例子是 Komodo Edit ( www.activestate.com/komodo-edit)。另一个优秀的免费编辑器是 Notepad++ ( http://notepad-plus-plus.org)。虽然 Notepad++不是专门针对 JavaScript 开发的，但是它有很多编辑 HTML 和 JavaScript 文件的有用特性，包括语法高亮。
示例程序
除了这本书，我还提供了大量展示 HTML5 游戏编程各个方面的示例程序。您可以在该书的信息页面上的源代码/下载选项卡下找到源代码的链接。该选项卡位于页面相关标题部分的下方。
示例集合包含在一个 zip 文件中。下载完这个文件后，把它解压到某个地方。当你查看解压文件的文件夹时，你会看到许多不同的文件夹。书中的每一章都有自己的文件夹。例如，如果你想运行企鹅配对游戏的最终版本，进入属于第 23 章的文件夹，双击位于子文件夹 PenguinPairsFinal 中的文件PenguinPairs.html。您的浏览器将打开并运行示例游戏企鹅配对。
如您所见，有相当多的不同文件与这个特定的示例相关。如果你去第一章的文件夹，可以看到一个更简单的例子，在那里你可以找到一些非常基本的 html 5 JavaScript 应用的例子。您可以通过双击每个示例的 HTML 文件来运行它们。
联系作者
如果您对本书有任何疑问，请随时通过以下电子邮件地址直接联系我:j.egges@uu.nl。
版权属于：月萌API www.moonapi.com，转载请注明出处
