本書是一本面向廣大HTML5程式設計愛好者的遊戲設計類圖書。本書涵蓋了HTML5的新特性和相關技術，主要內容包括HTML5概述、JavaScript、Canvas API畫圖、CSS3和jQuery以及HTML5流行的遊戲引擎lufylegend等。

本書最大的特色在於以遊戲開發案例為主要內容。書中涉及的遊戲都是大家耳熟能詳的，比如推箱子、黑白棋、FlappyBird遊戲、俄羅斯方塊、中國象棋、21點撲克牌和兩人麻將等。能讓讀者對枯燥的HTML5網頁學習充滿樂趣，對於初中級的HTML5網頁學習者也提供很好的參考。書中不僅列出了完整的遊戲代碼，同時對所有的原始程式碼進行了非常詳細的解釋，做到了通俗易懂，圖文並茂。讀者在閱讀本書時可以充分瞭解和體驗HTML5的強大功能。

本書適用於網頁遊戲程式設計愛好者、程式設計人員和HTML5網頁學習者，或作為Web應用程式開發人員的參考用書。






基础篇

第1章 HTML5概述 3
1.1 HTML基础 3
1.1.1 HTML的定义 3
1.1.2 HTML的历史 4
1.2 HTML4基础 5
1.2.1 HTML基础知识 5
1.2.2 HTML基本标记 6
1.3 HTML5的新特性 10
1.3.1 简化的文档类型和字符集 11
1.3.2 HTML5的新结构 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.6 JavaScript内置函数 40
2.5 调试JavaScript程序的方法 43

第3章 JavaScript事件处理 45
3.1 JavaScript事件的基本概念 45
3.1.1 事件类型 45
3.1.2 JavaScript处理事件的基本机制 46
3.2 JavaScript绑定事件的方法 47
3.3 JavaScript事件的event对象 49
3.3.1 获取event对象 49
3.3.2 JavaScript获取鼠标坐标 50
3.3.3 JavaScript获取事件源 51
3.4 JavaScript取消浏览器默认动作 51

第4章 JavaScript面向对象程序设计 53
4.1 面向对象程序设计思想简介 53
4.1.1 对象的概念 53
4.1.2 面向对象编程 54
4.2 JavaScript类的定义和实例化 55
4.2.1 类的定义 55
4.2.2 创建对象（类的实例化） 55
4.2.3 通过对象直接初始化创建对象 56
4.3 JavaScript访问和添加对象的属性和方法 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.5 JavaScript内置对象 63
4.5.1 JavaScript的内置对象框架 63
4.5.2 基类Object 64
4.5.3 Date类 64
4.5.4 String类 66
4.5.5 Array类 68
4.5.6 Math对象 75
4.5.7 Object对象 76
4.6 HTML DOM编程 78
4.6.1 HTML DOM框架 78
4.6.2 Document 对象 80
4.6.3 Node（节点）对象 81
4.6.4 NodeList对象 88

第5章 使用Canvas画图 89
5.1 Canvas元素 89
5.1.1 Canvas元素的定义语法 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.7 HTML5 Canvas动画实例 106
5.7.1 动画的概念及原理 106
5.7.2 游戏人物的跑步动画 107

第6章 CSS3和jQuery动画 109
6.1 CSS3语法基础 109
6.1.1 CSS基本语句 109
6.1.2 在HTML文档中应用CSS样式 110
6.1.3 CSS 选择器 110
6.2 CSS3动画 112
6.2.1 变形 112
6.2.2 过渡变换 113
6.2.3 动画 115
6.3 jQuery基础 118
6.3.1 认识jQuery语法 118
6.3.2 元素的属性与CSS样式控制 119
6.3.3 CSS样式控制 120
6.3.4 事件和Event对象 124
6.4 jQuery动画 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.1 HTML5倒计时功能 153
8.2.2 扑克牌的显示与隐藏 156
8.2.3 扑克牌的删除 157
8.2.4 添加删除类别Class 158
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

第10章 五子棋游戏 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.html 181
10.4.2 设计脚本（Main.js） 181
10.5 人机五子棋游戏的开发 183

第11章 黑白棋游戏 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.1 Canvas对象支持的JavaScript的鼠标事件 195
11.3.2 获取鼠标在Canvas对象上的坐标 196
11.4 黑白棋游戏设计的步骤 196
11.4.1 游戏页面 196
11.4.2 设计脚本（Main.js） 197

第12章 俄罗斯方块游戏 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

第13章 贪吃蛇游戏 220
13.1 贪吃蛇游戏介绍 220
13.2 程序设计的思路 220
13.3 程序设计的步骤 221
13.3.1 游戏页面 221
13.3.2 设计脚本 221

第14章 雷电飞机射击游戏 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

第15章 FlappyBird游戏 244
15.1 Flappy Bird游戏介绍 244
15.2 Flappy Bird游戏设计的思路 245
15.2.1 游戏素材 245
15.2.2 游戏实现的原理 245
15.3 Flappy Bird游戏设计的步骤 245
15.3.1 设计Bird类（小鸟类） 245
15.3.2 设计Obstacle类（管道障碍物类） 246
15.3.3 设计FlappyBird类 246
15.3.4 主程序 250
15.3.5 游戏页面 252

第16章 中国象棋 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

第17章 两人麻将游戏 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

第18章 21点扑克牌游戏 303
18.1 21点扑克牌游戏介绍 303
18.2 设计思路 303
18.3 程序设计的步骤 304
18.3.1 扑克牌类MCard 304
18.3.2 一副牌类MCard 304
18.3.3 主程序 305

第19章 基于lufylegend游戏引擎开发 311
19.1 lufylegend游戏引擎介绍 311
19.1.1 游戏引擎原理 311
19.1.2 引入lufylegend游戏引擎 312
19.1.3 利用引擎初始化游戏 312
19.2 lufylegend游戏引擎基本功能 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.6 LGlobal全局类 323
19.2.7 LLoadManage加载文件 324
19.2.8 事件处理 325
19.2.9 动画的实现 327
19.3 lufylegend游戏引擎案例——接水果游戏 331

参考文献 338

前言

HTML5是最新的HTML標準。儘管HTML5到目前為止還只是草案，離真正的規範還有相當長的一段路要走，但HTML5已經引起了業內的廣泛興趣，Google Chrome、Firefox、Opera、Safari和Internet Explorer 9等主流流覽器都已經支援HTML5技術。HTML5無疑會成為未來10年最熱門的互聯網技術。

本書作者長期從事HTML5網頁設計教學與應用開發，在長期的工作、學習中，積累了豐富經驗和教訓，能夠瞭解在學習程式設計的時候需要什麼樣的書才能提高HTML5開發能力，以最少的時間投入得到最快的實際應用。

本書分為基礎篇和實戰篇，基礎篇包括第1～6章，主要講解HTML5的基礎知識和相關新技術，如JavaScript、Canvas API畫圖、CSS3和jQuery及其使用技巧；實戰篇包括第7～19章，綜合應用前面技術，開發經典的大家耳熟能詳的遊戲，比如推箱子、黑白棋、俄羅斯方塊、雷電飛機遊戲、FlappyBird遊戲、中國象棋、兩人麻將和21點撲克牌等。通過本書讀者將學會如何利用HTML5和JavaScript、CSS3製作互動式遊戲、平臺類遊戲，學會網頁遊戲設計。

本書特點如下：內容豐富、全面，其中的通用代碼可直接應用於一般的遊戲。每款遊戲實例均提供詳細的設計思路、關鍵技術分析以及具體的解決步驟方案。每一個遊戲實例都是活的、實用的HTML5程式設計實例。

需要說明的是，學習遊戲程式設計是一個實踐的過程，而不僅僅是看書、看資料，親自動手編寫、偵錯工具才是至關重要的。通過實際的程式設計以及積極的思考，讀者可以很快地掌握很多的程式設計技術，而且，在程式設計中還會積累許多寶貴的程式設計經驗。在當前的軟體發展環境下，這種程式設計經驗對開發者尤其顯得不可或缺。

本書得到中原工學院資助，由夏敏捷（中原工學院）主持編寫，張慎武編寫第1章，張書欽編寫第2章，張錦歌（河南工業大學）編寫第3～5章，馬宗梅編寫第14章，高麗平編寫第16章，宋寶衛（鄭州輕工業學院）編寫第6章、第12章、第17～19章，其餘章節由夏敏捷編寫。在本書的編寫過程中，為確保內容的正確性，我們參閱了很多資料，並且得到了資深Web程式師的支持，在此謹向他們表示衷心的感謝。本書的學習資源可以在清華大學出版社網站本書頁面檢索下載。

由於編者水準有限，書中難免有錯，敬請廣大讀者批評指正，在此表示感謝。

夏敏捷
2018年3月