微信小游戏开发：前端篇

图书标准信息

• 作者 李艺 著
• 出版社 机械工业出版社
• 出版时间 2023-02
• 版次 1
• ISBN 9787111716839
• 定价 139.00元
• 装帧 其他
• 开本 16开
• 纸张 胶版纸
• 页数 516页
• 字数 699千字

【内容简介】

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

本课小结