HTML5网页游戏设计从基础到开发(第2版微课视频版)/移动互联网开发技术丛书

（1）内容全面，代码通用。本书所有案例的源代码通用性强，便于读者直接应用于大部分游戏的开发。

（2）理论夯实，案例丰富。为每款游戏案例均提供详细的设计思路、关键技术分析以及具体的解决步骤方案，案例实用性强。

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

第1部分基础篇

第1章HTML5概述

1．1HTML基础

1．1．1HTML的定义

1．1．2HTML的历史

1．2HTML基础

1．2．1HTML基础知识

1．2．2HTML基本标记

1．3HTML5的新特性

1．3．1简化的文档类型和字符集

1．3．2HTML5的新结构

1．3．3支持本地存储

1．3．4全新的表单设计

1．3．5强大的绘图功能

1．3．6获取地理位置信息

1．3．7支持多媒体功能

1．3．8支持多线程

第2章JavaScript语法基础

2．1JavaScript语言

2．1．1JavaScript语言概述

2．1．2运行JavaScript语言

2．2基本语法

2．2．1数据类型

2．2．2常量和变量

2．2．3注释

2．2．4运算符和表达式

2．3常用控制语句

2．3．1选择结构语句

2．3．2循环结构语句

2．4函数

2．4．1创建自定义函数

2．4．2调用函数

2．4．3变量的作用域

2．4．4函数的返回值

2．4．5定义函数库

2．4．6JavaScript内置函数

2．5调试JavaScript程序的方法

2．5．1定位JavaScript程序中的错误

2．5．2开发者工具调试代码

2．5．3Visual Studio Code中调试JavaScript代码

第3章JavaScript事件处理

3．1JavaScript事件的基本概念

3．1．1事件类型

3．1．2JavaScript处理事件的基本机制

3．2JavaScript绑定事件的方法

3．3JavaScript事件的event对象

3．3．1获取event对象

3．3．2JavaScript获取鼠标坐标

3．3．3JavaScript获取事件源

3．4JavaScript取消浏览器默认动作

第4章JavaScript面向对象程序设计

4．1面向对象程序设计思想简介

4．1．1对象的概念

4．1．2面向对象编程

4．2JavaScript类的定义和实例化

4．2．1类的定义

4．2．2创建对象(类的实例化)

4．2．3通过对象直接初始化创建对象

4．3JavaScript访问和添加对象的属性和方法

4．3．1访问对象的属性和方法

4．3．2向对象添加属性和方法

4．4继承

4．4．1原型实现继承

4．4．2构造函数实现继承

4．4．3重新定义继承的方法

4．5JavaScript内置对象

4．5．1JavaScript的内置对象框架

4．5．2基类Object

4．5．3Date类

4．5．4String类

4．5．5Array类

4．5．6Math对象

4．5．7Object对象

4．6HTML DOM编程

4．6．1HTML DOM框架

4．6．2Document 对象

4．6．3Node(节点)对象

4．6．4NodeList对象

4．7ES6简介

4．7．1变量相关

4．7．2数据类型

4．7．3对象

4．7．4class类

4．7．5箭头函数

第5章使用Canvas画图

5．1Canvas元素

5．1．1Canvas元素的定义语法

5．1．2使用JavaScript获取网页中的Canvas对象

5．2坐标与颜色

5．2．1坐标系统

5．2．2颜色的表示方法

5．3绘制图形

5．3．1绘制直线

5．3．2绘制矩形

5．3．3绘制圆弧

5．4描边和填充

5．4．1描边

5．4．2填充图形内部

5．4．3渐变颜色

5．4．4透明颜色

5．5绘制图像与文字

5．5．1绘制图像

5．5．2组合图形

5．5．3输出文字

5．6图形的操作

5．6．1保存和恢复绘图状态

5．6．2图形的变换

5．7HTML5 Canvas动画实例

5．7．1动画的概念及原理

5．7．2游戏人物的跑步动画

5．7．3雪花飘落动画

第6章CSS3和jQuery动画

6．1CSS3语法基础

6．1．1CSS基本语句

6．1．2在HTML文档中应用CSS样式

6．1．3CSS 选择器

6．2CSS3动画

6．2．1变形

6．2．2过渡变换

6．2．3动画

6．3jQuery基础

6．3．1认识jQuery语法

6．3．2元素的属性与文本内容控制

6．3．3CSS样式控制

6．3．4元素的操作

6．3．5事件和Event对象

6．4jQuery动画

6．4．1显示和隐藏HTML元素

6．4．2淡入淡出效果

6．4．3滑动效果

6．4．4自定义动画

6．4．5动画队列

第2部分实战篇

第7章人物拼图游戏

7．1人物拼图游戏介绍

7．2人物拼图游戏设计的思路

7．3人物拼图游戏设计的步骤

第8章扑克翻牌游戏

8．1扑克翻牌游戏介绍

8．2扑克翻牌游戏设计的思路

8．2．1HTML5倒计时功能

8．2．2扑克牌的显示与隐藏

8．2．3扑克牌的删除

8．2．4添加删除类别Class

8．3扑克翻牌游戏设计的步骤

8．3．1设计CSS(matchgame．css)

8．3．2游戏页面index．html

8．3．3设计脚本(matchgame．js)

第9章推箱子游戏

9．1推箱子游戏介绍

9．2推箱子游戏设计的思路

9．3推箱子游戏设计的步骤

9．3．1游戏页面pushbox．html

9．3．2设计脚本(pushbox1．js)

第10章五子棋游戏

10．1五子棋游戏介绍

10．2五子棋游戏设计的思路

10．3关键技术

10．3．1判断输赢的算法

10．3．2图形上色

10．4五子棋游戏设计的步骤

10．4．1游戏页面five．html

10．4．2设计脚本(Main．js)

10．5人机五子棋游戏的开发

第11章黑白棋游戏

11．1黑白棋游戏介绍

11．2黑白棋游戏设计的思路

11．2．1棋子和棋盘

11．2．2翻转对方的棋子

11．2．3显示执棋方可落子位置

11．2．4判断胜负的功能

11．3关键技术

11．3．1Canvas对象支持的JavaScript的鼠标事件

11．3．2获取鼠标在Canvas对象上的坐标

11．4黑白棋游戏设计的步骤

11．4．1游戏页面index.html

11．4．2设计脚本(Main．js)

第12章俄罗斯方块游戏

12．1俄罗斯方块游戏介绍

12．2俄罗斯方块游戏设计的思路

12．2．1俄罗斯方块形状设计

12．2．2俄罗斯方块游戏面板屏幕

12．2．3定位和旋转形状

12．3俄罗斯方块游戏设计的步骤

12．3．1游戏页面index.html

12．3．2设计脚本

第13章贪吃蛇游戏

13．1贪吃蛇游戏介绍

13．2贪吃蛇游戏设计的思路

13．3贪吃蛇游戏设计的步骤

13．3．1游戏页面index.html

13．3．2设计脚本

第14章雷电飞机射击游戏

14．1雷电飞机射击游戏介绍

14．2雷电飞机射击游戏设计的思路

14．2．1游戏素材

14．2．2地图滚动的原理实现

14．2．3飞机和子弹的实现

14．3游戏关键技术——碰撞检测

14．3．1矩形碰撞

14．3．2圆形碰撞

14．3．3像素碰撞

14．3．4Image对象

14．4雷电飞机射击游戏设计的步骤

14．4．1设计子弹类

14．4．2设计飞机类

14．4．3爆炸类

14．4．4设计主程序

14．4．5游戏页面plan3.html

第15章Flappy Bird游戏

15．1Flappy Bird游戏介绍

15．2Flappy Bird游戏设计的思路

15．2．1游戏素材

15．2．2游戏实现的原理

15．3Flappy Bird游戏设计的步骤

15．3．1设计Bird类(小鸟类)

15．3．2设计Obstacle类(管道障碍物类)

15．3．3设计FlappyBird类

15．3．4主程序

15．3．5游戏页面index.html

第16章中国象棋游戏

16．1中国象棋游戏介绍

16．2中国象棋游戏设计的思路

16．2．1棋盘表示

16．2．2棋子表示

16．2．3走棋规则

16．2．4坐标转换

16．3中国象棋游戏设计的步骤

16．3．1设计棋子类(Chess．js)

16．3．2设计游戏逻辑(ChessGame．js)

16．3．3游戏页面index.html

第17章基于lufylegend游戏引擎开发

17．1lufylegend游戏引擎介绍

17．1．1游戏引擎原理

17．1．2引入lufylegend游戏引擎

17．1．3利用引擎初始化游戏

17．2lufylegend游戏引擎基本功能

17．2．1图片的加载与显示

17．2．2图层

17．2．3利用图层实现游戏中的卷轴

17．2．4使用LGraphics对象绘图

17．2．5使用LTextField显示文字

17．2．6LGlobal全局类

17．2．7LLoadManage加载文件

17．2．8事件处理

17．2．9动画的实现

17．3lufylegend游戏引擎案例——接水果游戏

参考文献

HTML5 是 HyperText Markup Language 5 的缩写。HTML5 技术结合了 HTML4.01的相关标准并对其进行革新，符合现代网络发展要求。HTML5是互联网的下一代标准，是构建和呈现互联网内容的一种语言方式，被认为是互联网的核心技术之一。HTML5在2014年10月由万维网联盟（W3C）完成标准制定，仍处于完善之中。然而HTML5已经引起了业内的广泛兴趣，Chrome、Firefox、Opera、Safari等主流浏览器都已经支持HTML5技术，新Edge浏览器率先实现100%支持HTML5。

本书作者长期从事HTML5网页设计教学与应用开发，在长期的工作、学习中，积累了丰富经验和教训，能够了解在学习编程的时候需要什么样的书才能提高HTML5开发能力，以最少的时间投入得到最快的实际应用。

本书主要内容

本书分为基础篇和实战篇，基础篇包括第1~6章，主要讲解HTML5的基础知识和相关新技术，如JavaScript、Canvas API画图、CSS3和jQuery及其使用技巧； 实战篇包括第7~17章，综合应用前面技术，开发经典的大家耳熟能详的游戏，如人物拼图、扑克翻牌、推箱子、五子棋、黑白棋、俄罗斯方块、贪吃蛇、雷电飞机射击、Flappy Bird、中国象棋。通过本书读者将学会如何利用HTML5和JavaScript、CSS3制作交互式游戏、平台类游戏，学会网页游戏设计。

本书特点

(1) 内容全面，代码通用。本书所有案例的源代码通用性强，便于读者直接应用于大部分游戏的开发。

(2) 理论夯实，案例丰富。每款游戏案例均提供详细的设计思路、关键技术分析以及具体的解决步骤方案，案例实用性强。

配套资源

为便于教与学，本书配有微课视频(420分钟)、源代码、教学课件、教学大纲、扩展案例。

(1) 获取微课视频方式： 先刮开并用手机版微信App扫描本书封底的文泉云盘防盗码，授权后再扫描书中相应的视频二维码，观看教学视频。

(2) 获取源代码、扩展案例、全书网址方式： 先刮开并用手机版微信App扫描本书封底的文泉云盘防盗码，授权后再扫描下方二维码，即可获取。

源代码

扩展案例

全书网址

(3) 其他配套资源可以扫描本书封底的“书圈”二维码，关注后回复本书书号，即可下载。

读者对象

本书适用于网页游戏编程爱好者、程序设计人员和HTML5网页学习者，也可作为Web应用程序开发人员的参考书。

需要说明的是，学习游戏编程是一个实践的过程，而不仅仅是看书、看资料，亲自动手编写、调试程序才是至关重要的。通过实际的编程以及积极的思考，读者可以快速掌握很多编程技术，而且在编程中还会积累许多宝贵的编程经验。在当前的软件开发环境下，这种编程经验对开发者来说不可或缺。

本书由夏敏捷（中原工学院）主持编写，其中尚展垒（郑州轻工业大学）编写第4~17章，其余章节由夏敏捷编写。张睿萍（中原工学院）参与课件和微课视频制作。在本书的编写过程中，为确保内容的正确性，参阅了很多资料，并且得到了资深Web程序员的支持，在此谨向他们表示衷心的感谢。

限于个人水平和时间仓促，书中难免存在疏漏之处，欢迎广大读者批评指正。

作者2023年1月