微信小游戏开发：前端篇 pdf下载

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

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

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

李艺

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

李艺是51CTO的忠实用户和专家，拥有近20年的软件研发经验，这本书是他长期从事编程教育的经验总结。本书的创新在于，用一个PBL实战案例，将需要讲解的知识点和读者需要练习的技能点全部串联了起来，并且是遵照人的学习规律，按从易到难的顺序逐一安排的。整本书就像从山脚伸向山顶的石阶，相信新人朋友跟着书中节奏学习，一定会大有长进。
——　熊平，51CTO创始人


本书的特点是循序渐进，从几行代码开始，逐步深入，最终实现一个完整的微信小游戏项目，特别适合新手入门。同时作者用自己丰富的实战经验，细致地帮助初学者在遇到问题时定位并解决问题，使初学者能快速建立一套较完善的思维方式和工作流程。对想学习前端小游戏开发的新手来说，这本书就像一个经验丰富的老程序员在身边手把手带着你做项目，让你学完之后真的有很大收获。
——　廖雪峰，著名技术专家

本书运用PBL实战教学思想来引导读者学习微信小游戏项目的开发。不同于其他的编程入门书籍，李艺编写的这本书富有创意且趣味性十足。在内容方面，不仅章节设计非常巧妙合理、知识脉络清晰，还通过丰富的代码案例与图示让读者更加直观地理解小游戏开发的基础和进阶知识，非常值得一读！
——　陈超，腾讯高级前端开发工程师、腾讯课堂前端Leader


本书不仅介绍了小游戏开发的基础知识，也展示了开发过程中常见问题的解决思路，并通过引入设计模式、模块化重构程序的高级知识，让读者不会仅停留在小游戏开发的技巧中，而是上升到软件开发的终极方法。这种学习方式和思维方法能让读者举一反三，在以后的学习和工作中持续受益，从而设计与开发出可维护和可扩展的程序。
——　寇永赞，新东方教育集团前端技术经理


本书是一本介绍微信小游戏开发的图书，不仅适合前端开发者，也适合对小游戏开发感兴趣的读者。阅读本书可以很好地掌握微信小游戏开发的相关知识，学完后即可独立开发出一款完整的微信小游戏。在学习的过程中，不仅能快速产出学习成果，看到小游戏的成型界面，还能学到许多基础知识，便于查漏补缺。这是一本不可多得的好书，值得推荐！
——　舒欣，微信开发者/腾讯云开发工程师

第一篇　潜龙勿用
第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
本课小结

关于这套书

微信小游戏开发系列图书共包含两本。一本是本书，主要通过一个小游戏实战项目，一步步学会JS语言语法、模块化重构、面向对象的软件设计技巧及常见设计模式的实用技巧。另一本是《微信小游戏开发：后端篇》，主要内容包括小游戏常用单机功能优化、广告组件与社交营销排行榜、云函数与云数据库、后端接口程序及后台Web管理系统、Go语言语法等方面的知识讲解。前面提到的5个学习阶段——潜龙勿用、见龙在田、龙战于野、飞龙在天和亢龙有悔，正好对应这两本书中的5篇内容。其中：本书涉及潜龙勿用、见龙在田、龙战于野这3篇，共11章，32课；《微信小游戏开发：后端篇》则包含飞龙在天，共7章，18课。亢龙有悔在番外篇中，在笔者公众号“艺述论”回复关键字10000时可以看到。

因为微信小游戏是当下最适合新人学习的编程技术，所以笔者选择它作为本套书的练习项目。表面上读者学习的是微信小游戏项目开发，但实际上是在系统地学习编程语言、技巧及思想。

两本书的讲解风格、编撰指导思想是一致的，内容也是连贯的，练习的也是同一个项目，编程初学者宜先阅读本书，再学习《微信小游戏开发：后端篇》。

本书的主要内容

本书分为三篇，共11章，32课。

第一篇（第1章），潜龙勿用，共2课，介绍微信小游戏是如何运行的，以及如何创建第一个小游戏项目。

第二篇（第2～5章），见龙在田，共14课。第2～3章介绍如何用HTML5技术实现一个小游戏，第4～5章介绍如何将这个HTML5小游戏改写成微信小游戏。为什么不直接用微信小游戏开发？因为学习从HTML5移植改写，也是本书的重要内容之一，方便开发者从4399平台或3366平台上学习与借鉴游戏创意。

第三篇（第6～11章），龙战于野，共16课。本篇是本书的实战重点，主要介绍如何对小游戏项目进行重构。重构是软件开发中非常重要的一环，好的软件不是事先设计出来的，而是通过不断重构慢慢迭代出来的。重构不是知识，更多是一种技能。第6～8章介绍小游戏项目的模块化重构方法，第9～11章介绍小游戏项目的面向对象重构方法。

主要读者

任何一本书都有它的特定读者群体，本套书主要面向以下初学者群体。

在校大学生、高职生、中专生及编程培训机构的初学人员；

准备转型的运维工程师和产品相关从业者。

如何学习本书

本书按照PBL教学理念编写，以一个小游戏项目贯穿全书，内容由易到难，建议初学者按部就班，从前向后依次学习。书中为了启发读者思考，特意增加了以下3类内容。

原因探索引导。读者在书中可能会看到一些运行错误，这些错误是我们在实际开发中经常会遇到的。这时适合停下来，想一想为什么会出现这样的问题，应该如何解决。

拓展内容。书中的章节标题凡带有“拓展”字样的，都属于实践拓展内容。这些内容都是与当前实战示例密切相关的，阅读这些内容有助于加深对当下实践主题的理解。

思考与练习。这些习题也是与当前实践主题高度相关的，希望读者可以停下来做一做。书末附有参考答案，练习之后可以对照。

本书附有随书示例源码供读者下载。读者在使用源码时，需要注意以下两点。

示例源码是分目录独立放置的，各目录下的示例互不影响。代码顶部一般都附有源码文件的相对地址。另外，当每课内容涉及代码运行及测试时，也会提示示例的相对目录，读者只需要查看对应的示例源码即可。

对于不同语言的示例源码，需要使用不同的测试方式。如果是JS代码，可以使用node或babel-node测试；如果是小游戏项目源码，则通过微信开发者工具测试。具体如何使用，书中都有详细讲解。

如何获取更多资源

关注笔者的微信公众号“艺述论”，回复10 000，即可下载所有随书源码。同时公众号设置了读者交流群的入口，欢迎所有读者进群交流。

为了避免因为软件版本差异给读者带来的使用困惑，笔者将书中用到的所有软件也放在了随书源码中，下载后在software子目录下即可看到。