本书通过精心编写且容易理解的代码，以及抓住关键问题的文字描述，阐明了游戏开发过程中的每一个细节。本书第1～19章讲解了Snail Bait游戏的完整开发过程，从以一个简单的显示图像的游戏版本开始，涵盖了HTML5视频游戏开发的所有特点。第20章总结全书，使用本书前19章讲述的大部分技术内容实现了第二个视频游戏。不管是游戏开发新手，还是专业的游戏开发人员，都能从本书中获益。
　　本书中所有的程序源码，包括本书中讨论过的、指定章节的特殊版本的游戏代码，都可以在华章网站（www.hzbook.com）上下载。

　　初学者的入门指南，从零开始完整讲解了一个复杂的横向卷轴平台视频游戏的开发过程
　　本书涵盖丰富的代码和演示实例，通过高可靠性、可复用的代码帮助专业开发者掌握必备知识
　　游戏编程提供了有创意的财富和商业机会，而且并不难理解。本书作者David Geary向读者展示了如何使用可以免费获取的浏览器工具及资源创作视频游戏，并在桌面浏览器和移动端上运行它们。
　　本书循序渐进地实现一个复杂的街机风格游戏，而且完全从零开始，不需要使用任何专有的游戏框架。通过学习Snail Bait游戏的完整开发过程，会让你对设计和构建任何类型的HTML5 2D游戏有更深层次的理解。
　　本书涵盖以下内容：
　　创作光滑、无闪烁的动画
　　实现不受游戏中潜在动画帧频影响的运动
　　驱动sprite对象，让它们执行闪闪发光、爆炸等运动
　　在音轨上对多声道声音特效实现分层
　　弯曲时间创作非线性动画特效，例如跳跃或者弹跳等
　　通过一个时间系统，控制游戏中的时间流逝
　　实现用于仿真自然现象的粒子系统
　　有效地发现sprite对象之间的碰撞
　　构建一个包含特殊属性的开发者后门
　　使用Node.js和socket.io将实时游戏指标传给服务器
　　开发一个提示板，用于显示服务器上存储的高分榜
　　在移动设备上实现HTML5

　　前　　言 Preface
　　本书是为希望使用HTML5进行2D游戏开发，且具备一定JavaScript编程经验的开发人员而准备的。在本书中，笔者从零开始完整讲解了一个复杂的横向卷轴平台视频游戏的开发过程，并将该视频游戏命名为“Snail Bait”。在开发过程中，笔者没有使用任何第三方图形框架或游戏框架，因此读者将从本书中学会以编程方式实现平滑动画、sprite爆炸、开发人员后门程序、游戏难易度设计等所有内容。如果读者正在使用某个游戏框架开发游戏，那么本书对于帮助读者理解游戏框架内部的工作原理也同样大有裨益。
　　出于教学目的，Snail Bait游戏仅实现了一个关卡，然而它却具备了街机风格游戏的全部特点。Snail Bait游戏在滚动的背景上同时操作多个动画对象，即sprite对象，在播放游戏背景音乐的同时添加多种音频效果。sprite对象具备多种行为，包括但不限于跑动、跳跃、飞行、闪光、弹跳、来回移动、爆炸、碰撞、平台着陆、从游戏画面底部跌落等。
　　另外，Snail Bait游戏还实现了多个特色功能。例如，一个可以减慢或加快游戏整体速度的时间系统；游戏加载过程动画；当游戏主角失去生命时，震动游戏画面的特殊效果；模拟烟雾和燃烧的粒子系统等。当游戏窗口失去焦点时，Snail Bait游戏会暂停运行，而当游戏窗口重新获得焦点时，Snail Bait游戏会以一个倒计时动画作为开始，以便玩家有时间来恢复对游戏的控制。
　　虽然没有使用游戏框架或图形框架，但是Snail Bait游戏使用Node.js和socket.io技术实现了将游戏中的一些指标数据发送到服务器端、高分存储和检索，并在游戏窗口顶部显示高分榜等功能。当游戏运行缓慢时，Snail Bait游戏还将显示警告信息。而当按下“Ctrl+D”组合键启动游戏时，Snail Bait游戏将启动开发人员后门程序，从而赋予操作人员特殊权限，例如修改时间轴的流动，或者显示sprite对象碰撞检测矩形以及其他功能等。
　　当Snail Bait游戏检测到自己运行在移动设备上时，将通过调用触摸事件处理句柄、调整游戏窗口大小来重新配置自身，以便适应移动设备的屏幕大小及控制方式。
　　本书将展示如何一步一步编程实现Snail Bait游戏的所有功能，这样读者就可以在自己的游戏中实现类似的功能。
　　本书简史
　　早在2010年，笔者从一款流行的Android系统下的开源游戏Replica Island中下载了图片和声音，并使用它们在Android系统中实现了Snail Bait游戏的初始版本。
　　当时，笔者已经对HTML5 Canvas技术产生了浓厚的兴趣，并开始写作上一本图书《HTML5 Canvas核心技术：图形、动画与游戏开发》。在写作期间，笔者持续完善了Snail Bait游戏，将它从基于Java语言及Android的系统环境，迁移到了基于JavaScript语言、HTML5 canvas元素及浏览器的环境中。在2012年写作完成时，笔者已经开发出了一个虽然原始但功能基本完整的游戏版本。
　　2012年年底，笔者基于Snail Bait游戏开始为IBM developerWorks网站撰写10篇关于游戏编程的系列技术文章（关于这些技术文章的链接，请参阅后面的“网上资源”部分）。在接下来的10个月中，基于写作需要，笔者继续完善、修改了Snail Bait游戏。
　　2013年夏天，Snail Bait游戏已经日趋成熟。笔者前往加利福尼亚的塞瓦斯托波尔，把Snail Bait游戏开发的全过程放在一起，拍摄了一部长达15小时的O’Reilly视频，取名为“HTML5 2D游戏开发”。从某个方面而言，这部视频就是本书的电影版。虽然该视频直到9月才得以发布，但它依然成为当年的十大畅销O’Reilly视频之一（关于这段视频的链接，请参阅后面的“网上资源”部分）。
　　2013年7月，从塞瓦斯托波尔回到家之后，笔者便全身心地投入到本书的写作中。笔者改写了IBM developerWorks网站上的10篇系列技术文章，将这些文章作为本书的开始章节，并在其后添加了10章的新内容。在写作的整个过程中，笔者不断迭代修改Snail Bait游戏的代码，使其更具有可读性。
　　2013年12月，在本书第1～19章完成后，笔者决定增加最后一章。该章讲解了如何使用本书介绍的技术实现一个简单完整的视频游戏，这就是第20章中Bodega’s Revenge游戏的由来。
　　如何阅读本书
　　本书的写作目的简单明确：通过讲解如何实现一个复杂的视频游戏，教会读者开发属于自己的游戏。
　　读者可以采用多种方式阅读本书。首先，笔者为了使本书更便于阅读，在书中添加了大量的截图、程序清单和图表。
　　书中灵活地使用了“注意”“提示”“警告”和“最佳实践”模块。这些模块精简了本书主要内容，每个“注意”“提示”“警告”和“最佳实践”模块都有一个标题（除了只有一行的模块之外），这样读者一眼就可以判定这些辅助内容是否与自己的实际情况有关。总体而言，本书主要是在讲解开发方法，而这些模块则重点提示了开发的原因。如果读者时间有限，那么可以抛开这些模块，直接阅读本书的主要内容，从而快速掌握游戏底层的工作机制，同时确保不会遗漏任何重要内容。
　　本书第1～19章讲解了Snail Bait游戏的完整开发过程，从一个简单的显示图像的游戏版本开始，涵盖了HTML5视频游戏开发的所有特点。第20章总结全书，使用本书前19章讲述的大部分技术内容实现了第二个视频游戏。
　　如果读者计划精读本书，而不仅仅是把它当作一个参考，那么建议从第1章或第20章开始阅读，其中第20章除了对第1～19章所学内容进行了回顾与综述外，还增加了部分新知识，例如极坐标系统和旋转坐标系统的应用。
　　假如读者从第20章开始阅读，甚至只是略微地浏览一下第20章，读者都可以对前19章所讲述的内容有一个大致的了解，但是不要奢望在第一次阅读时就能理解透彻。
　　笔者猜想大部分读者都希望把本书当作一个参考，因此除了在每章的开头部分加入该章主题外，还在每章的开始部分添加了一段关于该章内容的简要介绍。这样将给读者快速定位具体内容带来很大便利。同时，笔者还加入了许多关于如何实现具体功能的分步说明，这样读者就可以按照这些步骤实现自己的类似功能。
　　本书练习
　　被动地阅读一本书不会将任何人变成一个游戏开发程序员。读者必须通过自己动手编写一些代码来真正学会实现一款游戏的方法。为此，本书在每一章的结束部分都列出了一些练习，以帮助读者更好地学习。
　　为了完成练习，读者需要下载Snail Bait游戏源代码的最终版本，并且修改代码。在某些情况下，练习将指导读者修改某个具体版本的Snail Bait游戏源代码，这些版本的游戏源代码与具体的章节有关。关于Snail Bait游戏源代码版本划分的详细信息，请阅读下面的内容。
　　Snail Bait游戏源代码及其版本划分
　　本书讲述的主要内容来源于两个视频游戏。读者可以通过“网上资源”部分的URL地址查看、下载这两个游戏及其源代码。
　　在阅读时，读者会发现参考Snail Bait游戏的源代码对于理解书中的内容非常有帮助，而通过参考与读者正在阅读的章节对应的源代码，这种帮助将更加明显。例如，在第1章里，我们实现了Snail Bait游戏的一个初始版本，简单绘制了游戏背景和游戏主角。这个版本的源代码与最终版本的源代码虽然有少量相似之处，但此时就查阅最终版本的源代码一点用都没有，大量的代码反而会让读者眼花缭乱。反倒是参考corehtml5games.com/book/code/ch01网址上这个对应第1章结束的版本更有助于读者理解第1章所讲述的内容。本书每章（除第2章外）对应的源代码版本的URL都按照corehtml5games.com/book/code/ch??的格式设定，其中“??”代表了对应于第01～20章的两位数字。
　　如上所述，除非另有说明，否则本书每章最后部分的练习都对应于按照章节一步一步开发游戏，在章节结束时得到的Snail Bait游戏版本。
　　网上资源
　　本书配套网站：corehtml5games.com
　　Snail Bait游戏的在线网址：corehtml5games.com/snailbait
　　Bodega’s Revenge游戏的在线网址：corehtml5games.com/bodegas-revenge
　　Snail Bait游戏源代码下载地址：corehtml5games.com/book/downloads/snailbait
　　Bodega’s Revenge游戏源代码下载地址：corehtml5games.com/book/downloads/bodegas-revenge
　　O’Reilly网站上作者的“HTML5二维游戏开发”视频：shop.oreilly.com/product/0636920030737.do
　　IBM developerWorks网站上作者的“HTML5二维游戏开发”系列技术文章：www.ibm.com/developerworks/java/library/j-html5-game1/index.html
　　作者2013年在亚特兰大HTML5用户组会议上关于HTML5游戏编程的演讲视频：youtube.com/watch?v=S256vAqGY6c
　　作者出版的《HTML5 Canvas核心技术：图形、动画与游戏开发》在亚马逊上的链接：http://amzn.to/1jfuf0C
　　预备知识
　　如果人们不能说某种语言或以这种语言书写，他们就不会考虑上这样一门创造性的书写课。同样，为了使用HTML5编程实现复杂游戏，读者就必须掌握JavaScript语言。JavaScript语言是学习本书的前提基础。
　　本书程序清单所列的代码几乎都是用JavaScript语言编写的，但这并不代表只掌握JavaScript语言就够了，读者还需要掌握与之相关的HTML和CSS，熟悉计算机图形学，并具备基本的数学知识。
　　关注自己的游戏
　　最后，让我们来讨论一下为什么我们能够聚在这里。笔者猜想读者之所以阅读本书是因为大家希望通过编程来实现一款属于自己的游戏。
　　本书按章节讨论了游戏编程的各个方面，例如实现sprite、碰撞检测等。虽然它们属于Snail Bait游戏，但是读者也能轻松地将这些实现方法套用到自己的游戏当中。
　　本书章节顺序的编排也很重要，这些章节展示了如何从头开始一步一步编程实现一款游戏。在本书的开始部分，首先收集原始素材，搭建开发环境，然后从绘制游戏的基本图形开始编程开发。在随后的章节中，逐步向游戏中添加动画、sprite对象、sprite对象行为等功能，从而逐步完善Snail Bait游戏。如果读者正在从零开始开发一款游戏，那么可能会希望遵循同样的讲解方式，这样读者就可以一边学习实现功能的方法，一边在自己的游戏中实现这些功能。
　　在开始认真编写代码之前，大家应该多花一些时间来搭建开发环境，并尽可能地熟悉手中浏览器的开发者工具。建议大家在第2章结束前，尽可能缩短自己的开发周期，因为在准备阶段多花的时间将会大大提高后续的开发效率。
　　最后要感谢大家购买本书。笔者迫不及待地想要看到你自己创造的游戏!
　　David Geary
　　科罗拉多州，柯林斯堡
　　2014年
　　Acknowledgements 致　　谢
　　我非常庆幸自己能够拥有一位非常优秀的编辑，他也是我20年写作生涯里的唯一一位编辑，一个总能从我的下一本书中读懂并接受我的观念的编辑，一个总是指导我将概念变成作品的编辑，Greg Doench。像往常一样，Greg Doench在本书从计划写作到成书的全过程中给了我充分的帮助及指导。
　　Mary Lou Nohr是一位非常棒的文字编辑，她参与编辑了我此前的所有著作。当她再次欣然同意担任本书的责任编辑时，我感到自己非常幸运。
　　这是我和Alina Kirsanova合作的第2本书，Alina Kirsanova是一位非常出色的排版编辑，我的PDF文件经过她的处理后，总会变得非常漂亮。Julie Nahil监督了本书的出版，使整个出版过程都能按照出版商的要求如期进行。
　　每当完成一本书的写作时，我都会选择那些个人认为能够帮助我改进作品的人来担任审稿人。这一次我选择了4位非常出色的审稿人：Jim O'Hara、Timothy Harrington、Simon Sarris和Willam Malone。Gintas Sanders允许我在Snail Bait游戏中使用他的金币图片，并指出了Snail Bait游戏中的许多不足。
　　在为O’Reilly拍摄“HTML5二维游戏开发”视频时，我有幸接触到了当时的现场观众，其中一位观众给我留下了深刻印象，他向我提出了很多问题和建议，此人就是本书的审稿人Jim O’Hara。在此后的审稿过程中，Jim O’Hara一如既往地认真负责，向我提出了许多好问题、好建议。
　　编辑Greg Doench介绍我认识了Tim Harrington，他是德锐大学的一个高级学术应用分析师，并且具有游戏开发的实际经验。他的许多建议使我深受启发，并促使我重新思考如何更好地完成本书。
　　我一直在为本书寻找一位非常了解游戏编程的图形专家，最后我找到了Simon Sarris。让我喜出望外的是，他不仅是一位精通游戏编程的图形专家，还是一位优秀的作家，他提出的几种不同方法帮助我完善了本书。
　　最后，我很庆幸William Malone能够审阅本书。William是一位专业的游戏开发人员，他开发了Sesame Street游戏（相关信息请查阅http://bit.ly/1nlSY3N）。William的工作对本书产生了深刻的影响，他指出了我忽略了的许多细节，特别是关于移动设备的问题。
查看全部↓

　　David Geary，是《Core HTML5 Canvas》一书的作者，HTML5 Denver社区的联合创始人，也是计算机图形学和网络应用开发的著名专家。他之前写过8本书，包括畅销书《Graphic Java》以及《Core Java Server Faces》，读者可以在推特@davidgeary上关注他。

译者序
前言
致谢
第1章　概述 1
1.1　Snail Bait游戏 3
1.2　HTML5游戏开发最佳实践 8
1.2.1　窗口失去焦点时暂停游戏 8
1.2.2　窗口重获焦点时实现倒计时功能 9
1.2.3　使用CSS实现UI特效 10
1.2.4　对游戏运行缓慢的状态做出检测和处理 11
1.2.5　添加社交功能 11
1.2.6　将所有游戏图像放在单独的sprite表单中 11
1.2.7　在服务器中存储高分榜和实时游戏数据 13
1.3　特别功能 13
1.4　Snail Bait游戏中的HTML和CSS 15
1.5　开始Snail Bait游戏编程 21
1.6　本书中使用的JavaScript 23
1.7　小结 25
1.8　练习 26
第2章　原始素材和开发环境 27
2.1　使用开发者工具 28
2.1.1　控制台 29
2.1.2　Chrome Canary的帧速率计数器 32
2.1.3　调试 34
2.1.4　时间线 35
2.1.5　Profiling 39
2.2　获取资源 40
2.2.1　图像 40
2.2.2　图像处理 41
2.2.3　音效和音乐 41
2.2.4　动画 42
2.3　使用CSS背景 43
2.4　生成小图标 45
2.5　缩短编码周期 46
2.6　小结 48
2.7　练习 48
第3章　图形和动画 49
3.1　使用HTML5 canvas元素绘制图形和图像 51
3.1.1　绘制背景 52
3.1.2　绘制跑步小人 53
3.1.3　绘制平台 53
3.2　实现平滑的HTML5动画 55
3.2.1　requestAnimationFrame()方法 57
3.2.2　requestAnimationFrame()的polyfill实现 57
3.3　实现游戏主循环 60
3.4　计算帧速率 61
3.5　滚动游戏背景 62
3.5.1　平移坐标系 62
3.5.2　滚动Snail Bait游戏的背景 65
3.6　制作基于时间的运动 67
3.7　反转滚动方向 67
3.8　绘制动画帧 68
3.9　使用视差产生视深的假象 68
3.10　小结 71
3.11　练习 71
第4章　游戏的基本架构 72
4.1　在JavaScript对象中封装游戏函数 73
4.1.1　SnailBait的构造函数 74
4.1.2　SnailBait的原型 75
4.2　理解JavaScript语言中挑剔的this指针 77
4.3　处理键盘输入 79
4.4　玩家按p键时暂停或者恢复游戏 81
4.5　冻结游戏，确保它精确地在暂停的位置恢复 82
4.6　在窗口失去焦点时暂停游戏 83
4.7　使用动态的倒计时来恢复一个暂停的游戏 84
4.7.1　向游戏玩家显示提示板（简短信息） 85
4.7.2　Snail Bait的倒计时 87
4.8　小结 89
4.9　练习 90
第5章　游戏加载动画 91
5.1　定义Snail Bait游戏的窗口 93
5.2　使用CSS过渡让元素淡入、淡出 96
5.2.1　让元素淡入 97
5.2.2　让元素淡出 98
5.2.3　snailbait-toast元素的CSS 99
5.2.4　显示和隐藏提示板 100
5.3　让拥有与CSS过渡属性Opacity关联的元素淡入、淡出 103
5.4　实现加载动画 105
5.5　显示游戏画面 109
5.6　小结 112
5.7　练习 113
第6章　sprite对象 114
6.1　sprite对象 116
6.1.1　sprite对象的属性 118
6.1.2　sprite对象的构造函数 119
6.1.3　sprite对象的方法 119
6.2　将sprite对象整合到游戏主循环中 121
6.3　实现sprite对象的artist对象 124
6.3.1　图形artist对象 124
6.3.2　图像artist对象 125
6.3.3　sprite图像表单artist对象 125
6.3.4　定义sprite图像表单单元格 128
6.4　创建和初始化游戏的sprite对象 130
6.5　使用元数据定义sprite对象 133
6.6　滚动sprite对象 136
6.7　小结 138
6.8　练习 138
第7章　sprite对象行为 140
7.1　行为基础 142
7.2　跑步小人行为 143
7.3　跑步小人的跑动行为 146
7.4　轻量级行为 148
7.5　游戏独立行为 150
7.6　组合行为 155
7.7　小结 159
7.8　练习 159
第8章　时间轴，第1部分：有限行为及线性运动 160
8.1　实现一个初始的跳跃行为算法 161
8.2　将处理跳跃行为的职责转交给跑步小人 162
8.3　实现跳跃行为 164
8.4　使用秒表记录动画时间 165
8.5　重新定义跳跃行为 168
8.6　实现线性运动 170
8.6.1　上升阶段 170
8.6.2　下降阶段 171
8.7　暂停行为 173
8.8　小结 175
8.9　练习 175
第9章　时间轴，第2部分：非线性运动 176
9.1　理解时间及其衍生物 177
9.2　使用动画计时器和缓变功能实现非线性跳跃 177
9.3　实现动画计时器 179
9.4　实现缓变功能 181
9.5　微调缓变功能 184
9.6　实现真实的跳动行为 185
9.7　使行为随机化 189
9.8　使用动画计时器和缓变功能实现非线性颜色改变 190
9.9　小结 193
9.10　练习 193
第10章　时间轴，第3部分：时间系统 194
10.1　Snail Bait游戏的时间系统 195
10.2　创建和启动时间系统 197
10.3　将时间系统整合进Snail Bait游戏中 198
10.3.1　使用时间系统驱动游戏动画 198
10.3.2　实现使用时间系统修改游戏时间流的函数 199
10.3.3　在计算帧速率时分解时间比率 199
10.3.4　使用时间系统暂停和恢复游戏 200
10.4　重新定义秒表和动画计时器的当前时间 202
10.5　实现时间系统 206
10.6　小结 208
10.7　练习 208
第11章　碰撞检测 209
11.1　碰撞检测过程 210
11.2　碰撞检测技术 211
11.3　Snail Bait游戏中的碰撞检测 212
11.3.1　sprite对象的碰撞矩形 212
11.3.2　跑步小人的碰撞行为 214
11.4　为碰撞检测选择碰撞候选对象 215
11.5　在跑步小人与其他sprite对象之间检测碰撞 216
11.6　处理碰撞 217
11.7　优化碰撞检测 220
11.7.1　改善包围盒 220
11.7.2　使用空间分割方法 221
11.8　监测碰撞检测的运行性能 222
11.9　编程实现碰撞检测的边界案例 223
11.10　小结 226
11.11　练习 226
第12章　重力 228
12.1　为跑步小人实现坠落行为 228
12.2　实现重力 230
12.2.1　跑步小人的坠落行为 232
12.2.2　计算初始下降速度 236
12.2.3　在跑步小人坠落过程中暂停游戏 237
12.3　最终版的碰撞检测 237
12.4　小结 238
12.5　练习 239
第13章　sprite动画和特殊效果 240
13.1　实现sprite动画 241
13.2　创建特效 246
13.2.1　晃动游戏画面 246
13.2.2　场景切换 248
13.3　编排效果 253
13.3.1　炸死蜜蜂 254
13.3.2　引爆按钮 256
13.4　小结 258
13.5　练习 258
第14章　声音和音乐 259
14.1　创建声音和音乐文件 261
14.2　加载音乐和音效 262
14.3　设置声音和音乐控件 263
14.4　播放音乐 264
14.5　循环播放音乐 265
14.6　播放音效 267
14.6.1　创建sprite音频对象 270
14.6.2　定义音效对象 271
14.6.3　实现多声道播放音效 272
14.7　打开和关闭声音播放 279
14.8　小结 280
14.9　练习 280
第15章　移动设备 281
15.1　在移动设备上运行Snail Bait游戏 284
15.2　检测移动设备 284
15.3　缩放游戏以适应移动设备 286
15.3.1　HTML5 viewport元标签 287
15.3.2　以编程方式调整游戏画面以适应移动设备屏幕 291
15.4　修改游戏动画底部的控制说明 295
15.5　修改欢迎界面 295
15.5.1　实现欢迎提示 296
15.5.2　实现移动设备中的控制说明 301
15.5.3　实现移动设备版开始提示 305
15.5.4　显示移动设备中的开始提示 306
15.6　添加触控事件 307
15.7　在移动设备中处理音频的方法 310
15.8　在主屏幕上添加启动图标，并以全屏模式运行游戏 312
15.9　小结 313
15.10　练习 313
第16章　粒子系统 314
16.1　排烟孔粒子系统 315
16.2　使用排烟孔粒子系统 318
16.2.1　定义排烟孔粒子系统数据 318
16.2.2　创建排烟孔粒子系统 318
16.2.3　将排烟孔粒子系统存入Snail Bait游戏的sprite对象数组中 319
16.2.4　在每个动画帧中滚动排烟孔粒子系统 320
16.3　编程实现排烟孔粒子系统 321
16.3.1　把排烟孔粒子系统伪装成sprite对象 321
16.3.2　组合火焰粒子 323
16.3.3　组合烟泡 327
16.4　暂停排烟孔粒子系统 337
16.5　小结 338
16.6　练习 338
第17章　用户界面 339
17.1　记录玩家游戏成绩 340
17.2　增加游戏生命指示器 343
17.3　显示游戏字幕 348
17.4　使用Tweet发布玩家游戏得分 354
17.5　当游戏运行缓慢时通知游戏玩家 357
17.5.1　监控帧速率 361
17.5.2　编程实现运行缓慢通知的事件处理句柄 363
17.6　编程实现通关动画 364
17.7　小结 368
17.8　练习 368
第18章　开发者后门程序 370
18.1　Snail Bait游戏的开发者后门 372
18.2　开发者后门的HTML元素及CSS 373
18.3　显示及隐藏开发者后门 375
18.4　更新开发者后门的元素 377
18.5　实现开发者后门的复选框 378
18.5.1　显示及隐藏碰撞矩形 380
18.5.2　启用或禁用运行缓慢通知 382
18.5.3　显示或隐藏排烟孔粒子系统 383
18.5.4　更新开发者后门的复选框 383
18.6　实现开发者后门的滑动条 384
18.6.1　为开发者后门的滑动条定义HTML元素及CSS 386
18.6.2　在Snail Bait游戏的Java-Script代码中访问滑动条的读数 387
18.6.3　创建并初始化开发者后门的滑动条 388
18.6.4　将运行缓慢的滑动条关联到游戏中 389
18.6.5　将时间速率滑动条关联到游戏中 389
18.6.6　将游戏关联到时间速率滑动条上 390
18.6.7　在显示开发者后门之前更新滑动条 391
18.7　实现开发者后门刻度尺 392
18.7.1　创建并访问刻度尺的canvas元素 393
18.7.2　淡入淡出刻度尺 394
18.7.3　绘制刻度尺 395
18.7.4　更新刻度尺 396
18.7.5　拖动游戏画面 397
18.8　小结 401
18.9　练习 401
第19章　服务器端开发：内部指标、高分记录及部署 403
19.1　Node.js及socket.io简介 404
19.2　在Snail Bait游戏中引入socket.io 406
19.3　创建一个简单的服务器 407
19.4　在服务器端创建套接字 407
19.5　启动服务器 408
19.6　在客户端创建一个套接字并连接到服务器 408
19.7　记录游戏内部指标 409
19.8　管理高分记录 412
19.8.1　实现高分记录的用户界面 413
19.8.2　检索服务器中的高分记录 415
19.8.3　在客户端显示高分记录 418
19.8.4　监视姓名输入 419
19.8.5　验证并将高分记录存储到服务器 420
19.8.6　重新显示高分记录 422
19.8.7　开始新游戏 422
19.9　部署Snail Bait游戏 423
19.10　将文件上传到服务器 425
19.11　小结 426
19.12　练习 426
第20章　后记：Bodega Revenge游戏 428
20.1　设计用户界面 430
20.2　创建sprite表单 433
20.3　实例化游戏 433
20.4　实现sprite对象 434
20.4.1　炮塔 434
20.4.2　炮弹 437
20.4.3　小鸟 439
20.5　实现sprite对象的行为 441
20.5.1　炮塔的行为 442
20.5.2　炮弹的行为 447
20.5.3　小鸟的行为 450
20.6　绘制剩余炮弹指示器 454
20.7　为移动设备实现触摸控制 456
20.8　小结 458
20.9　练习 459


查看全部↓