《HTML5 2D游戏编程核心技术》源代码

时下，HTML5已经不再是Web技术爱好者口中的下一代Web语言，在历经8年的艰辛努力后，万维网联盟（W3C）终于在2014年发布了正式版的HTML5标准规范。HTML5由此结束了摇摆不定的状态，正式成为行业标准，成为互联网巨头们争相热捧的Web技术和框架。乔布斯的预言正在成为现实。
早在HTML5标准规范制定初期，HTML5游戏就已经出现，不过那时候的游戏更多的是以HTML5教学用例或个人学习成果的形式出现的。随着浏览器厂商不断完善对HTML5的支持，HTML5游戏也得到了进一步的发展，并在2012年形成一波HTML5游戏浪潮，此后便转入沉寂。2014年7月，《围住神经猫》这款HTML5小游戏在微信朋友圈火热转发，让业界看到了HTML5移动游戏的优势和潜力；此后的HTML5版《愚公移山》则让移动游戏开发者看到了让HTML5游戏实现商业化的希望。

得益于移动智能设备硬件性能的不断提升及移动端浏览器的强大支持，HTML5游戏正在摆脱小游戏、轻游戏的困局，具备了开发中度、重度游戏的基础。越来越多的大型游戏开发商正在加入HTML5游戏开发的队伍，全新Unity5、虚幻引擎、3D引擎Sting Ray等游戏引擎开始支持HTML5游戏开发，HTML5游戏的前景得到了行业的广泛认可。

作为一个标准，HTML5不仅仅是一种标记语言,也不仅仅局限于游戏开发，而是一种Web应用开发的框架和平台，包括了无需插件的视频、音频、本地存储、Canvas元素及绚丽的渲染效果等。而其中，最让前端开发者激动的当属Canvas元素，它赋予了前端开发者充分发挥自身丰富想象力的可能，结合JavaScript语言、CSS（层叠样式表），前端开发者能渲染出各种美轮美奂的视觉效果，带给用户最佳的使用体验。

译者也正是因为在实际工作中需要在浏览器端实现精美的数据可视化效果而开始学习、使用HTML5技术的。像大多数的软件开发者一样，译者也常感到在学习一项新技术时，抛开技术本身的难度不说，如何在实际工作中应用这项新技术才是决定把知识转化为能力的关键。而对于HTML5来说，从严格意义上讲，它只是一个停留在W3C众多草案中的标准，实际应用效果如何除了看浏览器的支持程度外，更重要的还是如何在开发中利用JavaScript语言和CSS来充分发挥HTML5的各项优势。因此，掌握HTML5技术的困难之处不在于对HTML5标准规范的理解，或是对HTML5单个特性的掌握，而在于如何把众多分散在HTML5技术、JavaScript语言、CSS中的知识点有机地结合起来，在实际开发中应用这些核心技术、满足开发需求，实现最终目的。

好在作者及时写就了本书。

本书是作者在《HTML5 Canvas核心技术：图形、动画与游戏开发》（已由机械工业出版社出版，书号为978-7-111-41634-0）之后的又一力作。在前作中，作者全面讲解了Canvas元素的API接口，以及如何利用Canvas元素进行图形绘制、动画制作、物理效果模拟、碰撞检测、游戏开发等内容，并使用大量的实例，演示了具体的实现方法。本书虽然也涉及相似内容的讲解，但绝不是前作的重复，而是对这些技术的综合、系统应用。

封面图

目录

• 译者序
• 前言
• 致谢
• 第1章概述1
• 1.1Snail Bait游戏3
• 1.2HTML5游戏开发最佳实践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.4Snail Bait游戏中的HTML和CSS15
• 1.5开始Snail Bait游戏编程21
• 1.6本书中使用的JavaScript23
• 1.7小结25
• 1.8练习26
• 第2章原始素材和开发环境27
• 2.1使用开发者工具28
• 2.1.1控制台29
• 2.1.2Chrome Canary的帧速率计数器32
• 2.1.3调试34
• 2.1.4时间线35
• 2.1.5Profiling39
• 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.1requestAnimationFrame()方法57
• 3.2.2requestAnimationFrame()的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.1SnailBait的构造函数74
• 4.1.2SnailBait的原型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.2Snail 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.3snailbait-toast元素的CSS99
• 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.1sprite对象116
• 6.1.1sprite对象的属性118
• 6.1.2sprite对象的构造函数119
• 6.1.3sprite对象的方法119
• 6.2将sprite对象整合到游戏主循环中121
• 6.3实现sprite对象的artist对象124
• 6.3.1图形artist对象124
• 6.3.2图像artist对象125
• 6.3.3sprite图像表单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.1Snail 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.3Snail Bait游戏中的碰撞检测212
• 11.3.1sprite对象的碰撞矩形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.1HTML5 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.1Snail Bait游戏的开发者后门372
• 18.2开发者后门的HTML元素及CSS373
• 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元素及CSS386
• 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.1Node.js及socket.io简介404
• 19.2在Snail Bait游戏中引入socket.io406
• 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