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

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