WEBVTT

00:00:01.372 --> 00:00:02.497
在上一堂課裡

00:00:02.497 --> 00:00:05.305
我們示範了如何使用繪圖函數和if述句

00:00:05.315 --> 00:00:07.165
讓一顆球從牆上反彈

00:00:07.264 --> 00:00:08.192
讓我們來複習

00:00:08.192 --> 00:00:12.007
首先，我們為球的位置和速度設立初始變異數

00:00:12.007 --> 00:00:15.064
然後，在繪圖函數裡，特別是那個

00:00:15.064 --> 00:00:17.224
在你的程式運行時不斷被叫出的程式

00:00:17.224 --> 00:00:20.731
我們將背景重新上色，然後在畫布上畫上一個圓形

00:00:20.731 --> 00:00:24.126
然後我們根據變異數的位置、時間

00:00:24.126 --> 00:00:27.468
與其互相影響的情形，來放置缺口

00:00:27.468 --> 00:00:28.905
現在，沒有 if 述句

00:00:28.905 --> 00:00:31.116
我們的球只會一直前進

00:00:31.116 --> 00:00:33.061
直到我們按下重新開始

00:00:33.061 --> 00:00:36.823
所以我們在下面這裡加入兩個 if 述句來確認並觀察

00:00:36.823 --> 00:00:39.844
球是在螢幕右側

00:00:39.844 --> 00:00:41.299
還是螢幕左側

00:00:41.679 --> 00:00:44.093
據此，我們將速度變換至正或是負

00:00:44.093 --> 00:00:46.172
因此球基本上會反彈回來

00:00:46.172 --> 00:00:49.806
所以現在我們只需要讓這個球永遠來回反彈

00:00:50.135 --> 00:00:51.355
所以這個蠻酷的

00:00:51.355 --> 00:00:52.620
而且用這個方法

00:00:52.620 --> 00:00:55.005
我們可以做出非常多很酷的動畫

00:00:55.005 --> 00:00:57.697
現在，我想要加入使用者互動到這個課程

00:00:57.697 --> 00:01:00.026
現在，這個課程就是一場TV秀

00:01:00.026 --> 00:01:01.614
如果你將它給一個朋友

00:01:01.614 --> 00:01:03.866
而且你的朋友不知道如何寫程式

00:01:04.182 --> 00:01:05.577
他們無法真的與它互動

00:01:05.577 --> 00:01:07.835
他們能做的事只有看，雖然也是蠻酷的

00:01:07.835 --> 00:01:10.533
不過如果他們能做什麼事情，這整件事會變得更酷

00:01:10.533 --> 00:01:13.574
所以，讓我們來給使用者一些方法來控制它

00:01:13.574 --> 00:01:15.335
記住稍早以前，我們學了

00:01:15.335 --> 00:01:20.032
兩個特別的全球性變異數叫做 “鼠標X” 和 "鼠標Y"

00:01:21.231 --> 00:01:22.708
這些變異數會產生數字

00:01:22.708 --> 00:01:26.100
告訴我們使用者滑鼠目前的所在位置

00:01:26.100 --> 00:01:28.597
這是一個將課程互動化很好的一個方法

00:01:28.597 --> 00:01:31.201
讓我們來看看可以如何使用它們

00:01:31.201 --> 00:01:34.571
我們應當將之使用在繪圖函數的某處

00:01:34.571 --> 00:01:36.763
因為他們是唯一的程式碼

00:01:36.763 --> 00:01:39.482
他們在程式進行時不斷的被叫出

00:01:39.902 --> 00:01:43.027
其餘在繪圖函數外的都只有被叫到一次

00:01:43.027 --> 00:01:44.572
當一個程式開始時

00:01:45.173 --> 00:01:48.104
所以，此時使用鼠標X 和鼠標Y是不合理的

00:01:48.104 --> 00:01:50.632
使用者沒有機會去跟他們互動

00:01:50.632 --> 00:01:56.969
現在，我們將圖裡的球往下移200個像素

00:01:56.969 --> 00:02:00.574
我們何不用鼠標Y取代它？

00:02:00.574 --> 00:02:02.533
因為那是Y位置，對吧？

00:02:02.980 --> 00:02:07.832
用這個方法可以獨立地將y位置

00:02:07.832 --> 00:02:10.101
讓我們來試試看

00:02:10.101 --> 00:02:11.661
只靠著將我的游標上下移動

00:02:11.661 --> 00:02:14.535
我可以改變球前進的路線

00:02:14.936 --> 00:02:16.200
蠻酷的

00:02:16.200 --> 00:02:19.906
但是，我也想要使用鼠標X，所以我該如何使用呢？

00:02:19.906 --> 00:02:22.068
我們何不直接製作另一顆球

00:02:22.068 --> 00:02:26.268
然後使那顆球行進上下相反的方向

00:02:26.268 --> 00:02:30.535
然後我們讓使用者控制它的“x”方位

00:02:30.535 --> 00:02:38.270
所以我們就是做了相反的事情，我們可以說橢圓滑鼠X 位於 50,50

00:02:39.967 --> 00:02:41.970
可以嗎？試試看吧！

00:02:41.970 --> 00:02:46.934
我已經控制這兩顆球以垂直的方向移動

00:02:48.731 --> 00:02:53.429
但是，我仍然不滿意，我想要給使用者更多控制能力

00:02:53.429 --> 00:02:57.865
我想要給使用者啟動第二顆球的能力

00:02:57.865 --> 00:03:02.100
僅僅按一下滑鼠，就使第二顆球存在

00:03:02.100 --> 00:03:04.201
然而，我需要找出方法

00:03:04.201 --> 00:03:07.769
如何分辨使用者正在按滑鼠

00:03:08.170 --> 00:03:12.874
令人感激的是，我們有一個特別的布林變異數可以使用

00:03:12.884 --> 00:03:18.336
名叫 《點擊滑鼠》。我們可以在 if 述句裡使用它

00:03:18.336 --> 00:03:22.137
讓我們來看看。這是我們的第二顆球

00:03:22.137 --> 00:03:26.920
所以我們可以說 "如果點擊滑鼠"

00:03:26.920 --> 00:03:31.545
然後我們會將圓形移到這裡

00:03:32.138 --> 00:03:34.440
所以這裡在做的事情是

00:03:34.440 --> 00:03:39.301
告訴這個程式我們只有在這是對的時畫這個圓

00:03:39.301 --> 00:03:42.924
那《點擊滑鼠》就只會在

00:03:42.924 --> 00:03:45.841
使用者按下滑鼠時有效

00:03:45.841 --> 00:03:50.002
我們來試試看，tada!

00:03:50.002 --> 00:03:53.367
所以我們現在可以只讓球在我按下時出現

00:03:53.367 --> 00:03:55.830
它在這個平行的宇宙縮放

00:03:55.830 --> 00:03:58.963
進入！進入！進入！這太美好了

00:04:00.096 --> 00:04:03.685
所以，這個變異數有趣的事情是

00:04:03.685 --> 00:04:07.634
《點擊滑鼠》會根據使用者做的事情改變

00:04:07.634 --> 00:04:09.582
而不是根據我們的程式做了什麼

00:04:09.582 --> 00:04:13.362
而因為繪圖函數被重複呼叫一次又一次，

00:04:13.362 --> 00:04:16.264
程式的輸出也會隨著時間而改變

00:04:16.264 --> 00:04:18.564
附帶著使用者的一些輸入

00:04:18.975 --> 00:04:22.264
混合著 if 述句跟《點擊滑鼠》的威力，

00:04:22.264 --> 00:04:23.861
你可以得到任何你想要的東西

00:04:23.861 --> 00:04:27.067
像是製作很棒的東西例如按鈕或者是繪圖程式

00:04:27.067 --> 00:04:28.136
好耶！