HTML5游戏开发实战

审校者简介

译者序

前言

第1章　HTML5游戏概述1

1.1　探索HTML5新功能1

1.1.1　Canvas2

审校者简介

译者序

前言

第1章　HTML5游戏概述1

1.1　探索HTML5新功能1

1.1.1　Canvas2

1.1.2　音频2

1.1.3　GeoLocation2

1.1.4　WebGL2

1.1.5　WebSocket3

1.1.6　本地存储4

1.1.7　离线应用程序4

1.2　探索CSS3新功能5

1.2.1　CSS3转换5

1.2.2　CSS3变换7

1.2.3　CSS3动画7

1.3　HTML5和CSS3新功能的更多细节8

1.4　创建HTML5游戏的好处8

1.4.1　不需要第三方插件9

1.4.2　不需要插件就能支持iOS设备9

1.4.3　突破常规浏览器游戏限制9

1.4.4　创建HTML5游戏9

1.5　HTML5还能做些什么11

1.5.1　《记忆配对》游戏11

1.5.2　Sinuous11

1.5.3　小行星式书签小程序12

1.5.4　Quake 212

1.5.5　蝌蚪聊天室13

1.5.6　Scrabb.ly13

1.5.7　Aves引擎14

1.6　浏览更多HTML5游戏15

1.7　本书主要涉及哪些游戏15

1.8　总结16

第2章　DOM游戏开发入门17

2.1　准备开发工具18

2.2　为DOM游戏准备HTML文档18

2.2.1　新式HTML5 doctype声明19

2.2.2　页眉和页脚20

2.2.3　JavaScript代码最佳位置20

2.2.4　页面加载完后运行代码20

2.3　设置《乒乓球》游戏元素21

2.3.1　jQuery简述23

2.3.2　jQuery选择器基础知识23

2.3.3　jQuery css函数24

2.3.4　使用jQuery的好处25

2.3.5　使用jQuery操纵DOM游戏元素25

2.3.6　绝对位置的行为26

2.4　获取玩家的键盘输入27

2.4.1　了解按键代码29

2.4.2　让常数更具可读性29

2.4.3　用parseInt函数将字符串转换为数字30

2.4.4　在控制台面板中直接执行JavaScript表达式31

2.4.5　检查控制台窗口32

2.5　支持玩家多键盘同时输入32

2.5.1　更好地声明全局变量34

2.5.2　用setInterval函数创建JavaScript定时器35

2.5.3　理解游戏主循环35

2.6　通过JavaScript间隔移动DOM对象35

2.7　开始碰撞检测37

2.8　动态显示HTML文本41

2.9　总结43

第3章　用CSS3构建《纸牌记忆配对》游戏44

3.1　用CSS3转换和变换模块移动游戏对象44

3.1.1　2D变换函数47

3.1.2　3D变换函数48

3.1.3　用CSS3转换实现样式间过渡49

3.2　创建翻牌效果50

3.2.1　使用jQuery toggleClass函数切换类 52

3.2.2　通过z-index控制重叠元素的可见性53

3.2.3　介绍CSS perspective属性53

3.2.4　介绍背面可见性54

3.3　创建《纸牌记忆配对》游戏55

3.3.1　下载纸牌精灵表图像55

3.3.2　设置游戏开发环境56

3.3.3　使用jQuery复制DOM元素61

3.3.4　使用jQuery的子节点过滤器选择首个子元素61

3.3.5　垂直对齐DOM元素62

3.3.6　通过背景位置来使用CSS精灵62

3.4　给配对游戏添加游戏逻辑63

3.4.1　在CSS转换完后执行代码66

3.4.2　翻牌后延迟代码的执行67

3.4.3　在JavaScript中随机化数组67

3.4.4　通过HTML5自定义数据属性保存内部自定义数据68

3.4.5　用JQuery访问自定义数据属性68

3.4.6　制作其他纸牌游戏70

3.5　在游戏中嵌入Web字体70

3.6　总结73

第4章　用Canvas和绘图API构建《解题》游戏74

4.1　介绍HTML5 Canvas元素75

4.2　在Canvas中绘制圆形75

4.2.1　当Web浏览器不支持Canvas时的反馈信息77

4.2.2　用Canvas的arc函数绘制圆和图形78

4.2.3　把角度转换为弧度78

4.2.4　在Canvas中执行路径绘制的操作82

4.2.5　在切换路径样式时先调用BeginPath82

4.2.6　关闭路径83

4.2.7　将画圆功能封装成函数83

4.2.8　在JavaScript中生成随机数85

4.2.9　保存圆的位置85

4.3　在Canvas中画线87

4.4　通过Canvas中的鼠标事件与绘制对象交互90

4.4.1　在Canvas元素中获取鼠标位置93

4.4.2　在Canvas中检测鼠标事件是否发生在圆上93

4.4.3　游戏主循环95

4.4.4　清除Canvas95

4.5　在Canvas中检测线的交点96

4.6　制作《解题》游戏100

4.6.1　定义关卡数据105

4.6.2　判断是否过关105

4.6.3　显示当前关卡和完成进度105

4.7　总结106

第5章　构建大师级Canvas游戏107

5.1　用渐变色来填充图形108

5.1.1　给渐变添加色标109

5.1.2　填充径向渐变色110

5.2　在Canvas中绘制文本112

5.3　在Canvas中绘制图像116

5.3.1　使用drawImage函数120

5.3.2　装点Canvas游戏121

5.4　在Canvas中播放精灵表动画123

5.5　创建多层Canvas游戏127

5.6　总结132

第６章　给游戏添加声音效果134

6.1　给PLAY按钮添加声音效果135

6.1.1　定义audio元素137

6.1.2　播放声音138

6.1.3　暂停声音138

6.1.4　调整音量大小139

6.1.5　使用jQuery 的hover事件139

6.1.6　创建Ogg格式的音频以支持Mozilla Firefox140

6.1.7　不同Web浏览器所支持的音频格式141

6.2　构建迷你钢琴音乐游戏141

6.2.1　在HTML5游戏中创建场景144

6.2.2　让音乐播放可视化144

6.2.3　为音乐游戏选择正确的歌曲149

6.2.4　存储和提取歌曲关卡数据149

6.2.5　获取游戏的流逝时间150

6.2.6　创建音乐点150

6.2.7　移动音乐点151

6.3　将PLAY按钮与音乐游戏场景链接起来152

6.4　构建键盘驱动的迷你钢琴音乐游戏155

6.4.1　通过按键来击打三条音乐线156

6.4.2　判断按键是否击中音乐点157

6.4.3　通过给定索引将元素从数组中移除158

6.5　给迷你钢琴游戏添加额外的功能159

6.5.1　 根据玩家的表现而调整音乐音量159

6.5.2　从游戏中删除音乐点161

6.5.3　保存最近5个音乐点的成功率计数162

6.5.4　记录音符来得到关卡数据162

6.6　音乐播放完后处理audio事件164

6.7　总结166

第7章　利用本地存储技术保存游戏数据167

7.1　使用HTML5本地存储技术保存数据168

7.1.1　创建游戏结束对话框168

7.1.2　在浏览器中保存成绩171

7.1.3　通过本地存储技术保存和加载数据172

7.1.4　本地存储只保存字符串值173

7.1.5　将本地存储对象看做关联数组173

7.2　在本地存储中保存对象174

7.2.1　在JavaScript中获取当前日期和时间177

7.2.2　使用原生JSON将对象编码成字符串178

7.2.3　从JSON字符串中加载所保存的对象178

7.2.4　在控制台窗口中检测本地存储179

7.3　用一种漂亮的彩带效果来告诉玩家破记录了180

7.4　保存整个游戏的进度183

7.4.1　保存游戏进度183

7.4.2　从本地存储中删除记录186

7.4.3　在JavaScript中复制数组186

7.4.4　恢复游戏进度187

7.5　总结189

第8章　利用WebSocket构建多人 游戏—《我画你猜》190

8.1　初试WebSocket Web应用程序190

8.2　安装WebSocket服务器192

8.2.1　安装Node.JS WebSocket服务器193

8.2.2　创建广播连接数的WebSocket服务器194

8.2.3　初始化WebSocket服务器195

8.2.4　在服务器端监听连接事件195

8.2.5　在服务器端获取已连接的客户端数196

8.2.6　向所有已连接的浏览器广播消息196

8.2.7　创建客户端来连接WebSocket服务器并获取总连接数196

8.2.8　建立WebSocket连接198

8.2.9　WebSocket客户端事件198

8.3　使用WebSocket构建聊天室199

8.3.1　向服务器发送消息199

8.3.2　从客户端发送消息到服务器201

8.3.3　在服务器端接收消息201

8.4　通过在服务端广播接收到的消息来创建聊天室202

8.5　使用Canvas和WebSocket制作共享绘图板205

8.5.1　构建本地绘图板205

8.5.2　广播绘图数据给所有已连接的浏览器208

8.5.3　定义用于在客户端与服务器之间进行通信的数据对象211

8.5.4　将画线数据打包成JSON以便于广播211

8.5.5　再现从其他客户端接收到的画线数据212

8.6　构建多人游戏：《我画你猜》212

8.6.1　控制多人游戏的游戏流程217

8.6.2　在服务器端罗列出所有已连接客户端218

8.6.3　在服务器端发送消息给指定的连接218

8.6.4　改进现有游戏218

8.7　用CSS装点《我画你猜》游戏219

8.8　总结221

第9章　用Box2D和Canvas构建物理类汽车游戏222

9.1　安装Box2d JavaScript库223

9.1.1　用b2World创建新的物理世界对象226

9.1.2　用b2AABB定义物理边界226

9.1.3　给物理世界设置重力226

9.1.4　设置 Box2D忽略休眠物体227

9.2　在物理世界中创建静态地面227

9.2.1　创建物体形状228

9.2.2　创建物理物体228

9.3　在Canvas上绘制物理世界 229

9.4　在物理世界里创建动态的长方形232

9.5　推进物理世界的时间233

9.6　给游戏安装车轮234

9.7　创建物理汽车235

9.8　通过键盘给汽车施加动力237

9.8.1　向物体施加动力238

9.8.2　理解ApplyForce与ApplyImpulse之间的不同点239

9.8.3　给游戏环境添加坡道239

9.9　在Box2D世界检测碰撞240

9.10　重启游戏242

9.11　让游戏支持关卡244

9.12　为Box2D绘制图形轮廓247

9.12.1　使用形状和物体的userData属性250

9.12.2　根据物理物体的状态来绘制每一帧图像250

9.12.3　在Canvas中旋转和翻转图片251

9.13　给游戏添加装饰，让游戏更具趣味性251

9.13.1　用燃料的限制加速256

9.13.2　用CSS3进度条显示剩余燃料256

9.14　总结257

9.14.1　HTML5 游戏引擎258

9.14.2　游戏精灵以及贴图258

9.14.3　声音效果258

附录　突击测验答案259