WEBVTT

00:00:01.491 --> 00:00:03.267
唷呼！另一個動畫

00:00:03.267 --> 00:00:05.498
這次我們有顆球在螢幕上移動

00:00:05.498 --> 00:00:07.241
而你們知道這是如何辦到的

00:00:07.241 --> 00:00:10.298
我們的變數"x"代表這顆球的位置

00:00:10.298 --> 00:00:14.055
另一個變數"速度"代表這顆球每次移動的距離

00:00:14.055 --> 00:00:15.465
及熟悉的繪圖迴圈

00:00:15.465 --> 00:00:17.417
用來重新繪製每一次的背景

00:00:17.417 --> 00:00:20.449
設定填充顏色並在x位置畫一個橢圓形

00:00:20.449 --> 00:00:21.380
且每一次

00:00:21.380 --> 00:00:23.558
我們要將x改回舊的x值

00:00:23.558 --> 00:00:26.252
再加上"速度" 這個變數

00:00:26.252 --> 00:00:32.786
所以若我使"速度"減小
球移動的速度就慢一點

00:00:32.786 --> 00:00:35.581
也可以使"速度"為負數，則球向後移動

00:00:35.581 --> 00:00:38.489
或使它為零，則球會停止移動

00:00:38.489 --> 00:00:40.519
但只要速度不為零

00:00:40.519 --> 00:00:43.754
最終球將會移到螢幕外

00:00:43.754 --> 00:00:46.204
我可以按重新開始鍵把它帶回來

00:00:46.204 --> 00:00:49.758
但你知道，一段時間後，就膩了

00:00:49.758 --> 00:00:52.469
重來，再重來

00:00:52.469 --> 00:00:55.751
所以何不試試這個？當球觸及螢幕右邊邊界時

00:00:55.751 --> 00:00:58.785
與其像現在這樣超出螢幕的邊界

00:00:58.785 --> 00:01:00.495
我想讓它轉個彎

00:01:00.495 --> 00:01:06.515
而且，我知道如何讓球轉彎
我只需要說："速度"為負5

00:01:06.515 --> 00:01:10.238
若我使速度為負，則球會向後走

00:01:10.238 --> 00:01:11.736
但這有個問題

00:01:11.736 --> 00:01:18.249
我只想在當球觸及右邊邊界時，
才去改變速度的值

00:01:18.250 --> 00:01:19.951
我想我已經說了

00:01:19.951 --> 00:01:25.759
我只想在球觸及右邊邊界時，
才去改變速度的值

00:01:25.759 --> 00:01:27.736
我想這裡需要一個if述句

00:01:27.736 --> 00:01:29.609
到目前為止，我們只下達

00:01:29.609 --> 00:01:32.016
電腦無論如何就去執行的指令

00:01:32.016 --> 00:01:33.996
if述句是一種方式去說：

00:01:33.996 --> 00:01:36.256
「嘿，夥計，我要你去執行這個程式碼

00:01:36.256 --> 00:01:39.042
但僅只在這些特定的條件下。」

00:01:39.042 --> 00:01:43.022
「所以，只有當球已觸及右邊邊界時，才改變速度」

00:01:43.022 --> 00:01:45.096
而這是它在程式碼中看起來的樣子

00:01:45.096 --> 00:01:47.540
你要做的就是打上"IF"

00:01:47.540 --> 00:01:50.960
一對小括號，一對大括號

00:01:50.961 --> 00:01:54.334
在小括號內，填入條件

00:01:54.335 --> 00:01:57.755
在大括號內，填入要執行的程式碼

00:01:57.755 --> 00:02:00.522
它運作的方式是：
「若此條件為真，

00:02:00.522 --> 00:02:04.021
則執行此程式碼；
否則，就不執行。」

00:02:04.021 --> 00:02:07.512
在我們的例子中，條件指的是
球觸及右邊邊界

00:02:07.512 --> 00:02:10.374
我們如何得知
球是否已觸及右邊邊界呢？

00:02:10.375 --> 00:02:14.207
我們有變數x，告訴我們球的位置

00:02:14.207 --> 00:02:22.958
且我知道畫布邊緣的x位置為400
所以來看一下

00:02:22.959 --> 00:02:26.262
當x大於400時

00:02:26.262 --> 00:02:30.299
則我們知道球已經些微超過右邊邊界

00:02:30.299 --> 00:02:31.992
來看一下那是如何運作的

00:02:31.992 --> 00:02:38.985
再來看要執行的程式碼，我們之前已經說過，
我們改變速度，使之為負5。

00:02:38.986 --> 00:02:42.252
我們來看看按重新開始會發生什麼事

00:02:42.252 --> 00:02:46.243
這次，當球觸及右邊邊界時，
它彈回來了！耶！

00:02:46.243 --> 00:02:47.512
然後持續走到螢幕外

00:02:47.512 --> 00:02:49.767
但沒關係，我們可以對另一邊做相同的事

00:02:49.767 --> 00:02:52.667
這一次，我們想確認球是否已觸及左邊邊界

00:02:52.668 --> 00:02:57.959
也就是當x小於零時

00:02:57.959 --> 00:03:03.481
而我們想做的是使速度再次為正，
於是指定速度為5

00:03:03.961 --> 00:03:07.025
好了，然後我們按下重新開始

00:03:07.025 --> 00:03:10.769
而這次...........蹦..........

00:03:10.769 --> 00:03:14.418
蹦...........蹦..........

00:03:14.729 --> 00:03:17.476
耶！成功了

00:03:17.476 --> 00:03:20.267
我們來檢查看看球是否已經超出邊界

00:03:20.267 --> 00:03:23.778
它好像有一點超出邊界

00:03:23.778 --> 00:03:27.058
如果你記得，這兩個參數控制

00:03:27.058 --> 00:03:29.495
橢圓形中心點的位置

00:03:29.495 --> 00:03:33.180
而現在，當中心點觸及邊界的同時

00:03:33.180 --> 00:03:36.748
一半的橢圓形已經超出邊界

00:03:36.748 --> 00:03:40.233
所以若我們想修正它，只需早一點使橢圓形停止

00:03:40.233 --> 00:03:45.734
邊界在400這裡，
而我們希望當橢圓形到這裡時停止

00:03:45.734 --> 00:03:52.515
可以從功能呼叫知道橢圓形寬為50

00:03:52.515 --> 00:03:58.626
那表示從中心點到邊緣為25

00:03:58.626 --> 00:04:03.476
所以我們希望當中心點到達375時停止

00:04:03.476 --> 00:04:05.766
也就是400減去25

00:04:05.766 --> 00:04:08.228
代替檢查x是否大於400

00:04:08.228 --> 00:04:10.969
我們改為檢查x是否大於375

00:04:10.970 --> 00:04:13.293
代替檢查x是否大於0

00:04:13.294 --> 00:04:16.022
改為檢查x是否小於25

00:04:16.992 --> 00:04:21.284
現在超完美的！耶！
看看球彈跳的樣子