微信小游戏开发 前端篇

Foreword?前　　言
笔者在极客时间（在线教育平台）上线4周年之际，在该平台上分享过这样一段话：
“我是一个砌石阶的人。2021年国庆节我在赶书稿写作进度时，看着终敲定的复杂的代码，突然确定——我所撰写的这套技术图书，对读者来说是有价值的。其价值就在于整套书都基于一个PBL（Project Based Learning，项目引导式学习）实战案例，从开始的3行代码，到终的几万行代码。试想一下：如果要求学习者直接以结果代码为模板进行练习，那肯定不太友好；而学习者如果跟着节奏从基础代码一步步修改得到结果代码，那应该会很有成就感吧。
“学编程就像登山，只要一步一个脚印坚持往上爬，就可以到达山顶。泰山虽高，只要一步一级台阶，终可看到山顶无限风光。但如果有人不走台阶，在荒山野岭中攀爬，那他将很难爬上去。”
这本书及它的姊妹篇《微信小游戏开发：后端篇》就在这种指导思想下完成了。
多数程序员坦言，他们的编程技能都是走向工作岗位以后练就的。在IT公司中，新人成长快的方式就是有人带，师傅带着徒弟做一个项目，等项目完成时，徒弟的编程技能也就掌握得差不多了。笔者希望以类似的形式带领读者来学习，通过一个PBL实战项目，系统地学习微信小游戏开发所需的所有前端和后端知识点与技能。
为什么要这样学习呢？
初学者进入一个行业，首先要学习基础知识。有了知识，才能通过实践不断积累经验和技能；有了积累，后才有可能顿悟。这个过程涉及5个阶段，挑选我国的古代典籍《易经》中的描述来概括。
初九，潜龙勿用。
九二，见龙在田，利见大人。
上六，龙战于野，其血玄黄。
九五，飞龙在天，利见大人。
上九，亢龙有悔。
这里的五段爻辞，分别对应着以下编程学习的5个阶段。
“潜龙勿用”指的是神龙潜伏于水中，暂时还无法展示威力。此时我们刚学会了一点皮毛，不要着急应用。
“见龙在田，利见大人”指的是神龙已出现在地面上，才干已经初步显露出来，利于被伯乐看到。此时我们已经习得了一些本领，但根基尚不牢靠。
“龙战于野，其血玄黄”指的是神龙战于四方，天地亦为之变色。此时我们已经知晓了面向对象、模块化、设计模式等基础编程技能，可以独立负责一个项目或维护一个开源软件了。
“飞龙在天，利见大人”指的是神龙飞上天空，象征德才兼备的人一定会有所作为。此时的学习者对知识的深度和广度均有深刻认识，知识结构更加完善了。
“亢龙有悔”一般意为居高位的人要戒骄，否则会因失败而后悔。这里指的是神龙飞得过高，可能会发生后悔的事。此时学习基本已经结束，但不要觉得学完就万事大吉了，有些内容需要反复温习，经过长期积累才能顿悟，产生新的认知。
了解了这5个阶段以后，可能有读者就要问了：我们在学习编程时，是应该先学基础知识再学习具体的开发技术，还是应该先学习一项具体的技术，再在工作中夯实基础呢？这是一个老生常谈的问题。
如何学习编程，一直有自下而上与自上而下之争。自下而上的学习，指的是先从计算机基础开始学习，之后再学习具体的某项技术；自上而下的学习则是反过来，先学项具体技术，再于工作中夯实基础。
笔者的主张是，运用PBL教学思想，在一个虚构的实战项目中将理论与实践相结合，基础知识与具体的技能同时学习。
在编程这个领域，学习者根本不需要考虑应该自下而上学习，还是自上而下学习。以往旧的学习方式，无论是在学校里按部就班地学习基础，还是在社会培训机构里实践应用技能，都存在一定的偏差。PBL是接近于公司老人带新人的学习方式。
关于这套书
微信小游戏开发系列图书共包含两本。一本是本书，主要通过一个小游戏实战项目，一步步学会JS语言语法、模块化重构、面向对象的软件设计技巧及常见设计模式的实用技巧。另一本是《微信小游戏开发：后端篇》，主要内容包括小游戏常用单机功能优化、广告组件与社交营销排行榜、云函数与云数据库、后端接口程序及后台Web管理系统、Go语言语法等方面的知识讲解。前面提到的5个学习阶段——潜龙勿用、见龙在田、龙战于野、飞龙在天和亢龙有悔，正好对应这两本书中的5篇内容。其中：本书涉及潜龙勿用、见龙在田、龙战于野这3篇，共11章，32课；《微信小游戏开发：后端篇》则包含飞龙在天，共7章，18课。亢龙有悔在番外篇中，在笔者公众号“艺述论”回复关键字10000时可以看到。
因为微信小游戏是当下适合新人学习的编程技术，所以笔者选择它作为本套书的练习项目。表面上读者学习的是微信小游戏项目开发，但实际上是在系统地学习编程语言、技巧及思想。
两本书的讲解风格、编撰指导思想是一致的，内容也是连贯的，练习的也是同一个项目，编程初学者宜先阅读本书，再学习《微信小游戏开发：后端篇》。
本书的主要内容
本书分为三篇，共11章，32课。
篇（第1章），潜龙勿用，共2课，介绍微信小游戏是如何运行的，以及如何创建个小游戏项目。
第二篇（第2～5章），见龙在田，共14课。第2～3章介绍如何用HTML5技术

“微信小游戏开发”系列图书包含本书和《微信小游戏开发：后端篇》，融汇了腾讯云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
本课小结
                    

“微信小游戏开发”系列图书包含本书和《微信小游戏开发：后端篇》，融汇了腾讯云TVP李艺多年来的一线项目研发和教学经验。本书*大的特点是基于一个精心设计的PBL实战项目，以模拟项目迭代重构的方式，循序渐进地介绍前端所有的知识点和技能，包括但不限于计算机网络通信基础、JS编程语言、面向对象的软件设计思想和设计模式、模块化编程思想、小游戏开发技巧等。为了方便读者学习，随书还附有相应的完整源码。

本书共分为三篇。
篇（第1章），潜龙勿用，共2课，介绍微信小游戏是如何运行的，以及如何创建个小游戏项目。
第二篇（第2～5章），见龙在田，共14课。第2～3章介绍如何用HTML5技术实现一个小游戏；第4～5章介绍如何将这个HTML5小游戏改写成微信小游戏，方便开发者从4399平台或3366平台上学习与借鉴开发技巧。
第三篇（第6～11章），龙战于野，共16课。本篇是本书的实战重点，主要介绍如何对小游戏项目进行重构，因为好的软件不是事先设计出来的，而是通过不断重构慢慢迭代出来的。第6～8章介绍小游戏项目的模块化重构方