微信小游戏开发 前端篇

（1）作者权威：微信学堂《小程序性能优化实践》作者李艺*新力作。（2）专家好评：7位行业资深专家一致好评和推荐。（3）内容全面：涵盖前端后端微信小游戏全栈开发所有知识点和技能点。（4）从零开始：对新人友好，难度变化均匀，没有编程基础也可以学习。（5）高效学习：知识点技能点融入到了项目实战中，跟着项目完成功能迭代就能完成学习。（6）实战式拓展：实战中从一个点学起，实战后从点向面拓展。（7）原因式讲解：刻意设计案例错误，引发读者主动思索。

“微信小游戏开发”系列图书包含本书和《微信小游戏开发：后端篇》，融汇了腾讯云TVP李艺多年来的一线项目研发和教学经验。本书的特点是基于一个精心设计的PBL实战项目，以模拟项目迭代重构的方式，循序渐进地介绍前端所有的知识点和技能，包括但不限于计算机网络通信基础、JS编程语言、面向对象的软件设计思想和设计模式、模块化编程思想、小游戏开发技巧等。为了方便读者学习，随书还附有相应的完整源码。
本书共分为三篇。
第一篇（第1章），潜龙勿用，共2课，介绍微信小游戏是如何运行的，以及如何创建个小游戏项目。
第二篇（第2～5章），见龙在田，共14课。第2～3章介绍如何用HTML5技术实现一个小游戏；第4～5章介绍如何将这个HTML5小游戏改写成微信小游戏，方便开发者从4399平台或3366平台上学习与借鉴开发技巧。
第三篇（第6～11章），龙战于野，共16课。本篇是本书的实战重点，主要介绍如何对小游戏项目进行重构，因为好的软件不是事先设计出来的，而是通过不断重构慢慢迭代出来的。第6～8章介绍小游戏项目的模块化重构方法，第9～11章介绍小游戏项目的面向对象重构方法。

序一
序二
前言
第一篇 潜龙勿用
第1章 创建小游戏项目  2
第1课 创建项目  2
了解小游戏的双线程运行机制  2
注册开发者账号  4
安装微信开发者工具  5
创建第一个小游戏项目  6
项目测试：本地预览与手机预览  7
基于文件监听实现自动预览  8
了解小游戏示例项目的项目结构  11
小游戏如何调试代码  13
拓展：如何安装、配置 Node.js和babel-node  17
了解面向对象编程有关的基本概念  18
本课小结  20
第2课 微信小游戏是如何运行的  21
创建画布  21
拓展：如何给变量命名  22
如何绘制矩形  23
拓展：如何理解小游戏的全局变量及作用域  24
如何清空画布  25
如何绘制网络图片  25
如何在小游戏中实现动画  28
如何实现人机交互  29
拓展：如何理解局部变量  30
拓展：了解微信小游戏的API风格  31
本课小结  32
第二篇 见龙在田
第2章 编写一个简单的HTML5小游戏：打造游戏界面  34
第3课 绘制游戏标题  35
安装与配置Visual Studio Code  35
学习使用HTML标记，开始绘制游戏标题  36
拓展：如何使用const 关键字  39
拓展：如何给代码添加注释  40
如何改变字体、字号和颜色  40
拓展：在font-family中要使用中文字体的英文名称  42
如何给文本添加文本样式  42
如何在绘制文本中使用渐变色  44
如何让文本居中绘制  46
拓展：为什么要在代码中使用常量  48
本课小结  48
第4课 绘制挡板  48
如何在画布上绘制直线  48
拓展：JS的8个基本数据类型，如何进行类型判断  50
给画布添加一个浅色背景  53
如何加厚挡板  54
拓展：JS中的数值类型、布尔类型是如何进行类型转换的  55
如何给挡板添加圆角、阴影效果  56
使用路径填充和矩形绘制挡板  58
如何使用颜色渐变对象和图像填充材质绘制挡板  60
拓展：什么是区块作用域  65
拓展：了解数字类型，警惕0.1 + 0.2不等于0.3  66
拓展：如何批量声明变量、常量  67
本课小结  67
第5课 绘制小球  68
如何使用弧线绘制圆形   68
如何使用arc方法直接绘制圆形  70
本课小结  71
第6课 绘制分界线  71
分别通过lineTo和渐变色绘制分界线  71
拓展：CSS 颜色值有哪些格式  73
使用函数绘制间隔效果  75
拓展：如何定义和使用函数  77
使用循环绘制分界线  81
拓展：使用比较运算符、if控制语句和算术运算符  84
拓展：JS的5种循环控制语句  86
将函数当作变量使用  87
拓展：如何理解JS的作用域链与闭包  90
拓展：如何使用集合对象 Map 与Set  92
本课小结  95
第3章 编写一个简单的HTML5小游戏：完成交互功能  96
第7课 实现动画：让小球动起来  96
使用定时器实现动画  96
拓展：如何理解JS的异步执行机制  98
拓展：了解13种复合赋值运算符  99
完成动画的关键：清屏  99
如何实现小球与屏幕的碰撞检测  103
拓展：复习使用if else if 语句  105
使用 requestAnimationFrame改进动画流畅度  106
本课小结  108
第8课 监听用户事件：让挡板动起来  108
绘制左挡板  108
使右挡板可以上下自主移动  110
改用函数绘制挡板  111
监听用户输入，使用鼠标（或触摸）事件操控左挡板  112
实现挡板与球的碰撞检测  114
拓展：如何使用逻辑运算符  115
统计分数  116
拓展：复习批量声明变量，可以将逗号放在前面  117
在游戏结束时添加反馈  118
拓展：加号与模板字符串  120
本课小结  121
第9课 实现游戏的重启功能  122
绘制重新开始游戏的文本提示  122
理解HTML5的事件模型，监听单击事件实现重启功能  123
拓展：如何使用removeEvent---Listener  127
本课小结  128
第10课 控制游戏音效：添加单击音效和背景音乐  128
如何使用标签播放声音  128
如何使用JS代码播放声音  132
给项目添加背景音乐  133
使用图片材质绘制背景音乐按钮  134
使用离屏画布绘制背景音乐按钮  136
使用drawImage绘制背景音乐按钮  138
监听背景音乐按钮的单击事件  139
拓展：如何使用条件运算符  140
本课小结  141
第4章 移植及优化  142
第11课 移植准备工作  143
创建代码片段与改写项目  143
拓展：在小游戏中如何获取屏幕尺寸  144
拓展：关于代码自动提示  146
本课小结  146
第12课 移植音频和事件  146
处理getElementById is not a function错误  146
播放音频：处理Audio is not defined错误  148
处理Audio错误：canPlayType is not a function  150
处理currentTime错误：currentTime是只读属性  151
挡板绘制：处理Image is not defined错误  152
拓展：复习条件运算符和短路评估表达式  153
准备移植事件监听，认识小游戏的触摸事件  154
拓展：targetTouches、touches和changedTouches的区别  156
改写click事件与mousemove事件  157
拓展：关于小游戏的运行环境  161
本课小结  161
第13课 移植文本与图像  161
处理标题文本不显示的问题  162
拓展：实现渐变、阴影效果的替代方案  167
解决左挡板移动到底部不显示的问题  167
……