微信小游戏开发：前端篇

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

　　李艺腾讯云TVP，有近 20 年互联网软件研发经验，参与研发的音视频直播软件产品曾在腾讯QQ上线，有数千万人使用；一汽大众等企业内训讲师，北京协同创新研究院人工智能项目技术负责人。他是国内早期闪客之一，曾自定义课件标准并完成全平台教育课件产品研发，被Adobe官方选为中国社区管理员。业余喜欢写作，创建微信公众号和视频号“艺述论”，用以分享技术教程，是微信学堂“小程序性能优化实践”和极客时间“微信小程序全栈开发实战”的专栏作者，著有《小程序从0到1：微信全栈工程师一本通》等书。

第一篇　潜龙勿用
第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
使背景音乐循环播放　　168
优化分数文本、挡板、小球与背景
音乐按钮的参数　　170
拓展：如何在测试时静音　　173
本课小结　　173
第5章　移植后对小游戏进行平台
功能优化　　174
第14课　绘制微信用户头像　　174
小游戏有哪些授权范围　　174
不能直接查询“用户信息”的授权
情况　　175
使用 UserInfoButton　　 176
拓展：为什么要使用全等运算符
而不是等号运算符　　180
绘制用户头像　　181
拓展：学习使用箭头函数及判定
this对象　　182
主动销毁按钮　　194
控制头像大小，让左挡板默认
展示　　195
主动查询用户授权　　196
拓展：如何在测试中清理缓存　　200
本课小结　　200
第15课　添加游戏反馈　　201
添加Toast提示　　201
在提示窗口中自定义icon　　202
使用模态弹窗　　204
拓展：游戏渲染的帧率可以
修改吗　　206
本课小结　　207
第16课　添加超时限制　　208
限制游戏30s结束　　208
拓展：复习定时器的使用　　209
让游戏支持重启　　215
及时清除定时器　　216
本课小结　　217
第三篇　龙战于野
第6章　模块化重构一：准备重构　　220
第17课　梳理游戏逻辑　　221
在小游戏中如何使用全局变量　　221
拓展：作用域与使用let关键字实现
批量变量声明　　222
整理代码，将变量与常量放在文件
顶部　　223
梳理游戏逻辑，明确6个周期
函数　　227
添加start函数　　228
添加end函数　　228
添加init函数　　230
添加loop函数　　232
及时移除事件监听　　234
本课小结　　236
第18课　JS如何创建对象及如何实现
模块化　　236
使用原型继承对象　　237
使用构造函数创建对象　　238
拓展：理解__proto__与prototype
属性　　239
拓展：如何理解原型及原型链　　242
基于原型链实现万能的类型检测方法instanceOf　　244
使用class关键字创建类对象　　245
使用CommonJS规范　　246
使用ES Module规范　　247
拓展：对比CommonJS规范和ES Module规范的差异　　248
本课小结　　251
第7章　模块化重构二：重构背景音乐、小球和挡板　　252
第19课　创建背景音乐模块　　252
开始创建背景音乐模块　　252
拓展：重新认识class和函数调用中的this　　258
拓展：认清JS的内存管理　　261
拓展：了解代码的优化评判标准　　263
改进复用性和易用性：将数据参数化，设置参数的默认值　　263
改进封装性：将内部成员私有化　　266
优化图片渲染：由多次加载改为
加载一次　　268
改进封装性：添加getter　　269
对易用性的改进：直接导出单例　　271
本课小结　　272
第20课　创建小球模块　　272
开始创建小球模块　　272
使用跨文件常量　　274
拓展：使用defineProperty将变量改为常量　　275
创建Ball类　　276
本课小结　　282
第21课　创建挡板模块　　282
开始创建Panel类　　282
使用继承实现左、右挡板　　291
拓展：复习JS实现继承的方式　　297
拓展：复习类型检测操作符
typeof与instanceof的不同　　300
本课小结　　301
第8章　模块化重构三：重构记分板、
背景、页面和游戏对象　　303
第22课　创建记分板模块　　303
实现两个记分板类　　303
拓展：复习ES Module的导出与
导入　　312
使用工具方法drawText　　313
隐藏分数变量　　314
本课小结　　316
第23课　创建游戏背景对象和游戏
对象　　316
创建背景对象　　317
为创建游戏对象做准备　　320
让音频管理者接管单击音效　　321
实现游戏对象Game类　　323
拓展：复习使用bind改变this
对象　　331
本课小结　　332
第24课　创建页面对象　　332
创建游戏结束页面　　333
创建游戏主页对象　　338
本课小结　　347
第25课　重构游戏对象　　347
一个文件只定义一个类　　347
为Game类添加#currentPage
变量　　352
解决30s超时限制不起作用的
问题　　356
移除#gameIsOver变量　　359
本课小结　　359
第9章　面向对象重构一：重构游戏
对象等　　361
第26课　设计模式重构一：单例模式、观察者模式和组合模式　　362
将Game类改写为单例模式　　362
在Game类上应用观察者模式　　364
使用组合模式改写用户记分板
模块　　370
本课小结　　381
第27课　设计模式重构二：模板方法
模式、职责链模式和简单工
厂模式　　381
在页面对象中启用模板方法模式　　382
使用职责链模式改写单击音效
实现　　386
使用简单工厂模式改写turnToPage
方法　　391
本课小结　　396
第10章　面向对象重构二：页面对象
和分界线的绘制　　397
第28课　设计模式重构三：工厂方法
模式和抽象工厂模式　　397
使用工厂方法模式创建Page页面
对象　　397
使用抽象工厂模式封装页面对象的
创建过程　　400
本课小结