HTML5 Canvas游戏开发实战PDF电子书下载

第一部分 准备工作篇 2

第1章 准备工作 2

1.1 HTML5介绍 2

1.1.1什么是HTML5 2

1.1.2 HTML5的新特性 2

1.2 Canvas简介 5

1.2.1 Canvas标签的历史 5

1.2.2 Canvas的定义和用法 6

1.2.3如何使用Canvas来绘图 6

1.2.4 Canvas的限制 7

1.3开发与运行环境的准备 7

1.3.1浏览器的支持 7

1.3.2准备一个本地的服务器 8

1.4开发工具的选择 8

1.5测试与上传代码 12

1.6 JavaScript中的面向对象 13

1.6.1类 13

1.6.2静态类 16

1.6.3继承 16

1.7小结 17

第二部分 基础知识篇 20

第2章 Canvas基本功能 20

2.1绘制基本图形 20

2.1.1画线 20

2.1.2画矩形 22

2.1.3画圆 24

2.1.4画圆角矩形 26

2.1.5擦除Canvas画板 27

2.2绘制复杂图形 28

2.2.1画曲线 28

2.2.2利用clip在指定区域绘图 30

2.2.3绘制自定义图形 31

2.3绘制文本 32

2.3.1绘制文字 32

2.3.2文字设置 33

2.3.3文字的对齐方式 38

2.4图片操作 41

2.4.1利用drawImage绘制图片 41

2.4.2利用getImageData和putImageData绘制图片 45

2.4.3利用createImageData新建像素 47

2.5小结 49

第3章 Canvas高级功能 50

3.1变形 50

3.1.1放大与缩小 50

3.1.2平移 53

3.1.3旋转 54

3.1.4利用transform矩阵实现多样化的变形 56

3.2图形的渲染 65

3.2.1绘制颜色渐变效果的图形 65

3.2.2颜色合成之globalCompositeOperation属性 67

3.2.3颜色反转 69

3.2.4灰度控制 70

3.2.5阴影效果 71

3.3自定义画板 72

3.3.1画板的建立 72

3.3.2 Canvas画布的导出功能 79

3.4小结 81

第4章 lufylegend开源库件 82

4.1 lufylegend库件简介 82

4.1.1工作原理 82

4.1.2库件使用流程 83

4.2图片的加载与显示 84

4.2.1图片显示举例 84

4.2.2 LBitmapData对象 86

4.2.3 LBitmap对象 87

4.3层的概念 88

4.4使用LGraphics对象绘图 90

4.4.1绘制矩形 90

4.4.2绘制圆 91

4.4.3绘制任意多边形 92

4.4.4使用Canvas的原始绘图函数进行绘图 93

4.4.5使用LSprite对象进行绘图 94

4.4.6使用LGraphics对象绘制图片 95

4.5文本 101

4.5.1文本属性 101

4.5.2输入框 102

4.6事件 103

4.6.1鼠标事件 103

4.6.2循环事件 104

4.6.3键盘事件 105

4.7按钮 106

4.8动画 108

4.9小结 113

第三部分 开发实战篇 116

第5章 从简单做起——“石头剪子布”游戏 116

5.1游戏分析 116

5.2必要的JavaScript知识 117

5.2.1随机数 117

5.2.2条件分支 117

5.3分层实现 117

5.4各个层的基本功能 119

5.4.1基本画面显示 119

5.4.2结果层的显示 126

5.4.3控制层的显示 127

5.5出拳 129

5.6结果判定 131

5.7小结 137

第6章 开发“俄罗斯方块”游戏 138

6.1游戏分析 138

6.2必要的JavaScript知识 138

6.3游戏标题画面显示 139

6.4向游戏里添加方块 141

6.5控制方块的移动 152

6.5.1键盘事件 152

6.5.2触屏事件 155

6.6方块的消除和得分的显示 157

6.7小结 160

第7章 开发“是男人就下一百层”游戏 161

7.1游戏分析 161

7.2游戏标题画面显示 161

7.3读取图片与背景显示 162

7.4添加一个静止的地板 167

7.5添加游戏主角 170

7.5.1让游戏主角出现在画面上 170

7.5.2通过键盘事件来控制游戏主角的移动 177

7.5.3通过触屏事件来控制游戏主角的移动 178

7.6添加多种多样的地板 179

7.6.1会消失的地板 179

7.6.2带刺的地板 181

7.6.3带有弹性的地板 182

7.6.4向左和向右移动的地板 184

7.7游戏数据的显示 187

7.8游戏结束与重开 190

7.9小结 192

第8章 开发射击类游戏 193

8.1游戏分析 193

8.2添加一架可控飞机 194

8.2.1添加一个飞机类 194

8.2.2可控飞机类 197

8.3为飞机添加多样化的子弹 203

8.3.1建立一个子弹类 203

8.3.2单发子弹 205

8.3.3多发子弹 207

8.3.4环形子弹 208

8.3.5反向子弹 209

8.4添加敌机 209

8.4.1建立一个敌机类 210

8.4.2建立一个敌机Boss类 214

8.5碰撞检测 217

8.5.1飞机与子弹的碰撞 217

8.5.2我机与敌机的碰撞 220

8.6子弹的变更 221

8.6.1建立一个弹药类 222

8.6.2弹药与我机的碰撞 223

8.7飞机生命值的显示 225

8.8游戏胜利与失败判定 226

8.9小结 228

第9章 开发物理游戏 229

9.1 Box2D简介 229

9.2 Box2dWeb在lufylegend库件中的使用 229

9.3创建各种各样的物体 234

9.3.1矩形物体 234

9.3.2圆形物体 237

9.3.3多边形物体 239

9.4响应鼠标拖拽物体 242

9.5关节（Joint） 243

9.5.1距离关节（b2DistanceJointDef） 243

9.5.2旋转关节（b2RevoluteJointDef） 245

9.5.3滑轮关节（b2PulleyJointDef） 247

9.5.4移动关节（b2PrismaticJoint） 248

9.5.5齿轮关节（b2GearJoint） 250

9.5.6悬挂关节（b2LineJoint） 252

9.5.7焊接关节（b2WeldJoint） 253

9.5.8鼠标关节（Mouse Joint） 254

9.6力 254

9.7碰撞检测 256

9.8镜头移动 260

9.9做一个简单的物理游戏 263

9.10小结 267

第10章 开发网络游戏 268

10.1 HTTP通信 268

10.1.1如何实现HTTP通信 268

10.1.2 HTTP通信的弊端 275

10.2 Socket通信 275

10.2.1区分Socket通信和HTTP通信 276

10.2.2服务器端 276

10.2.3客户端 281

10.3利用WebSocket实现简单的聊天室 283

10.4做一款多人在线的坦克大战 293

10.4.1服务器 293

10.4.2客户端 293

10.5小结 307

第四部分 技能提高篇 310

第11章 提高效率的分析 310

11.1绘图时使用小数的影响 310

11.2 drawImage和putImageData的效率比较 311

11.3区域更新和图片大小对绘图效率的影响 311

11.4图片格式对绘图效率的影响 313

11.5优化代码以提高整体效率 314

11.5.1使用位运算 314

11.5.2少用Math静态类 316

11.5.3优化算法 319

11.6小结 322