微信小游戲開(kāi)發(fā)：前端篇

第一篇　潛龍勿用
第1章　創(chuàng)建小游戲項(xiàng)目　　2
第1課　創(chuàng)建項(xiàng)目　　2
了解小游戲的雙線(xiàn)程運(yùn)行機(jī)制　　2
注冊(cè)開(kāi)發(fā)者賬號(hào)　　4
安裝微信開(kāi)發(fā)者工具　　5
創(chuàng)建第一個(gè)小游戲項(xiàng)目　　6
項(xiàng)目測(cè)試：本地預(yù)覽與手機(jī)預(yù)覽　　7
基于文件監(jiān)聽(tīng)實(shí)現(xiàn)自動(dòng)預(yù)覽　　8
了解小游戲示例項(xiàng)目的項(xiàng)目結(jié)構(gòu)　　11
小游戲如何調(diào)試代碼　　13
拓展：如何安裝、配置 Node.js和
babel-node　　17
了解面向?qū)ο缶幊逃嘘P(guān)的基本
概念　　18
本課小結(jié)　　20
第2課　微信小游戲是如何運(yùn)行的　　21
創(chuàng)建畫(huà)布　　21
拓展：如何給變量命名　　22
如何繪制矩形　　23
拓展：如何理解小游戲的全局變量及
作用域　　24
如何清空畫(huà)布　　25
如何繪制網(wǎng)絡(luò)圖片　　25
如何在小游戲中實(shí)現(xiàn)動(dòng)畫(huà)　　28
如何實(shí)現(xiàn)人機(jī)交互　　29
拓展：如何理解局部變量　　30
拓展：了解微信小游戲的API
風(fēng)格　　31
本課小結(jié)　　32
第二篇　見(jiàn)龍?jiān)谔?br />第2章　編寫(xiě)一個(gè)簡(jiǎn)單的HTML5
小游戲：打造游戲界面　　34
第3課　繪制游戲標(biāo)題　　35
安裝與配置Visual Studio Code　　35
學(xué)習(xí)使用HTML標(biāo)記，開(kāi)始繪制游戲標(biāo)題　　36
拓展：如何使用const 關(guān)鍵字　　39
拓展：如何給代碼添加注釋　　40
如何改變字體、字號(hào)和顏色　　40
拓展：在font-family中要使用中文字體的英文名稱(chēng)　　42
如何給文本添加文本樣式　　42
如何在繪制文本中使用漸變色　　44
如何讓文本居中繪制　　46
拓展：為什么要在代碼中使用
常量　　48
本課小結(jié)　　48
第4課　繪制擋板　　48
如何在畫(huà)布上繪制直線(xiàn)　　48
拓展：JS的8個(gè)基本數(shù)據(jù)類(lèi)型，如何進(jìn)行類(lèi)型判斷　　50
給畫(huà)布添加一個(gè)淺色背景　　53
如何加厚擋板　　54
拓展：JS中的數(shù)值類(lèi)型、布爾類(lèi)型是如何進(jìn)行類(lèi)型轉(zhuǎn)換的　　55
如何給擋板添加圓角、陰影效果　　56
使用路徑填充和矩形繪制擋板　　58
如何使用顏色漸變對(duì)象和圖像填充材質(zhì)繪制擋板　　60
拓展：什么是區(qū)塊作用域　　65
拓展：了解數(shù)字類(lèi)型，警惕0.1 0.2不等于0.3　　66
拓展：如何批量聲明變量、常量　　67
本課小結(jié)　　67
第5課　繪制小球　　68
如何使用弧線(xiàn)繪制圓形　　 68
如何使用arc方法直接繪制圓形　　70
本課小結(jié)　　71
第6課　繪制分界線(xiàn)　　71
分別通過(guò)lineTo和漸變色繪制
分界線(xiàn)　　71
拓展：CSS 顏色值有哪些格式　　73
使用函數(shù)繪制間隔效果　　75
拓展：如何定義和使用函數(shù)　　77
使用循環(huán)繪制分界線(xiàn)　　81
拓展：使用比較運(yùn)算符、if控制語(yǔ)句
和算術(shù)運(yùn)算符　　84
拓展：JS的5種循環(huán)控制語(yǔ)句　　86
將函數(shù)當(dāng)作變量使用　　87
拓展：如何理解JS的作用域鏈與
閉包　　90
拓展：如何使用集合對(duì)象 Map 與
Set　　92
本課小結(jié)　　95
第3章　編寫(xiě)一個(gè)簡(jiǎn)單的HTML5小游戲：完成交互功能　　96
第7課　實(shí)現(xiàn)動(dòng)畫(huà)：讓小球動(dòng)起來(lái)　　96
使用定時(shí)器實(shí)現(xiàn)動(dòng)畫(huà)　　96
拓展：如何理解JS的異步執(zhí)行
機(jī)制　　98
拓展：了解13種復(fù)合賦值運(yùn)算符　　99
完成動(dòng)畫(huà)的關(guān)鍵：清屏　　99
如何實(shí)現(xiàn)小球與屏幕的碰撞
檢測(cè)　　103
拓展：復(fù)習(xí)使用if else if 語(yǔ)句　　105
使用 requestAnimationFrame改進(jìn)動(dòng)畫(huà)流暢度　　106
本課小結(jié)　　108
第8課　監(jiān)聽(tīng)用戶(hù)事件：讓擋板動(dòng)
起來(lái)　　108
繪制左擋板　　108
使右擋板可以上下自主移動(dòng)　　110
改用函數(shù)繪制擋板　　111
監(jiān)聽(tīng)用戶(hù)輸入，使用鼠標(biāo)（或觸摸）
事件操控左擋板　　112
實(shí)現(xiàn)擋板與球的碰撞檢測(cè)　　114
拓展：如何使用邏輯運(yùn)算符　　115
統(tǒng)計(jì)分?jǐn)?shù)　　116
拓展：復(fù)習(xí)批量聲明變量，可以將
逗號(hào)放在前面　　117
在游戲結(jié)束時(shí)添加反饋　　118
拓展：加號(hào)與模板字符串　　120
本課小結(jié)　　121
第9課　實(shí)現(xiàn)游戲的重啟功能　　122
繪制重新開(kāi)始游戲的文本提示　　122
理解HTML5的事件模型，監(jiān)聽(tīng)單擊
事件實(shí)現(xiàn)重啟功能　　123
拓展：如何使用removeEvent---
Listener　　127
本課小結(jié)　　128
第10課　控制游戲音效：添加單擊
音效和背景音樂(lè)　　128
如何使用標(biāo)簽播放聲音　　128
如何使用JS代碼播放聲音　　132
給項(xiàng)目添加背景音樂(lè)　　133
使用圖片材質(zhì)繪制背景音樂(lè)按鈕　　134
使用離屏畫(huà)布繪制背景音樂(lè)按鈕　　136
使用drawImage繪制背景音樂(lè)
按鈕　　138
監(jiān)聽(tīng)背景音樂(lè)按鈕的單擊事件　　139
拓展：如何使用條件運(yùn)算符　　140
本課小結(jié)　　141
第4章　移植及優(yōu)化　　142
第11課　移植準(zhǔn)備工作　　143
創(chuàng)建代碼片段與改寫(xiě)項(xiàng)目　　143
拓展：在小游戲中如何獲取屏幕
尺寸　　144
拓展：關(guān)于代碼自動(dòng)提示　　146
本課小結(jié)　　146
第12課　移植音頻和事件　　146
處理getElementById is not a function
錯(cuò)誤　　146
播放音頻：處理Audio is not defined
錯(cuò)誤　　148
處理Audio錯(cuò)誤：canPlayType is not
a function　　150
處理currentTime錯(cuò)誤：currentTime
是只讀屬性　　151
擋板繪制：處理Image is not defined
錯(cuò)誤　　152
拓展：復(fù)習(xí)條件運(yùn)算符和短路評(píng)估
表達(dá)式　　153
準(zhǔn)備移植事件監(jiān)聽(tīng)，認(rèn)識(shí)小游戲的
觸摸事件　　154
拓展：targetTouches、touches和changedTouches的區(qū)別　　156
改寫(xiě)click事件與mousemove
事件　　157
拓展：關(guān)于小游戲的運(yùn)行環(huán)境　　161
本課小結(jié)　　161
第13課　移植文本與圖像　　161
處理標(biāo)題文本不顯示的問(wèn)題　　162
拓展：實(shí)現(xiàn)漸變、陰影效果的替代
方案　　167
解決左擋板移動(dòng)到底部不顯示的
問(wèn)題　　167
使背景音樂(lè)循環(huán)播放　　168
優(yōu)化分?jǐn)?shù)文本、擋板、小球與背景
音樂(lè)按鈕的參數(shù)　　170
拓展：如何在測(cè)試時(shí)靜音　　173
本課小結(jié)　　173
第5章　移植后對(duì)小游戲進(jìn)行平臺(tái)
功能優(yōu)化　　174
第14課　繪制微信用戶(hù)頭像　　174
小游戲有哪些授權(quán)范圍　　174
不能直接查詢(xún)“用戶(hù)信息”的授權(quán)
情況　　175
使用 UserInfoButton　　 176
拓展：為什么要使用全等運(yùn)算符
而不是等號(hào)運(yùn)算符　　180
繪制用戶(hù)頭像　　181
拓展：學(xué)習(xí)使用箭頭函數(shù)及判定
this對(duì)象　　182
主動(dòng)銷(xiāo)毀按鈕　　194
控制頭像大小，讓左擋板默認(rèn)
展示　　195
主動(dòng)查詢(xún)用戶(hù)授權(quán)　　196
拓展：如何在測(cè)試中清理緩存　　200
本課小結(jié)　　200
第15課　添加游戲反饋　　201
添加Toast提示　　201
在提示窗口中自定義icon　　202
使用模態(tài)彈窗　　204
拓展：游戲渲染的幀率可以
修改嗎　　206
本課小結(jié)　　207
第16課　添加超時(shí)限制　　208
限制游戲30s結(jié)束　　208
拓展：復(fù)習(xí)定時(shí)器的使用　　209
讓游戲支持重啟　　215
及時(shí)清除定時(shí)器　　216
本課小結(jié)　　217
第三篇　龍戰(zhàn)于野
第6章　模塊化重構(gòu)一：準(zhǔn)備重構(gòu)　　220
第17課　梳理游戲邏輯　　221
在小游戲中如何使用全局變量　　221
拓展：作用域與使用let關(guān)鍵字實(shí)現(xiàn)
批量變量聲明　　222
整理代碼，將變量與常量放在文件
頂部　　223
梳理游戲邏輯，明確6個(gè)周期
函數(shù)　　227
添加start函數(shù)　　228
添加end函數(shù)　　228
添加init函數(shù)　　230
添加loop函數(shù)　　232
及時(shí)移除事件監(jiān)聽(tīng)　　234
本課小結(jié)　　236
第18課　JS如何創(chuàng)建對(duì)象及如何實(shí)現(xiàn)
模塊化　　236
使用原型繼承對(duì)象　　237
使用構(gòu)造函數(shù)創(chuàng)建對(duì)象　　238
拓展：理解__proto__與prototype
屬性　　239
拓展：如何理解原型及原型鏈　　242
基于原型鏈實(shí)現(xiàn)萬(wàn)能的類(lèi)型檢測(cè)方法instanceOf　　244
使用class關(guān)鍵字創(chuàng)建類(lèi)對(duì)象　　245
使用CommonJS規(guī)范　　246
使用ES Module規(guī)范　　247
拓展：對(duì)比CommonJS規(guī)范和ES Module規(guī)范的差異　　248
本課小結(jié)　　251
第7章　模塊化重構(gòu)二：重構(gòu)背景音樂(lè)、小球和擋板　　252
第19課　創(chuàng)建背景音樂(lè)模塊　　252
開(kāi)始創(chuàng)建背景音樂(lè)模塊　　252
拓展：重新認(rèn)識(shí)class和函數(shù)調(diào)用中的this　　258
拓展：認(rèn)清JS的內(nèi)存管理　　261
拓展：了解代碼的優(yōu)化評(píng)判標(biāo)準(zhǔn)　　263
改進(jìn)復(fù)用性和易用性：將數(shù)據(jù)參數(shù)化，設(shè)置參數(shù)的默認(rèn)值　　263
改進(jìn)封裝性：將內(nèi)部成員私有化　　266
優(yōu)化圖片渲染：由多次加載改為
加載一次　　268
改進(jìn)封裝性：添加getter　　269
對(duì)易用性的改進(jìn)：直接導(dǎo)出單例　　271
本課小結(jié)　　272
第20課　創(chuàng)建小球模塊　　272
開(kāi)始創(chuàng)建小球模塊　　272
使用跨文件常量　　274
拓展：使用defineProperty將變量改為常量　　275
創(chuàng)建Ball類(lèi)　　276
本課小結(jié)　　282
第21課　創(chuàng)建擋板模塊　　282
開(kāi)始創(chuàng)建Panel類(lèi)　　282
使用繼承實(shí)現(xiàn)左、右擋板　　291
拓展：復(fù)習(xí)JS實(shí)現(xiàn)繼承的方式　　297
拓展：復(fù)習(xí)類(lèi)型檢測(cè)操作符
typeof與instanceof的不同　　300
本課小結(jié)　　301
第8章　模塊化重構(gòu)三：重構(gòu)記分板、
背景、頁(yè)面和游戲?qū)ο蟆　?03
第22課　創(chuàng)建記分板模塊　　303
實(shí)現(xiàn)兩個(gè)記分板類(lèi)　　303
拓展：復(fù)習(xí)ES Module的導(dǎo)出與
導(dǎo)入　　312
使用工具方法drawText　　313
隱藏分?jǐn)?shù)變量　　314
本課小結(jié)　　316
第23課　創(chuàng)建游戲背景對(duì)象和游戲
對(duì)象　　316
創(chuàng)建背景對(duì)象　　317
為創(chuàng)建游戲?qū)ο笞鰷?zhǔn)備　　320
讓音頻管理者接管單擊音效　　321
實(shí)現(xiàn)游戲?qū)ο驡ame類(lèi)　　323
拓展：復(fù)習(xí)使用bind改變this
對(duì)象　　331
本課小結(jié)　　332
第24課　創(chuàng)建頁(yè)面對(duì)象　　332
創(chuàng)建游戲結(jié)束頁(yè)面　　333
創(chuàng)建游戲主頁(yè)對(duì)象　　338
本課小結(jié)　　347
第25課　重構(gòu)游戲?qū)ο蟆　?47
一個(gè)文件只定義一個(gè)類(lèi)　　347
為Game類(lèi)添加#currentPage
變量　　352
解決30s超時(shí)限制不起作用的
問(wèn)題　　356
移除#gameIsOver變量　　359
本課小結(jié)　　359
第9章　面向?qū)ο笾貥?gòu)一：重構(gòu)游戲
對(duì)象等　　361
第26課　設(shè)計(jì)模式重構(gòu)一：?jiǎn)卫Ｊ?、觀察者模式和組合模式　　362
將Game類(lèi)改寫(xiě)為單例模式　　362
在Game類(lèi)上應(yīng)用觀察者模式　　364
使用組合模式改寫(xiě)用戶(hù)記分板
模塊　　370
本課小結(jié)　　381
第27課　設(shè)計(jì)模式重構(gòu)二：模板方法
模式、職責(zé)鏈模式和簡(jiǎn)單工
廠模式　　381
在頁(yè)面對(duì)象中啟用模板方法模式　　382
使用職責(zé)鏈模式改寫(xiě)單擊音效
實(shí)現(xiàn)　　386
使用簡(jiǎn)單工廠模式改寫(xiě)turnToPage
方法　　391
本課小結(jié)　　396
第10章　面向?qū)ο笾貥?gòu)二：頁(yè)面對(duì)象
和分界線(xiàn)的繪制　　397
第28課　設(shè)計(jì)模式重構(gòu)三：工廠方法
模式和抽象工廠模式　　397
使用工廠方法模式創(chuàng)建Page頁(yè)面
對(duì)象　　397
使用抽象工廠模式封裝頁(yè)面對(duì)象的
創(chuàng)建過(guò)程　　400
本課小結(jié)