0:00:00.289,0:00:03.797
你已經學會了設計和使用變數的方式
0:00:03.797,0:00:06.657
現在我們要學習兩個特別的變數
0:00:06.657,0:00:09.353
mouseX 和 mouseY
0:00:10.222,0:00:12.671
這兩個變數不需要由你來創造
0:00:12.671,0:00:15.980
其實它們早就存在了
0:00:15.980,0:00:19.599
程式已經預先設定好這兩個變數的值
0:00:19.599,0:00:23.758
確保 mouseX 的值永遠是滑鼠位置的 x 值
0:00:23.758,0:00:27.548
mouseY 的值永遠是滑鼠位置的 y 值
0:00:27.548,0:00:30.864
這項功能可以依據使用者的滑鼠位置
0:00:30.864,0:00:32.559
輕鬆做出好玩的互動模式
0:00:33.430,0:00:35.868
來看看我在這裡畫的圓形
0:00:35.868,0:00:39.366
截至目前,我都將它的位置設定在 200, 200
0:00:40.612,0:00:43.827
如果我使用特殊的變數 mouseX 和 mouseY
0:00:44.439,0:00:48.286
就可以直接把這個圓形畫在 mouseX 和 mouseY
0:00:49.337,0:00:52.359
現在,如果我在畫面上移動滑鼠,你會發現
0:00:52.359,0:00:55.291
我的滑鼠在哪裡,圓形就被移動到那裡
0:00:55.291,0:00:57.193
圓形跟著我的滑鼠跑
0:00:57.193,0:01:00.000
真是太有趣了;你知道我在畫什麼嗎?哈
0:01:00.468,0:01:04.125
在你使用 mouseX 和 mouseY 之前,務必確認
0:01:04.125,0:01:06.365
這兩個變數是寫在 draw = funtion () 裡面
0:01:06.365,0:01:08.205
如果沒有的話會變成這樣
0:01:08.205,0:01:12.700
如果將這兩行程式碼移到 draw = function () 外面
0:01:13.289,0:01:14.436
看到了嗎?
0:01:14.871,0:01:19.206
現在這個指令只會被執行一遍
0:01:19.206,0:01:21.811
所以只畫了一次圓形
0:01:21.811,0:01:24.036
而且被畫在程式一開始
0:01:24.036,0:01:26.140
我的滑鼠位置
0:01:26.725,0:01:30.337
為什麼必須寫在 draw = function () 裡面
0:01:30.337,0:01:32.459
是因為這個函數指令
0:01:32.459,0:01:35.784
在程式執行的當下會被重複呼叫
0:01:35.784,0:01:37.359
我們希望一呼叫指令
0:01:37.359,0:01:43.246
就能擷取當下 mouseX 和 mouseY 的位置並畫出圓形
0:01:43.246,0:01:46.063
這樣來說好了,其實這和動畫很像
0:01:46.063,0:01:48.561
位置隨著時間改變,只是變動方式不同
0:01:49.191,0:01:52.065
現在我們可以做出各式各樣有趣的東西
0:01:52.567,0:01:55.724
如果我不把圓形畫在 mouseX 和 mouseY 上
0:01:56.353,0:02:02.591
而是讓 mouseX 不變,讓 mouseY 固定為 300 [br]會怎麼樣呢?
0:02:03.231,0:02:07.369
圓形只會跟著我滑鼠位置的 x 值移動
0:02:07.369,0:02:09.204
不管滑鼠怎麼上下移動都會忽略 y 值
0:02:10.991,0:02:16.873
現在我繼續將值設定在 mouseX 和 mouseY
0:02:16.873,0:02:19.756
卻不要 background,把它變成註記
0:02:20.547,0:02:25.234
哇!快看,這就像是類似畫筆的有趣功能
0:02:25.234,0:02:27.031
真是太棒了
0:02:27.031,0:02:31.030
或者我們來交換一下這些變數
0:02:31.030,0:02:32.894
先把 background 叫回來
0:02:32.894,0:02:37.703
在這裡交換兩個變數 mouseX 和 mouseY
0:02:37.703,0:02:39.202
看看會有什麼結果
0:02:39.202,0:02:41.232
感覺真的非常怪
0:02:41.232,0:02:43.853
現在滑鼠完全往反方向走
0:02:43.854,0:02:45.576
不受我的控制
0:02:45.576,0:02:48.321
但也挺好玩的,你可以想像設計一個遊戲
0:02:48.321,0:02:50.950
使用顛倒的滑鼠控制
0:02:50.950,0:02:52.940
讓玩家嘗試畫畫或做其它事
0:02:53.040,0:02:58.908
mouseX 和 mouseY 到此結束[br]非常有趣,希望你喜歡!