WEBVTT

00:00:01.240 --> 00:00:04.563
到目前為止 我們已經看到
如何建立和存取陣列

00:00:04.563 --> 00:00:08.727
但是，就像變量一樣
關於陣列，有件非常酷的事

00:00:08.727 --> 00:00:12.730
那就是，我們可以在程式運行時
動態地改變迴圈

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

00:00:16.373 --> 00:00:20.676
畫面上的程式顯示霍伯拿著氣球
超可愛的

00:00:21.563 --> 00:00:25.407
它的工作原理是
我們有這個 xPositions 陣列

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

00:00:30.010 --> 00:00:32.331
再往下這裡 我們有個迴圈

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

00:00:35.538 --> 00:00:40.473
它從每個 “×” 點 繪製一條線到霍伯的手中


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

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

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

00:00:54.242 --> 00:00:58.577
只要添加一個數字到這個陣列 
對不對？像是輸入300

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

00:01:03.117 --> 00:01:10.740
但是 我們想讓不會寫程式的用戶 
有寫程式的能力 來增加新的氣球

00:01:10.740 --> 00:01:13.337
所以 我們想把程式給一個用戶

00:01:13.337 --> 00:01:17.409
然後說：「你可以在任何你想要的地方點擊
然後就會顯示氣球。」

00:01:17.919 --> 00:01:20.674
那不是很酷嗎？
我覺得挺酷的

00:01:20.674 --> 00:01:23.257
那麼...我們應該怎麼做呢？

00:01:23.927 --> 00:01:26.325
我們希望程式可隨時間變化 對不對？

00:01:26.325 --> 00:01:30.605
用戶點擊哪裡 氣球就會出現在哪裡

00:01:30.605 --> 00:01:35.097
因此 讓我們把所有東西移動至一個
繪製函數 draw function 裡面

00:01:35.097 --> 00:01:38.434
程式就可以隨時改變

00:01:38.434 --> 00:01:43.071
把這個移到這裡 這裡縮進一點
好，完成

00:01:43.101 --> 00:01:48.358
現在 我們要檢查 
用戶正在按下滑鼠嗎？

NOTE Paragraph

00:01:48.358 --> 00:01:50.858
我們可以用 「if 」做檢查

00:01:50.858 --> 00:01:56.751
如果用戶按下滑鼠 那麼 我們就要做一些事
那要做什麼呢？

00:01:56.751 --> 00:02:01.686
如果滑鼠被按下
那麼我們添加一個數字到陣列

00:02:01.686 --> 00:02:04.521
讓我們再做一次這兩個元素

00:02:04.521 --> 00:02:08.263
如果要在這個陣列添加一個數字

00:02:08.263 --> 00:02:10.958
讓我來告訴你一個實用方法

00:02:10.958 --> 00:02:18.530
我們可以說 
xPositions[2] = mouseX;

00:02:18.534 --> 00:02:21.580
讓你看看這方法的效果

00:02:22.160 --> 00:02:26.510
點擊後，我有一個氣球了！
為什麼會有這結果呢？

00:02:26.520 --> 00:02:31.582
就是 xPositions [2] 
它說 找到這個陣列

00:02:31.582 --> 00:02:34.539
並找到陣列在 [2] 地方的元素

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

00:02:38.214 --> 00:02:41.903
你看看 沒有第三個元素 對不對？
那裏沒有東西

00:02:41.903 --> 00:02:45.629
所以說找出 [2] 
然後把 mouseX 放在那裡

00:02:45.629 --> 00:02:47.849
因為那裡什麼也沒有


00:02:47.849 --> 00:02:51.292
所以它從沒有任何東西 到變成 mouseX

00:02:51.292 --> 00:02:54.664
所以現在陣列有三個元素

00:02:54.664 --> 00:03:00.496
這下面的「 for」 迴圈處理它
然後畫出第三個氣球

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

00:03:03.942 --> 00:03:05.911
你看我每點擊一次

00:03:06.461 --> 00:03:11.420
無論我點擊哪裡 它就繪製第三個氣球


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


00:03:18.783 --> 00:03:23.140
我們不斷用當前的 mouseX 覆蓋那點

00:03:23.140 --> 00:03:26.090
因此我們只能有三個氣球


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

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

00:03:34.644 --> 00:03:37.237
酷雖酷 但我們真正想要的是

00:03:37.237 --> 00:03:40.344
我們想要讓用戶作出好多個氣球 
對不對？

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

00:03:43.537 --> 00:03:46.312
這意味著我們需要不斷地遞增

00:03:46.312 --> 00:03:50.687
存進去的陣列元素的索引數值

00:03:50.687 --> 00:03:53.511
我們不希望索引數值每次都是2 
我們希望它是2 然後3

00:03:53.511 --> 00:03:56.340
然後4 然後5 然後6 等等

00:03:56.340 --> 00:03:59.194
我們可以用一個 
計數器變量 counter variable 來達成

00:03:59.194 --> 00:04:00.941
我們說 
newInd = 2;

00:04:00.941 --> 00:04:02.746
2 就是它在開始時的數值

00:04:02.746 --> 00:04:05.711
然後在這裡我們會說 newInd 而不是2

00:04:05.711 --> 00:04:09.563
然後 我們真正想做的是
newInd ++

00:04:09.563 --> 00:04:11.777
這樣每次 newInd 會增加1

00:04:11.777 --> 00:04:15.299
因此 它開始為2
進而成為3 然後變成4

00:04:15.299 --> 00:04:18.430
每次滑鼠按下時 它會增加變大 
讓我們試試看

00:04:18.430 --> 00:04:22.227
噹噹！好多氣球啊 氣球派對 嗚~！

00:04:22.227 --> 00:04:24.760
這很酷 對不對？

00:04:24.760 --> 00:04:27.368
但是 這不是最佳做法

00:04:27.368 --> 00:04:29.951
因為實際上 把陣列元素變多

00:04:29.951 --> 00:04:32.232
其實很費工

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

00:04:35.398 --> 00:04:38.935
讓我直接刪除剛剛做的東西 


00:04:38.935 --> 00:04:42.936
我們不需要那個 也不需要那個 
把那些都刪掉

00:04:42.936 --> 00:04:48.303
好 我們的方法是 
xPositions.push

00:04:48.303 --> 00:04:50.979
然後括號mouseX

00:04:50.979 --> 00:04:52.840
在這裡所做的是

00:04:52.840 --> 00:04:56.324
我們以一種方式呼叫 xPositions 陣列

00:04:56.324 --> 00:04:58.365
我們在陣列上呼叫一個命令

00:04:58.365 --> 00:05:02.467
命令陣列：
「推動 mouseX 這個新的值...

00:05:02.467 --> 00:05:05.487
把它推到你陣列的尾端。」

00:05:05.487 --> 00:05:09.200
每當這個被呼叫時 每次滑鼠被按下時

00:05:09.200 --> 00:05:12.542
它會看看 mouseX 
並將其推入陣列的尾端

00:05:12.542 --> 00:05:15.329
因此 陣列就會變得越來越大

00:05:15.329 --> 00:05:17.024
因此 讓我們重新測試

00:05:17.514 --> 00:05:19.392
噹噹 行了！

00:05:19.392 --> 00:05:22.972
而且使用更少的編碼 對嗎？

00:05:22.982 --> 00:05:25.257
所以 如果你想要添加東西到陣列


00:05:25.257 --> 00:05:27.273
多數時間 你會想要使用 push


00:05:27.273 --> 00:05:31.890
它非常簡潔 因為可以讓陣列越變越大

00:05:31.905 --> 00:05:35.434
就像你有一個動畫 
當用戶做東西時 你可以做更多的東西

00:05:36.424 --> 00:05:41.643
現在 你已經見到
90％可能會使用陣列的目的和方式

00:05:41.647 --> 00:05:43.852
但陣列還可以做更多事

00:05:43.852 --> 00:05:47.166
如果您有任何疑問 請在討論時發問

00:05:47.166 --> 00:05:49.716
首先必須徹底了解這些基礎知識