HTML5 Canvas游戏开发实战

前言

前言为什么要写这本书并非计算机专业的我，却最终走上了编程之路，并写了这样一本书，为什么呢？其实一切都是因为和游戏结了缘。小时候我非常喜欢玩游戏，为了玩游戏和小伙伴们干过不少调皮捣蛋的事情。初中为了得到自己的第一台游戏机，和父亲打赌，破天荒拿了全班第一名。当然有了游戏机的相伴，从那以后就再也没有拿过第一名了。因为数学上较有优势，所以读大学时选择的是数学专业，没有选读计算机让后来做开发的我多少感到有些遗憾。和其他人一样，大学是真正改变我人生的时期，第一次有了电脑，第一次从室友嘴里得知QQ为何物（这个大土包子），第一次接触了网游（还是大土包子），那时候非常痴迷于光荣公司的《三国志英杰传》和《三国志曹操传》，并且通过学习，试着制作了我人生中的第一款游戏《杨家将传奇》，在同类游戏中小有名气。如果你也喜欢玩《三国志曹操传》的MOD，也经历过2003年到2007年那段《三国志曹操传》MOD最鼎盛的时期，那么你也许会认识我，那时候我有个网名叫“回眸75度”。那时候制作的游戏因为不涉及编程，所以还不能叫做开发。大学毕业后，我开始思考自己未来的路，虽然没有任何编程基础，但是因大学时期游戏的制作，令我坚信游戏开发是我向往的职业。也是因为喜欢日本的游戏，最终来到了日本做软件开发，虽然并非全职的游戏开发者，但是我一直都在关注并学习着游戏的开发，不曾间断，一直至今。我是一个喜欢不断学习新知识的人，所以当HTML5作为一个新技术出现的时候，我没有理由不去了解它。由于对JavaScript有一定的基础，所以我在学习HTML5的Canvas时，上手非常快。出于对ActionScript的喜爱，我一开始便试着在JavaScript中模仿ActionScript的API来做开发，并且在博客上发表了《用仿ActionScript的语法来编写HTML5》系列文章，这便是最初的lufylegend开源库件的构建过程。当我把自己研究的类库整合到一起后，发现它使用起来十分方便，使用它来开发游戏可以节约大量的开发时间，于是我将其分享到了网上供大家免费使用，希望可以给相关开发者提供便利。我刚开始接触HTML5是在2011年，那时候正是HTML5炒得最火的时候，网上到处都是关于HTML5替代Flash的言论。我从来不认为Flash会因为HTML5而消失，但是我相信HTML5代表着互联网未来发展的方向。虽然HTML5并不像传言那样“一次编写，到处运行”，但是你只需要略加修改和调整就能让你的应用适用于另一个平台。网页游戏有着不可替代的优势，而HTML5无疑是未来网页游戏的首选技术之一，特别是在移动领域HTML5是唯一的工具，至少现在它是你唯一的选择。虽然HTML5还很年轻，还有很多不成熟的地方，但是它正在不断地完善，相信它不会让我们等太久。所以学习这门新技术非常有必要。我非常希望能将自己的学习心得分享给大家，因此写了这本书，希望这本书能够将你带入HTML5的游戏世界里。读者对象本书主要适合于以下读者：对HTML5开发感兴趣的人。本书对HTML5 Canvas进行了详细的介绍，想要学习HTML5开发的话绝对值得一看。对游戏开发感兴趣的人。本书介绍了多个游戏实例的开发，在如何构建游戏方面对游戏开发人员来说有一定的借鉴作用。Flash开发者。由于JavaScript和ActionScript具有一定的相似性，本书会模仿ActionScript的语法来进行游戏的构建和开发，如果你是一个Flash开发者，那么我相信本书会带你快速进入HTML5的世界。如何阅读本书本书从认识HTML5和JavaScript的面向对象开始展开，如果你从来没有接触过HTML5开发，那么请从第1章准备工作开始学习；如果你对HTML5有一定的了解，但不够全面，那么请从第2章Canvas基本功能开始系统学习；如果你已经全面掌握了Canvas的API，那么可以从第4章lufylegend开源库件开始阅读，了解了lufylegend开源库件的运行原理之后再正式开始游戏的实战篇学习。全书共包括四大部分，一共11章。第一部分（第1章）是准备工作篇，介绍一些HTML5的发展历史和开发环境的搭建。第二部分（第2～4章）是基础知识篇，详细讲解HTML5 Canvas的基础知识以及开源库件lufylegend的使用方法。第三部分（第5～10章）是开发实战篇，通过实例为大家讲解如何使用lufylegend开源库件来进行HTML5的游戏开发，游戏实例涉及各种常见的游戏类型，包括休闲、射击、Box2d及网游等多个领域。第四部分（第11章）是技能提高篇，介绍如何运用数据来分析提高程序的效率。勘误和支持为了避免错误的发生，我已经将书中的源码进行了多次测试，但是由于本人的知识水平有限，加之编写的时间也很仓促，所以无法保证本书是100%正确的，书中也许会出现一些错误或者不准确的地方，恳请读者批评指正，以便再版时消除这些错误。如果您在阅读本书的过程中发现了不妥之处，欢迎您将错误信息发送到我的Web网站上。当然，也欢迎您发送邮件，期待着您宝贵的意见和真挚反馈。致谢感谢我的父母，是你们给了我生命，给了我一颗不断学习的心。感谢无所不知的网络，让我可以随时查阅资料。感谢无私地将自己的心得分享到网络上的coder们，是你们解决了我很多技术上的疑问，使我不断成长。感谢机械工业出版社华章公司的杨绣国编辑，感谢你在百忙之中如此细心地审阅此书，是你的耐心和帮助引导我顺利完成了全部书稿。最后我还要特别感谢软件工程师孙颖，是你跟我一起探讨了书中的内容，你的智慧与创意性的思维给了我无限的灵感。谨以此书，献给众多热爱HTML5的朋友们。张路斌（lufy）

内容概要

张路斌　资深前端开发工程师和游戏开发工程师，从事web开发和游戏开发多年，精通html5和flash等技术。html5开源游戏引擎lufylegend.js的开发者，利用html5和flash等技术独立开发了大型网页游戏アイドルバトル、flash游戏ポイガチャ、多平台游戏三国记系列，以及数十款手机小游戏，游戏开发经验十分丰富。

书籍目录

html5 canvas游戏开发实战》

前　　言

第一部分　准备工作篇

第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

第二部分　基础知识篇

第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

第三部分　开发实战篇

第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

第四部分　技能提高篇

第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

编辑推荐

《HTML5 Canvas游戏开发实战》系统讲解HTML 5 Canvas的基础知识和高级技巧，深入剖析开源库件lufylegend的原理与使用；以实例为向导，详细讲解射击游戏、物理游戏、网络游戏、页面游戏等各类游戏的开发思路和技巧。

作者简介

《HTML5 Canvas游戏开发实战》主要讲解使用HTML5 Canvas来开发和设计各类常见游戏的思路和技巧，在介绍HTML5 Canvas相关特性的同时，还通过游戏开发实例深入剖析了其内在原理，让读者不仅知其然，而且知其所以然。在书中，除了介绍了HTML5 Canvas的基础API之外，还重点阐述了如何在JavaScript中运用面向对象的编程思想来进行游戏开发。

《HTML5 Canvas游戏开发实战》在介绍每个游戏开发的过程时，都会包括游戏分析、开发过程、代码解析和小结等相关内容，以帮助读者了解每种类型游戏开发的详细步骤，让读者彻底掌握各种类型游戏的开发思想。最后，还通过数据对比分析，指导读者提升程序的性能，写出高效的代码，从而开发出运行流畅的游戏。



海报：

---

 HTML5 Canvas游戏开发实战下载

---