1
00:00:01,240 --> 00:00:04,563
到目前為止 我們已經看到
如何建立和存取陣列

2
00:00:04,563 --> 00:00:08,727
但是，就像變量一樣
關於陣列，有件非常酷的事

3
00:00:08,727 --> 00:00:12,730
那就是，我們可以在程式運行時
動態地改變迴圈

4
00:00:13,206 --> 00:00:15,673
好，讓我為你解釋我剛才所說的

5
00:00:16,373 --> 00:00:20,676
畫面上的程式顯示霍伯拿著氣球
超可愛的

6
00:00:21,563 --> 00:00:25,407
它的工作原理是
我們有這個 xPositions 陣列

7
00:00:25,407 --> 00:00:30,010
裡面有兩個數字 可指定在哪裡放氣球

8
00:00:30,010 --> 00:00:32,331
再往下這裡 我們有個迴圈

9
00:00:32,331 --> 00:00:35,538
而這迴圈會處理陣列中每個元素

10
00:00:35,538 --> 00:00:40,473
它從每個 “×” 點 繪製一條線到霍伯的手中


11
00:00:40,473 --> 00:00:47,431
然後在 “×” 為30X40像素的地方畫一個橢圓
就是我們的氣球

12
00:00:47,431 --> 00:00:51,418
好 現在我們看看它是如何運作的

13
00:00:51,418 --> 00:00:54,242
我們知道 如果想要有另一個氣球

14
00:00:54,242 --> 00:00:58,577
只要添加一個數字到這個陣列 
對不對？像是輸入300

15
00:00:58,577 --> 00:01:03,117
帥！ 快樂的霍伯現在有三個氣球了

16
00:01:03,117 --> 00:01:10,740
但是 我們想讓不會寫程式的用戶 
有寫程式的能力 來增加新的氣球

17
00:01:10,740 --> 00:01:13,337
所以 我們想把程式給一個用戶

18
00:01:13,337 --> 00:01:17,409
然後說：「你可以在任何你想要的地方點擊
然後就會顯示氣球。」

19
00:01:17,919 --> 00:01:20,674
那不是很酷嗎？
我覺得挺酷的

20
00:01:20,674 --> 00:01:23,257
那麼...我們應該怎麼做呢？

21
00:01:23,927 --> 00:01:26,325
我們希望程式可隨時間變化 對不對？

22
00:01:26,325 --> 00:01:30,605
用戶點擊哪裡 氣球就會出現在哪裡

23
00:01:30,605 --> 00:01:35,097
因此 讓我們把所有東西移動至一個
繪製函數 draw function 裡面

24
00:01:35,097 --> 00:01:38,434
程式就可以隨時改變

25
00:01:38,434 --> 00:01:43,071
把這個移到這裡 這裡縮進一點
好，完成

26
00:01:43,101 --> 00:01:48,358
現在 我們要檢查 
用戶正在按下滑鼠嗎？

27
00:01:48,358 --> 00:01:50,858
我們可以用 「if 」做檢查

28
00:01:50,858 --> 00:01:56,751
如果用戶按下滑鼠 那麼 我們就要做一些事
那要做什麼呢？

29
00:01:56,751 --> 00:02:01,686
如果滑鼠被按下
那麼我們添加一個數字到陣列

30
00:02:01,686 --> 00:02:04,521
讓我們再做一次這兩個元素

31
00:02:04,521 --> 00:02:08,263
如果要在這個陣列添加一個數字

32
00:02:08,263 --> 00:02:10,958
讓我來告訴你一個實用方法

33
00:02:10,958 --> 00:02:18,530
我們可以說 
xPositions[2] = mouseX;

34
00:02:18,534 --> 00:02:21,580
讓你看看這方法的效果

35
00:02:22,160 --> 00:02:26,510
點擊後，我有一個氣球了！
為什麼會有這結果呢？

36
00:02:26,520 --> 00:02:31,582
就是 xPositions [2] 
它說 找到這個陣列

37
00:02:31,582 --> 00:02:34,539
並找到陣列在 [2] 地方的元素

38
00:02:34,539 --> 00:02:38,214
記得 [2] 是第三個元素
因為陣列是從零開始的

39
00:02:38,214 --> 00:02:41,903
你看看 沒有第三個元素 對不對？
那裏沒有東西

40
00:02:41,903 --> 00:02:45,629
所以說找出 [2] 
然後把 mouseX 放在那裡

41
00:02:45,629 --> 00:02:47,849
因為那裡什麼也沒有


42
00:02:47,849 --> 00:02:51,292
所以它從沒有任何東西 到變成 mouseX

43
00:02:51,292 --> 00:02:54,664
所以現在陣列有三個元素

44
00:02:54,664 --> 00:03:00,496
這下面的「 for」 迴圈處理它
然後畫出第三個氣球

45
00:03:00,504 --> 00:03:03,942
所以真的很酷 
讓我多點擊一些 看看它有什麼作用

46
00:03:03,942 --> 00:03:05,911
你看我每點擊一次

47
00:03:06,461 --> 00:03:11,420
無論我點擊哪裡 它就繪製第三個氣球


48
00:03:11,420 --> 00:03:18,783
這是因為我們不斷覆蓋 [2] 
索引指標為2的元素


49
00:03:18,783 --> 00:03:23,140
我們不斷用當前的 mouseX 覆蓋那點

50
00:03:23,140 --> 00:03:26,090
因此我們只能有三個氣球


51
00:03:26,090 --> 00:03:29,563
因為我們在 [0] 點有了這個氣球 
在 [1] 點有了這個氣球

52
00:03:29,563 --> 00:03:34,644
我們正在不斷地改變 [2] 的元素 懂嗎？

53
00:03:34,644 --> 00:03:37,237
酷雖酷 但我們真正想要的是

54
00:03:37,237 --> 00:03:40,344
我們想要讓用戶作出好多個氣球 
對不對？

55
00:03:40,344 --> 00:03:43,537
讓用戶每次點擊的時候 就出現新氣球

56
00:03:43,537 --> 00:03:46,312
這意味著我們需要不斷地遞增

57
00:03:46,312 --> 00:03:50,687
存進去的陣列元素的索引數值

58
00:03:50,687 --> 00:03:53,511
我們不希望索引數值每次都是2 
我們希望它是2 然後3

59
00:03:53,511 --> 00:03:56,340
然後4 然後5 然後6 等等

60
00:03:56,340 --> 00:03:59,194
我們可以用一個 
計數器變量 counter variable 來達成

61
00:03:59,194 --> 00:04:00,941
我們說 
newInd = 2;

62
00:04:00,941 --> 00:04:02,746
2 就是它在開始時的數值

63
00:04:02,746 --> 00:04:05,711
然後在這裡我們會說 newInd 而不是2

64
00:04:05,711 --> 00:04:09,563
然後 我們真正想做的是
newInd ++

65
00:04:09,563 --> 00:04:11,777
這樣每次 newInd 會增加1

66
00:04:11,777 --> 00:04:15,299
因此 它開始為2
進而成為3 然後變成4

67
00:04:15,299 --> 00:04:18,430
每次滑鼠按下時 它會增加變大 
讓我們試試看

68
00:04:18,430 --> 00:04:22,227
噹噹！好多氣球啊 氣球派對 嗚~！

69
00:04:22,227 --> 00:04:24,760
這很酷 對不對？

70
00:04:24,760 --> 00:04:27,368
但是 這不是最佳做法

71
00:04:27,368 --> 00:04:29,951
因為實際上 把陣列元素變多

72
00:04:29,951 --> 00:04:32,232
其實很費工

73
00:04:32,232 --> 00:04:35,398
因此 有個更簡單的方法能做出上述效果

74
00:04:35,398 --> 00:04:38,935
讓我直接刪除剛剛做的東西 


75
00:04:38,935 --> 00:04:42,936
我們不需要那個 也不需要那個 
把那些都刪掉

76
00:04:42,936 --> 00:04:48,303
好 我們的方法是 
xPositions.push

77
00:04:48,303 --> 00:04:50,979
然後括號mouseX

78
00:04:50,979 --> 00:04:52,840
在這裡所做的是

79
00:04:52,840 --> 00:04:56,324
我們以一種方式呼叫 xPositions 陣列

80
00:04:56,324 --> 00:04:58,365
我們在陣列上呼叫一個命令

81
00:04:58,365 --> 00:05:02,467
命令陣列：
「推動 mouseX 這個新的值...

82
00:05:02,467 --> 00:05:05,487
把它推到你陣列的尾端。」

83
00:05:05,487 --> 00:05:09,200
每當這個被呼叫時 每次滑鼠被按下時

84
00:05:09,200 --> 00:05:12,542
它會看看 mouseX 
並將其推入陣列的尾端

85
00:05:12,542 --> 00:05:15,329
因此 陣列就會變得越來越大

86
00:05:15,329 --> 00:05:17,024
因此 讓我們重新測試

87
00:05:17,514 --> 00:05:19,392
噹噹 行了！

88
00:05:19,392 --> 00:05:22,972
而且使用更少的編碼 對嗎？

89
00:05:22,982 --> 00:05:25,257
所以 如果你想要添加東西到陣列


90
00:05:25,257 --> 00:05:27,273
多數時間 你會想要使用 push


91
00:05:27,273 --> 00:05:31,890
它非常簡潔 因為可以讓陣列越變越大

92
00:05:31,905 --> 00:05:35,434
就像你有一個動畫 
當用戶做東西時 你可以做更多的東西

93
00:05:36,424 --> 00:05:41,643
現在 你已經見到
90％可能會使用陣列的目的和方式

94
00:05:41,647 --> 00:05:43,852
但陣列還可以做更多事

95
00:05:43,852 --> 00:05:47,166
如果您有任何疑問 請在討論時發問

96
00:05:47,166 --> 00:05:49,716
首先必須徹底了解這些基礎知識