基本信息
- 原书名:The Essential Guide to HTML5: Using Games to learn HTML5 and JavaScript
- 原出版社: friendsofED
编辑推荐
引领下一代Web开发潮流
围绕10个游戏示例体验HTML5和JavaScript
寓教于乐,循序渐进,轻松上手
内容简介
书籍 计算机书籍
《HTML5游戏开发》共10 章,通过10 个具体的游戏示例详细介绍HTML5 的用法。每章都先列出相关的技术特性并给出了应用的描述,然后讨论了实现这个应用的关键需求,接着强调了满足这些需求的HTML5、CSS 和JavaScript 特性或者通用编程方法,最后详细介绍了代码的实现。另外,每一章都对如何把这些游戏变成你自己的应用给出了建议,并指出如何测试应用并将其上传到网站上。
《HTML5游戏开发》适合所有希望了解如何利用HTML5 构建令人兴奋的动态网站的人阅读。
作译者
Jeanine Meyer 纽约州立大学帕切斯学院教授,主要讲授数学/计算机科学和新兴媒体专业的课程,另外还为主修人文的学生主讲数学课程。要了解她参与的学术活动,可以访问网http://faculty.purchase.edu/jeanine.meyer。进入大学任教之前,她曾任IBM研究中心经理,主要从事机器人和机械制造方面的研究,后来还担任了IBM教育授权计划的顾问。
目录
《HTML5游戏开发》
第1 章 基础知识 1
1.1 引言 1
1.2 关键需求 3
1.3 HTML5、CSS 和JavaScript 特性 3
1.3.1 基本HTML 结构和标记 4
1.3.2 JavaScript 编程 9
1.4 构建自己的应用 10
1.5 测试和上传应用 16
1.6 小结 16
第2 章 骰子游戏 17
2.1 引言 17
2.2 关键需求 20
2.3 HTML5、CSS 和JavaScript 特性 20
2.3.1 伪随机处理和数学表达式 20
2.3.2 变量和赋值语句 21
2.3.3 程序员自定义函数 22
2.3.4 条件语句:if 和switch 23
2.3.5 在画布上绘图 25
2.4 构建自己的应用 34
2.4.1 掷一个骰子 35
2.4.2 掷两个骰子 40
2.4.3 完整的craps 游戏 44
2.5 测试和上传应用 50
2.6 小结 51
第3 章 弹跳球 52
3.1 引言 52
3.2 关键需求 54
3.3 HTML5、CSS 和JavaScript 特性 55
3.4 构建自己的应用 64
3.5 测试和上传 74
3.6 小结 74
第4 章 炮弹和弹弓 75
4.1 引言 75
4.2 关键需求 78
4.3 HTML5、CSS 和JavaScript 特性 79
4.3.1 数组和程序员自定义对象 79
4.3.2 绘图旋转和平移 80
4.3.3 绘制线段 84
4.3.4 拉弹弓的鼠标事件 85
4.3.5 使用数组接合改变显示元素列表 87
4.3.6 点之间的距离 87
4.4 构建自己的应用 88
4.4.1 有大炮、角度和速度的炮弹应用 92
4.4.2 弹弓:使用鼠标设置飞行参数 98
4.5 测试和上传应用 106
4.6 小结 106
第5 章 记忆力(注意力)游戏 107
5.1 引言 107
5.2 关键需求 111
5.3 HTML5、CSS 和JavaScript 特性 112
5.3.1 表示扑克牌 112
5.3.2 使用Date 确定时间 113
5.3.3 提供暂停 114
5.3.4 绘制文本 114
5.3.5 绘制多边形 116
5.3.6 洗牌 117
5.3.7 单击牌的实现 118
5.3.8 防止某些作弊行为 119
5.4 构建自己的应用 119
5.5 测试和上传应用 132
5.6 小结 132
第6 章 猜谜游戏 133
6.1 引言 133
6.2 关键需求 137
6.3 HTML5、CSS 和JavaScript 特性 138
6.3.1 存储和获取数组信息 138
6.3.2 程序执行时创建HTML 140
6.3.3 使用JavaScript 代码修改CSS来改变元素 142
6.3.4 使用form 和input 元素的文本反馈 144
6.3.5 表现视频 144
6.4 构建自己的应用 146
6.5 测试和上传应用 157
6.6 小结 157
第7 章 迷宫 158
7.1 引言 158
7.2 关键需求 162
7.3 HTML5、CSS 和JavaScript 特性 162
7.3.1 墙和token 的表示 163
7.3.2 建立和定位墙的鼠标事件 163
7.3.3 检测箭头按键 164
7.3.4 token 与墙的碰撞检测 165
7.3.5 使用本地存储 167
7.3.6 为本地存储编码数据 172
7.3.7 单选按钮 174
7.4 构建自己的应用 174
7.5 测试和上传应用 189
7.6 小结 189
第8 章 石头剪刀布 191
8.1 引言 191
8.2 关键需求 194
8.3 HTML5、CSS 和JavaScript 特性 195
8.3.1 为玩家提供图片按钮 195
8.3.2 生成计算机动作 199
8.3.3 启动 206
8.4 构建自己的应用 206
8.5 测试和上传应用 212
8.6 小结 213
第9 章 上吊小人游戏 214
9.1 引言 214
9.2 关键需求 221
9.3 HTML5、CSS 和JavaScript 特性 222
9.3.1 将单词表存储为一个在外部脚本文件中定义的数组 222
9.3.2 生成和定位HTML 标记,使标记作为按钮并禁用这些按钮 223
9.3.3 在画布上逐步绘制 225
9.3.4 维护游戏状态并确定输赢 226
9.3.5 检查猜测,设置textContent显示秘密词中的字母 227
9.4 构建自己的应用 228
9.5 测试和上传应用 236
9.6 小结 236
第10 章 黑桃J 237
10.1 引言 237
10.2 关键需求 242
10.3 HTML5、CSS 和JavaScript 特性 242
10.4 构建自己的应用 249
10.5 测试和上传应用 258
10.6 小结 258
译者序
很多从事Web前端开发的人对HTML总有些不满,比如需要手动检查和设计很多格式代码,不仅容易出错,而且存在大量重复。好在HTML5让我们看到了曙光。作为下一代Web开发标准,HTML5成为主流的日子已经不远。它对音频视频、表单验证、事件处理、绘图等的支持都让我们非常期待,视频音频的播放、表单检查和提交、列表框初始化、控件的动态增减不再像原先那么费劲。
HTML5可以帮助我们构建漂亮的动态网站,也许你想了解它的诸多新特性,又担心这些内容过于枯燥,那么你会很庆幸得到手上的这本书。它通过我们熟悉的一个个游戏让你轻松掌握HTML5、CSS和JavaScript的新特性,并灵活应用到Web开发中。也许你顾虑自己对编程一窍不通,不知如何融入丰富多彩的Web世界。那么大可放心,因为本书在介绍游戏开发时会从头谈起,不仅会点明通用的编程技术,甚至连最基础的标记也给出注释说明。
相信通过阅读本书,你能轻松地迈进Web开发殿堂,并在这条路上走得更远!
我们深深地感谢我们的家人和朋友。在翻译过程中,他们给予了我们莫大的关心、支持和帮助。
全书由徐阳、荆涛主译,刘鑫、张野、任岗等检查术语,刘晓兵、伊瑞海等提供技术问题支持,在大家的努力下共同完成了本书的翻译工作。
由于时间仓促,且译者的水平有限,译文中难免会出现一些错误,请读者批评指正。
魏忠 @shukebeta
2011.06.26 于清华科技园
前言
人们对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的方方面面,涉及了碰撞检测、表单验证、生成和使用随机数、创建用户自定义的图片、鼠标事件、定时事件和使用 localStorage在浏览器中存储/检索数据等,适合对HTML5、CSS和JavaScript感兴趣的人阅读。强烈推荐!
——亚马逊读者评论