“微信小游戲開發(fā)”系列圖書包含本書和《微信小游戲開發(fā)：后端篇》，融匯了騰訊云TVP李藝多年來(lái)的一線項(xiàng)目研發(fā)和教學(xué)經(jīng)驗(yàn)。本書*大的特點(diǎn)是基于一個(gè)精心設(shè)計(jì)的PBL實(shí)戰(zhàn)項(xiàng)目，以模擬項(xiàng)目迭代重構(gòu)的方式，循序漸進(jìn)地介紹前端所有的知識(shí)點(diǎn)和技能，包括但不限于計(jì)算機(jī)網(wǎng)絡(luò)通信基礎(chǔ)、JS編程語(yǔ)言、面向?qū)ο蟮能浖O(shè)計(jì)思想和設(shè)計(jì)模式、模塊化編程思想、小游戲開發(fā)技巧等。為了方便讀者學(xué)習(xí)，隨書還附有相應(yīng)的完整源碼。
本書共分為三篇。
第一篇（第1章），潛龍勿用，共2課，介紹微信小游戲是如何運(yùn)行的，以及如何創(chuàng)建第一個(gè)小游戲項(xiàng)目。
第二篇（第2～5章），見龍?jiān)谔�，�?4課。第2～3章介紹如何用HTML5技術(shù)實(shí)現(xiàn)一個(gè)小游戲；第4～5章介紹如何將這個(gè)HTML5小游戲改寫成微信小游戲，方便開發(fā)者從4399平臺(tái)或3366平臺(tái)上學(xué)習(xí)與借鑒開發(fā)技巧。
第三篇（第6～11章），龍戰(zhàn)于野，共16課。本篇是本書的實(shí)戰(zhàn)重點(diǎn)，主要介紹如何對(duì)小游戲項(xiàng)目進(jìn)行重構(gòu)，因?yàn)楹玫能浖皇鞘孪仍O(shè)計(jì)出來(lái)的，而是通過(guò)不斷重構(gòu)慢慢迭代出來(lái)的。第6～8章介紹小游戲項(xiàng)目的模塊化重構(gòu)方法，第9～11章介紹小游戲項(xiàng)目的面向?qū)ο笾貥?gòu)方法。
第一篇 潛龍勿用
第1章 創(chuàng)建小游戲項(xiàng)目 2
第1課 創(chuàng)建項(xiàng)目 2
了解小游戲的雙線程運(yùn)行機(jī)制 2
注冊(cè)開發(fā)者賬號(hào) 4
安裝微信開發(fā)者工具 5
創(chuàng)建第一個(gè)小游戲項(xiàng)目 6
項(xiàng)目測(cè)試：本地預(yù)覽與手機(jī)預(yù)覽 7
基于文件監(jiān)聽實(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)建畫布 21
拓展：如何給變量命名 22
如何繪制矩形 23
拓展：如何理解小游戲的全局變量及
作用域 24
如何清空畫布 25
如何繪制網(wǎng)絡(luò)圖片 25
如何在小游戲中實(shí)現(xiàn)動(dòng)畫 28
如何實(shí)現(xiàn)人機(jī)交互 29
拓展：如何理解局部變量 30
拓展：了解微信小游戲的API
風(fēng)格 31
本課小結(jié) 32
第二篇 見龍?jiān)谔?br>第2章 編寫一個(gè)簡(jiǎn)單的HTML5
小游戲：打造游戲界面 34
第3課 繪制游戲標(biāo)題 35
安裝與配置Visual Studio Code 35
學(xué)習(xí)使用HTML標(biāo)記，開始繪制游戲標(biāo)題 36
拓展：如何使用const 關(guān)鍵字 39
拓展：如何給代碼添加注釋 40
如何改變字體、字號(hào)和顏色 40
拓展：在font-family中要使用中文字體的英文名稱 42
如何給文本添加文本樣式 42
如何在繪制文本中使用漸變色 44
如何讓文本居中繪制 46
拓展：為什么要在代碼中使用
常量 48
本課小結(jié) 48
第4課 繪制擋板 48
如何在畫布上繪制直線 48
拓展：JS的8個(gè)基本數(shù)據(jù)類型，如何進(jìn)行類型判斷 50
給畫布添加一個(gè)淺色背景 53
如何加厚擋板 54
拓展：JS中的數(shù)值類型、布爾類型是如何進(jìn)行類型轉(zhuǎn)換的 55
如何給擋板添加圓角、陰影效果 56
使用路徑填充和矩形繪制擋板 58
如何使用顏色漸變對(duì)象和圖像填充材質(zhì)繪制擋板 60
拓展：什么是區(qū)塊作用域 65
拓展：了解數(shù)字類型，警惕0.1 + 0.2不等于0.3 66
拓展：如何批量聲明變量、常量 67
本課小結(jié) 67
第5課 繪制小球 68
如何使用弧線繪制圓形 68
如何使用arc方法直接繪制圓形 70
本課小結(jié) 71
第6課 繪制分界線 71
分別通過(guò)lineTo和漸變色繪制
分界線 71
拓展：CSS 顏色值有哪些格式 73
使用函數(shù)繪制間隔效果 75
拓展：如何定義和使用函數(shù) 77
使用循環(huá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章 編寫一個(gè)簡(jiǎn)單的HTML5小游戲：完成交互功能 96
第7課 實(shí)現(xiàn)動(dòng)畫：讓小球動(dòng)起來(lái) 96
使用定時(shí)器實(shí)現(xiàn)動(dòng)畫 96
拓展：如何理解JS的異步執(zhí)行
機(jī)制 98
拓展：了解13種復(fù)合賦值運(yùn)算符 99
完成動(dòng)畫的關(guān)鍵：清屏 99
如何實(shí)現(xiàn)小球與屏幕的碰撞
檢測(cè) 103
拓展：復(fù)習(xí)使用if else if 語(yǔ)句 105
使用 requestAnimationFrame改進(jìn)動(dòng)畫流暢度 106
本課小結(jié) 108
第8課 監(jiān)聽用戶事件：讓擋板動(dòng)
起來(lái) 108
繪制左擋板 108
使右擋板可以上下自主移動(dòng) 110
改用函數(shù)繪制擋板 111
監(jiān)聽用戶輸入，使用鼠標(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
繪制重新開始游戲的文本提示 122
理解HTML5的事件模型，監(jiān)聽單擊
事件實(shí)現(xiàn)重啟功能 123
拓展：如何使用removeEvent---
Listener 127
本課小結(jié) 128
第10課 控制游戲音效：添加單擊
音效和背景音樂 128
如何使用
書單推薦
