修改陣列（視頻版）
-
0:01 - 0:05到目前為止 我們已經看到
如何建立和存取陣列 -
0:05 - 0:09但是，就像變量一樣
關於陣列，有件非常酷的事 -
0:09 - 0:13那就是，我們可以在程式運行時
動態地改變迴圈 -
0:13 - 0:16好，讓我為你解釋我剛才所說的
-
0:16 - 0:21畫面上的程式顯示霍伯拿著氣球
超可愛的 -
0:22 - 0:25它的工作原理是
我們有這個 xPositions 陣列 -
0:25 - 0:30裡面有兩個數字 可指定在哪裡放氣球
-
0:30 - 0:32再往下這裡 我們有個迴圈
-
0:32 - 0:36而這迴圈會處理陣列中每個元素
-
0:36 - 0:40它從每個 “×” 點 繪製一條線到霍伯的手中
-
0:40 - 0:47然後在 “×” 為30X40像素的地方畫一個橢圓
就是我們的氣球 -
0:47 - 0:51好 現在我們看看它是如何運作的
-
0:51 - 0:54我們知道 如果想要有另一個氣球
-
0:54 - 0:59只要添加一個數字到這個陣列
對不對？像是輸入300 -
0:59 - 1:03帥！ 快樂的霍伯現在有三個氣球了
-
1:03 - 1:11但是 我們想讓不會寫程式的用戶
有寫程式的能力 來增加新的氣球 -
1:11 - 1:13所以 我們想把程式給一個用戶
-
1:13 - 1:17然後說：「你可以在任何你想要的地方點擊
然後就會顯示氣球。」 -
1:18 - 1:21那不是很酷嗎？
我覺得挺酷的 -
1:21 - 1:23那麼...我們應該怎麼做呢？
-
1:24 - 1:26我們希望程式可隨時間變化 對不對？
-
1:26 - 1:31用戶點擊哪裡 氣球就會出現在哪裡
-
1:31 - 1:35因此 讓我們把所有東西移動至一個
繪製函數 draw function 裡面 -
1:35 - 1:38程式就可以隨時改變
-
1:38 - 1:43把這個移到這裡 這裡縮進一點
好，完成 -
1:43 - 1:48現在 我們要檢查
用戶正在按下滑鼠嗎？ -
1:48 - 1:51我們可以用 「if 」做檢查
-
1:51 - 1:57如果用戶按下滑鼠 那麼 我們就要做一些事
那要做什麼呢？ -
1:57 - 2:02如果滑鼠被按下
那麼我們添加一個數字到陣列 -
2:02 - 2:05讓我們再做一次這兩個元素
-
2:05 - 2:08如果要在這個陣列添加一個數字
-
2:08 - 2:11讓我來告訴你一個實用方法
-
2:11 - 2:19我們可以說
xPositions[2] = mouseX; -
2:19 - 2:22讓你看看這方法的效果
-
2:22 - 2:27點擊後，我有一個氣球了！
為什麼會有這結果呢？ -
2:27 - 2:32就是 xPositions [2]
它說 找到這個陣列 -
2:32 - 2:35並找到陣列在 [2] 地方的元素
-
2:35 - 2:38記得 [2] 是第三個元素
因為陣列是從零開始的 -
2:38 - 2:42你看看 沒有第三個元素 對不對？
那裏沒有東西 -
2:42 - 2:46所以說找出 [2]
然後把 mouseX 放在那裡 -
2:46 - 2:48因為那裡什麼也沒有
-
2:48 - 2:51所以它從沒有任何東西 到變成 mouseX
-
2:51 - 2:55所以現在陣列有三個元素
-
2:55 - 3:00這下面的「 for」 迴圈處理它
然後畫出第三個氣球 -
3:01 - 3:04所以真的很酷
讓我多點擊一些 看看它有什麼作用 -
3:04 - 3:06你看我每點擊一次
-
3:06 - 3:11無論我點擊哪裡 它就繪製第三個氣球
-
3:11 - 3:19這是因為我們不斷覆蓋 [2]
索引指標為2的元素 -
3:19 - 3:23我們不斷用當前的 mouseX 覆蓋那點
-
3:23 - 3:26因此我們只能有三個氣球
-
3:26 - 3:30因為我們在 [0] 點有了這個氣球
在 [1] 點有了這個氣球 -
3:30 - 3:35我們正在不斷地改變 [2] 的元素 懂嗎？
-
3:35 - 3:37酷雖酷 但我們真正想要的是
-
3:37 - 3:40我們想要讓用戶作出好多個氣球
對不對？ -
3:40 - 3:44讓用戶每次點擊的時候 就出現新氣球
-
3:44 - 3:46這意味著我們需要不斷地遞增
-
3:46 - 3:51存進去的陣列元素的索引數值
-
3:51 - 3:54我們不希望索引數值每次都是2
我們希望它是2 然後3 -
3:54 - 3:56然後4 然後5 然後6 等等
-
3:56 - 3:59我們可以用一個
計數器變量 counter variable 來達成 -
3:59 - 4:01我們說
newInd = 2; -
4:01 - 4:032 就是它在開始時的數值
-
4:03 - 4:06然後在這裡我們會說 newInd 而不是2
-
4:06 - 4:10然後 我們真正想做的是
newInd ++ -
4:10 - 4:12這樣每次 newInd 會增加1
-
4:12 - 4:15因此 它開始為2
進而成為3 然後變成4 -
4:15 - 4:18每次滑鼠按下時 它會增加變大
讓我們試試看 -
4:18 - 4:22噹噹！好多氣球啊 氣球派對 嗚~！
-
4:22 - 4:25這很酷 對不對？
-
4:25 - 4:27但是 這不是最佳做法
-
4:27 - 4:30因為實際上 把陣列元素變多
-
4:30 - 4:32其實很費工
-
4:32 - 4:35因此 有個更簡單的方法能做出上述效果
-
4:35 - 4:39讓我直接刪除剛剛做的東西
-
4:39 - 4:43我們不需要那個 也不需要那個
把那些都刪掉 -
4:43 - 4:48好 我們的方法是
xPositions.push -
4:48 - 4:51然後括號mouseX
-
4:51 - 4:53在這裡所做的是
-
4:53 - 4:56我們以一種方式呼叫 xPositions 陣列
-
4:56 - 4:58我們在陣列上呼叫一個命令
-
4:58 - 5:02命令陣列：
「推動 mouseX 這個新的值... -
5:02 - 5:05把它推到你陣列的尾端。」
-
5:05 - 5:09每當這個被呼叫時 每次滑鼠被按下時
-
5:09 - 5:13它會看看 mouseX
並將其推入陣列的尾端 -
5:13 - 5:15因此 陣列就會變得越來越大
-
5:15 - 5:17因此 讓我們重新測試
-
5:18 - 5:19噹噹 行了！
-
5:19 - 5:23而且使用更少的編碼 對嗎？
-
5:23 - 5:25所以 如果你想要添加東西到陣列
-
5:25 - 5:27多數時間 你會想要使用 push
-
5:27 - 5:32它非常簡潔 因為可以讓陣列越變越大
-
5:32 - 5:35就像你有一個動畫
當用戶做東西時 你可以做更多的東西 -
5:36 - 5:42現在 你已經見到
90％可能會使用陣列的目的和方式 -
5:42 - 5:44但陣列還可以做更多事
-
5:44 - 5:47如果您有任何疑問 請在討論時發問
-
5:47 - 5:50首先必須徹底了解這些基礎知識
|
Ching-Yi Lai approved Chinese, Traditional subtitles for Modifying Arrays (Video Version) | |
|
|
Ching-Yi Lai edited Chinese, Traditional subtitles for Modifying Arrays (Video Version) | |
|
|
Ching-Yi Lai edited Chinese, Traditional subtitles for Modifying Arrays (Video Version) | |
|
|
Ching-Yi Lai edited Chinese, Traditional subtitles for Modifying Arrays (Video Version) | |
|
|
Ching-Yi Lai edited Chinese, Traditional subtitles for Modifying Arrays (Video Version) | |
|
|
Ching-Yi Lai edited Chinese, Traditional subtitles for Modifying Arrays (Video Version) | |
|
Hoi Ling LEUNG edited Chinese, Traditional subtitles for Modifying Arrays (Video Version) | |
|
Yueh Wang edited Chinese, Traditional subtitles for Modifying Arrays (Video Version) |