WEBVTT

00:00:00.289 --> 00:00:03.797
你已經學會了設計和使用變數的方式

00:00:03.797 --> 00:00:06.657
現在我們要學習兩個特別的變數

00:00:06.657 --> 00:00:09.353
mouseX 和 mouseY

00:00:10.222 --> 00:00:12.671
這兩個變數不需要由你來創造

00:00:12.671 --> 00:00:15.980
其實它們早就存在了

00:00:15.980 --> 00:00:19.599
程式已經預先設定好這兩個變數的值

00:00:19.599 --> 00:00:23.758
確保 mouseX 的值永遠是滑鼠位置的 x 值

00:00:23.758 --> 00:00:27.548
mouseY 的值永遠是滑鼠位置的 y 值

00:00:27.548 --> 00:00:30.864
這項功能可以依據使用者的滑鼠位置

00:00:30.864 --> 00:00:32.559
輕鬆做出好玩的互動模式

00:00:33.430 --> 00:00:35.868
來看看我在這裡畫的圓形

00:00:35.868 --> 00:00:39.366
截至目前，我都將它的位置設定在 200, 200

00:00:40.612 --> 00:00:43.827
如果我使用特殊的變數 mouseX 和 mouseY

00:00:44.439 --> 00:00:48.286
就可以直接把這個圓形畫在 mouseX 和 mouseY

00:00:49.337 --> 00:00:52.359
現在，如果我在畫面上移動滑鼠，你會發現

00:00:52.359 --> 00:00:55.291
我的滑鼠在哪裡，圓形就被移動到那裡

00:00:55.291 --> 00:00:57.193
圓形跟著我的滑鼠跑

00:00:57.193 --> 00:01:00.000
真是太有趣了；你知道我在畫什麼嗎？哈

00:01:00.468 --> 00:01:04.125
在你使用 mouseX 和 mouseY 之前，務必確認

00:01:04.125 --> 00:01:06.365
這兩個變數是寫在 <i>draw = funtion ()</i> 裡面

00:01:06.365 --> 00:01:08.205
如果沒有的話會變成這樣

00:01:08.205 --> 00:01:12.700
如果將這兩行程式碼移到 <i>draw = function ()</i> 外面

00:01:13.289 --> 00:01:14.436
看到了嗎？

00:01:14.871 --> 00:01:19.206
現在這個指令只會被執行一遍

00:01:19.206 --> 00:01:21.811
所以只畫了一次圓形

00:01:21.811 --> 00:01:24.036
而且被畫在程式一開始

00:01:24.036 --> 00:01:26.140
我的滑鼠位置

00:01:26.725 --> 00:01:30.337
為什麼必須寫在 <i>draw = function ()</i> 裡面

00:01:30.337 --> 00:01:32.459
是因為這個函數指令

00:01:32.459 --> 00:01:35.784
在程式執行的當下會被重複呼叫

00:01:35.784 --> 00:01:37.359
我們希望一呼叫指令

00:01:37.359 --> 00:01:43.246
就能擷取當下 mouseX 和 mouseY 的位置並畫出圓形

00:01:43.246 --> 00:01:46.063
這樣來說好了，其實這和動畫很像

00:01:46.063 --> 00:01:48.561
位置隨著時間改變，只是變動方式不同

00:01:49.191 --> 00:01:52.065
現在我們可以做出各式各樣有趣的東西

00:01:52.567 --> 00:01:55.724
如果我不把圓形畫在 mouseX 和 mouseY 上

00:01:56.353 --> 00:02:02.591
而是讓 mouseX 不變，讓 mouseY 固定為 300 
會怎麼樣呢？

00:02:03.231 --> 00:02:07.369
圓形只會跟著我滑鼠位置的 x 值移動

00:02:07.369 --> 00:02:09.204
不管滑鼠怎麼上下移動都會忽略 y 值

00:02:10.991 --> 00:02:16.873
現在我繼續將值設定在 mouseX 和 mouseY

00:02:16.873 --> 00:02:19.756
卻不要 background，把它變成註記

00:02:20.547 --> 00:02:25.234
哇！快看，這就像是類似畫筆的有趣功能

00:02:25.234 --> 00:02:27.031
真是太棒了

00:02:27.031 --> 00:02:31.030
或者我們來交換一下這些變數

00:02:31.030 --> 00:02:32.894
先把 background 叫回來

00:02:32.894 --> 00:02:37.703
在這裡交換兩個變數 mouseX 和 mouseY

00:02:37.703 --> 00:02:39.202
看看會有什麼結果

00:02:39.202 --> 00:02:41.232
感覺真的非常怪

00:02:41.232 --> 00:02:43.853
現在滑鼠完全往反方向走

00:02:43.854 --> 00:02:45.576
不受我的控制

00:02:45.576 --> 00:02:48.321
但也挺好玩的，你可以想像設計一個遊戲

00:02:48.321 --> 00:02:50.950
使用顛倒的滑鼠控制

00:02:50.950 --> 00:02:52.940
讓玩家嘗試畫畫或做其它事

00:02:53.040 --> 00:02:58.908
mouseX 和 mouseY 到此結束
非常有趣，希望你喜歡！