1
00:00:00,877 --> 00:00:06,001
我們又回到「繪製溫斯頓」這個程式了
但我加了一些文字

2
00:00:06,001 --> 00:00:11,072
看，我想做的就是
放一個溫斯頓在每一個標籤下面

3
00:00:11,072 --> 00:00:13,042
來顯示他不同的人生階段

4
00:00:13,042 --> 00:00:15,167
現在他在螢幕上到處亂竄

5
00:00:15,167 --> 00:00:20,356
這是因為我們把這函數裡的
faceX 和 faceY 設成隨機數

6
00:00:20,356 --> 00:00:26,714
但是我們要做的是「嘿，這就是
我想你把這溫斯頓畫到的指定位置。」

7
00:00:26,714 --> 00:00:30,336
我想每次召喚函數的時候
都能準確說明它的位置

8
00:00:30,336 --> 00:00:33,728
就像我們設定 
ellipse() 和 rect() 的時候一樣

9
00:00:33,738 --> 00:00:40,110
我想放溫斯頓在這裡、這裡、一個
溫斯頓在這裡、一個溫斯頓在這裡

10
00:00:40,110 --> 00:00:44,443
我不想每次召喚函數的時候
溫斯頓隨機亂跑

11
00:00:44,642 --> 00:00:49,172
要做到這一點
我們需要指定函數裡的參數

12
00:00:49,172 --> 00:00:52,832
既要在函式定義裡設置參數
頂部這裡

13
00:00:52,832 --> 00:00:57,302
也要在召喚函數裡設置參數
下面這裡

14
00:00:57,302 --> 00:01:02,810
在 drawWinston() 裏
我們給它傳遞 faceX 和 faceY

15
00:01:02,810 --> 00:01:10,108
讓該函數使用我們傳遞的值
而不是使用隨機產生的值

16
00:01:10,428 --> 00:01:14,657
我們先想想要在下方的函數召喚
傳遞什麼數值

17
00:01:14,657 --> 00:01:17,661
我們想要把溫斯頓放在每行文字下面

18
00:01:17,661 --> 00:01:24,491
所以我們該想要每個溫斯頓的 x 跟 y 
跟 text() 的座標非常相近

19
00:01:24,491 --> 00:01:28,236
可能溫斯頓的 y
比文字的低10個像素左右

20
00:01:28,476 --> 00:01:40,891
那第一個的就是 10, 30
然後 200, 230 ... 10, 230 ... 200, 230

21
00:01:40,891 --> 00:01:44,863
跟文字座標是一樣的
只是每一個 y 我都加了10

22
00:01:44,863 --> 00:01:48,135
因為我只想它低一點點

23
00:01:49,985 --> 00:01:51,588
但溫斯頓沒有動


24
00:01:51,588 --> 00:01:57,117
這是因爲我們沒有告訴上面的函數
我們正傳遞它參數

25
00:01:57,117 --> 00:01:59,927
所以它還在用這些隨機值

26
00:01:59,927 --> 00:02:03,603
為了告訴這些函數「我們要給你這些資訊啦」

27
00:02:03,603 --> 00:02:08,398
我們須在這些括弧裡輸入參數的名稱

28
00:02:08,398 --> 00:02:14,816
我們將其命名為 faceX 和 face Y
用逗號隔開

29
00:02:14,816 --> 00:02:21,094
這樣命名是因為在該函數裡面
我們已經用了這些名字

30
00:02:21,094 --> 00:02:24,562
這樣我們就不用重寫其餘的程式碼了

31
00:02:25,112 --> 00:02:28,813
但是仍然什麼都沒有發生
溫斯頓還是周圍亂跑

32
00:02:28,813 --> 00:02:31,353
如果你看看我們頂部的函數

33
00:02:31,353 --> 00:02:35,533
你會發現隨機值
還是覆蓋在 faceX 和 faceY 上

34
00:02:35,939 --> 00:02:39,893
所以我們要做的
就是把這兩行都刪掉

35
00:02:39,893 --> 00:02:46,237
噔噔！現在 faceX 和 faceY 傳到函數裡了

36
00:02:46,237 --> 00:02:49,581
而且使用我們在下面召喚的值

37
00:02:49,581 --> 00:02:53,911
但是如你所見，溫斯頓擺放的位置不是很正確

38
00:02:53,911 --> 00:03:01,831
因為我忘記了文字是左對齊
臉則是居中

39
00:03:01,831 --> 00:03:06,383
所以我只需要修改一下我的數字，對吧？

40
00:03:06,383 --> 00:03:12,438
我要把 x 右移很多, y 下移一點
好了，小孩溫斯頓弄好了

41
00:03:12,438 --> 00:03:14,588
繼續修改

42
00:03:14,588 --> 00:03:22,518
現在只要修改一下函數的參數值即可
完全不用修改函數定義

43
00:03:22,518 --> 00:03:26,438
它會使用我們傳給它的任何值

44
00:03:26,438 --> 00:03:28,518
就像製作 ellipse() 和 rect() 時一樣

45
00:03:28,518 --> 00:03:33,348
我已經差不多擺放好了
但我發現溫斯頓有點大

46
00:03:33,348 --> 00:03:35,756
他正重疊在一起
他的大小不大對勁

47
00:03:35,756 --> 00:03:39,169
由於我放了畫出溫斯頓的程式碼
在一個函數裏

48
00:03:39,169 --> 00:03:42,374
我能夠一次改變全部的大小

49
00:03:42,374 --> 00:03:45,509
只要修改這行畫橢圓的程式碼即可

50
00:03:45,509 --> 00:03:50,626
讓我們將他改成 190 
耶，溫斯頓減肥了！和 190

51
00:03:50,626 --> 00:03:55,424
現在他的大小合適了
然後，我還可以微調一下

52
00:03:55,424 --> 00:03:59,391
這樣我就能把他放進去了是不是？

53
00:04:01,061 --> 00:04:02,291
酷！

54
00:04:02,981 --> 00:04:06,181
讓我們來回顧下這程式碼的功能


55
00:04:06,181 --> 00:04:09,251
它定義了一個叫做 drawWinston() 的函數

56
00:04:09,251 --> 00:04:14,673
這函數有兩個值
標名為 faceX 和 faceY

57
00:04:14,673 --> 00:04:19,949
實際上這兩值就是變數
我們可在函數裏任何地方使用它們

58
00:04:19,949 --> 00:04:24,235
就像我們以前用於
宣告在頂部的變數一樣

59
00:04:25,125 --> 00:04:29,113
宣告了之後便可隨時召喚這函數

60
00:04:29,113 --> 00:04:34,051
我們可以傳遞不同的值
而函數便會使用這些新的值

61
00:04:34,735 --> 00:04:37,258
你見證了這些函數的神奇效應

62
00:04:37,258 --> 00:04:40,806
我們可以設計一些
我們覺得好用的程式碼來重複使用

63
00:04:40,806 --> 00:04:42,740
但我們也可以利用參數來說


64
00:04:42,740 --> 00:04:46,460
「嘿，你可以在這程式碼裏
修飾一下這小東西。」

65
00:04:46,460 --> 00:04:49,405
就像一個菜譜，你寫下總體指令

66
00:04:49,405 --> 00:04:53,050
如果你突然發現你要餵飼的
是四個溫斯頓而不只是一個

67
00:04:53,050 --> 00:04:56,248
你不用一切重新開始
你只需要調整一下指令原文

68
00:04:56,248 --> 00:04:57,965
並把一切乘上4即可

69
00:04:57,965 --> 00:05:03,285
現在你可以開始創造自己的
程式碼菜譜啦！真好吃！