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

第1篇 基 礎(chǔ) 篇
第1章 微信小程序基礎(chǔ) 3
1.1 微信小程序介紹 3
1.1.1 什么是微信小程序 3
1.1.2 注冊(cè)開(kāi)發(fā)者賬號(hào) 4
1.2 微信小程序開(kāi)發(fā)工具的使用 5
1.2.1 獲取微信小程序AppID 5
1.2.2 安裝微信開(kāi)發(fā)者工具 5
1.2.3 微信小程序發(fā)布流程 8
1.3 微信小程序框架文件 9
1.3.1 創(chuàng)建一個(gè)微信小程序項(xiàng)目 9
1.3.2 小程序的框架結(jié)構(gòu) 10
1.3.3 Page( )注冊(cè)頁(yè)面 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 微信小程序頁(yè)面組件 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畫(huà)布組件 60
1.6 使用canvas畫(huà)圖 60
1.6.1 canvas組件定義語(yǔ)法 60
1.6.2 坐標(biāo)系統(tǒng) 61
1.6.3 顏色的表示方法 61
1.6.4 繪制直線(xiàn) 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動(dòng)畫(huà)實(shí)例 73
1.7.1 動(dòng)畫(huà)的概念及原理 73
1.7.2 游戲人物的跑步動(dòng)畫(huà) 75
第2章 JavaScript語(yǔ)法基礎(chǔ) 77
2.1 JavaScript語(yǔ)言概述 77
2.1.1 JavaScript語(yǔ)言簡(jiǎn)介 77
2.1.2 運(yùn)行JavaScript語(yǔ)言 77
2.2 基本語(yǔ)法 79
2.2.1 數(shù)據(jù)類(lèi)型 79
2.2.2 常量和變量 80
2.2.3 注釋 81
2.2.4 運(yùn)算符和表達(dá)式 82
2.3 常用控制語(yǔ)句 86
2.3.1 選擇結(jié)構(gòu)語(yǔ)句 86
2.3.2 循環(huán)結(jié)構(gòu)語(yǔ)句 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ì)思想簡(jiǎn)介 99
3.1.1 什么是對(duì)象 99
3.1.2 面向?qū)ο缶幊?100
3.2 JavaScript類(lèi)的定義和實(shí)例化 101
3.2.1 類(lèi)的定義 101
3.2.2 創(chuàng)建對(duì)象（類(lèi)的實(shí)例化） 101
3.2.3 通過(guò)對(duì)象直接初始化創(chuàng)建對(duì)象 102
3.3 JavaScript訪(fǎng)問(wèn)和添加對(duì)象的屬性和方法 103
3.3.1 訪(fǎng)問(wèn)對(duì)象的屬性和方法 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)置對(duì)象 109
3.5.1 JavaScript的內(nèi)置對(duì)象框架 109
3.5.2 基類(lèi)Object 110
3.5.3 Date類(lèi) 110
3.5.4 String類(lèi) 112
3.5.5 Array類(lèi) 113
3.5.6 Math對(duì)象 120
3.5.7 Object對(duì)象 121
3.6 ES6簡(jiǎn)介 123
3.6.1 變量相關(guān) 123
3.6.2 數(shù)據(jù)類(lèi)型 123
3.6.3 對(duì)象 124
3.6.4 class類(lèi) 125
3.6.5 模塊功能 127
3.6.6 箭頭函數(shù) 128
第2篇 開(kāi) 發(fā) 篇
第4章 石頭剪刀布游戲 133
4.1 石頭剪刀布游戲功能介紹 133
4.2 程序設(shè)計(jì)的思路 133
4.2.1 控制剪刀、石頭、布的快速切換 133
4.2.2 用戶(hù)出拳 134
4.3 關(guān)鍵技術(shù) 134
4.3.1 事件的綁定 134
4.3.2 事件對(duì)象 136
4.3.3 事件對(duì)象數(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 畫(huà)布canvas 146
5.3.2 響應(yīng)canvas組件事件 147
5.4 程序設(shè)計(jì)的步驟 148
5.4.1 選擇對(duì)戰(zhàn)模式頁(yè)面 148
5.4.2 人人對(duì)戰(zhàn)游戲頁(yè)面 150
5.4.3 人機(jī)對(duì)戰(zhàn)游戲頁(yè)面 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章 看圖猜成語(yǔ)游戲 165
7.1 看圖猜成語(yǔ)游戲介紹 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 動(dòng)態(tài)控制按鈕組件的文字 166
7.3.2 通過(guò)條件渲染顯示不同結(jié)果 167
7.4 程序設(shè)計(jì)的步驟 168
7.4.1 guess.wxml文件 168
7.4.2 guess.js文件 169
第8章 智力測(cè)試游戲--button版 172
8.1 智力測(cè)試游戲介紹 172
8.2 程序設(shè)計(jì)的思路 172
8.3 程序設(shè)計(jì)的步驟 173
8.3.1 exam.wxml文件 173
8.3.2 exam.js頁(yè)面文件 174
8.3.3 exam.wxss樣式文件 177
8.3.4 簡(jiǎn)單的結(jié)束頁(yè)面 178
8.4 拓展知識(shí) 179
8.4.1 讀取本地TXT文本 179
8.4.2 云文件存儲(chǔ)題目 180
第9章 智力測(cè)試游戲--radio版 182
9.1 智力測(cè)試游戲介紹 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 五子棋游戲簡(jiǎn)介 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ī)五子棋游戲的開(kāi)發(fā) 231
第13章 黑白棋游戲 241
13.1 黑白棋游戲介紹 241
13.2 黑白棋游戲設(shè)計(jì)的思路 242
13.2.1 棋子和棋盤(pán) 242
13.2.2 翻轉(zhuǎn)對(duì)方的棋子 242
13.2.3 顯示執(zhí)棋方可落子位置 242
13.2.4 判斷勝負(fù)功能 243
13.3 黑白棋游戲設(shè)計(jì)的步驟 243
13.3.1 游戲頁(yè)面視圖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 游戲頁(yè)面 254
14.3.2 pintu2.js文件 255
14.4 人物拼圖游戲程序設(shè)計(jì)的步驟 257
14.5 圖片組件拓展案例——翻牌游戲 257
14.5.1 游戲頁(yè)面 258
14.5.2 查看排行榜頁(yè)面 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ù)——碰撞檢測(cè) 266
15.3 Flappy Bird游戲設(shè)計(jì)的步驟 270
15.3.1 設(shè)計(jì)Bird類(lèi)（小鳥(niǎo)類(lèi)） 270
15.3.2 設(shè)計(jì)Obstacle類(lèi)（管道障礙物類(lèi)） 270
15.3.3 設(shè)計(jì)FlappyBird類(lèi) 271
15.3.4 主程序 275
15.3.5 游戲頁(yè)面視圖文件 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的簡(jiǎn)單應(yīng)用 280
16.4 程序設(shè)計(jì)的步驟 281
16.4.1 游戲頁(yè)面視圖WXML 281
16.4.2 設(shè)計(jì)腳本index.js 281
第17章 抽獎(jiǎng)小游戲 283
17.1 抽獎(jiǎng)小游戲介紹 283
17.2 程序設(shè)計(jì)的思路 283
17.3 關(guān)鍵技術(shù) 284
17.3.1 動(dòng)畫(huà)實(shí)例 284
17.3.2 動(dòng)畫(huà)描述 285
17.3.3 動(dòng)畫(huà)導(dǎo)出 287
17.4 程序設(shè)計(jì)的步驟 288
17.4.1 游戲頁(yè)面視圖WXML 288
17.4.2 設(shè)計(jì)腳本index.js 289
第3篇 提 高 篇
第18章 原生微信小游戲開(kāi)發(fā)基礎(chǔ) 295
18.1 微信小游戲的發(fā)展史 295
18.2 什么是微信小游戲 295
18.3 微信小游戲開(kāi)發(fā)過(guò)程 296
18.4 微信小游戲目錄結(jié)構(gòu) 298
18.5 微信小游戲開(kāi)發(fā)API 298
18.6 微信小游戲動(dòng)畫(huà)和觸摸事件 300
18.7 微信小游戲全局對(duì)象 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 增加背景音樂(lè)功能 309
第20章 Cocos Creator游戲開(kāi)發(fā)基礎(chǔ) 311
20.1 Cocos Creator介紹 311
20.1.1 Cocos Creator安裝和啟動(dòng) 311
20.1.2 Cocos Creator發(fā)布到原生平臺(tái) 312
20.2 第一個(gè)Hello項(xiàng)目 314
20.2.1 打開(kāi)場(chǎng)景 314
20.2.2 預(yù)覽場(chǎng)景 315
20.2.3 項(xiàng)目結(jié)構(gòu) 316
20.3 Cocos Creator編輯器的使用 317
20.3.1 資源管理器 317
20.3.2 場(chǎng)景編輯器 318
20.3.3 層級(jí)管理器 320
20.3.4 屬性檢查器 321
20.3.5 控件庫(kù) 323
20.4 Cocos Creator游戲開(kāi)發(fā)入門(mén) 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 動(dòng)作 340
第21章 Cocos Creator開(kāi)發(fā)實(shí)戰(zhàn)——跳跳貓 342
21.1 跳跳貓小游戲介紹 342
21.2 創(chuàng)建項(xiàng)目 342
21.2.1 添加資源和游戲場(chǎng)景 343
21.2.2 創(chuàng)建游戲場(chǎng)景 344
21.2.3 添加游戲背景 345
21.2.4 添加游戲地面 345
21.3 添加游戲主角 346
21.3.1 添加游戲的主角小貓 346
21.3.2 編寫(xiě)主角腳本 346
21.3.3 實(shí)現(xiàn)主角跳躍和移動(dòng) 348
21.3.4 實(shí)現(xiàn)主角移動(dòng)控制 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 失敗判定和重新開(kāi)始 359
21.5.4 加入音效 360
21.6 發(fā)布到微信小游戲平臺(tái) 362
第22章 Cocos Creator開(kāi)發(fā)實(shí)戰(zhàn)——俄羅斯方塊 364
22.1 俄羅斯方塊小游戲介紹 364
22.2 創(chuàng)建項(xiàng)目 365
22.2.1 添加資源 365
22.2.2 創(chuàng)建游戲場(chǎ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)和移動(dòng) 372
22.3.4 游戲方塊消除 376
22.3.5 游戲失敗邏輯 377
22.3.6 游戲暫停以及得分和音效 378
22.3.7 記錄歷史成績(jī)功能 380
參考文獻(xiàn) 381