本书利用最新的开放式网页技术，结合JavaScript，CSS3和WebGL技术，使用WebSockets、Canvas、HTML5音频、Web Storage及WebSockets等功能，从零开始创建一个游戏，并搭建一个框架，从而完成整个3D游戏的开发、设置及发布，生动展现可以流畅运行于各种移动终端及浏览器的HTML5游戏的开发过程。

关于作者 雅各布赛得林（Jacob Seidelin）是一名来自丹麦首都哥本哈根，拥有10年开发经验的独立网页开发者，致力于后端开发、图形设计及前端技术。在工作之余，他对JavaScript和HTML5、网页游戏开发有着浓厚的兴趣，并在推动浏览器前端开发技术的发展中做出了突出的贡献。如需查看他对网页的研究，请参考http://www.nihilogic.dk。 鸣谢 我要感谢为这本书做出贡献的人。首先，我要感谢Chris Webb让这本书可以在Wiley出版社获得出版权。感谢我的编辑Linda Morris，Brian Herrmann和Charles Hutchinson在书里各章节做出的优化，以及技术编辑Andrew Wooldridge对我书中所有技术细节进行的细致审阅。和你们一起工作我感到非常荣幸。 与此同时，我要感谢网页开发社区给了我无限灵感和工作动力。也感谢来自W3C，Knronos和所有致力于建立网页规范的辛勤工作的朋友。大家继续加油，一起开心地奋斗。 最后，感谢我美丽的妻子Ulla对我的无限支持与耐心，谢谢你一直以来对我的信任。 关于译者 黄蔚瀚，有10年的移动产品设计经验，熟悉多种移动开发技术，对游戏设计、音效配乐、用户体验分析有丰富的经验，是HTML5梦工场用户体验分析师。现任百度商业产品研究规划部高级产品设计师。 前 言 当乔布斯步入iPhone OS 4.0 Keynote的HTML5广告系统发布会时，带着成功的苹果精神惊叹了一句：“顺带一提，这全都是由HTML5实现的！”全场立即响起一阵阵欢呼声、笑声和掌声。在当前开放且标准化网页技术正一步步前进的时代，苹果对HTML5的追捧，在所有苹果移动设备上屏蔽Flash的举动，或许意味着另一项技术将迈出革命性的一步。苹果对HTML5的钟爱带有商业气息，但可以很清楚看到的是，开放式网页技术正在向前迈进，而且对网页或者游戏开发者而言，这是一个令人激动的时代。 网页和游戏开发不总是能让人激动。尽管如此，开发者在浏览器上开发游戏意味着将有一件件让人郁闷的事情发生。从传统角度来说，需要选择各种带有丰富特性的插件，或者需要为低端适配做出大量工作，可以这么理解，就是要把方形的HTML和JavaScript塞进一个圆形的游戏开发洞里。正因如此，再加上各种标准安装的失败，开发者纷纷提出反对的声音，同时更倾向于Flash的可靠性和可预测性。 通过对不同Flash插件的选择，开发者与游戏设计师得到更适合游戏开发的框架，添加动态图形、声音，甚至3D效果。但对这些插件的使用，往往会忽略可以给游戏开发带来更多发展的其他技术。尽管Flash、Java和Silverlight意味着可以在页面中的某个区域交互，但这仍有许多限制，使这些元素与围绕着它们的页面内容分离开来。 相反，使用HTML、JavaScript和CSS这些原生网页开发工具可以让游戏更自然地适配进网页里，但是，这依然存在着弊端，比如缺少可用的元素和各种API。当第一个标准HTML版本在20世纪90年代中期发布时，人们对互联网程序充满了想象，但是对使用HTML作为解决方案却提出了质疑。虽然，网页通过利用JavaScript和DOM让交互性慢慢地发展了起来，但图形仍然受到了许多静态图片的限制及HTML元素、声音缺乏的限制。只有当前HTML5、CSS3及相关标准的出现，使开发者可以创建新的桌面程序，而不只是基于页面的游戏。自然而然，这些技术的发展会被应用到网页游戏及当前市面上比较流行的交互产品中。 这本书是为谁写的 HTML、JavaScript和CSS不再是用来建立网站的技术，网页应用程序可以和桌面插件一样配置到网页、移动设备及其他地方中。如果你对开发游戏有兴趣而且希望利用你所具备的网页技术来实现这一切，这本书很适合你。 你可能已经对网页开发非常熟悉且正在从事和HTML，CSS及JavaScript相关的工作。《利用HTML5，CSS3和WebGL开发HTML5游戏》不只是一本带你入门的HTML5书，也不只是一本教你如何建立网站的书，此书的写作目的是希望你具备一些传统HTML技术及了解一些新的元素和API。本书并非涵盖了所有HTML5的特征，因为有的特征与游戏无关。你也不必是一位编程专家，但最好有一些JavaScript的编程经验。书中会提及并解释HTML5里新的JavaScript API，所以前提是你对编程语言有一定的理解能力。 《利用HTML5，CSS3和WebGL开发HTML5游戏》不是一本游戏设计书，因为已经有许多书讲解游戏设计思想，这并非本书的重点。如果对例子进行过多细节的解释，如人工智能、物理模拟、高级图形编译，将减少对HTML5和网页开发的内容。使用这本书并不需要你具备游戏开发经验，也不要求你是一位数学家或伟大的设计师。《利用HTML5，CSS3和WebGL开发HTML5游戏》浅谈了游戏开发理论，对于一些不常见的数学公式的编程思想，在书中也有所解释。如果你对游戏开发有兴趣，有高中数学知识且可以描绘人物线条，那么，这会是一本很适合你的书！ Jacob Seidelin 译 者 序 随着HTML5的强势发展，各大浏览器也紧跟着进行优化，这对于开发者来说的确是一个福音。在网页游戏市场里，HTML5新的特征把用户从原有的Flash小框里解救了出来，让游戏从此可以填充到整个浏览器；此外，其他新特征也满足了许多用户感观上的需求，比如3D图像、声音等。此外，在本地支持更大的储存空间来保存相关游戏信息可以提高玩家的在线黏度。 HTML5无疑给PC游戏市场带来了许多机会，此外，在移动设备上也渐放光芒。2010年，国内多家互联网公司纷纷转型使用HTML5作为主要开发语言，HTML5游戏也如雨后春笋般出现，来自PC、电视、掌上游戏机的游戏都纷纷以各种形式移植到网页上。此外，硬件厂商也更新了设备，对HTML5进行性能优化。 希望对编程有兴趣的产品设计师和界面设计师通过此书可以了解到更多HTML5的能力，减少过度设计；同时，希望开发者们可以通过本书学习到HTML5的新特征，得到一些灵感与启发；最后，发挥创造力，让我们一起在浏览器里创造出更多的奇迹。 黄蔚瀚

目 录 第一部分 HTML5游戏入门指导 第1章 网页上的游戏 2 1.1 追溯HTML5的历史 2 1.2 在游戏中使用HTML5 3 1.2.1 canvas（画布） 3 1.2.2 audio（声音） 4 1.2.3 WebSocket（网络接口） 5 1.2.4 Web Storage（网络存储） 6 1.2.5 WebGL（网络图形语言） 7 1.2.6 HTML5（不）是Flash杀手 7 1.3 实现向下兼容性 7 1.3.1 特征检测 7 1.3.2 使用Modernizr检测库 8 1.3.3 用polyfill填充缺口 9 1.4 创建一个游戏 10 1.5 总结 10 第2章 迈出第一步 11 2.1 理解游戏 11 2.1.1 交换宝石 12 2.1.2 配成3个 12 2.1.3 等级进阶 12 2.2 识别游戏阶段 12 2.2.1 启动界面 12 2.2.2 主界面 13 2.2.3 游戏画面 13 2.2.4 最高分 13 2.3 创建程序架构 14 2.3.1 建立HTML 15 2.3.2 添加各种风格 16 2.3.3 加载脚本 17 2.4 创建启动画面 21 2.4.1 使用网络字体 21 2.4.2 装饰启动画面 22 2.5 总结 24 第3章 移植到手机 25 3.1 开发移动网页应用程序 25 3.1.1 一次写，多次读 26 3.1.2 移动平台的挑战 26 3.2 处理用户在移动设备里的输入 26 3.2.1 键盘输入 27 3.2.2 鼠标VS.触摸 27 3.3 适配小屏幕分辨率 28 3.3.1 创建可调整的布局 29 3.3.2 控制视口 31 3.3.3 屏蔽缩放功能 31 3.4 创建不同的视图 32 3.4.1 创建主菜单 32 3.4.2 添加屏幕模块 34 3.4.3 使用CSS媒体查询 37 3.4.4 检测设备的旋转 38 3.4.5 添加一个移动样式表 39 3.5 在iOS和Android设备上开发 42 3.5.1 将网页应用程序发布于主界面上 42 3.5.2 清除浏览器的障碍 49 3.6 调试移动网页应用程序 52 3.6.1 启用Safari调试器 52 3.6.2 访问Android日志 54 3.7 总结 54 第二部分 创建一个简单游戏 第4章 建立游戏 56 4.1 建立游戏面板模块 56 4.1.1 初始化游戏状态 57 4.1.2 填充初始面板 60 4.2 生成规则 62 4.2.1 验证交换 62 4.2.2 检测链 65 4.2.3 重新填充面板 69 4.2.4 交换宝石 72 4.3 总结 74 第5章 将任务委托给Web Workers 75 5.1 使用Web Workers 75 5.1.1 工作线程的使用限制 76 5.1.2 工作线程能做什么 77 5.2 使用工作线程 78 5.2.1 发送消息 78 5.2.2 接收消息 79 5.2.3 捕获错误 79 5.2.4 共享工作线程 79 5.2.5 一个素数检测的例子 81 5.3 在游戏中使用Web Workers 84 5.3.1 创建工作线程模块 84 5.3.2 保持相同的接口 86 5.4 总结 91 第6章 在画布（canvas）里创建图形 92 6.1 canvas与其他方法比较 92 6.1.1 位图图像 92 6.1.2 SVG图像 93 6.1.3 画布canvas 93 6.1.4 何时选择canvas 94 6.2 使用canvas绘制 94 6.2.1 绘制形状和路径 95 6.2.2 使用高级画笔与填充样式 103 6.2.3 使用变换 107 6.2.4 添加文本、图像和阴影 108 6.2.5 管理状态栈 112 6.2.6 绘制HTML5徽标 113 6.2.7 图像合成 119 6.3 访问图像数据 120 6.3.1 获取像素值 120 6.3.2 更新像素值 121 6.3.3 导出图像文件数据 122 6.3.4 理解安全限制 123 6.3.5 创建基于像素的效果 123 6.4 总结 125 第7章 创建游戏界面 126 7.1 预加载游戏文件 126 7.1.1 检测宝石大小 127 7.1.2 修改加载器脚本 128 7.1.3 添加一个进度条 132 7.2 改进背景 135 7.3 创建游戏界面 137 7.3.1 使用canvas绘制面板 139 7.3.2 使用CSS和图片绘制面板 145 7.4 总结 151 第8章 游戏互动 152 8.1 获取用户输入 152 8.1.1 在触摸屏上实现鼠标功能 152 8.1.2 虚拟键盘 153 8.1.3 触摸操作 154 8.1.4 输入操作和canvas 159 8.2 创建输入模块 161 8.2.1 执行游戏操作 165 8.2.2 捆绑输入与游戏函数 170 8.3 总结 177 第9章 绘制游戏动画 178 9.1 让游戏动起来 178 9.1.1 动画计时 179 9.1.2 绘制光标 183 9.1.3 绘制游戏动画 185 9.2 添加分数和事件 193 9.2.1 创建UI元素 194 9.2.2 创建游戏计时器 197 9.2.3 奖励分数 199 9.2.4 游戏结束 207 9.3 总结 210 第三部分 添加3D与声音 第10章 为游戏创建音频 212 10.1 HTML5音频 212 10.1.1 检测音频支持 213 10.1.2 理解音频格式之争 213 10.1.3 寻找音效 215 10.2 使用audio元素 216 10.2.1 播放控制 218 10.2.2 在移动设备上使用音频 222 10.3 使用音频数据 222 10.3.1 使用Mozilla音频数据接口 223 10.3.2 一些例子 225 10.4 建立音频模块 229 10.4.1 为音效回播做准备 230 10.4.2 播放声音效果 231 10.4.3 停止播放 233 10.4.4 清除声音 233 10.5 为游戏添加声音效果 235 10.5.1 在游戏界面里播放音频 235 10.6 总结 236 第11章 使用WebGL创建3D图形 237 11.1 网页上的3D 237 11.1.1 开始使用WebGL 238 11.1.2 调试WebGL 239 11.1.3 创建一个辅助模块 239 11.2 着色器 240 11.2.1 变量和数据类型 240 11.2.2 通过WebGL使用着色引擎 244 11.2.3 统一变量 249 11.2.4 变化变量 250 11.3 渲染3D对象 251 11.3.1 使用顶点缓冲区 251 11.3.2 使用索引缓冲区 253 11.3.3 使用模型、视图和投影 254 11.3.4 渲染 257 11.3.5 加载Collada模块 260 11.4 使用纹理和光照 262 11.4.1 添加光效 262 11.4.2 添加per-pixel 光效 265 11.4.3 创建纹理 268 11.5 创建WebGL显示模块 273 11.5.1 加载WebGL文件 274 11.5.2 设置WebGL 275 11.5.3 渲染宝石 278 11.5.4 让宝石动起来 283 11.6 总结 286 第四部分 本地存储与多人游戏 第12章 本地存储与缓存 288 12.1 使用网页存储器（Web Storage）存储数据 288 12.1.1 使用存储接口 289 12.1.2 建立存储模块 292 12.2 使游戏状态持续 294 12.2.1 退出游戏 294 12.2.2 暂停游戏 296 12.2.3 存储游戏数据 298 12.3 建立高分列表 301 12.3.1 建立高分界面 301 12.3.2 存储高分数据 304 12.3.3 显示高分数据 305 12.4 程序缓存 307 12.4.1 缓存舱单 307 12.5 总结 310 第13章 使用网络接口联网 311 13.1 WebSockets的应用 311 13.1.1 连接服务器 312 13.1.2 与WebSocket连接 314 13.2 在服务器上使用Node 315 13.2.1 安装Node 316 13.2.2 利用Node创建HTTP服务器 318 13.2.3 创建一个WebSocket聊天室 319 13.3 总结 326 第14章 资源 327 14.1 使用中间设备 327 14.1.1 Box2D 327 14.1.2 Impact 329 14.1.3 Three.js 331 14.2 在移动设备上部署 332 14.2.1 PhoneGap 332 14.2.2 Appcelerator Titanium 336 14.3 发布游戏 337 14.3.1 Chrome Web Store 337 14.3.2 Zeewe 338 14.3.3 Android Market 338 14.3.4 App Store 339 14.4 使用线上服务 339 14.4.1 TapJS 339 14.4.2 Playtomic 340 14.4.3 JoyentCloud Node 341 14.5 总结 341

http://www.hxedu.com.cn/hxedu/fg/book/bookinfo.html?code=TN224230