HTML5 2D游戏编程核心技术PDF电子书下载

第1章 概述 1

1.1 Snai1Bait游戏 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 定义SnailBait游戏的窗口 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 在SnailBait游戏的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 Nodejs及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