滑鼠互動（影片版）

你已經學會了設計和使用變數的方式

現在我們要學習兩個特別的變數

mouseX 和 mouseY

這兩個變數不需要由你來創造

其實它們早就存在了

程式已經預先設定好這兩個變數的值

確保 mouseX 的值永遠是滑鼠位置的 x 值

mouseY 的值永遠是滑鼠位置的 y 值

這項功能可以依據使用者的滑鼠位置

輕鬆做出好玩的互動模式

來看看我在這裡畫的圓形

截至目前，我都將它的位置設定在 200, 200

如果我使用特殊的變數 mouseX 和 mouseY

就可以直接把這個圓形畫在 mouseX 和 mouseY

現在，如果我在畫面上移動滑鼠，你會發現

我的滑鼠在哪裡，圓形就被移動到那裡

圓形跟著我的滑鼠跑

真是太有趣了；你知道我在畫什麼嗎？哈

在你使用 mouseX 和 mouseY 之前，務必確認

這兩個變數是寫在 draw = funtion () 裡面

如果沒有的話會變成這樣

如果將這兩行程式碼移到 draw = function () 外面

看到了嗎？

現在這個指令只會被執行一遍

所以只畫了一次圓形

而且被畫在程式一開始

我的滑鼠位置

為什麼必須寫在 draw = function () 裡面

是因為這個函數指令

在程式執行的當下會被重複呼叫

我們希望一呼叫指令

就能擷取當下 mouseX 和 mouseY 的位置並畫出圓形

這樣來說好了，其實這和動畫很像

位置隨著時間改變，只是變動方式不同

現在我們可以做出各式各樣有趣的東西

如果我不把圓形畫在 mouseX 和 mouseY 上

而是讓 mouseX 不變，讓 mouseY 固定為 300
會怎麼樣呢？

圓形只會跟著我滑鼠位置的 x 值移動

不管滑鼠怎麼上下移動都會忽略 y 值

現在我繼續將值設定在 mouseX 和 mouseY

卻不要 background，把它變成註記

哇！快看，這就像是類似畫筆的有趣功能

真是太棒了

或者我們來交換一下這些變數

先把 background 叫回來

在這裡交換兩個變數 mouseX 和 mouseY

看看會有什麼結果

感覺真的非常怪

現在滑鼠完全往反方向走

不受我的控制

但也挺好玩的，你可以想像設計一個遊戲

使用顛倒的滑鼠控制

讓玩家嘗試畫畫或做其它事

mouseX 和 mouseY 到此結束
非常有趣，希望你喜歡！