本书是一本面向广大HTML5编程爱好者的游戏设计类图书。本书涵盖了HTML5的新特性和相关技术，主要内容包括HTML5概述、JavaScript、Canvas API画图、CSS3和jQuery以及HTML5流行的游戏引擎lufylegend等。本书优选的特色在于以游戏开发案例为主要内容。书中涉及的游戏都是大家耳熟能详的，比如推箱子、黑白棋、FlappyBird游戏、俄罗斯方块、中国象棋、21点扑克牌和两人麻将等。能让读者对枯燥的HTML5网页学习充满乐趣，对于初中级的HTML5网页学习者也提供很好的参考。书中不仅列出了完整的游戏代码，同时对所有的源代码进行了很好详细的解释，做到了通俗易懂，图文并茂。读者在阅读本书时可以充分了解和体验HTML5的强大功能。本书适用于网页游戏编程爱好者、程序设计人员和HTML5网页学习者，或作为Web应用程序开发人员的参考用书。

基础篇
章HTML5概述 3
1.1HTML基础 3
1.1.1HTML的定义 3
1.1.2HTML的历史 4
1.2HTML4基础 5
1.2.1HTML基础知识 5
1.2.2HTML基本标记 6
1.3HTML5的新特性 10
1.3.1简化的文档类型和字符集 11
1.3.2HTML5的新结构 12
1.3.3支持本地存储 13
1.3.4全新的表单设计 13
1.3.5强大的绘图功能 13
1.3.6获取地理位置信息 15
1.3.7支持多媒体功能 17
1.3.8支持多线程 18
第2章JavaScript语法基础 19
2.1在HTML中使用JavaScript语言 19
2.2基本语法 20
2.2.1数据类型 20
2.2.2常量和变量 21
2.2.3注释 22
2.2.4运算符和表达式 22
2.3常用控制语句 25
2.3.1选择结构语句 26
2.3.2循环结构语句 31
2.4函数 36
2.4.1创建自定义函数 36
2.4.2调用函数 36
2.4.3变量的作用域 38
2.4.4函数的返回值 38
2.4.5定义函数库 39
2.4.6JavaScript内置函数 40
2.5调试JavaScript程序的方法 43
第3章JavaScript事件处理 45
3.1JavaScript事件的基本概念 45
3.1.1事件类型 45
3.1.2JavaScript处理事件的基本机制 46
3.2JavaScript绑定事件的方法 47
3.3JavaScript事件的event对象 49
3.3.1获取event对象 49
3.3.2JavaScript获取鼠标坐标 50
3.3.3JavaScript获取事件源 51
3.4JavaScript取消浏览器默认动作 51
第4章JavaScript面向对象程序设计 53
4.1面向对象程序设计思想简介 53
4.1.1对象的概念 53
4.1.2面向对象编程 54
4.2JavaScript类的定义和实例化 55
4.2.1类的定义 55
4.2.2创建对象（类的实例化） 55
4.2.3通过对象直接初始化创建对象 56
4.3JavaScript访问和添加对象的属性和方法 57
4.3.1访问对象的属性和方法 57
4.3.2向对象添加属性和方法 59
4.4继承 60
4.4.1原型实现继承 61
4.4.2构造函数实现继承 62
4.4.3重新定义继承的方法 62
4.5JavaScript内置对象 63
4.5.1JavaScript的内置对象框架 63
4.5.2基类Object64
4.5.3Date类 64
4.5.4String类 66
4.5.5Array类 68
4.5.6Math对象 75
4.5.7Object对象 76
4.6HTMLDOM编程 78
4.6.1HTMLDOM框架 78
4.6.2Document对象 80
4.6.3Node（节点）对象 81
4.6.4NodeList对象 88
第5章使用Canvas画图 89
5.1Canvas元素 89
5.1.1Canvas元素的定义语法 89
5.1.2使用JavaScript获取网页中的Canvas对象 89
5.2坐标与颜色 90
5.2.1坐标系统 90
5.2.2颜色的表示方法 90
5.3绘制图形 91
5.3.1绘制直线 91
5.3.2绘制矩形 93
5.3.3绘制圆弧 95
5.4描边和填充 95
5.4.1描边 95
5.4.2填充图形内部 96
5.4.3渐变颜色 96
5.4.4透明颜色 98
5.5绘制图像与文字 99
5.5.1绘制图像 99
5.5.2组合图形 101
5.5.3输出文字 102
5.6图形的操作 104
5.6.1保存和恢复绘图状态 104
5.6.2图形的变换 104
5.7HTML5Canvas动画实例 106
5.7.1动画的概念及原理 106
5.7.2游戏人物的跑步动画 107
第6章CSS3和jQuery动画 109
6.1CSS3语法基础 109
6.1.1CSS基本语句 109
6.1.2在HTML文档中应用CSS样式 110
6.1.3CSS选择器 110
6.2CSS3动画 112
6.2.1变形 112
6.2.2过渡变换 113
6.2.3动画 115
6.3jQuery基础 118
6.3.1认识jQuery语法 118
6.3.2元素的属性与CSS样式控制 119
6.3.3CSS样式控制 120
6.3.4事件和Event对象 124
6.4jQuery动画 130
6.4.1显示和隐藏HTML元素 130
6.4.2淡入淡出效果 132
6.4.3滑动效果 136
6.4.4执行自定义的动画 138
6.4.5动画队列 139
实战篇
第7章HTML5人物拼图游戏 147
7.1人物拼图游戏介绍 147
7.2程序设计的思路 147
7.3程序设计的步骤 148
第8章扑克翻牌游戏 153
8.1扑克翻牌游戏介绍 153
8.2程序设计的思路 153
8.2.1HTML5倒计时功能 153
8.2.2扑克牌的显示与隐藏 156
8.2.3扑克牌的删除 157
8.2.4添加删除类别Class158
8.3程序设计的步骤 159
8.3.1设计CSS（matchgame.css） 159
8.3.2游戏页面index.htm..160
8.3.3设计脚本（matchgame.js） 163
第9章推箱子游戏 165
9.1推箱子游戏介绍 165
9.2程序设计的思路 166
9.3程序设计的步骤 168
9.3.1游戏页面pushbox.htm..168
9.3.2设计脚本（pushbox1.js） 169
0章五子棋游戏 178
10.1五子棋游戏简介 178
10.2五子棋游戏的设计思想 178
10.3关键技术 179
10.3.1判断输赢的算法 179
10.3.2图形上色 181
10.4程序设计的步骤 181
10.4.1游戏页面five.html181
10.4.2设计脚本（Main.js） 181
10.5人机五子棋游戏的开发 183
1章黑白棋游戏 193
11.1黑白棋游戏介绍 193
11.2黑白棋游戏设计的思路 194
11.2.1棋子和棋盘 194
11.2.2翻转对方的棋子 194
11.2.3显示执棋方可落子位置 195
11.2.4判断胜负的功能 195
11.3关键技术 195
11.3.1Canvas对象支持的JavaScript的鼠标事件 195
11.3.2获取鼠标在Canvas对象上的坐标 196
11.4黑白棋游戏设计的步骤 196
11.4.1游戏页面 196
11.4.2设计脚本（Main.js） 197
2章俄罗斯方块游戏 205
12.1俄罗斯方块游戏介绍 205
12.2程序设计的思路 205
12.2.1俄罗斯方块形状设计 205
12.2.2俄罗斯方块游戏面板屏幕 207
12.2.3定位和旋转形状 208
12.3程序设计的步骤 210
12.3.1游戏页面 210
12.3.2设计脚本 210
3章贪吃蛇游戏 220
13.1贪吃蛇游戏介绍 220
13.2程序设计的思路 220
13.3程序设计的步骤 221
13.3.1游戏页面 221
13.3.2设计脚本 221
4章雷电飞机射击游戏 228
14.1雷电游戏介绍 228
14.2游戏设计的思路 228
14.2.1游戏素材 228
14.2.2地图滚动的原理实现 229
14.2.3飞机和子弹的实现 230
14.3游戏关键技术——碰撞检测 231
14.3.1矩形碰撞 231
14.3.2圆形碰撞 233
14.3.3像素碰撞 233
14.4雷电飞机游戏设计的步骤 234
14.4.1设计子弹类 234
14.4.2设计飞机类 236
14.4.3爆炸类 238
14.4.4设计主程序 238
14.4.5游戏页面 242
5章FlappyBird游戏 244
15.1FlappyBird游戏介绍 244
15.2FlappyBird游戏设计的思路 245
15.2.1游戏素材 245
15.2.2游戏实现的原理 245
15.3FlappyBird游戏设计的步骤 245
15.3.1设计Bird类（小鸟类） 245
15.3.2设计Obstacle类（管道障碍物类） 246
15.3.3设计FlappyBird类 246
15.3.4主程序 250
15.3.5游戏页面 252
6章中国象棋 253
16.1中国象棋介绍 253
16.2中国象棋设计思路 254
16.2.1棋盘表示 254
16.2.2棋子表示 254
16.2.3走棋规则 255
16.2.4坐标转换 256
16.3中国象棋实现的步骤 257
16.3.1设计棋子类（Chess.js） 257
16.3.2设计游戏逻辑类（ChessGame.js） 258
16.3.3游戏页面 270
7章两人麻将游戏 272
17.1麻将游戏介绍 272
17.2两人麻将游戏设计的思路 273
17.2.1素材图片 273
17.2.2游戏逻辑实现 274
17.2.3碰吃牌判断 275
17.2.4和牌算法 276
17.2.5实现电脑智能出牌 279
17.3两人麻将游戏设计的步骤 281
17.3.1麻将牌类设计（Card.js） 281
17.3.2设计游戏逻辑脚本（main2.js） 282
17.3.3游戏页面（index2.html） 300
8章21点扑克牌游戏 303
18.121点扑克牌游戏介绍 303
18.2设计思路 303
18.3程序设计的步骤 304
18.3.1扑克牌类MCard.304
18.3.2一副牌类MCard.304
18.3.3主程序 305
9章基于lufylegend游戏引擎开发 311
19.1lufylegend游戏引擎介绍 311
19.1.1游戏引擎原理 311
19.1.2引入lufylegend游戏引擎 312
19.1.3利用引擎初始化游戏 312
19.2lufylegend游戏引擎基本功能 313
19.2.1图片的加载与显示 313
19.2.2图层 316
19.2.3利用图层实现游戏中的卷轴 317
19.2.4使用LGraphics对象绘图 320
19.2.5使用LTextField显示文字 323
19.2.6LGlobal全局类 323
19.2.7LLoadManage加载文件 324
19.2.8事件处理 325
19.2.9动画的实现 327
19.3lufylegend游戏引擎案例——接水果游戏 331
参考文献338