“微信小游戲開發(fā)”系列圖書包含本書和《微信小游戲開發(fā):后端篇》,融匯了騰訊云TVP李藝多年來的一線項(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)地介紹前端所有的知識點(diǎn)和技能,包括但不限于計(jì)算機(jī)網(wǎng)絡(luò)通信基礎(chǔ)、JS編程語言、面向?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平臺或3366平臺上學(xué)習(xí)與借鑒開發(fā)技巧。
第三篇(第6~11章),龍戰(zhàn)于野,共16課。本篇是本書的實(shí)戰(zhàn)重點(diǎn),主要介紹如何對小游戲項(xiàng)目進(jìn)行重構(gòu),因?yàn)楹玫能浖皇鞘孪仍O(shè)計(jì)出來的,而是通過不斷重構(gòu)慢慢迭代出來的。第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
注冊開發(fā)者賬號 4
安裝微信開發(fā)者工具 5
創(chuàng)建第一個(gè)小游戲項(xiàng)目 6
項(xiàng)目測試:本地預(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è)簡單的HTML5
小游戲:打造游戲界面 34
第3課 繪制游戲標(biāo)題 35
安裝與配置Visual Studio Code 35
學(xué)習(xí)使用HTML標(biāo)記,開始繪制游戲標(biāo)題 36
拓展:如何使用const 關(guān)鍵字 39
拓展:如何給代碼添加注釋 40
如何改變字體、字號和顏色 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
如何使用顏色漸變對象和圖像填充材質(zhì)繪制擋板 60
拓展:什么是區(qū)塊作用域 65
拓展:了解數(shù)字類型,警惕0.1 + 0.2不等于0.3 66
拓展:如何批量聲明變量、常量 67
本課小結(jié) 67
第5課 繪制小球 68
如何使用弧線繪制圓形 68
如何使用arc方法直接繪制圓形 70
本課小結(jié) 71
第6課 繪制分界線 71
分別通過lineTo和漸變色繪制
分界線 71
拓展:CSS 顏色值有哪些格式 73
使用函數(shù)繪制間隔效果 75
拓展:如何定義和使用函數(shù) 77
使用循環(huán)繪制分界線 81
拓展:使用比較運(yùn)算符、if控制語句
和算術(shù)運(yùn)算符 84
拓展:JS的5種循環(huán)控制語句 86
將函數(shù)當(dāng)作變量使用 87
拓展:如何理解JS的作用域鏈與
閉包 90
拓展:如何使用集合對象 Map 與
Set 92
本課小結(jié) 95
第3章 編寫一個(gè)簡單的HTML5小游戲:完成交互功能 96
第7課 實(shí)現(xiàn)動(dòng)畫:讓小球動(dòng)起來 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)小球與屏幕的碰撞
檢測 103
拓展:復(fù)習(xí)使用if else if 語句 105
使用 requestAnimationFrame改進(jìn)動(dòng)畫流暢度 106
本課小結(jié) 108
第8課 監(jiān)聽用戶事件:讓擋板動(dòng)
起來 108
繪制左擋板 108
使右擋板可以上下自主移動(dòng) 110
改用函數(shù)繪制擋板 111
監(jiān)聽用戶輸入,使用鼠標(biāo)(或觸摸)
事件操控左擋板 112
實(shí)現(xiàn)擋板與球的碰撞檢測 114
拓展:如何使用邏輯運(yùn)算符 115
統(tǒng)計(jì)分?jǐn)?shù) 116
拓展:復(fù)習(xí)批量聲明變量,可以將
逗號放在前面 117
在游戲結(jié)束時(shí)添加反饋 118
拓展:加號與模板字符串 120
本課小結(jié) 121
第9課 實(shí)現(xiàn)游戲的重啟功能 122
繪制重新開始游戲的文本提示 122
理解HTML5的事件模型,監(jiān)聽單擊
事件實(shí)現(xiàn)重啟功能 123
拓展:如何使用removeEvent---
Listener 127
本課小結(jié) 128
第10課 控制游戲音效:添加單擊
音效和背景音樂 128
如何使用