1
00:00:00,289 --> 00:00:03,797
你已經學會了設計和使用變數的方式
2
00:00:03,797 --> 00:00:06,657
現在我們要學習兩個特別的變數
3
00:00:06,657 --> 00:00:09,353
mouseX 和 mouseY
4
00:00:10,222 --> 00:00:12,671
這兩個變數不需要由你來創造
5
00:00:12,671 --> 00:00:15,980
其實它們早就存在了
6
00:00:15,980 --> 00:00:19,599
程式已經預先設定好這兩個變數的值
7
00:00:19,599 --> 00:00:23,758
確保 mouseX 的值永遠是滑鼠位置的 x 值
8
00:00:23,758 --> 00:00:27,548
mouseY 的值永遠是滑鼠位置的 y 值
9
00:00:27,548 --> 00:00:30,864
這項功能可以依據使用者的滑鼠位置
10
00:00:30,864 --> 00:00:32,559
輕鬆做出好玩的互動模式
11
00:00:33,430 --> 00:00:35,868
來看看我在這裡畫的圓形
12
00:00:35,868 --> 00:00:39,366
截至目前，我都將它的位置設定在 200, 200
13
00:00:40,612 --> 00:00:43,827
如果我使用特殊的變數 mouseX 和 mouseY
14
00:00:44,439 --> 00:00:48,286
就可以直接把這個圓形畫在 mouseX 和 mouseY
15
00:00:49,337 --> 00:00:52,359
現在，如果我在畫面上移動滑鼠，你會發現
16
00:00:52,359 --> 00:00:55,291
我的滑鼠在哪裡，圓形就被移動到那裡
17
00:00:55,291 --> 00:00:57,193
圓形跟著我的滑鼠跑
18
00:00:57,193 --> 00:01:00,000
真是太有趣了；你知道我在畫什麼嗎？哈
19
00:01:00,468 --> 00:01:04,125
在你使用 mouseX 和 mouseY 之前，務必確認
20
00:01:04,125 --> 00:01:06,365
這兩個變數是寫在 draw = funtion () 裡面
21
00:01:06,365 --> 00:01:08,205
如果沒有的話會變成這樣
22
00:01:08,205 --> 00:01:12,700
如果將這兩行程式碼移到 draw = function () 外面
23
00:01:13,289 --> 00:01:14,436
看到了嗎？
24
00:01:14,871 --> 00:01:19,206
現在這個指令只會被執行一遍
25
00:01:19,206 --> 00:01:21,811
所以只畫了一次圓形
26
00:01:21,811 --> 00:01:24,036
而且被畫在程式一開始
27
00:01:24,036 --> 00:01:26,140
我的滑鼠位置
28
00:01:26,725 --> 00:01:30,337
為什麼必須寫在 draw = function () 裡面
29
00:01:30,337 --> 00:01:32,459
是因為這個函數指令
30
00:01:32,459 --> 00:01:35,784
在程式執行的當下會被重複呼叫
31
00:01:35,784 --> 00:01:37,359
我們希望一呼叫指令
32
00:01:37,359 --> 00:01:43,246
就能擷取當下 mouseX 和 mouseY 的位置並畫出圓形
33
00:01:43,246 --> 00:01:46,063
這樣來說好了，其實這和動畫很像
34
00:01:46,063 --> 00:01:48,561
位置隨著時間改變，只是變動方式不同
35
00:01:49,191 --> 00:01:52,065
現在我們可以做出各式各樣有趣的東西
36
00:01:52,567 --> 00:01:55,724
如果我不把圓形畫在 mouseX 和 mouseY 上
37
00:01:56,353 --> 00:02:02,591
而是讓 mouseX 不變，讓 mouseY 固定為 300
會怎麼樣呢？
38
00:02:03,231 --> 00:02:07,369
圓形只會跟著我滑鼠位置的 x 值移動
39
00:02:07,369 --> 00:02:09,204
不管滑鼠怎麼上下移動都會忽略 y 值
40
00:02:10,991 --> 00:02:16,873
現在我繼續將值設定在 mouseX 和 mouseY
41
00:02:16,873 --> 00:02:19,756
卻不要 background，把它變成註記
42
00:02:20,547 --> 00:02:25,234
哇！快看，這就像是類似畫筆的有趣功能
43
00:02:25,234 --> 00:02:27,031
真是太棒了
44
00:02:27,031 --> 00:02:31,030
或者我們來交換一下這些變數
45
00:02:31,030 --> 00:02:32,894
先把 background 叫回來
46
00:02:32,894 --> 00:02:37,703
在這裡交換兩個變數 mouseX 和 mouseY
47
00:02:37,703 --> 00:02:39,202
看看會有什麼結果
48
00:02:39,202 --> 00:02:41,232
感覺真的非常怪
49
00:02:41,232 --> 00:02:43,853
現在滑鼠完全往反方向走
50
00:02:43,854 --> 00:02:45,576
不受我的控制
51
00:02:45,576 --> 00:02:48,321
但也挺好玩的，你可以想像設計一個遊戲
52
00:02:48,321 --> 00:02:50,950
使用顛倒的滑鼠控制
53
00:02:50,950 --> 00:02:52,940
讓玩家嘗試畫畫或做其它事
54
00:02:53,040 --> 00:02:58,908
mouseX 和 mouseY 到此結束
非常有趣，希望你喜歡！