0:00:00.877,0:00:06.001
我們又回到「繪製溫斯頓」這個程式了[br]但我加了一些文字

0:00:06.001,0:00:11.072
看，我想做的就是[br]放一個溫斯頓在每一個標籤下面

0:00:11.072,0:00:13.042
來顯示他不同的人生階段

0:00:13.042,0:00:15.167
現在他在螢幕上到處亂竄

0:00:15.167,0:00:20.356
這是因為我們把這函數裡的[br]faceX 和 faceY 設成隨機數

0:00:20.356,0:00:26.714
但是我們要做的是「嘿，這就是[br]我想你把這溫斯頓畫到的指定位置。」

0:00:26.714,0:00:30.336
我想每次召喚函數的時候[br]都能準確說明它的位置

0:00:30.336,0:00:33.728
就像我們設定 [br]ellipse() 和 rect() 的時候一樣

0:00:33.738,0:00:40.110
我想放溫斯頓在這裡、這裡、一個[br]溫斯頓在這裡、一個溫斯頓在這裡

0:00:40.110,0:00:44.443
我不想每次召喚函數的時候[br]溫斯頓隨機亂跑

0:00:44.642,0:00:49.172
要做到這一點[br]我們需要指定函數裡的參數

0:00:49.172,0:00:52.832
既要在函式定義裡設置參數[br]頂部這裡

0:00:52.832,0:00:57.302
也要在召喚函數裡設置參數[br]下面這裡

0:00:57.302,0:01:02.810
在 drawWinston() 裏[br]我們給它傳遞 faceX 和 faceY

0:01:02.810,0:01:10.108
讓該函數使用我們傳遞的值[br]而不是使用隨機產生的值

0:01:10.428,0:01:14.657
我們先想想要在下方的函數召喚[br]傳遞什麼數值

0:01:14.657,0:01:17.661
我們想要把溫斯頓放在每行文字下面

0:01:17.661,0:01:24.491
所以我們該想要每個溫斯頓的 x 跟 y [br]跟 text() 的座標非常相近

0:01:24.491,0:01:28.236
可能溫斯頓的 y[br]比文字的低10個像素左右

0:01:28.476,0:01:40.891
那第一個的就是 10, 30[br]然後 200, 230 ... 10, 230 ... 200, 230

0:01:40.891,0:01:44.863
跟文字座標是一樣的[br]只是每一個 y 我都加了10

0:01:44.863,0:01:48.135
因為我只想它低一點點

0:01:49.985,0:01:51.588
但溫斯頓沒有動[br]

0:01:51.588,0:01:57.117
這是因爲我們沒有告訴上面的函數[br]我們正傳遞它參數

0:01:57.117,0:01:59.927
所以它還在用這些隨機值

0:01:59.927,0:02:03.603
為了告訴這些函數「我們要給你這些資訊啦」

0:02:03.603,0:02:08.398
我們須在這些括弧裡輸入參數的名稱

0:02:08.398,0:02:14.816
我們將其命名為 faceX 和 face Y[br]用逗號隔開

0:02:14.816,0:02:21.094
這樣命名是因為在該函數裡面[br]我們已經用了這些名字

0:02:21.094,0:02:24.562
這樣我們就不用重寫其餘的程式碼了

0:02:25.112,0:02:28.813
但是仍然什麼都沒有發生[br]溫斯頓還是周圍亂跑

0:02:28.813,0:02:31.353
如果你看看我們頂部的函數

0:02:31.353,0:02:35.533
你會發現隨機值[br]還是覆蓋在 faceX 和 faceY 上

0:02:35.939,0:02:39.893
所以我們要做的[br]就是把這兩行都刪掉

0:02:39.893,0:02:46.237
噔噔！現在 faceX 和 faceY 傳到函數裡了

0:02:46.237,0:02:49.581
而且使用我們在下面召喚的值

0:02:49.581,0:02:53.911
但是如你所見，溫斯頓擺放的位置不是很正確

0:02:53.911,0:03:01.831
因為我忘記了文字是左對齊[br]臉則是居中

0:03:01.831,0:03:06.383
所以我只需要修改一下我的數字，對吧？

0:03:06.383,0:03:12.438
我要把 x 右移很多, y 下移一點[br]好了，小孩溫斯頓弄好了

0:03:12.438,0:03:14.588
繼續修改

0:03:14.588,0:03:22.518
現在只要修改一下函數的參數值即可[br]完全不用修改函數定義

0:03:22.518,0:03:26.438
它會使用我們傳給它的任何值

0:03:26.438,0:03:28.518
就像製作 ellipse() 和 rect() 時一樣

0:03:28.518,0:03:33.348
我已經差不多擺放好了[br]但我發現溫斯頓有點大

0:03:33.348,0:03:35.756
他正重疊在一起[br]他的大小不大對勁

0:03:35.756,0:03:39.169
由於我放了畫出溫斯頓的程式碼[br]在一個函數裏

0:03:39.169,0:03:42.374
我能夠一次改變全部的大小

0:03:42.374,0:03:45.509
只要修改這行畫橢圓的程式碼即可

0:03:45.509,0:03:50.626
讓我們將他改成 190 [br]耶，溫斯頓減肥了！和 190

0:03:50.626,0:03:55.424
現在他的大小合適了[br]然後，我還可以微調一下

0:03:55.424,0:03:59.391
這樣我就能把他放進去了是不是？

0:04:01.061,0:04:02.291
酷！

0:04:02.981,0:04:06.181
讓我們來回顧下這程式碼的功能[br]

0:04:06.181,0:04:09.251
它定義了一個叫做 drawWinston() 的函數

0:04:09.251,0:04:14.673
這函數有兩個值[br]標名為 faceX 和 faceY

0:04:14.673,0:04:19.949
實際上這兩值就是變數[br]我們可在函數裏任何地方使用它們

0:04:19.949,0:04:24.235
就像我們以前用於[br]宣告在頂部的變數一樣

0:04:25.125,0:04:29.113
宣告了之後便可隨時召喚這函數

0:04:29.113,0:04:34.051
我們可以傳遞不同的值[br]而函數便會使用這些新的值

0:04:34.735,0:04:37.258
你見證了這些函數的神奇效應

0:04:37.258,0:04:40.806
我們可以設計一些[br]我們覺得好用的程式碼來重複使用

0:04:40.806,0:04:42.740
但我們也可以利用參數來說[br]

0:04:42.740,0:04:46.460
「嘿，你可以在這程式碼裏[br]修飾一下這小東西。」

0:04:46.460,0:04:49.405
就像一個菜譜，你寫下總體指令

0:04:49.405,0:04:53.050
如果你突然發現你要餵飼的[br]是四個溫斯頓而不只是一個

0:04:53.050,0:04:56.248
你不用一切重新開始[br]你只需要調整一下指令原文

0:04:56.248,0:04:57.965
並把一切乘上4即可

0:04:57.965,0:05:03.285
現在你可以開始創造自己的[br]程式碼菜譜啦！真好吃！