---
tags: scratch
---

# 五分鐘學 Scratch EP.04 - 遙控貓咪

### :memo: 學習重點

- [ ] 了解「如果...那麼...」積木的功能
- [ ] 了解「按鍵被按下」積木的功能
- [ ] 了解角色的面朝方向屬性

---
### :cat: 本期目標

上回我們已經學會如何建立一個全新的 Scratch 專案，不過，我們上次做的是一個不能控制的貓咪，只能回到原點之後往右走三步。今天，我們就要來製造一隻屬於自己的遙控貓咪。忘記怎麼建立新專案了嗎？趕快到:point_right:[這裡](https://hackmd.io/@goattl/Bkx3GXDtq)參考上一回的教學複習一下。

我們今天要做的作品－**遙控貓咪**，是一隻可以讓我們用鍵盤的「上、下、左、右鍵」控制的貓咪，在我們按下對應的方向鍵時，貓咪就會轉向按鍵的方向，然後往那個方向移動。


我們可以從這個作品中觀察到幾個貓咪角色的行為：
1. 只有按下按鍵的時候貓咪會有動作
2. 貓咪會轉向（左右）
3. 貓咪會往按下的方向移動

那我們怎麼用 Scratch 的積木達成這些功能呢？我們一個一個來看

### :cat: 讓角色對鍵盤做反應

首先，我們要讓貓咪對於鍵盤的按鍵有反應，今天要用到的按鍵只有上下左右。鍵盤的上下左右鍵在 Enter 的右下方、數字鍵的左方


那麼，我們該怎麼讓角色只在按下按鍵的時候有動作呢？這裡，我們要介紹「如果...那麼...」積木。在<span style="color:Orange; font-weight: 800">控制</span>類的積木櫃裡面，可以找到下方圖片的積木。


這個積木就能讓角色在不同的情況下做不同的事，就好像在照樣造句一樣，例如：

<span style="color:Orange;">如果</span>考試 100 分，<span style="color:Orange;">那麼</span>我就可以跟家人一起出去玩
<span style="color:Orange;">如果</span>看到綠燈，<span style="color:Orange;">那麼</span>我就必須停下來
<span style="color:Orange;">如果</span>今天有體育課，<span style="color:Orange;">那麼</span>我就要穿運動服

聰明的你一定已經想到了，如果要讓角色只在方向鍵被按下的時候移動，那麼我們的造句就要變成

<span style="color:Orange;">如果</span>向上鍵（↑）被按下<span style="color:Orange;">那麼</span>貓咪就往上走
<span style="color:Orange;">如果</span>向下鍵（↓）被按下<span style="color:Orange;">那麼</span>貓咪就往下走
<span style="color:Orange;">如果</span>向左鍵（←）被按下<span style="color:Orange;">那麼</span>貓咪就往左走
<span style="color:Orange;">如果</span>向右鍵（→）被按下<span style="color:Orange;">那麼</span>貓咪就往右走

可是問題來了，我們要怎麼讓角色知道鍵盤的按鍵被按下了呢？這時候我們就要用到另一個「XX 鍵被按下」積木，這個積木可以讓我們選擇鍵盤按鍵，並且幫我們判斷我們選的按鍵有沒有被按下。

我們到</span><span style="color:DodgerBlue;">淺藍</span>色積木櫃，找到「空白鍵被按下？」積木，然後點一下積木上的三角形，把空白鍵換成向上鍵，這樣就可以讓我們的角色知向上鍵被按下了。只要把 「如果...那麼...」積木跟「向上鍵被按下？」積木組合起來，就可以讓角色只在向上鍵被按下的時候做事情。

<br>

### :cat: 讓貓咪暈頭轉向
在上一個小節我們學會了怎麼組合「如果..那麼...」積木和「向上按鍵被按下？」積木。在這個小節，我們要來加入讓貓咪動起來的積木。實作之前，我們必須先認識一下 Scratch 中的「方向」概念。

Scratch 中的每個角色都有一個「方向」屬性，我們的貓咪當然也不例外，在舞台下方的角色屬性區域，我們可以看到目前角色的方向。方向的單位是角度，向上是 0 度；向右是 90度；向下是 180度；向左是 270 度或 -90 度。如果忘記這些角度與方向的對應也沒關係，只要點一下方向的屬性，就會跑出一個圓盤讓我們拖拉箭頭選定角度。如果記得角度的話更好，可以直接輸入角度準確的指定方向。


在選擇角度的圓盤下方有三個按鈕可以按，他們分別對應到三個不同的圖片旋轉方式：不設限、左-右、不旋轉。這次的專案我們要選擇左-右。再點開一次選擇方向的圓盤然後選擇左-右吧～

<br>

### :cat: 航向偉大航道吧！
方向確定之後只要使用「移動 XX 點」！積木，角色就會沿著自己的方向移動設定的長度。方向往左就往左走，方向往右就往右走，依此類推。現在，就讓我們把設定方向的積木還有移動的積木放到「如果...那麼...」的積木內的空白區域


然後，按下綠旗，就會發現我們的貓咪...<span style="font-size: larger; font-weight: 800">不會動</span>
為什麼呢？因為我們沒有放「當綠旗被點擊」積木，趕快補一下吧！

然後，按下綠旗，就會發現我們的貓咪...<span style="font-size: x-large; font-weight: 800">還是不會動</span>
為什麼呢？其實不是不會動，而是電腦的速度太快了，它只用了 0.0001 秒就動完，然後就坐著休息了！

既然如此，我們就殘忍的讓貓咪永遠不能休息吧～從<span style="color:Orange;">控制</span>積木櫃找到「重複無限次」積木，然後用它把「如果...那麼...」積木夾住，這個積木會命令貓咪永遠不能休息，要一直重複同樣的工作。

再次點下綠旗，我們貓咪就可以往上走囉！


不過，現在我們的貓咪只會往上走，不能往其他方向，因為我們的程式只處理了向上鍵被按下的狀況。剩下的向下、向左、向右的程式我們都還沒寫。其他方向的程式基本上跟向上一模一樣，只需要改一下按鍵跟方向。

你說：「老師~~ 幾乎一模一樣，能不能直接複製來改？」

欸！還真的可以喔！請對「如果...那麼...」積木點<span style="color:red;">右鍵</span>，然後選「複製」，就能複製一整塊的積木，我們只要把複製出來的積木改一下按鍵跟方向，這次的遙控貓咪就完成囉～


※ 請注意，上面的動畫只完成上下按鍵的程式，左右的程式要同學自己完成喔！完整的程式可以參考:point_right:[老師的範例](https://scratch.mit.edu/projects/709348602/)

<hr>

同學們，我們準備關電腦下課囉～
咦？怎麼我要關掉瀏覽器的時候跑出這個「對話盒」(Dialog Box) 呢？


我很想告訴你，但是時間超過 5 分鐘了，我們先點左邊的離開按鈕，讓瀏覽器順利關閉。然後把這個問題放在心裡，猜一下答案，我們下次公布答案！