0:00:01.240,0:00:04.563
到目前為止 我們已經看到[br]如何建立和存取陣列

0:00:04.563,0:00:08.727
但是，就像變量一樣[br]關於陣列，有件非常酷的事

0:00:08.727,0:00:12.730
那就是，我們可以在程式運行時[br]動態地改變迴圈

0:00:13.206,0:00:15.673
好，讓我為你解釋我剛才所說的

0:00:16.373,0:00:20.676
畫面上的程式顯示霍伯拿著氣球[br]超可愛的

0:00:21.563,0:00:25.407
它的工作原理是[br]我們有這個 xPositions 陣列

0:00:25.407,0:00:30.010
裡面有兩個數字 可指定在哪裡放氣球

0:00:30.010,0:00:32.331
再往下這裡 我們有個迴圈

0:00:32.331,0:00:35.538
而這迴圈會處理陣列中每個元素

0:00:35.538,0:00:40.473
它從每個 “×” 點 繪製一條線到霍伯的手中[br]

0:00:40.473,0:00:47.431
然後在 “×” 為30X40像素的地方畫一個橢圓[br]就是我們的氣球

0:00:47.431,0:00:51.418
好 現在我們看看它是如何運作的

0:00:51.418,0:00:54.242
我們知道 如果想要有另一個氣球

0:00:54.242,0:00:58.577
只要添加一個數字到這個陣列 [br]對不對？像是輸入300

0:00:58.577,0:01:03.117
帥！ 快樂的霍伯現在有三個氣球了

0:01:03.117,0:01:10.740
但是 我們想讓不會寫程式的用戶 [br]有寫程式的能力 來增加新的氣球

0:01:10.740,0:01:13.337
所以 我們想把程式給一個用戶

0:01:13.337,0:01:17.409
然後說：「你可以在任何你想要的地方點擊[br]然後就會顯示氣球。」

0:01:17.919,0:01:20.674
那不是很酷嗎？[br]我覺得挺酷的

0:01:20.674,0:01:23.257
那麼...我們應該怎麼做呢？

0:01:23.927,0:01:26.325
我們希望程式可隨時間變化 對不對？

0:01:26.325,0:01:30.605
用戶點擊哪裡 氣球就會出現在哪裡

0:01:30.605,0:01:35.097
因此 讓我們把所有東西移動至一個[br]繪製函數 draw function 裡面

0:01:35.097,0:01:38.434
程式就可以隨時改變

0:01:38.434,0:01:43.071
把這個移到這裡 這裡縮進一點[br]好，完成

0:01:43.101,0:01:48.358
現在 我們要檢查 [br]用戶正在按下滑鼠嗎？

0:01:48.358,0:01:50.858
我們可以用 「if 」做檢查

0:01:50.858,0:01:56.751
如果用戶按下滑鼠 那麼 我們就要做一些事[br]那要做什麼呢？

0:01:56.751,0:02:01.686
如果滑鼠被按下[br]那麼我們添加一個數字到陣列

0:02:01.686,0:02:04.521
讓我們再做一次這兩個元素

0:02:04.521,0:02:08.263
如果要在這個陣列添加一個數字

0:02:08.263,0:02:10.958
讓我來告訴你一個實用方法

0:02:10.958,0:02:18.530
我們可以說 [br]xPositions[2] = mouseX;

0:02:18.534,0:02:21.580
讓你看看這方法的效果

0:02:22.160,0:02:26.510
點擊後，我有一個氣球了！[br]為什麼會有這結果呢？

0:02:26.520,0:02:31.582
就是 xPositions [2] [br]它說 找到這個陣列

0:02:31.582,0:02:34.539
並找到陣列在 [2] 地方的元素

0:02:34.539,0:02:38.214
記得 [2] 是第三個元素[br]因為陣列是從零開始的

0:02:38.214,0:02:41.903
你看看 沒有第三個元素 對不對？[br]那裏沒有東西

0:02:41.903,0:02:45.629
所以說找出 [2] [br]然後把 mouseX 放在那裡

0:02:45.629,0:02:47.849
因為那裡什麼也沒有[br]

0:02:47.849,0:02:51.292
所以它從沒有任何東西 到變成 mouseX

0:02:51.292,0:02:54.664
所以現在陣列有三個元素

0:02:54.664,0:03:00.496
這下面的「 for」 迴圈處理它[br]然後畫出第三個氣球

0:03:00.504,0:03:03.942
所以真的很酷 [br]讓我多點擊一些 看看它有什麼作用

0:03:03.942,0:03:05.911
你看我每點擊一次

0:03:06.461,0:03:11.420
無論我點擊哪裡 它就繪製第三個氣球[br]

0:03:11.420,0:03:18.783
這是因為我們不斷覆蓋 [2] [br]索引指標為2的元素[br]

0:03:18.783,0:03:23.140
我們不斷用當前的 mouseX 覆蓋那點

0:03:23.140,0:03:26.090
因此我們只能有三個氣球[br]

0:03:26.090,0:03:29.563
因為我們在 [0] 點有了這個氣球 [br]在 [1] 點有了這個氣球

0:03:29.563,0:03:34.644
我們正在不斷地改變 [2] 的元素 懂嗎？

0:03:34.644,0:03:37.237
酷雖酷 但我們真正想要的是

0:03:37.237,0:03:40.344
我們想要讓用戶作出好多個氣球 [br]對不對？

0:03:40.344,0:03:43.537
讓用戶每次點擊的時候 就出現新氣球

0:03:43.537,0:03:46.312
這意味著我們需要不斷地遞增

0:03:46.312,0:03:50.687
存進去的陣列元素的索引數值

0:03:50.687,0:03:53.511
我們不希望索引數值每次都是2 [br]我們希望它是2 然後3

0:03:53.511,0:03:56.340
然後4 然後5 然後6 等等

0:03:56.340,0:03:59.194
我們可以用一個 [br]計數器變量 counter variable 來達成

0:03:59.194,0:04:00.941
我們說 [br]newInd = 2;

0:04:00.941,0:04:02.746
2 就是它在開始時的數值

0:04:02.746,0:04:05.711
然後在這裡我們會說 newInd 而不是2

0:04:05.711,0:04:09.563
然後 我們真正想做的是[br]newInd ++

0:04:09.563,0:04:11.777
這樣每次 newInd 會增加1

0:04:11.777,0:04:15.299
因此 它開始為2[br]進而成為3 然後變成4

0:04:15.299,0:04:18.430
每次滑鼠按下時 它會增加變大 [br]讓我們試試看

0:04:18.430,0:04:22.227
噹噹！好多氣球啊 氣球派對 嗚~！

0:04:22.227,0:04:24.760
這很酷 對不對？

0:04:24.760,0:04:27.368
但是 這不是最佳做法

0:04:27.368,0:04:29.951
因為實際上 把陣列元素變多

0:04:29.951,0:04:32.232
其實很費工

0:04:32.232,0:04:35.398
因此 有個更簡單的方法能做出上述效果

0:04:35.398,0:04:38.935
讓我直接刪除剛剛做的東西 [br]

0:04:38.935,0:04:42.936
我們不需要那個 也不需要那個 [br]把那些都刪掉

0:04:42.936,0:04:48.303
好 我們的方法是 [br]xPositions.push

0:04:48.303,0:04:50.979
然後括號mouseX

0:04:50.979,0:04:52.840
在這裡所做的是

0:04:52.840,0:04:56.324
我們以一種方式呼叫 xPositions 陣列

0:04:56.324,0:04:58.365
我們在陣列上呼叫一個命令

0:04:58.365,0:05:02.467
命令陣列：[br]「推動 mouseX 這個新的值...

0:05:02.467,0:05:05.487
把它推到你陣列的尾端。」

0:05:05.487,0:05:09.200
每當這個被呼叫時 每次滑鼠被按下時

0:05:09.200,0:05:12.542
它會看看 mouseX [br]並將其推入陣列的尾端

0:05:12.542,0:05:15.329
因此 陣列就會變得越來越大

0:05:15.329,0:05:17.024
因此 讓我們重新測試

0:05:17.514,0:05:19.392
噹噹 行了！

0:05:19.392,0:05:22.972
而且使用更少的編碼 對嗎？

0:05:22.982,0:05:25.257
所以 如果你想要添加東西到陣列[br]

0:05:25.257,0:05:27.273
多數時間 你會想要使用 push[br]

0:05:27.273,0:05:31.890
它非常簡潔 因為可以讓陣列越變越大

0:05:31.905,0:05:35.434
就像你有一個動畫 [br]當用戶做東西時 你可以做更多的東西

0:05:36.424,0:05:41.643
現在 你已經見到[br]90％可能會使用陣列的目的和方式

0:05:41.647,0:05:43.852
但陣列還可以做更多事

0:05:43.852,0:05:47.166
如果您有任何疑問 請在討論時發問

0:05:47.166,0:05:49.716
首先必須徹底了解這些基礎知識