华章程序员书库 HTML5游戏开发实战PDF电子书下载

第1章HTML5游戏概述 1

1.1探索HTML5新功能 1

1.1.1 Canvas 2

1.1.2音频 2

1.1.3 GeoLocation 2

1.1.4 WebGL 2

1.1.5 WebSocket 3

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 Sinuous 11

1.5.3小行星式书签小程序 12

1.5.4 Quake 2 12

1.5.5蝌蚪聊天室 13

1.5.6 Scrabb…ly 13

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使用j Query复制DOM元素 61

3.3.4使用j Query的子节点过滤器选择首个子元素 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在切换路径样式时先调用BeginPath 82

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清除Canvas 95

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

第6章 给游戏添加声音效果 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 Firefox 140

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