mBlock積木式設計程式
Revised on September 22, 2019
 程式設計概論
 mBlock操作介面
 mBlock指令積木
 設計打磚塊遊戲
 設計猜數字遊戲
 設計取物遊戲
 擴充網路傳輸指令
 使用某種程式語言,根據你的想法,完成特定工作
 找出年紀最小的同學?
 兩兩比對生日,年紀小的繼續兩兩比對
 分成幾組,先找出各組年紀最小的同學,再出來比對
 設臨界值篩選,調整臨界值再篩選
 …
程式設計概論 1/6
2
可使用不同的程式語言 可用不同的方法 滿足功能需求
 積木式程式設計
 透過拖曳、組合各種「指令積木」就能完成程式
 初學者可專注於訓練邏輯思考,不用費時學習語法
程式設計概論 2/6
3
按下按鈕
 三種基本程式邏輯
 循序 (sequence)
依先後順序,⼀個步驟接著⼀個步驟依序執⾏
程式設計概論 3/6
4
 反覆 (iteration)
部分解題步驟需要反覆執⾏,直到符合或是不符合某⼀條件式時,才會離
開重複執⾏的部份;也常被稱為「迴圈 (Loop)」
程式設計概論 4/6
5
 分支選擇 (branch)
依據不同的條件值,選擇不同的解題步驟執⾏
程式設計概論 5/6
6
 訓練邏輯思考能力
 Blockly Games
 https://blockly-games.appspot.com/?lang=zh-hant
 Code Studio
 https://studio.code.org/courses
程式設計概論 6/6
7
 下載mBlock安裝程式
 http://www.mblock.cc/
 執⾏所下載的安裝檔
 選擇安裝語言,其餘使用預設值安裝即可
安裝mBlock IDE
8
mBlock操作介面
9
舞台區
角色區
舞台背景區
程式作業區
(會隨作業項目頁籤切換)
作業項目頁籤(程式作業/造型作業/音效作業)
工具列
 讓角色展演程式動作的空間 (動畫場景)
 每個角色依據程式區的指令積木組合 (腳本),展現腳本的執⾏結果
 舞台大小480*360,正中央為座標中心點
舞台區 1/2
10
(0, 0)
(0, 180)
(0, -180)
(-240, 0) (240, 0)
執行程式
停止執行程式切換為全螢幕顯示
中心點
 切換小舞台
 選單命令「編輯>小舞臺佈置」
 隱藏舞台
 選單命令「編輯>隱藏舞臺模式」
舞台區 2/2
11
 預設為空白背景
 新增舞台背景方式
 選擇背景
由背景範例庫中選擇新背景
 畫新背景
自己繪製背景
 上傳背景檔案
 從相機擷取新背景
編輯舞台背景 1/2
12
新增舞台背景
 切換到背景頁籤
編輯舞台背景 2/2
13
刪除背景
背景來源
繪圖工具
調色盤
 切換到音效頁籤
 新增音效方式
 從音效庫中選擇音效
 使用麥克風錄製音效
 上傳音效檔案
編輯舞台音效
14
音效來源
刪除音效
播放時間
調整音效效果
錄音
 管理程式專案中所有的角色 (如同拍電影時演員人物或道具等)
 點擊角色左上角 圖示變更角色的屬性
 新增角色方式
 從角色倉庫中選擇裝扮
 畫新角色
 上傳角色檔案
 從相機擷取新角色
 每⼀角色可以擁有多個造型 (分鏡動作)
 可為每個角色分別撰寫腳本程式
角色區
15
 每個角色可擁有多張圖片,每張圖片稱為「造型」
編輯角色造型
16
設定造型中心 (即角色座標參考點)
顯示比例
造型名稱
造型來源
刪除造形
繪圖工具
調色盤
 每個角色可加入自己的聲音資源
 由音效庫中選擇音效
 使用麥克風錄製音效
 上傳音效檔案
編輯角色音效
17
音效來源
刪除音效
播放時間
調整音效效果
錄音
 方便對舞台上角色進⾏下列操作
 複製
 刪除
 放大
 縮小
 複製/刪除作業方式
 選取工具後,點擊所要作業的角色
 放大/縮小作業方式
 選取工具後,點擊角色,每點擊⼀次就作用⼀次
工具列
18
複製 放大
刪除 縮小
 以滑鼠拖曳指令積木到程式區組合即可
 刪除指令積木
 將指令積木拉曳回積木區
 指令積木快顯功能表>刪除
 複製指令積木
 指令積木快顯功能表>複製
程式區
19
 指令積木共分十大類,並以顏色區分
指令積木
20
 控制角色的移動、方向、旋轉及位置
動作指令積木 1/2
21
使角色移動指定的位移 (預設值10步,即10單位)
使角色順時針旋轉,預設旋轉15度
使角色逆時針旋轉,預設旋轉15度
使角色面向指定方向
使角色面向滑鼠游標或其它角色的位置
使角色移動到指定位置
使角色移動到滑鼠游標或其它角色的位置
使角色在指定時間內移動到指定位置
使角色x座標改變指定值
將角色x座標重設為指定值
使角色y座標改變指定值
將角色y座標重設為指定值
動作指令積木 2/2
22
設定角色碰到邊界時自動反彈
設定角色旋轉方式
取得角色x座標值;勾選時,會在舞台上顯示座標值
取得角色y座標值
取得角色方向值
 使M-Panda角色在舞台上左右移動
Lab 動作指令應用練習
23
 控制角色造型、特效、大小、文字顯示等
外觀指令積木 1/2
24
以說話框顯示指定訊息n秒鐘 (預設值2秒)
以說話框顯示指定訊息
以思考框顯示指定訊息n秒鐘 (預設值2秒)
以思考框顯示指定訊息
設定角色為顯示模式
設定角色為隱藏模式
設定角色造型
設定角色使用下一個造型
設定舞台背景
調整角色特效值,包括顏色、魚眼、旋轉、濾鏡等
設定角色特效值
將所有特效清除
外觀指令積木 2/2
25
調整角色大小
以百分比調整角色大小
將角色移到最上層
將角色上下移動n層次
取得角色的造型編號
取得舞台的背景名稱
取得角色的大小
 切換M-Panda角色造型來產生走路動畫
Lab 外觀指令應用練習
26
 播放聲音,可指定音符、節拍、音量,直接彈奏出樂曲
聲音指令積木
27
播放指定音效
播放指定音效,播放完畢才會往下執行
中止音效播放
以選定的打擊樂器播放指定拍數
音效暫停撥放n拍
播放指定的音符n拍
指定撥放樂器
調整音量大小
以百分比調整音量大小
取得目前音量設定值
改變節奏速度
設定節奏為每分鐘n拍
取得目前節奏設定值
 加上腳步聲及延遲,使角色走路動畫更自然
Lab 聲音指令應用練習
28
 設定繪圖顏色、大小等進⾏繪圖工作
畫筆指令積木
29
清除舞台上的所有繪圖輸出
將角色印製一份在舞台上
將角色畫筆放下,角色移動時即可繪圖
將角色畫筆提起,因此角色移動時並不會繪圖
設定畫筆顏色為目前滑鼠指標取様顏色
調整畫筆顏色值
設定畫筆顏色值
變更畫筆的亮度
設定畫筆的亮度
變更畫筆的粗細
設定畫筆的粗細
 徒手畫軌跡
Lab 畫筆指令應用練習
30
 建立變數及清單來儲存資料
自訂資料 1/2
31
變數名稱
變數指令積木
自訂資料 2/2
32
清單指令積木
清單名稱
 徒手畫軌跡,按空白鍵時貓熊自動沿著軌跡移動
 角色
 Pencil
 M-Panda
 設定旋轉屬性為左右
Lab 自訂資料應用練習 1/3
33
 自訂變數
 軌跡點
 自訂清單
 軌跡x座標
 軌跡y座標
Lab 自訂資料應用練習 2/3
34
 Pencil程式碼  M-Panda程式碼
Lab 自訂資料應用練習 3/3
35
 建立新指令 (副程式)
自訂指令積木 1/2
36
點擊加入指令參數
輸入積木指令名稱
 建立新指令 (副程式)
自訂指令積木 2/2
37
編輯指令內容
 以副程式方式播放下課鐘聲
Lab 自訂指令積木應用練習
38
 設定特定事件發生時所要執⾏的程式
事件指令積木
39
按一下舞台區右上角綠旗時觸發執行
按下指定按鍵時觸發
放開指定按鍵時觸發
滑鼠點選角色時觸發
當舞台切換為指定背景時觸發
當選單事項大於指定值時觸發
收到指定訊息時觸發
送出廣播給所有角色
送出廣播給所有角色並等待
 功夫熊猫與爆走企鵝對話
 角色
 M-Panda
 Penguin
Lab 事件指令應用練習 1/2
40
 M-Panda程式碼  Penguin程式碼
Lab 事件指令應用練習 2/2
41
 設定程式流程控制,如判斷、迴圈等
控制指令積木 1/2
42
等候指定時間才繼續執行
重複執行指定次數
不停重複執行
當條件成立時就執行
當條件成立時執行A,不成立時執行B
等待指定條件成立時才繼續執行
重複執行直到指定條件成立
中斷程式執行
控制指令積木 2/2
43
製造角色分身時執行
製造指定角色的分身
刪除角色分身
 讓角色在舞台上左右走動60次
 建立step變數  M-Panda程式碼
Lab 控制指令應用練習
44
 判斷角色是否發生特定狀況
偵測指令積木 1/2
45
偵測是否碰到滑鼠或邊緣
偵測是否碰到指定顏色
偵測兩種顏色是否碰撞
取得角色與選單項目之距離
顯示問題並等待使用者輸入答案
勾選時,會在舞台上顯示使用者輸入的答案值
偵測指定按鍵是否被按下
偵測滑鼠鍵是否被按下
取得滑鼠的x座標
取得滑鼠的y座標
取得麥克風音量值
取得視訊影像變化值,高數值表示影像變化越快
開啟或關閉視訊影像做為舞台背景
設定視訊影像透明度
偵測指令積木 2/2
46
取得時間計數值
將時間計數值歸零
取得角色或舞台相關屬性值
取得目前時間值
取得從2000年1月1日到今天的天數
 讓角色在舞台上來回走動,碰到邊緣時,顯示訊息
Lab 偵測指令應用練習
47
 進⾏運算式操作,例如取得亂數、數值運算、字串運算等
運算指令積木 1/2
48
將兩數相加
將兩數相減
將兩數相乘
將兩數相除
在兩數之間隨機取一個亂數
是否第一數小於第二數
是否第一數等於第二數
是否第一數大於第二數
是否兩個條件同時成立
是否兩個條件至少一個條件成立
是否條件不成立
運算指令積木2/2
49
將兩個字串合併
取得字串中的第n個字元
取得字串長度
將數值轉成字串
取得兩數相除之餘數
將數值四捨五入
取得數值之函數值
 讓球在舞台上彈跳
 刪除m_Panda,加入Soccer Ball
 調整球大小約為40*40
Lab 運算指令應用練習
50
 機器人模組下為依據「控制板」選單及「擴充」選單設定而衍生的控
制指令
機器人模組指令積木
51
 玩家使用滑鼠引導蝙蝠飛⾏,巫婆會自動追蝙蝠,躲避巫婆超過20秒
即過關
綜合練習I -巫婆追逐戰 1/4
52
 程式流程
綜合練習I -巫婆追逐戰 2/4
53
巫婆 蝙蝠
 設計舞台
 刪除貓熊角色
 加入desert背景
 新增Bat、Witch角色,調
整角色至適當大小
 將巫婆及蝙蝠旋轉方式設為
左-右
綜合練習I -巫婆追逐戰 3/4
54
 Witch程式碼  Bat程式碼
綜合練習I -巫婆追逐戰 4/4
55
 噴火龍會隨機噴射火焰,玩家要利用鍵盤向上鍵讓小女孩跳躍以躲避
火焰攻擊,當小女孩被擊中5次後結束遊戲
綜合練習II - 女孩鬪火龍 1/7
56
 程式流程
綜合練習II - 女孩鬪火龍 2/7
57
女孩 噴火龍 火焰
開始
跳躍動畫
女孩初始狀態
按向上鍵碰到火焰
碰到火焰5次
是否
否
否
結束
是
是
 設計舞台
 刪除貓熊角色
 加入woods背景
 新增Dragon、Ballerina、
Fire角色,調整角色至適當
大小
綜合練習II - 女孩鬪火龍 3/7
58
 建立變數
 firing 記錄是否噴火中
 hit 記錄玩家被擊中次數
 Ballerina角色建立jump積木指令
綜合練習II - 女孩鬪火龍 4/7
59
 Ballerina程式碼
 當按下向上鍵,執⾏jump  jump副程式
綜合練習II - 女孩鬪火龍 5/7
60
 火焰擊中作業
綜合練習II - 女孩鬪火龍 6/7
61
 Dragon程式碼  Fire程式碼
綜合練習II - 女孩鬪火龍 7/7
62
綜合練習III - 打磚塊遊戲 1/6
63
 設計舞台
 刪除貓熊角色
 畫新角色
 名稱block
 ⻑方形 75 * 30
 4種顏色造形
綜合練習III - 打磚塊遊戲 2/6
64
以左上角為造形中心點
 畫新角色
 名稱ball
 圓形 25 * 25
 藍色
 畫新角色
 名稱bar
 圓形 60 * 10
 黑色
 在背景底部畫⼀條⽔平紅線
綜合練習III - 打磚塊遊戲 3/6
65
 bar程式碼
綜合練習III - 打磚塊遊戲 4/6
66
 block程式碼
綜合練習III - 打磚塊遊戲 5/6
67
 ball程式碼
綜合練習III - 打磚塊遊戲 6/6
68
 由電腦隨機產生⼀組4位數不重複的數字
 玩家輸入猜測值後自動比對數字並顯示xAxB提示,A表示數值與位置
都正確;B表示數值正確,但位置不正確
綜合練習IV - 猜數字遊戲 1/7
69
正確答案7428
猜測值1234
提示0A2B
 程式流程
綜合練習IV - 猜數字遊戲 2/7
70
 建立變數
 A 儲存比對結果
 B 儲存比對結果
 answer 儲存答案值
 guess 儲存使用者猜測值
 i 計數用
 j 計數用
綜合練習IV - 猜數字遊戲 3/7
71
 建立清單
 hint 儲存猜測值及提示
 numbers 提供亂數產生答案用
綜合練習IV - 猜數字遊戲 4/7
72
 主程式
 產生答案值
 讀取使用者輸入猜測值
 比對並顯示結果
綜合練習IV - 猜數字遊戲 5/7
73
 gen_answer副程式
綜合練習IV - 猜數字遊戲 6/7
74
 check副程式
綜合練習IV - 猜數字遊戲 7/7
75
 遊戲規則
 桌上有⼀堆桔⼦ (20~25亂數取值)
 玩家與電腦輪流拿取桔⼦,每次最少拿⼀顆,最多拿N顆(3~5亂數取值)
 拿到最後⼀顆桔⼦者為輸家
 猜拳決定誰先拿
綜合練習V - 取物遊戲 1/13
76
 怎麼拿才會贏?
 以最多拿3個為例
 拿取數 = (總數-1)取(最大拿取數+1)之餘數
 take = (total-1) % (max_take+1);
 如果計算結果為0則隨機取1~max_take
綜合練習V - 取物遊戲 2/13
玩家 1 2 3
電腦 1~3 1~3 1~3
一個回合 2,3,4 3,4,5 4,5,6
77
1
2 3 4
1 2 3
5 6 73 4
1 2 1
2
3 1 2 3
3
1
2 3
 猜拳畫面
綜合練習V - 取物遊戲 3/13
78
 變數  裁判角色積木指令
綜合練習V - 取物遊戲 4/13
79
 電腦角色造型  電腦角色程式碼
綜合練習V - 取物遊戲 5/13
80
 玩家角色造型  玩家角色程式碼
綜合練習V - 取物遊戲 6/13
81
 桔⼦角色造型(1~30)  桔⼦角色程式碼
綜合練習V - 取物遊戲 7/13
82
 裁判角色程式碼
 開始執⾏猜拳
綜合練習V - 取物遊戲 8/13
83
 檢查猜拳結果
綜合練習V - 取物遊戲 9/13
84
 取物遊戲畫面
綜合練習V - 取物遊戲 10/13
85
 取物遊戲
 初始設定及遊戲迴圏
綜合練習V - 取物遊戲 11/13
86
 玩家回合作業
綜合練習V - 取物遊戲 12/13
87
 電腦回合作業
綜合練習V - 取物遊戲 13/13
88
 由mBlock擴充選單,選取Communication
擴充網路傳輸指令 1/5
89
 建立網路連線
 選單命令「連接>網路連接」會自動列出同網段之mBlock
 點選所要連線之IP
擴充網路傳輸指令 2/5
90
 程式區>機器人模組>通訊
擴充網路傳輸指令 3/5
91
收到傳輸資料時觸發
檢查有沒有收到資料
比對是否收到指定資料
讀取一行資料
送出一行資料
送出「var=value」字串
讀取var對應的value值
清空傳輸佇列
 使用 及
 傳送端  接收端
擴充網路傳輸指令 4/5
92
 使用
及
 傳送端
 接收端
擴充網路傳輸指令 5/5
93
 程式基本邏輯
 循序、迴圏、分支選擇
 mBlock IDE
 mBlock指令積木
複習
95

mBlock積木式設計程式