Return to Video

更多滑鼠互動介面 (影片版)

  • 0:01 - 0:02
    在上一堂課裡
  • 0:02 - 0:05
    我們示範了如何使用繪圖函數和if述句
  • 0:05 - 0:07
    讓一顆球從牆上反彈
  • 0:07 - 0:08
    讓我們來複習
  • 0:08 - 0:12
    首先，我們為球的位置和速度設立初始變異數
  • 0:12 - 0:15
    然後，在繪圖函數裡，特別是那個
  • 0:15 - 0:17
    在你的程式運行時不斷被叫出的程式
  • 0:17 - 0:21
    我們將背景重新上色，然後在畫布上畫上一個圓形
  • 0:21 - 0:24
    然後我們根據變異數的位置、時間
  • 0:24 - 0:27
    與其互相影響的情形，來放置缺口
  • 0:27 - 0:29
    現在，沒有 if 述句
  • 0:29 - 0:31
    我們的球只會一直前進
  • 0:31 - 0:33
    直到我們按下重新開始
  • 0:33 - 0:37
    所以我們在下面這裡加入兩個 if 述句來確認並觀察
  • 0:37 - 0:40
    球是在螢幕右側
  • 0:40 - 0:41
    還是螢幕左側
  • 0:42 - 0:44
    據此，我們將速度變換至正或是負
  • 0:44 - 0:46
    因此球基本上會反彈回來
  • 0:46 - 0:50
    所以現在我們只需要讓這個球永遠來回反彈
  • 0:50 - 0:51
    所以這個蠻酷的
  • 0:51 - 0:53
    而且用這個方法
  • 0:53 - 0:55
    我們可以做出非常多很酷的動畫
  • 0:55 - 0:58
    現在，我想要加入使用者互動到這個課程
  • 0:58 - 1:00
    現在，這個課程就是一場TV秀
  • 1:00 - 1:02
    如果你將它給一個朋友
  • 1:02 - 1:04
    而且你的朋友不知道如何寫程式
  • 1:04 - 1:06
    他們無法真的與它互動
  • 1:06 - 1:08
    他們能做的事只有看，雖然也是蠻酷的
  • 1:08 - 1:11
    不過如果他們能做什麼事情，這整件事會變得更酷
  • 1:11 - 1:14
    所以，讓我們來給使用者一些方法來控制它
  • 1:14 - 1:15
    記住稍早以前，我們學了
  • 1:15 - 1:20
    兩個特別的全球性變異數叫做 “鼠標X” 和 "鼠標Y"
  • 1:21 - 1:23
    這些變異數會產生數字
  • 1:23 - 1:26
    告訴我們使用者滑鼠目前的所在位置
  • 1:26 - 1:29
    這是一個將課程互動化很好的一個方法
  • 1:29 - 1:31
    讓我們來看看可以如何使用它們
  • 1:31 - 1:35
    我們應當將之使用在繪圖函數的某處
  • 1:35 - 1:37
    因為他們是唯一的程式碼
  • 1:37 - 1:39
    他們在程式進行時不斷的被叫出
  • 1:40 - 1:43
    其餘在繪圖函數外的都只有被叫到一次
  • 1:43 - 1:45
    當一個程式開始時
  • 1:45 - 1:48
    所以，此時使用鼠標X 和鼠標Y是不合理的
  • 1:48 - 1:51
    使用者沒有機會去跟他們互動
  • 1:51 - 1:57
    現在，我們將圖裡的球往下移200個像素
  • 1:57 - 2:01
    我們何不用鼠標Y取代它？
  • 2:01 - 2:03
    因為那是Y位置，對吧？
  • 2:03 - 2:08
    用這個方法可以獨立地將y位置
  • 2:08 - 2:10
    讓我們來試試看
  • 2:10 - 2:12
    只靠著將我的游標上下移動
  • 2:12 - 2:15
    我可以改變球前進的路線
  • 2:15 - 2:16
    蠻酷的
  • 2:16 - 2:20
    但是，我也想要使用鼠標X，所以我該如何使用呢？
  • 2:20 - 2:22
    我們何不直接製作另一顆球
  • 2:22 - 2:26
    然後使那顆球行進上下相反的方向
  • 2:26 - 2:31
    然後我們讓使用者控制它的“x”方位
  • 2:31 - 2:38
    所以我們就是做了相反的事情，我們可以說橢圓滑鼠X 位於 50,50
  • 2:40 - 2:42
    可以嗎？試試看吧！
  • 2:42 - 2:47
    我已經控制這兩顆球以垂直的方向移動
  • 2:49 - 2:53
    但是，我仍然不滿意，我想要給使用者更多控制能力
  • 2:53 - 2:58
    我想要給使用者啟動第二顆球的能力
  • 2:58 - 3:02
    僅僅按一下滑鼠，就使第二顆球存在
  • 3:02 - 3:04
    然而，我需要找出方法
  • 3:04 - 3:08
    如何分辨使用者正在按滑鼠
  • 3:08 - 3:13
    令人感激的是，我們有一個特別的布林變異數可以使用
  • 3:13 - 3:18
    名叫 《點擊滑鼠》。我們可以在 if 述句裡使用它
  • 3:18 - 3:22
    讓我們來看看。這是我們的第二顆球
  • 3:22 - 3:27
    所以我們可以說 "如果點擊滑鼠"
  • 3:27 - 3:32
    然後我們會將圓形移到這裡
  • 3:32 - 3:34
    所以這裡在做的事情是
  • 3:34 - 3:39
    告訴這個程式我們只有在這是對的時畫這個圓
  • 3:39 - 3:43
    那《點擊滑鼠》就只會在
  • 3:43 - 3:46
    使用者按下滑鼠時有效
  • 3:46 - 3:50
    我們來試試看，tada!
  • 3:50 - 3:53
    所以我們現在可以只讓球在我按下時出現
  • 3:53 - 3:56
    它在這個平行的宇宙縮放
  • 3:56 - 3:59
    進入！進入！進入！這太美好了
  • 4:00 - 4:04
    所以，這個變異數有趣的事情是
  • 4:04 - 4:08
    《點擊滑鼠》會根據使用者做的事情改變
  • 4:08 - 4:10
    而不是根據我們的程式做了什麼
  • 4:10 - 4:13
    而因為繪圖函數被重複呼叫一次又一次，
  • 4:13 - 4:16
    程式的輸出也會隨著時間而改變
  • 4:16 - 4:19
    附帶著使用者的一些輸入
  • 4:19 - 4:22
    混合著 if 述句跟《點擊滑鼠》的威力，
  • 4:22 - 4:24
    你可以得到任何你想要的東西
  • 4:24 - 4:27
    像是製作很棒的東西例如按鈕或者是繪圖程式
  • 4:27 - 4:28
    好耶！
Title:
更多滑鼠互動介面 (影片版)
Description:

這僅是我們互動程式編輯教學的螢幕擷取，用以簡易化字幕編輯及翻譯。最好上：https://www.khanacademy.org/cs/programming/觀看我們的教學影片。
more » « less
Video Language:
English
Duration:
04:29

Chinese, Traditional subtitles

Revisions

Our website uses cookies for analysis purposes.