HTML5游戏开发
2011-10
人民邮电
Jeanine Meyer
徐 阳,荆 涛 等
无
前言 人们对HTML5的新功能热情高涨，甚至有人建议就用HTML5构建吸引人的动态、交互式网站，而不再需要其他的技术或产品。这可能有些夸张，不过这些新特性让人兴奋不已确实是不争的事实。如今，只使用HTML5、CSS（Cascading Style Sheet，层叠样式表）和JavaScript就完全可以在屏幕上画出直线、弧线、圆和椭圆，还可以指定事件和事件处理来生成动画，并对用户的动作作出响应。可以使用标准控件在网站上加入视频和音频，或者也可以根据需要在应用中放入视频或音频。可以创建提供输入验证的表单，并立即向用户提供反馈。还可以使用一个类似于cookie的工具在客户计算机上存储信息。另外，可以使用一些新元素（如header和footer）帮助建立文档的结构。 本书是在我的教学实践和以前写的一些文章的基础上完成的。要深入了解一项技术的特性或者通用的编程概念，最好首先有具体的需求。游戏（特别是我们熟悉的一些简单游戏）就能提供这种需求，它可以很好地解释为什么要学习有关的技术，也让我们有了动力去钻研这些技术的特性。学习一种新的编程语言时，第一步我会编写一个骰子游戏。如果能构建一个带动画的弹道仿真应用，如弹弓游戏，并在出现某个特定条件时播放一个视频或音频片段，这会让我很高兴。如果可以构建我自己的迷宫，绘制上吊小人简笔画，并在玩家的计算机上存储信息，这更会让我欣喜若狂。这正是我们将在本书中做的。在了解如何构建这些简单游戏的同时，你也将逐步积累自己的经验。 在friends of ED全体人员和技术审校人员的大力帮助之下，本书得以完成。而撰写本书的目的就是让你做好准备，可以着手建立自己的网站，这包括游戏以及其他动态应用，另外还会简要介绍HTML5和编程的精髓。 写这本书时，并不是所有浏览器都支持HTML5的全部特性。我们已经使用Chrome、Firefox和Safari对书中开发的这些应用做了测试。 本书的读者对象 本书适合所有希望了解如何利用HTML5构建令人兴奋的动态网站的人阅读。如果你对编程有所了解，想知道HTML5能带来多大帮助，那么本书非常适合你。如果你没有任何编程经验，本书也同样适合你。也许你是一名Web设计人员或者网站所有者，只是想知道如何在后台做一些工作。通过本书，我们希望突出HTML5的新特性，揭开编程艺术的神秘面纱。编程是一种艺术，要想创建吸引人的游戏以及其他应用，这确实需要天赋。不过，只要你能把单词汇集在一起构成句子，能够把句子组织成段落，而且有一定的逻辑性，你就能编程。 本书的组织结构 本书共有10章，分别围绕我们熟悉的一个游戏或者类似的应用展开介绍。各章的内容有很多冗余，所以如果你愿意，完全可以跳过冗余的部分，不过这些游戏确实越来越复杂。每一章最前面会列出这一章将要介绍的技术特性，并给出应用的描述。首先我们会考虑一般意义上（不依赖任何特定的技术）的关键需求：实现这个应用需要些什么。然后强调满足这些需求的HTML5、CSS和JavaScript特性或通用的编程方法。最后，我们会详细分析应用的实现。我把代码逐行列在一个表格中，并在旁边分别给出各行的注释。如果要介绍一个游戏的多个版本，将只对新的代码行给出注释。这样做并不是因为我不愿意为你提供有关信息，而是希望你能从中看出哪些代码是类似的，而哪些不同，另外还可以了解到如何分阶段地构建应用。每一章都对如何把这些游戏变成你自己的应用给出了建议，并指出如何测试应用并将其上传到网站上。各章最后的小结会强调在这一章中你学到了什么以及接下来还会看到哪些内容。本书的源代码可在图灵社区（ituring.com.cn）的本书页面下载。 本书约定 本书中的应用都是HTML文档。JavaScript放在head元素的script元素中，CSS放在head元素的style元素中。body元素包含静态html，其中还包括canvas元素。一些示例要依赖外部图像文件，还有一个例子需要用到外部视频文件，另外有一个例子需要一些外部音频文件。 排版约定 为了保证这本书尽可能简洁易懂，本书将使用以下排版约定。 重要的单词或概念第一次出现时通常会用楷体来强调。 代码用Courier列出。 利用表格给出每个应用的完整代码，左列列出每一条语句，右列给出相应的注释。 有时代码很长，在书中无法用一行显示，此时我会使用这样一个箭头： 了解了以上格式规范后，下面进入正题。 魏忠 @shukebeta 2011.06.26
《HTML5游戏开发》共10章，通过10个具体的游戏示例详细介绍HTML5的用法。每章都先列出相关的技术特性并给出了应用的描述，然后讨论了实现这个应用的关键需求，接着强调了满足这些需求的HTML5、CSS和JavaScript特性或者通用编程方法，最后详细介绍了代码的实现。另外，每一章都对如何把这些游戏变成你自己的应用给出了建议，并指出如何测试应用并将其上传到网站上。
《HTML5游戏开发》适合所有希望了解如何利用HTML5构建令人兴奋的动态网站的人阅读。
Jeanine Meyer 纽约州立大学帕切斯学院教授，主要讲授数学/计算机科学和新兴媒体专业的课程，另外还为主修人文的学生主讲数学课程。要了解她参与的学术活动，可以访问网http://faculty.purchase.edu/jeanine.meyer。进入大学任教之前，她曾任IBM研究中心经理，主要从事机器人和机械制造方面的研究，后来还担任了IBM教育授权计划的顾问。
第1章 基础知识
1.1 引言
1.2 关键需求
1.3 HTML5、CSS和JavaScript特性
1.3.1 基本HTML 结构和标记
1.3.2 JavaScript编程
1.4 构建自己的应用
1.5 测试和上传应用
1.6 小结
第2章 骰子游戏
2.1 引言
2.2 关键需求
2.3 HTML5、CSS和JavaScript特性
2.3.1 伪随机处理和数学表达式
2.3.2 变量和赋值语句
2.3.3 程序员自定义函数
2.3.4 条件语句：if和switch
2.3.5 在画布上绘图
2.4 构建自己的应用
2.4.1 掷一个骰子
2.4.2 掷两个骰子
2.4.3 完整的craps游戏
2.5 测试和上传应用
2.6 小结
第3章 弹跳球
3.1 引言
3.2 关键需求
3.3 HTML5、CSS和JavaScript特性
3.4 构建自己的应用
3.5 测试和上传
3.6 小结
第4章 炮弹和弹弓
4.1 引言
4.2 关键需求
4.3 HTML5、CSS和JavaScript特性
4.3.1 数组和程序员自定义对象
4.3.2 绘图旋转和平移
4.3.3 绘制线段
4.3.4 拉弹弓的鼠标事件
4.3.5 使用数组接合改变显示元素列表
4.3.6 点之间的距离
4.4 构建自己的应用
4.4.1 有大炮、角度和速度的炮弹应用
4.4.2 弹弓：使用鼠标设置飞行参数
4.5 测试和上传应用
4.6 小结
第5章 记忆力(注意力)游戏
5.1 引言
5.2 关键需求
5.3 HTML5、CSS和JavaScript特性
5.3.1 表示扑克牌
5.3.2 使用Date 确定时间
5.3.3 提供暂停
5.3.4 绘制文本
5.3.5 绘制多边形
5.3.6 洗牌
5.3.7 单击牌的实现
5.3.8 防止某些作弊行为
5.4 构建自己的应用
5.5 测试和上传应用
5.6 小结
第6章 猜谜游戏
6.1 引言
6.2 关键需求
6.3 HTML5、CSS和JavaScript特性
6.3.1 存储和获取数组信息
6.3.2 程序执行时创建HTML
6.3.3 使用JavaScript代码修改CSS来改变元素
6.3.4 使用form和input元素的文本反馈
6.3.5 表现视频
6.4 构建自己的应用
6.5 测试和上传应用
6.6 小结
第7章 迷宫
7.1 引言
7.2 关键需求
7.3 HTML5、CSS和JavaScript特性
7.3.1 墙和token的表示
7.3.2 建立和定位墙的鼠标事件
7.3.3 检测箭头按键
7.3.4 token与墙的碰撞检测
7.3.5 使用本地存储
7.3.6 为本地存储编码数据
7.3.7 单选按钮
7.4 构建自己的应用
7.5 测试和上传应用
7.6 小结
第8章 石头剪刀布
8.1 引言
8.2 关键需求
8.3 HTML5、CSS和JavaScript特性
8.3.1 为玩家提供图片按钮
8.3.2 生成计算机动作
8.3.3 启动
8.4 构建自己的应用
8.5 测试和上传应用
8.6 小结
第9章 上吊小人游戏
9.1 引言
9.2 关键需求
9.3 HTML5、CSS和JavaScript特性
9.3.1 将单词表存储为一个在外部脚本文件中定义的数组
9.3.2 生成和定位HTML 标记，使标记作为按钮并禁用这些按钮
9.3.3 在画布上逐步绘制
9.3.4 维护游戏状态并确定输赢
9.3.5 检查猜测，设置textContent显示秘密词中的字母
9.4 构建自己的应用
9.5 测试和上传应用
9.6 小结
第10章 黑桃J
10.1 引言
10.2 关键需求
10.3 HTML5、CSS和JavaScript特性
10.4 构建自己的应用
10.5 测试和上传应用
10.6 小结
本书内容全面，通过游戏示例介绍了HTML5的方方面面，涉及了碰撞检测、表单验证、生成和使用随机数、创建用户自定义的图片、鼠标事件、定时事件和使用 localStorage在浏览器中存储/检索数据等，适合对HTML5、CSS和JavaScript感兴趣的人阅读。强烈推荐！ ——读者评论
无
这本书以游戏作为例子介绍了html5和css以及javascript的核心技术，摆脱了一般沉闷的技术学习过程，挺好的。就是缺乏相关的基础知识的深入核心的介绍，不过也值得买了。
HTML5游戏开发入门简单，可操作性强
HTML5游戏开发属于新兴领域，值得学习。
比较系统的说明了html这个语言，还有一游戏为实例，比较好！
此书很适合刚开始学习做HTML5游戏的开发者，案例也很多。初学者必备的书籍！
不错的书本，HTML实用
学习HTML5不错的书
这书恰逢HTML5大热，很值得看看
案例内的游戏界面虽说是粗糙了点，涉及到的开发流程和算法绝对是精华
游戏开发，我喜欢。。。。。。。。。
老公说买的时候看目录挺吸引人的，里面的内容比较**，啥都要写注释。做的游戏界面也超级丑的，不值得买～
新的web模式即将到来你准备好了吗，为了能多进$，积攒能量
书中讲了几个典型的例子，如果不是对编程有一定了解的话，那么学起来可能会有点困难！
非常好的一本书，有完整的代码实例。
例子可能会有些小问题，漏了一两个减号，，不过书是好书，能带你很好入门，有代码解释，蛮好
看了一下，这两项技术没有多大区别，都是建立在Graph对象上，当然，对于熟悉Flex标签的人来说就悲剧了，我是习惯直接Graph的。
里面代码写的比较清晰
说的还可以。对于有点基础的人来说可以说有些帮助，还在钻研。
感觉还不错，适合喜欢的朋友。
例子很详细很不错
写的比较细，很好。深入浅出容易看懂。
还没看，希望有用……
昨天下午下的单，今天上午收到，这次速度非常快。买书就**当。
基础的入门书籍 总体上对于初学者还是不错的！
书已收到 货运速度很快 虽然内容还没看 但是貌似很厉害的样子
自己看了不错，推荐给同事看了。
非常不错的书。值得你的购买。。好像很水哦。但真不错
例子很好，都能运行，寓教于乐，很生动
好书一会再看···
书挺好的，价格也行，快递也快
老师推荐买的，不错，正好赶**当感恩节活动。
I I think it is very good!think it is very good!
质量很好，慢慢研究
买了还没读……
学习的好范例
案例不错式讲解非常不错，很有启发作用
质量不错，或许是因为春节快临近吧，送货速度相对以前来说有点慢...
快点送来！快点送来！快点送来！快点送来！
简明易懂，感觉不错
一个一个的小例子教会你如何使用HTML5进行游戏开发
里面示例很详细，对于想开发HTML5游戏的朋友可以对照书里的示例练习，这样会有个比较全面的了解
目前HTML5日渐成熟，应用也越来越广泛，在网页游戏方面，有很大潜力。
游戏太基础了！不过还是很详细了！
内容比较松散，游戏很简单，适合初学
还行吧，跟想象中的差距有点答，不过做游戏的书就这样，几个例子也就完事了
对于入门开始做webGame的人来说还是比较有帮助的。代码中每步为何如此也讲的比较清晰，对于有较长时间不写代码人同学来看，很容易回忆起以前的知识点。
这本书好处里面有很多代码例子。可以帮助你
入门级的,代码很详细
挺好的，比较初级比较详细，适合入门的人和小朋友看。
看得不多， 不好评价。 书本还不错， 当当买的， 都比较放心。
本人JS不好，看了几天，一头雾水！不过这本书还是挺值得买的，自学足够了！
不错的一本书。适合入门
还不错，详细，初级入门可以读读
结合实践小项目帮助入门，只是体系上有点凌乱。正在看，觉得还行。
比较新吧
书籍不错，不过需要一定底子，值得购买
还在研究中~
文章内容相当简单
书还不错，还没看完。
看得不是很懂
很多东西在网上都看过了
大概也就能这么说了吧……
像我这种新手看看还是可以的……
对初学者通过小例子学习还是不错的
看起来还可以~
我是想学Html5入门的，这本书也确实很基础，每行代码都有注释，很详细
书中实例涉及不少基础知识，讲的比较细。对于有一定html、js基础的人，想着重了解html5的人来说，性价比较低。
对于熟悉html4的朋友，作为熟悉html5的教材是不错的选择。
从头到尾都是例子，都是一些用js开发的游戏。学习中，全部跟着敲一遍。
适合web入门的大学生，不够深入，不适合3年工作经验的我阅读。
虽然游戏是不怎么样,但是可以学到思路.
书中很多代码是错误的。需要自己发现改正！！！好书，烂翻译，国内的翻译的有木有良知！
写得很基础，代码很多不完整。有BUG
有些内容太基础了，不过对于标签的解释还是很详细的
虽然说是抛砖引玉，但是这些做的实在是太简单了，不过好的地方就是解释很详细
简单的东西，没必要买本书，直接看createjs API就够了
适合新手，总体感觉很一般
这书没有想象中的好，这书不值这个价。
没有想象的好，没有光盘！
没事不要买
很有学习代表性
喜欢他的例子
入门级的不怎么好的书，都是些废话，如果你什么都没看过，可以看看，当做入门
由浅入深、可操作性强。入门不错的书籍
这本书有点简单，描述的东西也不是很详细！要是我来编写的话肯定不会是这样的！
真本书真的很“入门”，入门到比不上大部分网上的入门文章
内容不怎么样.....太基础了........
内容不完美
给单位的，很好用的
书还行，感觉挺好的。
对初学者有一定价值
只对书的质量评价一下
还要研究一段时间
简单实用，不过代码在表格中有点乱七八糟
这本书叫html5游戏开发，其实就是几个传统的js小游戏，然后涉及一点canvas的内容。作者把大段大段的代码直接搬到书里面去了，夹杂着大量最基础的js函数注释，看这种东西对于老手没啥长进，对于新人也没什么进步。强烈不推荐
每章都是一个小游戏
讲的还凑合..
细节性的东西书里没讲太细..
书中的代码排版太糟糕...采取了两栏，
代码页里左边一半是代码，右边一半是注释
看着眼睛疼..
代码的缩进太糟糕。。
注释还凑合.. 个别注释实在让人摸不着头脑..
作者是一个没有听说过的大学的教授，从书的内容还是明显看的出水平有差据。而且书内错误比较多，我是没有看完全书，但是看到第四章就崩溃了。
我不推荐新手看这本书，最好是有点Javascript基础的再看，另外里面的某些概念写的也比较笼统，可能部分地方会看的过于朦胧，如果基础不好可能会被误导。
这本书还有一个硬伤就是代码写得实在是太丑了。
但之所以给了一个“还行”的评价主要有两点：一是给了一些不错的例子，还算比较值得参考；二是里面讲绘图地方比较细，包括数学和物理的地方也都还好。
代码篇幅巨大
全书基本没什么特别耀眼的地方....
代码也不难看懂 质量也不高
我觉得这样全搬上来实在不是负责任的做法
总的来说, 不值得买
个人觉得目前中文的HTML5书籍还可以观望
书主要是讲例子，有些原理性的细节性的东西没怎么讲或者讲的很含糊，个人觉着不太适合初学者看，有一点js基础看还可以
书主要是讲例子，有些原理性的细节性的东西没怎么讲或者讲的很含糊，个人觉着不太适合初学者看，有一点js基础看还可以
另外，书还是有不少的错误的
评价的挺狠，我也是抱着找错误的心态，翻了几章。
感觉这书名有点标题党。