微信小程序游戲開發(fā)快速入門到實(shí)戰(zhàn)

第1篇 基 礎(chǔ) 篇
第1章 微信小程序基礎(chǔ) 3
1.1 微信小程序介紹 3
1.1.1 什么是微信小程序 3
1.1.2 注冊開發(fā)者賬號 4
1.2 微信小程序開發(fā)工具的使用 5
1.2.1 獲取微信小程序AppID 5
1.2.2 安裝微信開發(fā)者工具 5
1.2.3 微信小程序發(fā)布流程 8
1.3 微信小程序框架文件 9
1.3.1 創(chuàng)建一個微信小程序項(xiàng)目 9
1.3.2 小程序的框架結(jié)構(gòu) 10
1.3.3 Page( )注冊頁面 16
1.4 微信小程序視圖 18
1.4.1 綁定數(shù)據(jù) 18
1.4.2 條件渲染 21
1.4.3 循環(huán)渲染 21
1.4.4 WXML模板 23
1.4.5 WXML視圖中的事件 23
1.4.6 WXSS 25
1.4.7 Flex布局 29
1.5 微信小程序頁面組件 33
1.5.1 視圖容器組件 34
1.5.2 基礎(chǔ)內(nèi)容組件 41
1.5.3 表單組件 45
1.5.4 導(dǎo)航組件 53
1.5.5 媒體組件 54
1.5.6 map地圖組件 59
1.5.7 canvas畫布組件 60
1.6 使用canvas畫圖 60
1.6.1 canvas組件定義語法 60
1.6.2 坐標(biāo)系統(tǒng) 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 保存和恢復(fù)繪圖狀態(tài) 71
1.6.10 圖形的變換 72
1.7 canvas動畫實(shí)例 73
1.7.1 動畫的概念及原理 73
1.7.2 游戲人物的跑步動畫 75
第2章 JavaScript語法基礎(chǔ) 77
2.1 JavaScript語言概述 77
2.1.1 JavaScript語言簡介 77
2.1.2 運(yùn)行JavaScript語言 77
2.2 基本語法 79
2.2.1 數(shù)據(jù)類型 79
2.2.2 常量和變量 80
2.2.3 注釋 81
2.2.4 運(yùn)算符和表達(dá)式 82
2.3 常用控制語句 86
2.3.1 選擇結(jié)構(gòu)語句 86
2.3.2 循環(huán)結(jié)構(gòu)語句 91
2.4 函數(shù) 94
2.4.1 創(chuàng)建自定義函數(shù) 95
2.4.2 調(diào)用函數(shù) 95
2.4.3 變量的作用域 96
2.4.4 函數(shù)的返回值 97
2.4.5 JavaScript內(nèi)置函數(shù) 97
第3章 JavaScript面向?qū)ο蟪绦蛟O(shè)計(jì) 99
3.1 面向?qū)ο蟪绦蛟O(shè)計(jì)思想簡介 99
3.1.1 什么是對象 99
3.1.2 面向?qū)ο缶幊?100
3.2 JavaScript類的定義和實(shí)例化 101
3.2.1 類的定義 101
3.2.2 創(chuàng)建對象（類的實(shí)例化） 101
3.2.3 通過對象直接初始化創(chuàng)建對象 102
3.3 JavaScript訪問和添加對象的屬性和方法 103
3.3.1 訪問對象的屬性和方法 103
3.3.2 向?qū)ο筇砑訉傩院头椒?105
3.4 繼承 106
3.4.1 原型實(shí)現(xiàn)繼承 107
3.4.2 構(gòu)造函數(shù)實(shí)現(xiàn)繼承 108
3.4.3 重新定義繼承的方法 108
3.5 JavaScript內(nèi)置對象 109
3.5.1 JavaScript的內(nèi)置對象框架 109
3.5.2 基類Object 110
3.5.3 Date類 110
3.5.4 String類 112
3.5.5 Array類 113
3.5.6 Math對象 120
3.5.7 Object對象 121
3.6 ES6簡介 123
3.6.1 變量相關(guān) 123
3.6.2 數(shù)據(jù)類型 123
3.6.3 對象 124
3.6.4 class類 125
3.6.5 模塊功能 127
3.6.6 箭頭函數(shù) 128
第2篇 開 發(fā) 篇
第4章 石頭剪刀布游戲 133
4.1 石頭剪刀布游戲功能介紹 133
4.2 程序設(shè)計(jì)的思路 133
4.2.1 控制剪刀、石頭、布的快速切換 133
4.2.2 用戶出拳 134
4.3 關(guān)鍵技術(shù) 134
4.3.1 事件的綁定 134
4.3.2 事件對象 136
4.3.3 事件對象數(shù)據(jù)參數(shù)的傳遞 137
4.4 程序設(shè)計(jì)的步驟 138
4.4.1 游戲布局 138
4.4.2 游戲腳本 141
第5章 井字棋游戲 144
5.1 井字棋游戲介紹 144
5.2 程序設(shè)計(jì)的思路 144
5.2.1 計(jì)算機(jī)智能下棋 144
5.2.2 井字棋輸贏判斷 145
5.3 關(guān)鍵技術(shù) 146
5.3.1 畫布canvas 146
5.3.2 響應(yīng)canvas組件事件 147
5.4 程序設(shè)計(jì)的步驟 148
5.4.1 選擇對戰(zhàn)模式頁面 148
5.4.2 人人對戰(zhàn)游戲頁面 150
5.4.3 人機(jī)對戰(zhàn)游戲頁面 153
第6章 貪吃蛇游戲 156
6.1 貪吃蛇游戲介紹 156
6.2 程序設(shè)計(jì)的思路 156
6.3 關(guān)鍵技術(shù) 157
6.3.1 獲取屏幕大小 157
6.3.2 小程序中this和that的使用 158
6.3.3 JavaScript數(shù)組操作 158
6.4 程序設(shè)計(jì)的步驟 159
6.4.1 index.wxml視圖文件 159
6.4.2 index.js文件 159
第7章 看圖猜成語游戲 165
7.1 看圖猜成語游戲介紹 165
7.2 程序設(shè)計(jì)的思路 165
7.2.1 游戲素材 165
7.2.2 設(shè)計(jì)思路 166
7.3 關(guān)鍵技術(shù) 166
7.3.1 動態(tài)控制按鈕組件的文字 166
7.3.2 通過條件渲染顯示不同結(jié)果 167
7.4 程序設(shè)計(jì)的步驟 168
7.4.1 guess.wxml文件 168
7.4.2 guess.js文件 169
第8章 智力測試游戲--button版 172
8.1 智力測試游戲介紹 172
8.2 程序設(shè)計(jì)的思路 172
8.3 程序設(shè)計(jì)的步驟 173
8.3.1 exam.wxml文件 173
8.3.2 exam.js頁面文件 174
8.3.3 exam.wxss樣式文件 177
8.3.4 簡單的結(jié)束頁面 178
8.4 拓展知識 179
8.4.1 讀取本地TXT文本 179
8.4.2 云文件存儲題目 180
第9章 智力測試游戲--radio版 182
9.1 智力測試游戲介紹 182
9.2 程序設(shè)計(jì)的思路 182
9.3 關(guān)鍵技術(shù) 183
9.3.1 radio組件 183
9.3.2 列表渲染 184
9.3.3 checkbox組件 187
9.4 程序設(shè)計(jì)的步驟 189
9.4.1 radio.wxml文件 189
9.4.2 radio.js文件 189
第10章 連連看游戲 193
10.1 連連看游戲介紹 193
10.2 程序設(shè)計(jì)的思路 194
10.3 程序設(shè)計(jì)的步驟 205
第11章 推箱子游戲 210
11.1 推箱子游戲介紹 210
11.2 程序設(shè)計(jì)的思路 211
11.3 程序設(shè)計(jì)的步驟 213
11.3.1 游戲視圖文件index.wxml 213
11.3.2 設(shè)計(jì)腳本index.js 214
第12章 五子棋游戲 225
12.1 五子棋游戲簡介 225
12.2 五子棋設(shè)計(jì)思想 226
12.3 關(guān)鍵技術(shù) 226
12.3.1 判斷輸贏的算法 226
12.3.2 圖形上色 228
12.3.3 調(diào)用模塊代碼 228
12.4 程序設(shè)計(jì)的步驟 229
12.4.1 游戲視圖index.wxml 229
12.4.2 設(shè)計(jì)腳本index.js 229
12.5 人機(jī)五子棋游戲的開發(fā) 231
第13章 黑白棋游戲 241
13.1 黑白棋游戲介紹 241
13.2 黑白棋游戲設(shè)計(jì)的思路 242
13.2.1 棋子和棋盤 242
13.2.2 翻轉(zhuǎn)對方的棋子 242
13.2.3 顯示執(zhí)棋方可落子位置 242
13.2.4 判斷勝負(fù)功能 243
13.3 黑白棋游戲設(shè)計(jì)的步驟 243
13.3.1 游戲頁面視圖WXML 243
13.3.2 設(shè)計(jì)腳本index.js 243
第14章 拼圖游戲 252
14.1 拼圖游戲介紹 252
14.2 程序設(shè)計(jì)的思路 253
14.3 數(shù)字拼圖游戲程序設(shè)計(jì)的步驟 254
14.3.1 游戲頁面 254
14.3.2 pintu2.js文件 255
14.4 人物拼圖游戲程序設(shè)計(jì)的步驟 257
14.5 圖片組件拓展案例——翻牌游戲 257
14.5.1 游戲頁面 258
14.5.2 查看排行榜頁面 263
第15章 Flappy Bird游戲 265
15.1 Flappy Bird游戲介紹 265
15.2 Flappy Bird游戲設(shè)計(jì)的思路 266
15.2.1 游戲素材 266
15.2.2 游戲?qū)崿F(xiàn)原理 266
15.2.3 游戲關(guān)鍵技術(shù)——碰撞檢測 266
15.3 Flappy Bird游戲設(shè)計(jì)的步驟 270
15.3.1 設(shè)計(jì)Bird類（小鳥類） 270
15.3.2 設(shè)計(jì)Obstacle類（管道障礙物類） 270
15.3.3 設(shè)計(jì)FlappyBird類 271
15.3.4 主程序 275
15.3.5 游戲頁面視圖文件 276
第16章 搖一搖變臉游戲 278
16.1 搖一搖變臉游戲介紹 278
16.2 程序設(shè)計(jì)的思路 278
16.3 關(guān)鍵技術(shù) 279
16.3.1 小程序的加速度計(jì)API 279
16.3.2 加速度計(jì)API的簡單應(yīng)用 280
16.4 程序設(shè)計(jì)的步驟 281
16.4.1 游戲頁面視圖WXML 281
16.4.2 設(shè)計(jì)腳本index.js 281
第17章 抽獎小游戲 283
17.1 抽獎小游戲介紹 283
17.2 程序設(shè)計(jì)的思路 283
17.3 關(guān)鍵技術(shù) 284
17.3.1 動畫實(shí)例 284
17.3.2 動畫描述 285
17.3.3 動畫導(dǎo)出 287
17.4 程序設(shè)計(jì)的步驟 288
17.4.1 游戲頁面視圖WXML 288
17.4.2 設(shè)計(jì)腳本index.js 289
第3篇 提 高 篇
第18章 原生微信小游戲開發(fā)基礎(chǔ) 295
18.1 微信小游戲的發(fā)展史 295
18.2 什么是微信小游戲 295
18.3 微信小游戲開發(fā)過程 296
18.4 微信小游戲目錄結(jié)構(gòu) 298
18.5 微信小游戲開發(fā)API 298
18.6 微信小游戲動畫和觸摸事件 300
18.7 微信小游戲全局對象 302
18.8 微信小游戲Adapter（適配器） 303
第19章 微信小游戲——接寶石箱子游戲 304
19.1 接寶石箱子游戲介紹 304
19.2 程序設(shè)計(jì)的步驟 304
19.3 游戲功能改進(jìn) 307
19.3.1 增加炸彈功能 307
19.3.2 增加游戲失敗功能 308
19.3.3 增加背景音樂功能 309
第20章 Cocos Creator游戲開發(fā)基礎(chǔ) 311
20.1 Cocos Creator介紹 311
20.1.1 Cocos Creator安裝和啟動 311
20.1.2 Cocos Creator發(fā)布到原生平臺 312
20.2 第一個Hello項(xiàng)目 314
20.2.1 打開場景 314
20.2.2 預(yù)覽場景 315
20.2.3 項(xiàng)目結(jié)構(gòu) 316
20.3 Cocos Creator編輯器的使用 317
20.3.1 資源管理器 317
20.3.2 場景編輯器 318
20.3.3 層級管理器 320
20.3.4 屬性檢查器 321
20.3.5 控件庫 323
20.4 Cocos Creator游戲開發(fā)入門 323
20.4.1 使用組件（控件） 324
20.4.2 事件響應(yīng) 334
20.4.3 坐標(biāo)系 336
20.4.4 節(jié)點(diǎn)屬性和方法 338
20.4.5 動作 340
第21章 Cocos Creator開發(fā)實(shí)戰(zhàn)——跳跳貓 342
21.1 跳跳貓小游戲介紹 342
21.2 創(chuàng)建項(xiàng)目 342
21.2.1 添加資源和游戲場景 343
21.2.2 創(chuàng)建游戲場景 344
21.2.3 添加游戲背景 345
21.2.4 添加游戲地面 345
21.3 添加游戲主角 346
21.3.1 添加游戲的主角小貓 346
21.3.2 編寫主角腳本 346
21.3.3 實(shí)現(xiàn)主角跳躍和移動 348
21.3.4 實(shí)現(xiàn)主角移動控制 349
21.4 添加星星 352
21.4.1 制作Prefab（預(yù)制）資源星星 352
21.4.2 游戲主邏輯腳本 353
21.4.3 隨機(jī)位置添加星星 355
21.4.4 主角碰觸收集星星 356
21.5 游戲邏輯實(shí)現(xiàn) 357
21.5.1 顯示游戲得分 357
21.5.2 添加得分邏輯 357
21.5.3 失敗判定和重新開始 359
21.5.4 加入音效 360
21.6 發(fā)布到微信小游戲平臺 362
第22章 Cocos Creator開發(fā)實(shí)戰(zhàn)——俄羅斯方塊 364
22.1 俄羅斯方塊小游戲介紹 364
22.2 創(chuàng)建項(xiàng)目 365
22.2.1 添加資源 365
22.2.2 創(chuàng)建游戲場景 365
22.3 項(xiàng)目核心代碼實(shí)現(xiàn) 367
22.3.1 游戲方塊的七種形狀 367
22.3.2 游戲邏輯實(shí)現(xiàn) 369
22.3.3 形狀的旋轉(zhuǎn)和移動 372
22.3.4 游戲方塊消除 376
22.3.5 游戲失敗邏輯 377
22.3.6 游戲暫停以及得分和音效 378
22.3.7 記錄歷史成績功能 380
參考文獻(xiàn) 381