微信小遊戲開發：前端篇

李藝

騰訊雲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
本課小結