HTML5跨平台游戏设计

第1章 游戏设计与HTML5 1

1.1 HTML5简介 2

HTML是什么 2

HTML的缺陷 3

HTML5的发展 3

HTML5全新体验 4

HTML5特质 5

HTML5与游戏设计 6

1.2 HTML5开发环境的建立 6

编辑工具Notepad++ 7

安装Notepad++ 9

1.3 HTML5测试与调试 14

安装Firefox浏览器 15

安装Selenium IDE 16

应用Selenium IDE 18

1.4 范例：HelloWorld 21

范例说明 21

重点技术 21

代码段 23

程序代码解析 23

第2章 HTML5基础 25

2.1 结构化元素 26

什么是结构化元素 26

结构化元素图解 26

实际应用 28

2.2 内容标记方法 31

绘图元素 31

分组元素 31

文字层级元素 32

交互式元素 34

2.3 多媒体应用 35

36

37

37

补充说明：WebVTT格式 38

38

2.4 Web应用程序 39

39

40

41

41

第3章 CSS3应用 43

3.1 CSS基础知识 44

CSS是什么 44

CSS3闪亮登场 44

CSS基本语句 45

引用CSS 47

实战CSS 49

3.2 文字与图片 49

文字样式 50

图片 55

盒子模式(box model) 58

3.3 表格与窗体 61

表格 61

窗体 63

第4章 CSS3网页小游戏 66

4.1 制作游戏场景 67

游戏策划 67

HTML结构 68

CSS样式 70

4.2 制作地鼠和死亡动画 73

地鼠布局方式 73

地鼠死亡动画的触发原理 73

动画属性Animation 74

CSS样式 74

4.3 制作得分动画 83

得分动画制作原理 83

渐变属性Transition 83

CSS样式 84

4.4 制作关卡时间条与游戏结束画面 85

关卡时间条动画原理 85

CSS样式 86

第5章 常用的触发事件与组件 89

5.1 鼠标单击事件监听 90

JavaScript提要 90

鼠标单击事件 92

5.2 键盘按键事件监听 96

按下一个键(onKeyDown) 96

按住（keyPress）与放开（KeyUp） 98

5.3 网页锚点跳转 98

认识URL地址格式 98

认识hash值 99

5.4 浏览器检测 100

认识navigator 100

实践一下navigator 102

5.5 DOM控制 102

认识getElementById 102

认识eval()语句 104

实现一个加减乘除计算器 105

5.6 分辨率检测 107

检测屏幕数值 107

自动转换电脑版与移动版版面 108

5.7 发送E-Mail——客户回复系统 109

使用Chrome浏览器启动mailto 109

使用JavaScript启动E-Mail 109

5.8 当前时间日期 112

日期时间检测——计时器 112

日期对象Date 112

实现时间显示与计时器 112

程序的执行效率 113

第6章 多媒体播放 115

6.1 Canvas画布基础绘图 116

Canvas语句的基础 116

画布样版 116

绘制图形 117

控制图形的变形 122

6.2 Canvas动画应用 126

函数setInterval() 126

函数requestAnimationFrame() 128

6.3 多媒体影音播放 131

函数drawImage 131

播放器尺寸的控制 133

6.4 范例：动画小剧场 135

范例画面 135

角色表（sprite）原理 136

程序剖析 136

第7章 Web应用 140

7.1 基础介绍 141

AJAX 141

JSON 144

7.2 范例：Web服务器实际演练 148

建立Web服务器 148

AJAX传输范例 152

JSON实际演练 155

第8章 网页数据存储 157

8.1 Cookie和Session 158

Stateless和Stateful 158

Cookies简介 159

Session简介 160

8.2 Web Storage 161

Web Storage的优势 161

Web Storage的种类 161

8.3 范例：窗体切换 165

第9章 学习使用jQuery 168

9.1 jQuery事件与函数 169

开始使用jQuery 169

认识jQuery语句 170

jQuery声明 170

jQuery选取指令 171

jQuery函数 174

jQuery事件处理 174

9.2 标签控制 177

属性(Attributes)和样式(CSS)控制 177

DOM操作 179

动画效果 181

连续使用函数 186

9.3 开源模块的应用 188

认识jQuery Plugin 188

引用jQuery Plugin 188

创建jQuery Plugin 189

应用jQuery Plugin 190

9.4 范例：拉霸游戏 191

jQuery Plugin资源 191

拉霸游戏 193

第10章 趣味交互式个人履历网站 197

10.1 确定履历呈现的内容单元 198

角色设置 198

场景设置 198

美术风格 201

故事脚本 202

系统规划 205

10.2 建立视差滚动网站场景 207

初始设置 208

游戏内容 208

10.3 制作角色外观与常态动画 213

显示环境设置 213

天空背景设置 214

角色设置 215

地面背景设置 224

标题云与文字内容 225

10.4 制作场景对象动画事件 227

视差滚动 227

触发动画 229

第11章 认识HTML5游戏引擎 235

11.1 gameQuery 236

第一次接触gameQuery 236

快速浏览gameQuery函数 237

11.2 Quintus 239

第一次接触Quintus 239

范例快速浏览 240

11.3 Melonjs 245

第一次接触Melonjs 245

范例快速浏览 247

11.4 LimeJS 250

第一次接触LimeJS 250

范例快速浏览 253

11.5 Cocos2D 256

第一次接触Cocos2D 256

官方范例快速浏览 257

第12章 游戏制作——2D游戏地图 260

12.1 下载与安装Tiled Map Editor 261

12.2 2D免费游戏场景资源介绍 262

OpenGameArt 262

Reiner's Tilesets 264

Game-icons.net 264

其他免费资源 265

12.3 绘制2D游戏场景与对象 265

绘制场景 265

绘制对象 269

12.4 编辑场景对象的属性 270

12.5 实机测试 271

第13章 游戏制作—仓库番推宝箱 273

13.1 Quintus环境建立 274

13.2 2D游戏场景建设 275

13.3 人物操控与Sheet动画 279

13.4 2D碰撞系统 285

13.5 游戏关卡建立 287

13.6 加载多媒体资源 289

13.7 实机测试 290

第14章 游戏制作—— Facebook网络应用 292

14.1 Facebook API下载与权限申请 293

开发人员注册 293

添加应用程序 294

获取API 296

14.2 Facebook会员登录按钮 298

JavaScript部分 298

HTML部分 302

14.3 Facebook发帖分享 302

JavaScript部分 302

HTML 部分 305

第15章 HTML5游戏的上线分享 306

15.1 Google云端存储架设游戏网站 307

Google云端存储架站的限制 307

Google云端存储架设网站的步骤 307

15.2 使用二维码分享网址 310

二维码 311

加入桌面 311

本书由浅入深地从HTML5、CSS3和JavaScript三大基础架构开始讲解，引导读者进入游戏开发的 世界。书中除了基本语法介绍，每个学习主题都设计有情境与游戏范例，有利于读者更快了解游戏开 发精髓。在进阶章节中，先以一个结合个人履历互动的游戏概念作为创新应用的范例，再引入其他开 源游戏引擎与HTML5衔接简化游戏制作的过程教你开发热门的游戏，以及将自己设计开发的游戏零成 本发布、行销的技巧。 本书清晰的教学内容、经典的游戏范例、大量的应用素材以及完整的实战教学，可为你增强开发 HTML5游戏的竞争力，让你发挥无限的创意。 本书适合于HTML5游戏开发入门者及想转型学习游戏开发的读者阅读，也适合作为HTML5游戏 开发的教材和参考书。

本书是具有网页游戏策划、设计和开发实战经验的三位专业人士撰写的一部力作，是关于使用 “HTML5 + CSS + JavaScript + 各种网页游戏插件”设计跨平台网页游戏的实战经验之作。与市面上已经出版的有关 HTML5 的各类书籍相比，本书的内容对于需要着手开发如日中天的跨平台网页游戏的人员来说，就是“酒逢知己千杯少”呀。因为市面上琳琅满目的众多 HTML5 图书，其内容都不外乎是讲解 HTML5 语言结构和网页程序设计，高深一些也只是涉及到 HTML5、CSS 加上 JavaScript 的协作网页开发。
　　然而，本书的核心内容始终围绕着跨平台网页游戏设计这一主题，以设计理论和理念为中心、丰富的范例程序实践为辅助、深入浅出、循序渐进地带领读者进入跨平台网页游戏的开发领域。其内容在目前的市场上还真不易找到，这也是我们改编此台版书以飨读者的重要原因之一。
　　改编有如下几点说明：
　　（1）游戏的开发环境尽量选用1新版本，例如我们使用1新版的 Notepad++ v6.8.2 取代原书的v6.7。
　　（2）因为原书的写作环境是繁体中文，所以像 Facebook 和 Google 这样的环境大陆目前还没法使用。我们在改编中都尽量把可以替代的部分都换成中文简体环境，例如，用百度替换了 Google 作为搜索引擎，把新闻浏览网站改为“新浪网”。
　　（3）对于篇幅太大无法整体替换的，我们基本保持了原貌。例如，第 14 章我们保留了Facebook 网路应用的设计思路，大家可以参照这个思路选用我们本地环境的社交网站进行设计。第15章我们保留了 Google 云端存储架设游戏网站的思路和步骤，大家可以参照这个思路和步骤选用本地的云端存储服务来架设游戏网站，例如百度的云端网盘等。
　　（4）各个版本的浏览器对 HTML5 的支持都不太一样，建议大家在使用本书示范程序的时候选用1新版本的浏览器，或者安装对 HTML5 支持比较全面的浏览器，我本人就在电脑中除了安装了 IE 11，还安装了Opera，Firefox 和 Chrome。不过，建议大家不用全都安装，我自己使用中觉得 Opera 对 HTML5 的支持1令人满意。