---
# System prepended metadata

title: '捲耳貓 Scratch 教學內容 [3]：滑板小遊戲'

---

# Scratch 03: 滑板小遊戲

###### tags: `捲耳貓兒童程式創作學苑`, `Scratch`


📅 Update date: 2024-02-09

## 1. 選擇背景
在 backdrop 中，選擇內建的圖片
例如: 【Mural（壁畫）】
　
PS: 若要自己的圖片
可上傳一張 460 (寬) x 360 (高) 的圖片
　
　![image](https://hackmd.io/_uploads/rJDJLbqqT.png)

## 2. 上傳【滑板】（[雲端連結](https://drive.google.com/drive/folders/1TSsCBHk4JJxakzMyxbzrLV2FMOu0SoIs?usp=drive_link)）
![image](https://hackmd.io/_uploads/rJb-w-5qp.png)
　
上傳後，請把【滑板】的【Size】改為 70 

## 3. 選擇【主角】，例如：Ben
　
　![image](https://hackmd.io/_uploads/BJKvu-9c6.png)
　
之後，請調整【Direction】的數值，讓 Ben 雙腳平行
　
　![image](https://hackmd.io/_uploads/HkRs9-q5a.png)

## 4. 遊戲開始時
(1) 把【主角】放在正中央
　![image](https://hackmd.io/_uploads/Sy1Ws-c9a.png)
　
(2) 讓【滑板】貼齊主角的雙腳
　![image](https://hackmd.io/_uploads/ryaFobq5a.png)

## 5. 讓【滑板】從左到右跑
### 5-1. 將【滑板】的 x 改成 -200
　 滑板就會從很左邊的地方出現
　![image](https://hackmd.io/_uploads/r1inhb5ca.png)
　
### 5-2. 設定【滑板】的 x（左右位置）
　 從 -200（畫面左邊）逐漸增加到 200（畫面右邊）
　 可以這樣寫：
　![image](https://hackmd.io/_uploads/S10C6b5qT.png)
　
　 如此一來，滑板就會自動從左跑到右
![錄製_2024_02_02_14_41_20_170](https://hackmd.io/_uploads/HJZ-Jf9cT.gif)

## 6. 讓【主角】跳躍
分解【跳躍】的步驟：【往上 >> 停滯 >> 往下】
　 因此，可以這樣寫
　 ● 先分 6 次：每次 y + 10（往上移動 10 點）
　 ● 切換成【跳起來的造型】（ben-b）
　 ● 等待 0.2 秒（在空中停留）
　 ● 再分 6 次：每次 y - 10（往下移動 10 點）
　 ● 切換成【原本的造型】（ben-a）
　
　PS:
　分六次的用意是：看起來比較自然
　如果直接讓 y + 60
　主角會【突然移動】，畫面看起來不太流暢
　
　程式如下：
　![image](https://hackmd.io/_uploads/B13wMf59p.png)
　
　效果如下：
![6-2](https://hackmd.io/_uploads/SkJsrz99T.gif)

## 7. 讓主角上板
### 7-1. 遊戲 – 流程設計
首先，滑板已經有了固定的路線（x 從 -200 逐漸增加到 200）
我們想讓主角
```
當【跳躍：落地】時
如果【主角有碰到滑板】，就【上板】
```
之後
```
【主角跟著滑板跑】
=> 【主角的 x】設為【滑板的 x】
且 【主角的 y】設為【滑板的 y】
```
但要注意：
```
在 主角 的程式編輯區，只能知道「主角 的位置」
如果想知道「滑板（其它物件）的位置」
必須使用到「全域變數 (global variable)」
```
　
### 7-2. 請在【滑板】新增 Variable: X、Y
注意：For all sprites 一定要選
　![image](https://hackmd.io/_uploads/SJ2thzqqp.png)
　
　![image](https://hackmd.io/_uploads/r1EYAf59T.png)
　
### 7-3. 請在【滑板】新增這段程式
當遊戲開始
隨時都會更新 X、Y，讓主角知道滑板的位置
　![image](https://hackmd.io/_uploads/Sy8UKMcc6.png)
　
### 7-4. 請在【主角】新增【藍色框】的這段程式
當遊戲開始
隨時都會更新 X、Y，讓主角知道滑板的位置
　![7](https://hackmd.io/_uploads/Bk8aZ795a.png)
　效果如下
　![7](https://hackmd.io/_uploads/H1zsmXcq6.gif)

## 8. 透過左、右方向鍵，控制滑板移動
請在【滑板】新增這段程式
![image](https://hackmd.io/_uploads/rJNJdQqqa.png)

## 9. Bug: 下不了滑板 😨
● 抓準時機【按下空白鍵】可以上板
● 按下方向鍵的【左】可以讓滑板和主角往左滑行
● 按下方向鍵的【右】可以讓滑板和主角往右滑行
● 但是，【再次按下空白鍵】卻 **無法跳躍，也無法下板**

### Sol: 用條件的迴圈，取代無窮迴圈
請先點選【主角】
看看剛剛寫的這段程式碼，出了甚麼問題？
![deaad loop](https://hackmd.io/_uploads/rJLio799T.png)
　
「**forever**: 跟隨滑板」是「無窮迴圈」
會讓【主角永遠跟隨滑板】
改用條件式迴圈 **repeat until**
條件是：【當再次按下 space】，就離開迴圈（主角不再跟著滑板移動）
　
如此一來，就能再次按下空白鍵下板了 😸

## 10. Bug: 當玩家已經在滑板上，第二次按下空白鍵，落地的時候「沒有跳」
### 10-1. 原因和解法
【repeat util 迴圈】結束的時候，需要再「跳躍」一次
但上述的程式離開迴圈後，就沒做任何事
　
因此，解決方式如下
●　把「跳躍」獨立出來，塞進一個 block
●　當按下【空白鍵】（第一次），執行「跳躍」（第一次）
●　碰到板子、上板之後
　 如果按下【空白鍵】（第二次），執行「跳躍」（第二次）
　
### 10-2. 【主角】：新增 Block
先新增一個 Block 名為【跳躍】
![image](https://hackmd.io/_uploads/Sk1lW4cqT.png)
　
### 10-3. 【主角】：修改 code　
把跳躍的相關程式碼，拖曳到【Define: 跳躍】
![10](https://hackmd.io/_uploads/B1YwMV99T.png)
　
之後，修改成下面的樣子
![image](https://hackmd.io/_uploads/ByWrmE996.png)

### 10-４. 執行結果
![10](https://hackmd.io/_uploads/ByigrE5ca.gif)

## 11. 繼續優化
### 11-1. 當玩家按下空白鍵後「沒上板」就提示
先點選【主角】，進到主角的 code 編輯區
　
![11-1](https://hackmd.io/_uploads/S1BRfKh5a.png)
　
之後，找到 ①：【按下空白鍵】的 **事件**
　
找到 ②：【if 碰到滑板】的 **條件句**
請把【if】換成【if - else】
並【if - else】底下加入 ③ 的 **提示訊息**

### 11-2. 讓玩家透過 上、下 方向鍵，控制【滑板方向】
請在【主角】和【滑板】的遊戲開始事件
**都加上**【方向設為 90】的積木
![image](https://hackmd.io/_uploads/rJv0BYhq6.png)
　
之後，請在【滑板】程式加上這兩段敘述
● 當 ▲ 被按下：角度 -10 ↺ 
● 當 ▼ 被按下：角度 +10 ↻
![image](https://hackmd.io/_uploads/SkiYXq35p.png)
　
最後，請在【主角】程式加上這段敘述（下圖的黑圈圈部分）
● 當【下板】並【跳躍】之後：重設主角的方向為 90
![image](https://hackmd.io/_uploads/rycgS929a.png)

### 11-3. 讓玩家透過 WASD 鍵，控制【主角方向】
請在【玩家】程式加上 W、A、S、D 四個事件的敘述
● 當【按下 w】，往上走【10】
● 當【按下 a】，往左走【10】
● 當【按下 s】，往下走【10】
● 當【按下 d】，往右走【10】

![image](https://hackmd.io/_uploads/HJxqLq25T.png)

## 12. Bug: 為何主角只會左右滑行呢？
我們在【步驟 11-2】加了 Direction 
應該可以做【左上、左下、右上、右下】滑行
但目前只有【左、右】滑行這兩種玩法
原因是：主角的程式
![image](https://hackmd.io/_uploads/HkuL5qh56.png)
先前為了方便
只讓主角的 x 在 -200（左）～ 200（右）之間
但是，現在我們有了方向（Direction）
上面的程式可以改成下面這樣：
![image](https://hackmd.io/_uploads/SJk2i9h5T.png)
