HTML5 Canvas游戏开发实战

出版时间：2013-4  出版社：机械工业出版社  作者：张路斌  
Tag标签：无  

前言

前言为什么要写这本书并非计算机专业的我，却最终走上了编程之路，并写了这样一本书，为什么呢？其实一切都是因为和游戏结了缘。小时候我非常喜欢玩游戏，为了玩游戏和小伙伴们干过不少调皮捣蛋的事情。初中为了得到自己的第一台游戏机，和父亲打赌，破天荒拿了全班第一名。当然有了游戏机的相伴，从那以后就再也没有拿过第一名了。因为数学上较有优势，所以读大学时选择的是数学专业，没有选读计算机让后来做开发的我多少感到有些遗憾。和其他人一样，大学是真正改变我人生的时期，第一次有了电脑，第一次从室友嘴里得知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）

内容概要

《HTML5 Canvas游戏开发实战》主要讲解使用HTML5 Canvas来开发和设计各类常见游戏的思路和技巧，在介绍HTML5 Canvas相关特性的同时，还通过游戏开发实例深入剖析了其内在原理，让读者不仅知其然，而且知其所以然。在书中，除了介绍了HTML5 Canvas的基础API之外，还重点阐述了如何在JavaScript中运用面向对象的编程思想来进行游戏开发。
《HTML5 Canvas游戏开发实战》在介绍每个游戏开发的过程时，都会包括游戏分析、开发过程、代码解析和小结等相关内容，以帮助读者了解每种类型游戏开发的详细步骤，让读者彻底掌握各种类型游戏的开发思想。最后，还通过数据对比分析，指导读者提升程序的性能，写出高效的代码，从而开发出运行流畅的游戏。
海报：

作者简介

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

书籍目录

前言第一部分 准备工作篇第1章 准备工作 21.1 HTML5介绍 21.1.1 什么是HTML5 21.1.2 HTML5的新特性 21.2 Canvas简介 51.2.1 Canvas标签的历史 51.2.2 Canvas的定义和用法 61.2.3 如何使用Canvas来绘图 61.2.4 Canvas的限制 71.3 开发与运行环境的准备 71.3.1 浏览器的支持 71.3.2 准备一个本地的服务器 81.4 开发工具的选择 81.5 测试与上传代码 121.6 JavaScript中的面向对象 131.6.1 类 131.6.2 静态类 161.6.3 继承 161.7 小结 17第二部分 基础知识篇第2章 Canvas基本功能 202.1 绘制基本图形 202.1.1 画线 202.1.2 画矩形 222.1.3 画圆 242.1.4 画圆角矩形 262.1.5 擦除Canvas画板 272.2 绘制复杂图形 282.2.1 画曲线 282.2.2 利用clip在指定区域绘图 302.2.3 绘制自定义图形 312.3 绘制文本 322.3.1 绘制文字 322.3.2 文字设置 332.3.3 文字的对齐方式 382.4 图片操作 412.4.1 利用drawImage绘制图片 412.4.2 利用getImageData和putImageData绘制图片 452.4.3 利用createImageData新建像素 472.5 小结 49第3章 Canvas高级功能 503.1 变形 503.1.1 放大与缩小 503.1.2 平移 533.1.3 旋转 543.1.4 利用transform矩阵实现多样化的变形 563.2 图形的渲染 653.2.1 绘制颜色渐变效果的图形 653.2.2 颜色合成之globalCompositeOperation属性 673.2.3 颜色反转 693.2.4 灰度控制 703.2.5 阴影效果 713.3 自定义画板 723.3.1 画板的建立 723.3.2 Canvas画布的导出功能 793.4 小结 81第4章 lufylegend开源库件 824.1 lufylegend库件简介 824.1.1 工作原理 824.1.2 库件使用流程 834.2 图片的加载与显示 844.2.1 图片显示举例 844.2.2 LBitmapData对象 864.2.3 LBitmap对象 874.3 层的概念 884.4 使用LGraphics对象绘图 904.4.1 绘制矩形 904.4.2 绘制圆 914.4.3 绘制任意多边形 924.4.4 使用Canvas的原始绘图函数进行绘图 934.4.5 使用LSprite对象进行绘图 944.4.6 使用LGraphics对象绘制图片 954.5 文本 1014.5.1 文本属性 1014.5.2 输入框 1024.6 事件 1034.6.1 鼠标事件 1034.6.2 循环事件 1044.6.3 键盘事件 1054.7 按钮 1064.8 动画 1084.9 小结 113第三部分 开发实战篇第5章 从简单做起—“石头剪子布”游戏 1165.1 游戏分析 1165.2 必要的JavaScript知识 1175.2.1 随机数 1175.2.2 条件分支 1175.3 分层实现 1175.4 各个层的基本功能 1195.4.1 基本画面显示 1195.4.2 结果层的显示 1265.4.3 控制层的显示 1275.5 出拳 1295.6 结果判定 1315.7 小结 137第6章 开发“俄罗斯方块”游戏 1386.1 游戏分析 1386.2 必要的JavaScript知识 1386.3 游戏标题画面显示 1396.4 向游戏里添加方块 1416.5 控制方块的移动 1526.5.1 键盘事件 1526.5.2 触屏事件 1556.6 方块的消除和得分的显示 1576.7 小结 160第7章 开发“是男人就下一百层”游戏 1617.1 游戏分析 1617.2 游戏标题画面显示 1617.3 读取图片与背景显示 1627.4 添加一个静止的地板 1677.5 添加游戏主角 1707.5.1 让游戏主角出现在画面上 1707.5.2 通过键盘事件来控制游戏主角的移动 1777.5.3 通过触屏事件来控制游戏主角的移动 1787.6 添加多种多样的地板 1797.6.1 会消失的地板 1797.6.2 带刺的地板 1817.6.3 带有弹性的地板 1827.6.4 向左和向右移动的地板 1847.7 游戏数据的显示 1877.8 游戏结束与重开 1907.9 小结 192第8章 开发射击类游戏 1938.1 游戏分析 1938.2 添加一架可控飞机 1948.2.1 添加一个飞机类 1948.2.2 可控飞机类 1978.3 为飞机添加多样化的子弹 2038.3.1 建立一个子弹类 2038.3.2 单发子弹 2058.3.3 多发子弹 2078.3.4 环形子弹 2088.3.5 反向子弹 2098.4 添加敌机 2098.4.1 建立一个敌机类 2108.4.2 建立一个敌机Boss类 2148.5 碰撞检测 2178.5.1 飞机与子弹的碰撞 2178.5.2 我机与敌机的碰撞 2208.6 子弹的变更 2218.6.1 建立一个弹药类 2228.6.2 弹药与我机的碰撞 2238.7 飞机生命值的显示 2258.8 游戏胜利与失败判定 2268.9 小结 228第9章 开发物理游戏 2299.1 Box2D简介 2299.2 Box2dWeb在lufylegend库件中的使用 2299.3 创建各种各样的物体 2349.3.1 矩形物体 2349.3.2 圆形物体 2379.3.3 多边形物体 2399.4 响应鼠标拖拽物体 2429.5 关节（Joint） 2439.5.1 距离关节（b2DistanceJointDef） 2439.5.2 旋转关节（b2RevoluteJointDef） 2459.5.3 滑轮关节（b2PulleyJointDef） 2479.5.4 移动关节（b2PrismaticJoint） 2489.5.5 齿轮关节（b2GearJoint） 2509.5.6 悬挂关节（b2LineJoint） 2529.5.7 焊接关节（b2WeldJoint） 2539.5.8 鼠标关节（Mouse Joint） 2549.6 力 2549.7 碰撞检测 2569.8 镜头移动 2609.9 做一个简单的物理游戏 2639.10 小结 267第10章 开发网络游戏 26810.1 HTTP通信 26810.1.1 如何实现HTTP通信 26810.1.2 HTTP通信的弊端 27510.2 Socket通信 27510.2.1 区分Socket通信和HTTP通信 27610.2.2 服务器端 27610.2.3 客户端 28110.3 利用WebSocket实现简单的聊天室 28310.4 做一款多人在线的坦克大战 29310.4.1 服务器 29310.4.2 客户端 29310.5 小结 307第四部分 技能提高篇第11章 提高效率的分析 31011.1 绘图时使用小数的影响 31011.2 drawImage和putImageData的效率比较 31111.3 区域更新和图片大小对绘图效率的影响 31111.4 图片格式对绘图效率的影响 31311.5 优化代码以提高整体效率 31411.5.1 使用位运算 31411.5.2 少用Math静态类 31611.5.3 优化算法 31911.6 小结 322

编辑推荐

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

用户评论 (总计4条)

•   各种粗糙的图片，大段无用的代码。无需多评论了……有本事就买本试试！
•   主要讲解作者自己开发的库，不推荐买
•   该系列的书一直很关注，这本介绍得略显粗略
•   太一般, 没什么新颖的地方