鑽石舞台

第1篇 基 礎 篇

第1章 微信小程序基礎 3

1.1 微信小程序介紹 3

1.1.1什麼是微信小程序 3

1.1.2註冊開發者賬號 4

1.2 微信小程序開發工具的使用 5

1.2.1獲取微信小程序AppID 5

1.2.2安裝微信開發者工具 5

1.2.3微信小程序發布流程 8

1.3 微信小程序框架文件 9

1.3.1創建一個微信小程序項目 9

1.3.2小程序的框架結構10

1.3.3Page( )註冊頁面 16

1.4 微信小程序視圖 18

1.4.1綁定數據 18

1.4.2條件渲染 21

1.4.3循環渲染 21

1.4.4WXML模板 23

1.4.5WXML視圖中的事件23

1.4.6WXSS 25

1.4.7Flex布局 29

1.5 微信小程序頁面組件 33

1.5.1視圖容器組件 34

1.5.2基礎內容組件 41

1.5.3表單組件 45

1.5.4導航組件 53

1.5.5媒體組件 54

1.5.6map地圖組件 59

1.5.7canvas畫布組件 60

1.6 使用canvas畫圖 60

1.6.1canvas組件定義語法 60

1.6.2坐標系統 61

1.6.3顏色的表示方法 61

1.6.4繪製直線 62

1.6.5繪製矩形 65

1.6.6繪製圓弧 66

1.6.7繪製圖像 67

1.6.8輸出文字 68

1.6.9保存和恢復繪圖狀態 71

1.6.10圖形的變換 72

1.7canvas動畫實例 73

1.7.1動畫的概念及原理 73

1.7.2遊戲人物的跑步動畫 75

第2章 JavaScript語法基礎 77

2.1JavaScript語言概述77

2.1.1JavaScript語言簡介 77

2.1.2運行JavaScript語言 77

2.2 基本語法 79

2.2.1數據類型 79

2.2.2常量和變量 80

2.2.3注釋 81

2.2.4運算符和表達式 82

2.3 常用控制語句 86

2.3.1選擇結構語句 86

2.3.2循環結構語句 91

2.4 函數 94

2.4.1創建自定義函數 95

2.4.2調用函數 95

2.4.3變量的作用域 96

2.4.4函數的返回值 97

2.4.5JavaScript內置函數 97

第3章 JavaScript面向對象程序設計 99

3.1 面向對象程序設計思想簡介 99

3.1.1什麼是對象 99

3.1.2面向對象編程 100

3.2JavaScript類的定義和實例化 101

3.2.1類的定義 101

3.2.2創建對象（類的實例化） 101

3.2.3通過對象直接初始化創建對象 102

3.3JavaScript訪問和添加對象的屬性和方法 103

3.3.1訪問對象的屬性和方法 103

3.3.2向對象添加屬性和方法 105

3.4 繼承 106

3.4.1原型實現繼承 107

3.4.2構造函數實現繼承 108

3.4.3重新定義繼承的方法 108

3.5JavaScript內置對象 109

3.5.1JavaScript的內置對象框架 109

3.5.2基類Object 110

3.5.3Date類 110

3.5.4String類 112

3.5.5Array類 113

3.5.6Math對象 120

3.5.7Object對象 121

3.6ES6簡介 123

3.6.1變量相關 123

3.6.2數據類型 123

3.6.3對象 124

3.6.4class類 125

3.6.5模塊功能 127

3.6.6箭頭函數 128

第2篇 開 發 篇

第4章 石頭剪刀布遊戲 133

4.1 石頭剪刀布遊戲功能介紹 133

4.2 程序設計的思路 133

4.2.1控制剪刀、石頭、布的快速切換 133

4.2.2用戶出拳 134

4.3 關鍵技術 134

4.3.1事件的綁定 134

4.3.2事件對象 136

4.3.3事件對象數據參數的傳遞 137

4.4 程序設計的步驟 138

4.4.1遊戲布局 138

4.4.2遊戲腳本 141

第5章 井字棋遊戲 144

5.1 井字棋遊戲介紹 144

5.2 程序設計的思路 144

5.2.1計算機智能下棋 144

5.2.2井字棋輸贏判斷 145

5.3 關鍵技術 146

5.3.1畫布canvas 146

5.3.2響應canvas組件事件 147

5.4 程序設計的步驟 148

5.4.1選擇對戰模式頁面 148

5.4.2人人對戰遊戲頁面 150

5.4.3人機對戰遊戲頁面 153

第6章 貪吃蛇遊戲 156

6.1 貪吃蛇遊戲介紹 156

6.2 程序設計的思路 156

6.3 關鍵技術 157

6.3.1獲取屏幕大小 157

6.3.2小程序中this和that的使用 158

6.3.3JavaScript數組操作 158

6.4 程序設計的步驟 159

6.4.1index.wxml視圖文件 159

6.4.2index.js文件 159

第7章 看圖猜成語遊戲 165

7.1 看圖猜成語遊戲介紹 165

7.2 程序設計的思路 165

7.2.1遊戲素材 165

7.2.2設計思路 166

7.3 關鍵技術 166

7.3.1動態控制按鈕組件的文字 166

7.3.2通過條件渲染顯示不同結果 167

7.4 程序設計的步驟 168

7.4.1guess.wxml文件 168

7.4.2guess.js文件 169

第8章 智力測試遊戲--button版 172

8.1 智力測試遊戲介紹 172

8.2 程序設計的思路 172

8.3 程序設計的步驟 173

8.3.1exam.wxml文件 173

8.3.2exam.js頁面文件 174

8.3.3exam.wxss樣式文件 177

8.3.4簡單的結束頁面 178

8.4 拓展知識 179

8.4.1讀取本地TXT文本 179

8.4.2雲文件存儲題目 180

第9章 智力測試遊戲--radio版 182

9.1 智力測試遊戲介紹 182

9.2 程序設計的思路 182

9.3 關鍵技術 183

9.3.1radio組件 183

9.3.2列表渲染 184

9.3.3checkbox組件 187

9.4 程序設計的步驟 189

9.4.1radio.wxml文件 189

9.4.2radio.js文件 189

第10章 連連看遊戲 193

10.1連連看遊戲介紹 193

10.2程序設計的思路 194

10.3程序設計的步驟 205

第11章 推箱子遊戲 210

11.1推箱子遊戲介紹 210

11.2程序設計的思路 211

11.3程序設計的步驟 213

11.3.1遊戲視圖文件index.wxml 213

11.3.2設計腳本index.js 214

第12章 五子棋遊戲 225

12.1五子棋遊戲簡介 225

12.2五子棋設計思想 226

12.3關鍵技術 226

12.3.1判斷輸贏的算法 226

12.3.2圖形上色 228

12.3.3調用模塊代碼 228

12.4程序設計的步驟 229

12.4.1遊戲視圖index.wxml 229

12.4.2設計腳本index.js 229

12.5人機五子棋遊戲的開發 231

第13章 黑白棋遊戲 241

13.1黑白棋遊戲介紹 241

13.2黑白棋遊戲設計的思路 242

13.2.1棋子和棋盤 242

13.2.2翻轉對方的棋子 242

13.2.3顯示執棋方可落子位置 242

13.2.4判斷勝負功能 243

13.3黑白棋遊戲設計的步驟 243

13.3.1遊戲頁面視圖WXML 243

13.3.2設計腳本index.js 243

第14章 拼圖遊戲 252

14.1拼圖遊戲介紹 252

14.2程序設計的思路 253

14.3數字拼圖遊戲程序設計的步驟 254

14.3.1遊戲頁面 254

14.3.2pintu2.js文件 255

14.4人物拼圖遊戲程序設計的步驟 257

14.5圖片組件拓展案例——翻牌遊戲 257

14.5.1遊戲頁面 258

14.5.2查看排行榜頁面 263

第15章 Flappy Bird遊戲 265

15.1Flappy Bird遊戲介紹 265

15.2Flappy Bird遊戲設計的思路 266

15.2.1遊戲素材 266

15.2.2遊戲實現原理 266

15.2.3遊戲關鍵技術——碰撞檢測 266

15.3Flappy Bird遊戲設計的步驟 270

15.3.1設計Bird類（小鳥類） 270

15.3.2設計Obstacle類（管道障礙物類） 270

15.3.3設計FlappyBird類 271

15.3.4主程序 275

15.3.5遊戲頁面視圖文件 276

第16章 搖一搖變臉遊戲 278

16.1搖一搖變臉遊戲介紹 278

16.2程序設計的思路 278

16.3關鍵技術 279

16.3.1小程序的加速度計API 279

16.3.2加速度計API的簡單應用 280

16.4程序設計的步驟 281

16.4.1遊戲頁面視圖WXML 281

16.4.2設計腳本index.js 281

第17章 抽獎小遊戲 283

17.1抽獎小遊戲介紹 283

17.2程序設計的思路 283

17.3關鍵技術 284

17.3.1動畫實例 284

17.3.2動畫描述 285

17.3.3動畫導出 287

17.4程序設計的步驟 288

17.4.1遊戲頁面視圖WXML 288

17.4.2設計腳本index.js 289

第3篇 提 高 篇

第18章 原生微信小遊戲開發基礎 295

18.1微信小遊戲的發展史 295

18.2什麼是微信小遊戲 295

18.3微信小遊戲開發過程 296

18.4微信小遊戲目錄結構 298

18.5微信小遊戲開發API 298

18.6微信小遊戲動畫和觸摸事件 300

18.7微信小遊戲全局對象 302

18.8微信小遊戲Adapter（適配器） 303

第19章 微信小遊戲——接寶石箱子遊戲 304

19.1接寶石箱子遊戲介紹 304

19.2程序設計的步驟 304

19.3遊戲功能改進 307

19.3.1增加炸彈功能 307

19.3.2增加遊戲失敗功能 308

19.3.3增加背景音樂功能 309

第20章 Cocos Creator遊戲開發基礎311

20.1Cocos Creator介紹 311

20.1.1Cocos Creator安裝和啟動 311

20.1.2Cocos Creator發布到原生平台 312

20.2第一個Hello項目 314

20.2.1打開場景 314

20.2.2預覽場景 315

20.2.3項目結構 316

20.3Cocos Creator編輯器的使用 317

20.3.1資源管理器 317

20.3.2場景編輯器 318

20.3.3層級管理器 320

20.3.4屬性檢查器 321

20.3.5控件庫 323

20.4Cocos Creator遊戲開發入門 323

20.4.1使用組件（控件） 324

20.4.2事件響應 334

20.4.3坐標系 336

20.4.4節點屬性和方法 338

20.4.5動作 340

第21章 Cocos Creator開發實戰——跳跳貓 342

21.1跳跳貓小遊戲介紹 342

21.2創建項目 342

21.2.1添加資源和遊戲場景 343

21.2.2創建遊戲場景 344

21.2.3添加遊戲背景 345

21.2.4添加遊戲地面 345

21.3添加遊戲主角 346

21.3.1添加遊戲的主角小貓 346

21.3.2編寫主角腳本 346

21.3.3實現主角跳躍和移動 348

21.3.4實現主角移動控制 349

21.4添加星星 352

21.4.1製作Prefab（預製）資源星星 352

21.4.2遊戲主邏輯腳本 353

21.4.3隨機位置添加星星 355

21.4.4主角碰觸收集星星 356

21.5遊戲邏輯實現 357

21.5.1顯示遊戲得分 357

21.5.2添加得分邏輯 357

21.5.3失敗判定和重新開始 359

21.5.4加入音效 360

21.6發布到微信小遊戲平台 362

第22章 Cocos Creator開發實戰——俄羅斯方塊 364

22.1俄羅斯方塊小遊戲介紹 364

22.2創建項目 365

22.2.1添加資源 365

22.2.2創建遊戲場景 365

22.3項目核心代碼實現 367

22.3.1遊戲方塊的七種形狀 367

22.3.2遊戲邏輯實現 369

22.3.3形狀的旋轉和移動 372

22.3.4遊戲方塊消除 376

22.3.5遊戲失敗邏輯 377

22.3.6遊戲暫停以及得分和音效 378

22.3.7記錄歷史成績功能 380