到目前為止 我們已經看到
如何建立和存取陣列

但是，就像變量一樣
關於陣列，有件非常酷的事

那就是，我們可以在程式運行時
動態地改變迴圈

好，讓我為你解釋我剛才所說的

畫面上的程式顯示霍伯拿著氣球
超可愛的

它的工作原理是
我們有這個 xPositions 陣列

裡面有兩個數字 可指定在哪裡放氣球

再往下這裡 我們有個迴圈

而這迴圈會處理陣列中每個元素

它從每個 “×” 點 繪製一條線到霍伯的手中

然後在 “×” 為30X40像素的地方畫一個橢圓
就是我們的氣球

好 現在我們看看它是如何運作的

我們知道 如果想要有另一個氣球

只要添加一個數字到這個陣列 
對不對？像是輸入300

帥！ 快樂的霍伯現在有三個氣球了

但是 我們想讓不會寫程式的用戶 
有寫程式的能力 來增加新的氣球

所以 我們想把程式給一個用戶

然後說：「你可以在任何你想要的地方點擊
然後就會顯示氣球。」

那不是很酷嗎？
我覺得挺酷的

那麼...我們應該怎麼做呢？

我們希望程式可隨時間變化 對不對？

用戶點擊哪裡 氣球就會出現在哪裡

因此 讓我們把所有東西移動至一個
繪製函數 draw function 裡面

程式就可以隨時改變

把這個移到這裡 這裡縮進一點
好，完成

現在 我們要檢查 
用戶正在按下滑鼠嗎？

我們可以用 「if 」做檢查

如果用戶按下滑鼠 那麼 我們就要做一些事
那要做什麼呢？

如果滑鼠被按下
那麼我們添加一個數字到陣列

讓我們再做一次這兩個元素

如果要在這個陣列添加一個數字

讓我來告訴你一個實用方法

我們可以說 
xPositions[2] = mouseX;

讓你看看這方法的效果

點擊後，我有一個氣球了！
為什麼會有這結果呢？

就是 xPositions [2] 
它說 找到這個陣列

並找到陣列在 [2] 地方的元素

記得 [2] 是第三個元素
因為陣列是從零開始的

你看看 沒有第三個元素 對不對？
那裏沒有東西

所以說找出 [2] 
然後把 mouseX 放在那裡

因為那裡什麼也沒有

所以它從沒有任何東西 到變成 mouseX

所以現在陣列有三個元素

這下面的「 for」 迴圈處理它
然後畫出第三個氣球

所以真的很酷 
讓我多點擊一些 看看它有什麼作用

你看我每點擊一次

無論我點擊哪裡 它就繪製第三個氣球

這是因為我們不斷覆蓋 [2] 
索引指標為2的元素

我們不斷用當前的 mouseX 覆蓋那點

因此我們只能有三個氣球

因為我們在 [0] 點有了這個氣球 
在 [1] 點有了這個氣球

我們正在不斷地改變 [2] 的元素 懂嗎？

酷雖酷 但我們真正想要的是

我們想要讓用戶作出好多個氣球 
對不對？

讓用戶每次點擊的時候 就出現新氣球

這意味著我們需要不斷地遞增

存進去的陣列元素的索引數值

我們不希望索引數值每次都是2 
我們希望它是2 然後3

然後4 然後5 然後6 等等

我們可以用一個 
計數器變量 counter variable 來達成

我們說 
newInd = 2;

2 就是它在開始時的數值

然後在這裡我們會說 newInd 而不是2

然後 我們真正想做的是
newInd ++

這樣每次 newInd 會增加1

因此 它開始為2
進而成為3 然後變成4

每次滑鼠按下時 它會增加變大 
讓我們試試看

噹噹！好多氣球啊 氣球派對 嗚~！

這很酷 對不對？

但是 這不是最佳做法

因為實際上 把陣列元素變多

其實很費工

因此 有個更簡單的方法能做出上述效果

讓我直接刪除剛剛做的東西

我們不需要那個 也不需要那個 
把那些都刪掉

好 我們的方法是 
xPositions.push

然後括號mouseX

在這裡所做的是

我們以一種方式呼叫 xPositions 陣列

我們在陣列上呼叫一個命令

命令陣列：
「推動 mouseX 這個新的值...

把它推到你陣列的尾端。」

每當這個被呼叫時 每次滑鼠被按下時

它會看看 mouseX 
並將其推入陣列的尾端

因此 陣列就會變得越來越大

因此 讓我們重新測試

噹噹 行了！

而且使用更少的編碼 對嗎？

所以 如果你想要添加東西到陣列

多數時間 你會想要使用 push

它非常簡潔 因為可以讓陣列越變越大

就像你有一個動畫 
當用戶做東西時 你可以做更多的東西

現在 你已經見到
90％可能會使用陣列的目的和方式

但陣列還可以做更多事

如果您有任何疑問 請在討論時發問

首先必須徹底了解這些基礎知識