2014 Scratch 研習講義目錄 - WordPress.com€¦ · 六、Scratch 1.4與2.0差異: Scratch...
Transcript of 2014 Scratch 研習講義目錄 - WordPress.com€¦ · 六、Scratch 1.4與2.0差異: Scratch...
![Page 1: 2014 Scratch 研習講義目錄 - WordPress.com€¦ · 六、Scratch 1.4與2.0差異: Scratch 2.0的模塊分組由1.4的8組變成了10組。同時也增加了一些新的功能塊,包括:](https://reader033.fdocuments.us/reader033/viewer/2022052019/60332618149b4004dc604f0c/html5/thumbnails/1.jpg)
2014 Scratch 研習講義目錄
壹、前言 ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
一、scratch 可以學習到什麼?
二、對 Scratch 教學的看法:
三、名稱由來:
四、Scratch 字體修改
五、註冊:
六、Scratch 1.4 與 2.0 差異:
貳、操作環境 ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
一、操作介面
二、舞台:
三、角色
四、繪圖編輯器(插圖 20) 五、積木程式拖移、清除與複製
參、運動 ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
肆、聲音與特效 .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
一、特效:
二、圖層(layer)
三、聲音
伍、程序與廣播 .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
一、廣播
二、結構化處理
三、程序中輸入參數
四、分而治之(divide and conquer)
陸、變數 .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
一、變數類型
二、變數的運用
三、建立變數
四、變數的顯示方式
柒、決策與分支 ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
2014 scratch研習講- 1
![Page 2: 2014 Scratch 研習講義目錄 - WordPress.com€¦ · 六、Scratch 1.4與2.0差異: Scratch 2.0的模塊分組由1.4的8組變成了10組。同時也增加了一些新的功能塊,包括:](https://reader033.fdocuments.us/reader033/viewer/2022052019/60332618149b4004dc604f0c/html5/thumbnails/2.jpg)
一、比較運算子
二、if 區塊
三、if/else 區塊
四、巢狀式 if/else 區塊
五、Switch 處理
六、邏輯運算子
捌、迴圈... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
一、意義
二、重複執行...直到
三、無窮迴圈..如果區塊
四、停止區塊
五、巢狀迴圈
六、遞迴
玖、列表(list)... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
一、列表說明
二、建立列表
三、積木群功能
四、存取列表中的項目內容
五、檢查是否在列表中
六、動態的列表
拾、字串... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
一、字串處理
二、從字串中搜尋指定的字
三、字元比較應用(迴文)
四、字元搬移
五、字元重新組合
拾壹:發佈... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
一、作品發表:(1.4 版)
二、sb 轉成 exe
2014 scratch研習講- 2
![Page 3: 2014 Scratch 研習講義目錄 - WordPress.com€¦ · 六、Scratch 1.4與2.0差異: Scratch 2.0的模塊分組由1.4的8組變成了10組。同時也增加了一些新的功能塊,包括:](https://reader033.fdocuments.us/reader033/viewer/2022052019/60332618149b4004dc604f0c/html5/thumbnails/3.jpg)
2014 Scratch 研習講義
壹、前言
一、scratch 可以學習到什麼?
1.學習到運算的核心概念,如迭代與條件
2.設計的程序
想法→工作模型→進行實驗→除錯與回饋→修正,整個行程一種螺旋
3.專案設計:整合許多 21世紀學習技巧這將是未來成功的關鍵
4.創造性思維,清晰的交流,系統地分析,有效地合作,反覆設計,不斷地學習。
5.建立 scratch專案有助於學生開發更深層次的數位技術,也就是說學習與電腦互動與建立互
動。
6.學習程式設計不是要成為程式設計師而是讓學生更完整與創新來表達自己,協助他們以邏輯
思考者來開發並協助他們了解他們每日生活中遇到新的運作技術。
二、對Scratch教學的看法:
1.了解學生的特點與學習者接收能力
MIT的 Scratch研究團隊開始的初衷就不希望把 Scratch語言複雜化,以免引起兒童的恐
懼心理,因此有些高階程序如函數、遞歸程序…等不建議使用。
2.「簡潔的語句和複雜的使用」需要謹慎:
雖然程式要求要簡潔,但在小學生理解起來還有一定的難度的。一開始不要求複雜設計,
以能將學生想法表達出來即可,即使設計上是非常簡單與拙劣。
3.使用上不要著重軟體本身,而是要利用這個軟體能為我們做什麼?
教學重心不要放在程式積木本身,而是利用這些程式積木能解決什麼,提升解決問題的
能力。
4.如果可能儘量將角色造型提供給學生,或是用簡單造型即可。
畢竟是在學習 Scratch而不是學習如何畫圖。當然學生能夠利用繪圖軟體做創建新造型
當然最好,但不必要將重心轉移其他軟體上。
5.鼓勵學生分組創作:
學習如何面對專案時如何分工、如何將共同想法表達出來,造型要如何設計,出常順序是如何
…達到合作學習的目標。
三、名稱由來:
這個名字括痕來源於使用的嘻哈光盤刮傷技術,在一般人的印象當中,常見“DJ”常常會把
手放在唱盤(turntable)上的黑膠唱片(LP)來回刷動,另一隻手在混音器(mixer)上的
CROSS FADER(控制左右唱盤的聲音)反復不停地切換。其實這種動作正確名稱叫做
“Scratch”。MIT的 Scratch名稱就是取其變化性而命名。
四、Scratch 字體修改
1.開啟/usr/share/scratch/locale/zh_TW.po
2.打開該檔後:
修改字體大小:
2014 scratch研習講- 3
![Page 4: 2014 Scratch 研習講義目錄 - WordPress.com€¦ · 六、Scratch 1.4與2.0差異: Scratch 2.0的模塊分組由1.4的8組變成了10組。同時也增加了一些新的功能塊,包括:](https://reader033.fdocuments.us/reader033/viewer/2022052019/60332618149b4004dc604f0c/html5/thumbnails/4.jpg)
msgid "Font-Scale"
msgstr "1.2"
將 1.2改為 1.5大小
msgid "Linux-Font"
msgstr "uming"
uming 改為需要字體
3.存檔
五、註冊:
先到 http://scratch.mit.edu/
step1:點選右上角『加入 Scratch』:(插圖 1)
step2:填入帳號與密碼,按下一個(插圖 2)
step3:設定生日、性別、國家與 e-mail,『OK,let's go!』
完成註冊
六、Scratch 1.4 與 2.0 差異:
Scratch 2.0的模塊分組由 1.4的 8組變成了 10組。同時也增加了一些新的功能塊,包括:
• 動作區塊:
設置旋轉模式: 在 1.4版本中,旋轉模式只能在設
計過程中設置,在運行時是不能改變的。而在 2.0中,可以
在運行過程中動態設置。
• 外觀區塊:
外觀區塊中新增了 2個區塊分別是:(插圖 3)
• 聲音區塊:
沒有變化,但是樂器類型少了很多。
• 畫筆區塊:
沒有變化
• 資料區塊:
由原來的「變數」區塊改名而來。新的變數可以永久保存在伺服器上
(稱之為雲端變數)。(插圖 4)
新增顯示與隱藏列表的程式:(插圖 5)
• 事件區塊:
2014 scratch研習講- 4
插圖 1
插圖 2
插圖 3
插圖 4
插圖 5
![Page 5: 2014 Scratch 研習講義目錄 - WordPress.com€¦ · 六、Scratch 1.4與2.0差異: Scratch 2.0的模塊分組由1.4的8組變成了10組。同時也增加了一些新的功能塊,包括:](https://reader033.fdocuments.us/reader033/viewer/2022052019/60332618149b4004dc604f0c/html5/thumbnails/5.jpg)
並在原來的基礎上新增了兩個 block:
當背景切換時(插圖 6)
檢測音量值/視訊動作/計時器(插圖 7)
• 控制區塊:
將原來的停止執行此程式, 全部停止 兩個區塊合併成了一個,並新增了停止出場角
色的其它程式,(插圖 8) 同時,在控制模塊中還新增了三個與複製有關的區塊,分別是
(插圖 9)
• 偵測區塊:(傳感器區塊)
原來在 1.4版本中的有關外部傳感器/遠程傳感器模塊暫時不可用
(插圖 10)
新增的模塊包括:(插圖 11)
• 時間新增:(插圖 12)
運算符區塊(數字和邏輯運算),新增如下:(插圖 13)
• 更多積木/新增積木指令
這個可以說是 Scratch 2.0在功能上最大的增強之一。在 Scratch
2.0中可以自定義自己的功能模塊,有點類似於其它程序設計語言
中的函數(function),它不帶返回值,只能在創建它的舞台或角色
中使用,不能在不同的角色中共享。(插圖 14)
貳、操作環境
一、操作介面
1.積木程式碼區,提供各種動作、判斷、迴圈、聲音、變數產生…程式碼。
2.程式區,由積木程式碼區拖入積木程式碼,控制角色或舞台所有行動走向。
2014 scratch研習講- 5
插圖 6
插圖 7
插圖 8 插圖 9
插圖 10
插圖 11
插圖 12
插圖 13
插圖 14
![Page 6: 2014 Scratch 研習講義目錄 - WordPress.com€¦ · 六、Scratch 1.4與2.0差異: Scratch 2.0的模塊分組由1.4的8組變成了10組。同時也增加了一些新的功能塊,包括:](https://reader033.fdocuments.us/reader033/viewer/2022052019/60332618149b4004dc604f0c/html5/thumbnails/6.jpg)
3.角色列表區
4.舞台區,所有角色都在此行動
5.旗標區,開始觸動與停止觸動
6.功能區
7.工具區
(插圖 15)
二、舞台:
寬度:480*360,以 x,y 軸分隔,座
標如同一般數學上所使用方式,正
中央座標為(0,0)
y軸 往上為正,往下為負
X軸 往右為正,往左為負
(插圖 16)
• 滑鼠游標位置:
由舞台右下方可以觀察到
• 切換為全螢幕:
右上角
• 舞台切換大小模式
三、角色
Scratch是由稱為角色(sprites)的物件所組成
• 角色新增:
1. 重新編置
2. 匯入圖樣
3. 隨機選取
• 角色改變:
可以藉由造型變來更換角色外觀
每個角色都有
• 『程式』(腳本):控制行動,可以在中間程式區看程式積木,程式區的動作可由左
邊積木程式拖入程式區域中即可。
• 『造型』:控制角色外觀
造型新增:重新繪製、匯入新圖樣或是由照像機匯入。
舊造型可以透過複製編輯等方式來改變其照型。
• 『聲音』:控制角色聲音。聲音的加入可以透過錄音或是既有的聲音做匯入。
(插圖 17)
• 角色刪除:
1. 在該角色按下右鍵選擇刪除
2. 或是使用剪刀工具在舞台處將角色『剪除』
• 角色瀏覽:
1. 角色列表:(sprite list)顯示專題中所有角色的縮圖,在縮圖下有其名稱。
2. 編輯角色:在角色串列的縮圖直接點選可以進入編輯,或是在舞台中選該角色按
兩下進入編輯。
3. 角色排列:以拖曳方式來排列角色串列。
2014 scratch研習講- 6
插圖 15
插圖 16
插圖 17
![Page 7: 2014 Scratch 研習講義目錄 - WordPress.com€¦ · 六、Scratch 1.4與2.0差異: Scratch 2.0的模塊分組由1.4的8組變成了10組。同時也增加了一些新的功能塊,包括:](https://reader033.fdocuments.us/reader033/viewer/2022052019/60332618149b4004dc604f0c/html5/thumbnails/7.jpg)
由於一開始所有角色會重疊在中心位置,如果想編輯重疊下方某一角色,又將該角色列在
上方。可以使用:『Shift』+在角色列表縮圖中點選該角色。
• 角色資訊:
目前角色資訊在中間欄位上方,如插圖 18:
可以看到:座標,方向、鎖住狀態與 pen 狀態
1. 新角色取名:直接填入輸入欄
2. 角色方向則表示:角色移動的方向當他在某一區塊中執行時(0=向
上、 90=向右 、 180=向下、 -90=向左)。縮圖中藍線則表示角色
方向,可以拖曳來改變其方向。
3. 點一下(LOCK)改變角色的鎖住狀態。一個未鎖住的角色能在與 web
player或全螢幕模下被拖曳,反之被鎖住則不能被拖曳。
在縮圖中點兩下來設定方向回歸原來設定(方向=90)
• 旋轉狀態:
• 點選旋轉狀態按鈕來控制造型如何出現成為角色當角色改變其方向。
• 旋轉:當角色改變方向時造型如何旋轉
• 左右對調造型面向左或右
• 不旋轉:造型從不旋轉(即使角色改變方向)
• 角色輸出:插圖 19
在舞台或是在串列中點選角色的右鍵,作為輸出成一個.sprite檔案方便輸入至其
他專案中使用。
四、繪圖編輯器(插圖20)
1.輸入圖片
2復原或重做
3.工具列
• 筆刷:以前景色可以自由畫,下方功能區可以選擇筆刷大小
• 橡皮擦:所擦過區域變為透明,下方功能區可以選擇橡皮擦大小
• 填滿:可填單一或是漸層顏色,下方功能區可以選擇單一顏色填滿、水平漸層、
垂直漸層、放射狀漸層。顏色是由前景色到背景色。
2014 scratch研習講- 7
插圖 18
插圖 19
插圖 20
![Page 8: 2014 Scratch 研習講義目錄 - WordPress.com€¦ · 六、Scratch 1.4與2.0差異: Scratch 2.0的模塊分組由1.4的8組變成了10組。同時也增加了一些新的功能塊,包括:](https://reader033.fdocuments.us/reader033/viewer/2022052019/60332618149b4004dc604f0c/html5/thumbnails/8.jpg)
• 矩形:填滿矩形或是畫框。下方功能區可以選擇填滿或畫框,框的大小由筆刷大
小決定。按住 shift 建拖曳滑鼠可畫出正方形。
• 橢圓:填滿橢圓或是畫橢圓框。下方功能區可以選擇填滿或畫框,框的大小由筆
刷大小決定。按住 shift 建拖曳滑鼠可畫出圓形。
• 畫線:以前景色畫線,下方功能區可以選擇線的粗細,按住 shift 建拖曳滑鼠可畫出
水平或垂直線。
• 文字:加入文字。下方功能區可以選擇字大小與字體,每一造型只能有一文字區
塊,拖曳左上角小方塊可以移動文字。
• 選取:矩形選取可以移動到新區域(按下 delete移除選取,shift=del或shift+空白鍵則
是複製
• 蓋章:選擇矩形範圍然後移動至欲複製位置點滑鼠左鍵複製至其他區域。按住
shift+拖曳可連續複製。
• 吸色管:吸取顏色為前景色
4.前景與背景互換
5.調色盤與前/背景顏色
6.設定造型中心點
7.放大縮小
8.將目前選取放大或縮小
9.順逆時針旋轉
10.上下或左右顛倒
11.工作區
編輯練習:
建立一個角色有四種造型(前後左右)(插圖21)
五、積木程式拖移、清除與複製
• 積木程式之拖移:
1. 要移動整個區塊,要從最頂端做拖移
2. 如果從中拖移則由所拖移積木程式以下將被拖移,以上則不動
3. 複製積木程式碼區塊,只要將整個區塊拖入某一角色縮圖即可,或是按下右鍵出現
選單,選擇複製則同一區塊則將複製。
• 積木程式之排列:
在 Script 區中按下右鍵出現如左,選擇『自動整齊排列』(插圖 22)• 積木程式之註解:
在 Script 區中按下右鍵出現如左,選擇『增加註解』,則多出輸入方
塊,在輸入註解內容。(插圖 23)• 積木程式轉圖:
在 Script 區中按下右鍵出現如左,選擇『將程式存成圖片』,轉出圖
形是 gif 格式,因此只需要填主檔名即可。
• 積木程式之清除:
在點選區塊按下右鍵選擇刪除即可刪除該區塊,或是拖入積木程式碼區。
2014 scratch研習講- 8
插圖 21
插圖 22
插圖 23
![Page 9: 2014 Scratch 研習講義目錄 - WordPress.com€¦ · 六、Scratch 1.4與2.0差異: Scratch 2.0的模塊分組由1.4的8組變成了10組。同時也增加了一些新的功能塊,包括:](https://reader033.fdocuments.us/reader033/viewer/2022052019/60332618149b4004dc604f0c/html5/thumbnails/9.jpg)
參、運動
Scratch 有四種絕對運動的命令:(插圖24)
例如某物在(0,0)位置,目標位置在(200,150)
可以使用(插圖25)
或者(插圖26)
或者(插圖27)
當物體在運動過程究竟是以何者為運動中心?
理論上是已物體中心為中心,但可以透過造型編輯器來改變中心位置,如下圖:(插圖28)
然而在 積木中究竟是以那一方向為運
動方動?
這就牽涉當初角色方向,可以透過角色資訊來
看出端倪。
舉例來說:
當箭頭一開始方向不同時,所畫出軌跡是不同
的。同樣程式碼,改變面向會有如下結果:(插圖
29)
因此如果運動過程中要改變角色面對
方向可以用 插圖 30來改變方向。
範例 1(exp7a 插圖 31)
範例二:隨意運動(貓抓球 exp8)
目標:
以滑鼠連結網球,貓隨時跑向網球並朝向球的位置(插圖 32)
貓角色:
指定在0.5秒內滑行到滑鼠的座標,同時面向滑鼠(插
圖 33)
2014 scratch研習講- 9
插圖 24 插圖 25
插圖 27
插圖 28
插圖 29 插圖 30
插圖 31 插圖 32
插圖 33
插圖 25
![Page 10: 2014 Scratch 研習講義目錄 - WordPress.com€¦ · 六、Scratch 1.4與2.0差異: Scratch 2.0的模塊分組由1.4的8組變成了10組。同時也增加了一些新的功能塊,包括:](https://reader033.fdocuments.us/reader033/viewer/2022052019/60332618149b4004dc604f0c/html5/thumbnails/10.jpg)
範例三:軌跡顯示(exp9)
• 角色在運動過程中不會留下軌跡,除非在程式碼中
有設定。
• 每一角色都有一支無形的筆,當放下筆時則會畫出
筆跡,反之提起筆則不會顯示筆跡。這枝筆可以設
定顏色、大小與亮度。(插圖 34)
• 通常處理程序是:
1. 一開始先清除所有舊筆跡
2. 設定筆的顏色與粗細
3. 放下畫筆顯示筆跡
4. 某段程式執行完後,提起畫筆。
• 本例子:
1. 按下方向鍵時,鸚鵡會轉向,同時
移動 10步
2. 按下 w鍵時增加畫筆粗細
3. 按下 n鍵時改變畫筆粗細
4. 按下 c鍵時改變畫筆顏色
鸚鵡角色:(插圖 35)
範例四:畫隨意多邊形(exp10)
• 畫任意多邊形處理程序如下:(插圖 36)
1. 邊數:是由畫多少邊形來決定
2. 移動步數:可任意決定
3. 旋轉角度:360/畫多少邊形
• 下面程式碼:
隨機畫出3~10邊的多邊形(插圖 37) • 箭頭角色:(插圖 38)
1. 設定隱藏,所以在畫過程中不會顯示
箭頭
2. 面向90度(朝右)
3. 初始位置:(-100,-100)
4. 清除舊筆跡,設定顏色與大小
5. 建立一個名為『邊數』的變數,在
3~10隨機取出一數作為邊數
6. 放下畫筆
7. 畫出邊長為 60的多邊形,每畫出一
邊則停留 1秒
8. 結束後則停筆
2014 scratch研習講- 10
插圖 34
插圖 35
插圖 36
插圖 37
![Page 11: 2014 Scratch 研習講義目錄 - WordPress.com€¦ · 六、Scratch 1.4與2.0差異: Scratch 2.0的模塊分組由1.4的8組變成了10組。同時也增加了一些新的功能塊,包括:](https://reader033.fdocuments.us/reader033/viewer/2022052019/60332618149b4004dc604f0c/html5/thumbnails/11.jpg)
範例五:畫花邊(exp11)
利用畫多邊技巧再加入一個迴圈可以造成花邊(插
圖 39)
下面例子:
先畫出正方形後,再旋轉 30度後重畫正方
形後,如此經過:360/30=12 次後將可得到一個花邊(插圖40)
範例六:印章複製(exp12)
• 印章可以用來將單一造型複製到指定位置,後面有許多例子都會用到印章功能。
• 底下介紹印章功能的例字,先在繪圖編輯器中畫出單一風車扇,待會兒會將其旋轉所
以需要設定旋轉中心。(插圖 41) • 先從造型編輯器中設定中心,設在旗杆下方中心處,然後複製繞滿一圈
• 風車扇角色:
1. 先清除所有舊筆跡
2. 中心點移到(42,25)
3. 大小設為 70%
4. 開始複製,每次旋轉45度,共 360/45=8次(插
圖 42)
2014 scratch研習講- 11
插圖 38
插圖 39
插圖 40
插圖 41
插圖 42
![Page 12: 2014 Scratch 研習講義目錄 - WordPress.com€¦ · 六、Scratch 1.4與2.0差異: Scratch 2.0的模塊分組由1.4的8組變成了10組。同時也增加了一些新的功能塊,包括:](https://reader033.fdocuments.us/reader033/viewer/2022052019/60332618149b4004dc604f0c/html5/thumbnails/12.jpg)
作業練習(polyshape_1)
請用前述的技巧做出如下圖形(插圖43)
主要程式碼如(插圖44)
範例七:圓與橢圓(circle)
公式:
x :a*cosθ
y :b*sinθ
如果:a=b則畫出是圓
a>b或 a<b則畫出是橢圓
其中θ代表角度,令
θ=1→θ=360(繞一圈) (插圖
45)
• 球角色: (插圖46)
初始化:
1.隱藏
2.設定三個變數 n=0,a與 b可 3.以自行設定,決定是
圓與橢圓
4.移到(-100,150)
5.清除舊筆跡
6.設定大小與顏色
重複執行(360次):
1.將 x,y座標移到
2.x:a*cosn
y:b*sinn
3下筆
4.變數 n加一
如果碰到邊緣則停止程式
2014 scratch研習講- 12
插圖 43 插圖 44
插圖 45
插圖 47
插圖 46
![Page 13: 2014 Scratch 研習講義目錄 - WordPress.com€¦ · 六、Scratch 1.4與2.0差異: Scratch 2.0的模塊分組由1.4的8組變成了10組。同時也增加了一些新的功能塊,包括:](https://reader033.fdocuments.us/reader033/viewer/2022052019/60332618149b4004dc604f0c/html5/thumbnails/13.jpg)
肆、聲音與特效
一、特效:
在執行過程中,可以將角色縮放、隱藏與顯示甚至可以產生一些特效,例如:
顏色、魚眼、鬼、旋轉、像素濾鏡、馬賽克、亮度
這些都可以在『外觀』積木群中找到。(插圖 47,48)
二、圖層(layer):
圖層的程式積木(插圖49)
每一角色都佔據一圖層,最上面是第 1層,越往下編號越大,理論上圖層順序是依照角色
列表的順序,越往右越往下圖層越是在上面,最下面是佈景。但有時在執行上圖層要上下移
動則需要用到『外觀』積木群中的『移到最上層』、『下移一層』,其中輸入為負值表示上
移。(插圖 50)
三、聲音
• 可以使用錄音或是輸入聲音檔。
• Scratch 能夠讀取 MP3檔或是解碼 WAV,AIF,AU檔案格式(以 8-bit或是 16-bit 作為取樣,但不
可以是24bit 取樣) (插圖 51)• 每一角色的聲音不能共用所以需獨立建立聲音檔。
2014 scratch研習講- 13
插圖 48
插圖 49
插圖 50
![Page 14: 2014 Scratch 研習講義目錄 - WordPress.com€¦ · 六、Scratch 1.4與2.0差異: Scratch 2.0的模塊分組由1.4的8組變成了10組。同時也增加了一些新的功能塊,包括:](https://reader033.fdocuments.us/reader033/viewer/2022052019/60332618149b4004dc604f0c/html5/thumbnails/14.jpg)
• 聲音的積木程式(插圖 52)
範例八:煙火(firework)
本範例可以學到如何在同一角色隨機選取不同的造型來做變化(插圖 53) • 目標:
1. 煙火角色共有八種造型,其中點造型是在發射過程中顯示
2. 爆炸時則由c1~c7中任選一種來顯示
3. 爆炸後煙火造型逐漸放大
4. 爆炸中需要音效
• 煙火角色:(插圖 54) 共重複執行 10次(共有 10次發射煙火)
1. 一開始切換到點造型,
2. X 座標在-240~240之間隨機選一數,Y座標固定在-200
3. 1秒內飛行到(-240~240之間隨機選一數,20~180之間隨機選一數)
4. 開始大小設為20%
5. 隨機切換 c1~c7中一種來顯示
逐漸將其放大
重複執行20次,每次增大 4%,停留 0.05秒再增大
2014 scratch研習講- 14
插圖 51
插圖 52
插圖 53
![Page 15: 2014 Scratch 研習講義目錄 - WordPress.com€¦ · 六、Scratch 1.4與2.0差異: Scratch 2.0的模塊分組由1.4的8組變成了10組。同時也增加了一些新的功能塊,包括:](https://reader033.fdocuments.us/reader033/viewer/2022052019/60332618149b4004dc604f0c/html5/thumbnails/15.jpg)
範例九:DISCO舞者(dancer)
本例將告訴你如何配樂、聲光效果與顏色的特效之綜合運用,有點複雜。(插圖 55) 目標:
1.2.隨時間顏色會變化(配合插圖 55 數字)
3.舞者前後移動有歌唱效果
4.產生如聚光燈之透光效果
加上背景音樂,營造出如同 DISCO效果
• 顏色燈角色:(插圖 56) 1. 初始化:大小設定:50%,位置移到(-10,120),清除所有特效
2. 重複執行:將顏色特效每次增加 1
• 舞者角色:(插圖 57) 初始化:大小設定:80%,位置移到(20,-20),清除所有特效,移到最上層
重複執行:
重複執行20次:
1. 移動 1步
2. 將魚眼特效每次增加 1(目的看起來像是吸氣唱歌樣子)
3. 下一個造型
重複執行20次:
1. 移動-1步
2. 將魚眼特效每次增加-1(目的恢復原狀樣子)
3. 下一個造型
• 聚光燈角色:(插圖 58) 初始化:大小設定:70%,位置移到
(-182,125),清除所有特效,鬼特效設為 30(半透
明狀)
重複執行:
1. 面向舞者
2. 等待 0.1秒
3. 每一次將顏色特效增加 10
2014 scratch研習講- 15
插圖 54 插圖 55
插圖 56
插圖 57
插圖 58
![Page 16: 2014 Scratch 研習講義目錄 - WordPress.com€¦ · 六、Scratch 1.4與2.0差異: Scratch 2.0的模塊分組由1.4的8組變成了10組。同時也增加了一些新的功能塊,包括:](https://reader033.fdocuments.us/reader033/viewer/2022052019/60332618149b4004dc604f0c/html5/thumbnails/16.jpg)
• 白板角色:(插圖 59) 初始化:大小設定:50%,位置移到(1,96),清除所有特效,圖層下移一層
重複執行:每一次將顏色特效增加 10
• 背景角色:廣播
• 在控制程式積木集有三種用來處理廣播
重複執行:播放 Medieval1 音樂,等待 9.5秒(約等於整個音樂時間)
伍、程序與廣播
一、廣播
在控制程式積木集有三種用來處理廣播(插圖 61)任何角色都可以廣播任何訊息給其他角色甚至是自己。一旦廣播後所有角色都會收到訊息,
但唯有 才會觸發動作(插圖 62)。
下圖說明:四個角色:海星、貓、青蛙、蝙蝠。當海星廣播『jump』訊息時,四個角色同時
都收到訊息,然而只有貓與青蛙才有反應。每一角色都有自己對『jump』反應處理程式。蝙蝠
也收到『jump』訊息,但沒有反應,因為沒有處理程式。貓對『jump』與『walk』有處理程式,
青蛙對『jump』有處理程式,蝙蝠對『fly』有處理程式(插圖 63)。
2014 scratch研習講- 16
插圖 59
插圖 60 插圖 61
插圖 62
插圖 63
![Page 17: 2014 Scratch 研習講義目錄 - WordPress.com€¦ · 六、Scratch 1.4與2.0差異: Scratch 2.0的模塊分組由1.4的8組變成了10組。同時也增加了一些新的功能塊,包括:](https://reader033.fdocuments.us/reader033/viewer/2022052019/60332618149b4004dc604f0c/html5/thumbnails/17.jpg)
像似 但不同的是它會等待所有訊息接受者已經完成
了區塊前才會繼續下一指令。
例如(square):
在舞台被點一下→廣播『畫方形』訊息,這時舞台所有角色都會接到這訊息,但唯有『當
收到畫方形』的角色才會有作用。(結果如插圖 65)
這種情形類似一般程式語言的程序(function),在 1.4版不能指定變數傳遞,在2.0版以上就
可以,因此處理功能就變強了。而目前變數僅能用全域變數或是列表來處理,有點麻煩,後
面將展示這樣的範例。
二、結構化處理
如果有某些程序是經常用到的,可以事先寫成一個模組,用到時再呼叫來使用。這樣的好
處是將來維護與修改相當方便的。底下範例正是使用這樣程序來處理。
事先寫好畫花程序,每次更改花瓣造型就呼叫一次,完成畫完一朵花。
範例十:畫花(flower2)
面對許多是重複程序,可否寫成一個模組需要時再呼叫使用,一方面可以省下開發時,另
一方面則易於維護。(插圖 66)
Scratch是可以做到這一點,利用廣播方式來處理。
Scratch2.0以上版本則更強化模組使用,使用彈性更大。
舞台角色:(插圖 67)
廣播 draw等待花瓣一將 draw執行程序處理完。
2014 scratch研習講- 17
插圖 64
插圖 65
插圖 66
插圖 67
![Page 18: 2014 Scratch 研習講義目錄 - WordPress.com€¦ · 六、Scratch 1.4與2.0差異: Scratch 2.0的模塊分組由1.4的8組變成了10組。同時也增加了一些新的功能塊,包括:](https://reader033.fdocuments.us/reader033/viewer/2022052019/60332618149b4004dc604f0c/html5/thumbnails/18.jpg)
花瓣一角色:(插圖 68)
• 當收到 draw訊息開始執行:
• 切換到 petal1 造型
• 設定 X座標為-160
• 隱藏造型
• 重複執行 5次(畫5種不同的花)
1. y 座標則隨機在-100~100之間取一數
2. 廣播 drawflow並等待(由花瓣開始畫出單
一花朵)
3. x座標則增加80
4. 切換下一造型
5. 隱藏造型
• 當收到 drawflow訊息開始執行(畫出一朵花
程序):
初始化:
1. 在0~100之間隨機取一數作為顏色特效
2. 在-20~20之間隨機取一數作為亮度特效
3. 在40~60之間隨機取一數作為大小特效
開始畫花:
1. 重複20次:
2. 蓋章
3. 每次旋轉 18度(18*20=360)
Scratch1.4以下版本則採用上述方式作為模組,由廣播與接收廣播來完模組化處理方式,在
模組化中如果需要輸入引述為參數,Scratch1.4版本則較麻煩,相較於2.0以上版本則輕鬆多了。
總結:
由舞台發出 draw廣播,花瓣一角色收到後在發出 drawflow廣播給自己來執行畫花動作,當
單一花朵畫完後交回 draw處理程序,在更換造與位置又進入 drawflow程序,如此不斷循環直
到所有造型完成。再交回舞台。
三、程序中輸入參數
模組中如何將引述傳遞進來?
基本上可以設定一個變數來接收引數,每次進入模組前先將變數的引述做改變,詳細情形
留待後面討論,在此先了解如何使用即可。2.0版可以在程序中直接設定變數呼叫程序時再將
引數導入。
下面例子允許在使用模組時更改其中變數,如更改寬度與旋轉次數,在本例中事先設定變數
值,呼叫時自動將變數值引入。(插圖 69)
範例十一、連續畫方形(結構化處理與引數 flower3)
兩個模組如下(插圖 70)
左邊模組用來畫正方形,右邊模組則用來連續畫出旋轉的正方形。寬與旋轉次數則由外面
輸入。
2014 scratch研習講- 18
插圖 68
![Page 19: 2014 Scratch 研習講義目錄 - WordPress.com€¦ · 六、Scratch 1.4與2.0差異: Scratch 2.0的模塊分組由1.4的8組變成了10組。同時也增加了一些新的功能塊,包括:](https://reader033.fdocuments.us/reader033/viewer/2022052019/60332618149b4004dc604f0c/html5/thumbnails/19.jpg)
畫筆角色:(插圖 71)
只要設定寬與旋轉次數、畫筆顏色然又廣播『旋轉畫方』,交由『旋轉畫方』模組來處理
則可。
而『旋轉畫方』再呼叫『畫方形』模組來處理畫正方形。記得完後要選轉角度,如此不斷
重複。
然而可否在將程式縮短,由程式讀取外來值自動處理。2.0以前版本可以用一維陣列來處理
(scratch 目前不支援多維陣列),在2.0以後版本則可以直接輸入引數值,方便許多。
範例十二、畫棋盤方格(checkbox1) 畫筆每移動一定距離後呼叫化方形模組,當完成一列後畫筆回到原處,在往上移動一
段距離,如此不斷循環畫出棋盤狀方格。(插圖 72,73)
畫筆角色:
2014 scratch研習講- 19
插圖 70
插圖 69
插圖 71
插圖 72 插圖 73
![Page 20: 2014 Scratch 研習講義目錄 - WordPress.com€¦ · 六、Scratch 1.4與2.0差異: Scratch 2.0的模塊分組由1.4的8組變成了10組。同時也增加了一些新的功能塊,包括:](https://reader033.fdocuments.us/reader033/viewer/2022052019/60332618149b4004dc604f0c/html5/thumbnails/20.jpg)
1. 先建立20*20正方形(如插圖 74-1)
2. 畫筆往前移動20步,再畫出另一方形,如此重複col(6)次(如插圖 74-2) 3. 再將畫筆退回-20*6,移動 y座標(如插圖 74-3)
四、分而治之(divide and conquer)
對於一個複雜化的問題,我們可以先分析之,然後拆成小問題,在由小問題拆成更小問題,
如此一直分析直到不能拆解為止,然後先解決小問題,解決小問題後大問題自然可以解決,
如此由下而上最後終於可以解決問題。(如插圖 75)
例如:畫出底下圖形(如插圖 76)畫出下面家屋,所採用單純畫法,整個程式碼就變得很長,事實上如果經過分析:
家屋構成是由:四個矩型、一個三角形、一個平行四邊形所構成。(如插圖 77)
2014 scratch研習講- 20
插圖 74
插圖 75
插圖 76
插圖 77
![Page 21: 2014 Scratch 研習講義目錄 - WordPress.com€¦ · 六、Scratch 1.4與2.0差異: Scratch 2.0的模塊分組由1.4的8組變成了10組。同時也增加了一些新的功能塊,包括:](https://reader033.fdocuments.us/reader033/viewer/2022052019/60332618149b4004dc604f0c/html5/thumbnails/21.jpg)
如果轉成模組化,將使程式碼更簡潔。
範例十三、畫家屋(house2)
底下為拆成三個不同模組:
畫矩形、畫三角形、畫平行四邊形(插圖 78)
注意:左邊程式積木是否大同小異?類似用
這樣情況很適合用模組來處理。1.4版如圖使用
變數來處理,如果使用列表來也可以處理。這
個部份就留給你來處理。
範例十四:花與葉(branch2)
1. 處理花瓣(插圖 80,81)2. 處理畫花(插圖 82,83) 3. 處理葉與花(插圖 84,85)
2014 scratch研習講- 21
插圖 78
插圖 79
插圖 80
插圖 81
插圖 82
![Page 22: 2014 Scratch 研習講義目錄 - WordPress.com€¦ · 六、Scratch 1.4與2.0差異: Scratch 2.0的模塊分組由1.4的8組變成了10組。同時也增加了一些新的功能塊,包括:](https://reader033.fdocuments.us/reader033/viewer/2022052019/60332618149b4004dc604f0c/html5/thumbnails/22.jpg)
作業練習:請畫出插圖 86 圖形
主要程式碼如插圖 87,你知道這兩個模組各有何
作用嗎? (branch3)
陸、變數
一、變數類型:
Scrtatch只有三種變數類型
布林值(Booleans), 數字(numbers)與字串(string)
• 布林值:只有真與偽(true or false)
• 數字:包括整數與小數,但 Scrtatch不會分辨兩者
• 字串:是由一連串文數字所組成包括(+, –, &, @,鍵盤上可以按出來的符號等)
事實上 Scrtatch對於輸入值有不同形狀來做分別
六角形允許布林值輸入,矩形允許字串值輸入,圓角矩形允許數字值輸入,但如果將數字
輸入矩型也一樣可以接受如插圖 88 圖:
2014 scratch研習講- 22
插圖 83 插圖 84
插圖 85
插圖 86
插圖 87
![Page 23: 2014 Scratch 研習講義目錄 - WordPress.com€¦ · 六、Scratch 1.4與2.0差異: Scratch 2.0的模塊分組由1.4的8組變成了10組。同時也增加了一些新的功能塊,包括:](https://reader033.fdocuments.us/reader033/viewer/2022052019/60332618149b4004dc604f0c/html5/thumbnails/23.jpg)
如果以圓角矩形要輸入六角形輸入的程式積木是不被允許,也就是說無法嵌入式。這也是
Scratch一個很棒的地方,它會事先通知哪些類型的變數是不允許使用的。
自動資料類型轉換:
圓角矩形積木如插圖 89 圖:
他們是已數字來回應如用在圓角矩形輸入嵌入當然是沒問題。但如果用在矩形輸入嵌入
則會將數字 自動轉成字串來處理。
舉例來說:允許使用輸入,但如果輸入為非數字的字串則用在 將不會移
動。原因是非數字的字串會自動轉成 0。
注意:
Scratch對數字前後的空白會忽略,但對字串前後的空白則不會忽略
2.0以上版本有雲端變數,此變數是放在伺服器中。
二、變數的運用:
由於 Scratch在運算積木群只提供如插圖 90 圖:
對於類似 2+4+5+7必須使用類似下面方式:
((2+4)+(5+7))
與 合併為:
當然也可以採用(插圖 91 圖)
變數 a=2+4
變數 b=5+7
最後:a+b
三、建立變數:
在變數積木群中按下產生一個變數:(插圖 92 圖)
填入變數名稱,勾選是用所有角色或是只適用此角色,前者所產生變數所有角色都可以使
用甚至改變(2.0版就不可)變數名稱不可重複,後者只有產生該變數的角色才有權使用,
其他則看不到,此時不同角色可以用相同變數名稱。
2014 scratch研習講- 23
插圖 88
插圖 89
插圖 90
插圖 91
插圖 92
![Page 24: 2014 Scratch 研習講義目錄 - WordPress.com€¦ · 六、Scratch 1.4與2.0差異: Scratch 2.0的模塊分組由1.4的8組變成了10組。同時也增加了一些新的功能塊,包括:](https://reader033.fdocuments.us/reader033/viewer/2022052019/60332618149b4004dc604f0c/html5/thumbnails/24.jpg)
完成以後如下:(插圖 93 圖)
範例十五:觀察變數可用的範圍(var_scope)
• 在貓角色:
建立一個只適用於本角色的變數 count
該變數重複執行 1~10之間隨機選一數字,觀察舞台左上角變
化(插圖 94 圖)
• 海星角色中:
也建立只適用於本角色的變數 count
但讀出變數 count值,結果所得一直為 0,無法讀取貓角色的變數。
在 2.0以後版本則可以限制讀取哪一角色的變數,但修改權力仍屬於建
立變數的角色所擁有。(插圖 95 圖)
範例十六:畫六角形網(web)
畫出六角形網如下所示:(插圖 96 圖)
• 分析問題:
網基本結構是三角形→旋轉六次則形成第 1層網→前兩步
驟連續 5次則可形成 5層網
所以建立三個模組:
三角形、六角形與網狀:(插圖 97 圖)
• 畫筆角色:(插圖 98 圖)
初始化:位置(0,0),面向右,設定畫筆大小與清除舊筆
跡然後下筆
將變數 width設為 20,也就是第 1層網寬為 20,以後在逐次
增加 20
廣播『網狀』訊息並等待→呼叫網狀模組→呼叫六角形模
組→呼叫三角形模組→完成第 1層
將 width增加 20再度執行→呼叫網狀模組→呼叫六角形模
組→呼叫三角形模組→完成第 2層 ....... 直到 5層完成
2014 scratch研習講- 24
插圖 93
插圖 94
插圖 95
插圖 96
插圖 97
插圖 98
![Page 25: 2014 Scratch 研習講義目錄 - WordPress.com€¦ · 六、Scratch 1.4與2.0差異: Scratch 2.0的模塊分組由1.4的8組變成了10組。同時也增加了一些新的功能塊,包括:](https://reader033.fdocuments.us/reader033/viewer/2022052019/60332618149b4004dc604f0c/html5/thumbnails/25.jpg)
範例十七:攝氏溫度轉華氏溫度(使用者自行輸入 temperature)
由使用者自行輸入內容,再經過公式轉換 F=(1.8*C)+32 系統最後要將結果輸入成『華氏溫度是...度』(插圖 99 圖)
Scratch可以使用偵測積木群中的提問...並等待,作為提示訊息與等待使用者輸入,
使用者輸入後的值惠存在一個叫『答案』的積木變數中,如果只有一個輸入則不需用變
數來承接,但若有一個以上輸入則需要將『答案』的積木變數值轉換到其他變數中,否
則新輸入值將會覆蓋原有值。
• 貓角色:(插圖 100 圖)
輸入文字格式可用運算積木群中的『合併...和...』來處理
四、變數的顯示方式:
在舞台中滑鼠移到變數上,按下滑鼠右鍵如下:
有三種表示型態:(有*...*表示目前是在哪一
種型態)
• 一般讀數:包含有變數名稱
• 大型讀數:不包含有變數名稱
• 滑桿:有滑感可以移動,可設定最大與最小
值
• 隱藏(插圖 101 圖)
柒、決策與分支
一、比較運算子
如下插圖 102 圖:
前面所述六角形積木是表示布林值,所以上面所傳回是布林值
• 運算子意義(插圖 103 圖):
2014 scratch研習講- 25
插圖 99
插圖 100
插圖 101
插圖 102
![Page 26: 2014 Scratch 研習講義目錄 - WordPress.com€¦ · 六、Scratch 1.4與2.0差異: Scratch 2.0的模塊分組由1.4的8組變成了10組。同時也增加了一些新的功能塊,包括:](https://reader033.fdocuments.us/reader033/viewer/2022052019/60332618149b4004dc604f0c/html5/thumbnails/26.jpg)
• 文字與字串比對:
Scratch對英文字母大小寫沒有區別,見插圖 104
如果字串有空白則也算是字串一部份,見插圖 105
問題:
elephant > mouse 傳回是 true 或 false , why?
二、if 區塊
由狀況來判斷,區塊內命令是否要執行,見插圖 106:
例如:貓一直向 45度方向前進,當 X座標大於 0則改變顏色,否則不變,碰到邊緣反彈(插圖108)(change_color)
• 貓角色:(插圖 107) 面向 45度方向移動,
重複不斷執行:
• 當 X座標大於 0則改變貓角色的顏色
2014 scratch研習講- 26
插圖 103 插圖 104
插圖 105
插圖 106
![Page 27: 2014 Scratch 研習講義目錄 - WordPress.com€¦ · 六、Scratch 1.4與2.0差異: Scratch 2.0的模塊分組由1.4的8組變成了10組。同時也增加了一些新的功能塊,包括:](https://reader033.fdocuments.us/reader033/viewer/2022052019/60332618149b4004dc604f0c/html5/thumbnails/27.jpg)
• 如果碰到邊緣就反彈
• 當 X座標小於 0則不改變貓角色的顏色
三、if/else 區塊
依判斷狀況而定: (插圖 109,110)若 true:則執行 if區塊內命令
若 false:則執行 elser區塊內命令
例如:判斷使用者輸入是奇數或偶數(even_odd)
(插圖 111)
四、巢狀式 if/else 區塊
也就是在 if/else 區塊又包含 if/else 區塊,如下例:
要申請獎學金資格學科平均(gpa)要在 3.8 以上且數學分數
(mathScore)在 92 分以上(插圖 113)。程式碼(插圖 112)
2014 scratch研習講- 27
插圖 107
插圖 108
插圖 109
插圖 110
插圖 111
插圖 112
![Page 28: 2014 Scratch 研習講義目錄 - WordPress.com€¦ · 六、Scratch 1.4與2.0差異: Scratch 2.0的模塊分組由1.4的8組變成了10組。同時也增加了一些新的功能塊,包括:](https://reader033.fdocuments.us/reader033/viewer/2022052019/60332618149b4004dc604f0c/html5/thumbnails/28.jpg)
五、Switch 處理:
Scratch 並沒有提供一般程式語言的 switch 功能,但可以以一連串
如果...否則...來處理
例如:插圖 114) 時間=7→起床
時間=8→上班
時間=13→午休
時間=17→下班
底下就利用類似 switch 方式來計算各種圖形的面積。
範例十八、面積計算(area_cal)
• 由使用者選擇那一類型形狀,然後計算該類型面
積
• 如果使用者輸入選項以外則提示『不對選項』
• (插圖 115)
• tutor 角色(插圖 116)
2014 scratch研習講- 28
插圖 113
插圖 114
插圖 115
插圖 116
![Page 29: 2014 Scratch 研習講義目錄 - WordPress.com€¦ · 六、Scratch 1.4與2.0差異: Scratch 2.0的模塊分組由1.4的8組變成了10組。同時也增加了一些新的功能塊,包括:](https://reader033.fdocuments.us/reader033/viewer/2022052019/60332618149b4004dc604f0c/html5/thumbnails/29.jpg)
完整程式碼(插圖 117)
六、邏輯運算子
如(插圖 118):
• and 運算子(插圖 119)
下面 1 與 2 的意義是相同的(插圖 120)
2014 scratch研習講- 29
插圖 117
插圖 118
插圖 119
![Page 30: 2014 Scratch 研習講義目錄 - WordPress.com€¦ · 六、Scratch 1.4與2.0差異: Scratch 2.0的模塊分組由1.4的8組變成了10組。同時也增加了一些新的功能塊,包括:](https://reader033.fdocuments.us/reader033/viewer/2022052019/60332618149b4004dc604f0c/html5/thumbnails/30.jpg)
• or 運算子(插圖 121)下面 1 與 2 的意義是相同的(插圖 122)
• not 運算子(插圖 124)例如:
上述:
分數沒有超過 100 不能晉級,換言之如(插圖 125)• 一些數字範圍的表示:(插圖 126)• 特殊情形:
理論上 1/3=0.3333.... 無限循環
但在 Scratch 則會發如如下情況:(插圖 127)
2014 scratch研習講- 30
插圖 120
插圖 121
插圖 122
插圖 123
插圖 124 插圖 125
![Page 31: 2014 Scratch 研習講義目錄 - WordPress.com€¦ · 六、Scratch 1.4與2.0差異: Scratch 2.0的模塊分組由1.4的8組變成了10組。同時也增加了一些新的功能塊,包括:](https://reader033.fdocuments.us/reader033/viewer/2022052019/60332618149b4004dc604f0c/html5/thumbnails/31.jpg)
避免此狀況發生,建議:
• 使用 > and < 同時使用兩種運算子來取代= • 對要比較的兩數使用四捨五入程式碼積木的方式,然後再做比較
• 或是使用兩數差來達到某種精確度的方式,如下:
範例十九:猜座標(guess_cod) • 使用者輸入系統所顯示蝙蝠所在座標
• 系統提示使用者輸入 x座標,正確則提示輸
入 y座標,否則顯示座標
• 如果輸入 y座標錯誤,系統也顯示座標(插圖128)
• 蝙蝠角色:
1. x,y座標隨機取一數,每單位為 20像素所以 20*隨機數
2. 進入巢狀式提問,提示使用者輸入 x座標,正確則提示輸入 y座標,否則顯示座標,
如果輸入 y座標錯誤,系統也顯示座標
2014 scratch研習講- 31
插圖 126
插圖 127
插圖 128
![Page 32: 2014 Scratch 研習講義目錄 - WordPress.com€¦ · 六、Scratch 1.4與2.0差異: Scratch 2.0的模塊分組由1.4的8組變成了10組。同時也增加了一些新的功能塊,包括:](https://reader033.fdocuments.us/reader033/viewer/2022052019/60332618149b4004dc604f0c/html5/thumbnails/32.jpg)
完整程式碼:(插圖 129)
捌、迴圈
一、意義
每執行回圈一次稱為迭代(iteration),而計數(count)是用來描述回圈重複的次數。
如:
插圖 130-1 就是無窮迴圈,不會停止,除非程式結束。
插圖 130-2 就是已計數器來控制迴圈,這是指定重複多少次後停止迴圈。
插圖 130-3 就是狀況控制迴圈,我們所以會使用此類是因為我們不知道迴圈要執行多少次,
但知道在某種狀況需要停止。
二、重複執行...直到
2014 scratch研習講- 32
插圖 129
插圖 130
插圖 131
![Page 33: 2014 Scratch 研習講義目錄 - WordPress.com€¦ · 六、Scratch 1.4與2.0差異: Scratch 2.0的模塊分組由1.4的8組變成了10組。同時也增加了一些新的功能塊,包括:](https://reader033.fdocuments.us/reader033/viewer/2022052019/60332618149b4004dc604f0c/html5/thumbnails/33.jpg)
• 此程式積木包括一個測試狀況,傳回結果是布林值,如果測試狀況是 false則執行區塊內
命令,否則跳到下一命令。
• 當執行區塊內命令到最後一條命令,則再進入測試狀況,如此不斷循環直到跳離狀況發
生。
• 如果一開始測試狀況為真,則不會執行區塊內的命令。
• 如果測試狀況永遠不會成立(真)則此區塊相當於無窮迴圈,即第 1 種迴圈區塊。(插圖 131)
這是一小段程式碼:(插圖 132) 說明:
• 當 ghost 角色到 player 角色距離高於 100,則每次移動 2步,碰到邊緣就反彈
• 如果低於 100則跳開區塊範圍,執行下一段程式。
範例二十:鬼抓人(chase)
目標:(插圖 133) • 當 ghost 角色到 player 角色距離沒有低於 100(高於 100),則每次移動 2步,碰到
邊緣就反彈
• 如果距離低於 100步則面向 player,切換造型,開始追向 player • 如果碰到 player則停止所有程式
• player 可以用方向鍵來控制方向
player 角色:
(插圖 134) ghost 角色:
(插圖 135)
三、無窮迴圈..如果區塊
無窮迴圈是沒有測試狀況,例如需要背景音樂不斷播放
則使用此類迴圈區塊。但我們可以在其內加入『如果』的
程式積木建立『無窮迴圈..如果』區塊,如插圖 136。
一開始先測試狀況,如果成立(真)則執行如果』的程
式區塊內命令,不成立則重新測試,如此不斷重複。
要注意:此整合的程式積木由於尾端沒有凸起所以不能連接其他程式積木。
如插圖 137。
2014 scratch研習講- 33
插圖 132
插圖 133
插圖 134
插圖 135
![Page 34: 2014 Scratch 研習講義目錄 - WordPress.com€¦ · 六、Scratch 1.4與2.0差異: Scratch 2.0的模塊分組由1.4的8組變成了10組。同時也增加了一些新的功能塊,包括:](https://reader033.fdocuments.us/reader033/viewer/2022052019/60332618149b4004dc604f0c/html5/thumbnails/34.jpg)
範例(arrowkey)
想知道 2 的多少次方後會大於 2000 • 如果使用重複執行迴圈,在迴圈內加入 if 程
式區塊來控制跳脫程式。
• 也可以使用重複執行直到...區塊
兩者效果是一樣的見插圖 138:
四、停止區塊:
包含下列兩種(2.0 以上版本則增加為三
種)
• 停止執行此程式:當此區塊被呼叫
時,立刻停止此角色程式的執行。
• 全部停止:停止所有角色的執行
範例二十一:巫婆與足球(stop)
目標:
1. 紅綠兩球會向巫婆前進,碰到邊緣
兩球都會反彈
2. 紅球碰到巫婆則所有程式都停止
3. 綠球碰到巫婆則改變紅球的速度並停止本程式
4. 綠球每次移動步數是在 1~5 之間隨機取一數
5. 以方向鍵控制巫婆前進方向(插圖 139)
2014 scratch研習講- 34
插圖 136
插圖 137
插圖 138
插圖 139
![Page 35: 2014 Scratch 研習講義目錄 - WordPress.com€¦ · 六、Scratch 1.4與2.0差異: Scratch 2.0的模塊分組由1.4的8組變成了10組。同時也增加了一些新的功能塊,包括:](https://reader033.fdocuments.us/reader033/viewer/2022052019/60332618149b4004dc604f0c/html5/thumbnails/35.jpg)
• 巫婆角色(插圖 140)• 綠足球(插圖 141)• 紅足球(插圖 142)
五、巢狀迴圈:
迴圈之中又有迴圈
例如某家披薩店有四種披薩,三種沙拉,每一種披薩搭配一種沙拉,列出其組合:
• 使用兩個迴圈,外圈為披薩(p),內圈為沙拉(s), • 先進入外圈,p=1,再執行內圈一輪(s=1~3,執行三次),將 p加一,進入外圈,再執行內圈一
輪.... • 如此直到 p=4(執行四次)(插圖 143)(nestedloop1)
六、遞迴:
某一個程序可以直接呼叫本身或是間接由他程序
來呼叫(A呼叫 B,B呼叫 C,C呼叫 A)稱為遞迴。(插圖 144)
遞迴要注意:
• 何時要終止,否則會進入無窮迴圈
• 何時進入,初始化如何,有建立終止條件嗎?
2014 scratch研習講- 35
插圖 140
插圖 141
插圖 142
插圖 143
插圖 144
![Page 36: 2014 Scratch 研習講義目錄 - WordPress.com€¦ · 六、Scratch 1.4與2.0差異: Scratch 2.0的模塊分組由1.4的8組變成了10組。同時也增加了一些新的功能塊,包括:](https://reader033.fdocuments.us/reader033/viewer/2022052019/60332618149b4004dc604f0c/html5/thumbnails/36.jpg)
例如:
下面是一個簡單遞迴,每次呼叫計數器減一,計數器=0則終止遞迴,
系統會回報目前計數器值。(插圖 145)(recursion1)
範例二十二:遞迴範例(畫出一圈的三角形)(recursionBlade)建立兩個模組:畫三角(畫三角形用)與圓形刀刃(旋轉一圈)
• 畫三角:每次移動 40步,轉 120度,重複三次形成一個正三角
形。
• 圓形刀刃:先畫出一個三角形,再往前移 12步,轉 10度,如果
還沒回到原方向則繼續呼叫本身重複執行,如(插圖 146):
注意:
• 必須等待畫完三角形才能進行下一步,所以在圓形刀刃模組下呼叫畫三角模組要用廣播
並等待方式
• 方向=90 表示已經旋轉一圈,因為當初初始化設定面向 90度完整程式碼(插圖 147)結果如 插圖 148
玖、列表(list)
一、列表說明
• 在 Scratch沒有陣列功能,有列表(List)。
• 在功能上是近似陣列功能,也有索引指標,可以新
增、刪除、插入與置換等功能。但 Scratch 目前僅
能處理一維的。
• 串列像似一個抽屜櫃,櫃子的每一個抽屜可以存放
物件,每個抽屜都有一個指標(index),在 Scratch第1 個列表內容其索引是從 1 開始,有別於其他語言是
從 0 開始,
如插圖 149:
2014 scratch研習講- 36
插圖 145
插圖 146
插圖 147
插圖 148
插圖 149
![Page 37: 2014 Scratch 研習講義目錄 - WordPress.com€¦ · 六、Scratch 1.4與2.0差異: Scratch 2.0的模塊分組由1.4的8組變成了10組。同時也增加了一些新的功能塊,包括:](https://reader033.fdocuments.us/reader033/viewer/2022052019/60332618149b4004dc604f0c/html5/thumbnails/37.jpg)
二、建立列表
從變數積木群中點選→選擇『產生一個列表』→填入列表名稱→選擇該列表是用於全部角
色或是只有本角色可以使用。插圖 150
按下『確定』則產生一個空列表,如插圖 151:
• 靜態新增:
點選左下角『+』→輸入內容,重複前兩步驟則可一直新增內容
如插圖 152:
範例:
可以使用 Tab 鍵做上下移動,或是直接用滑鼠點選。
• 靜態刪除:
直接點選要刪除內容或是用 Tab 鍵來選擇,選取後該項目出現粉紅色背景
色右下方有『X』,點選後則可將該項目內容刪除。
• 動態加入:
如插圖 153:直接將內容『Sunday』寫入列
表中
• 動態刪除:
前面 1 代表索引,按下向下箭頭則出現如下:
1. 1:表示索引=1 項目, 2. 最後的:表示索引=最大值,
3. 所有的:刪除所有內容
如果要刪除索引為 3 的內容,可以直接填入 3 • 置換:
例如要將 dayList索引為 5 的『星期五』置換為『Friday』,使用插圖 155:
2014 scratch研習講- 37
插圖 150
插圖 151
插圖 152 插圖 153
插圖 154
插圖 155
![Page 38: 2014 Scratch 研習講義目錄 - WordPress.com€¦ · 六、Scratch 1.4與2.0差異: Scratch 2.0的模塊分組由1.4的8組變成了10組。同時也增加了一些新的功能塊,包括:](https://reader033.fdocuments.us/reader033/viewer/2022052019/60332618149b4004dc604f0c/html5/thumbnails/38.jpg)
三、積木群功能
四、存取列表中的項目內容
插圖 156 程式:
設定變數 n=1,作為讀取的索引
重複七次,列表中共有七各項目
顯示列表項目內容
將變數 n加一
五、檢查是否在列表中
在 Linux 系統下,包含程式積木是有大小寫之分,Microsooft-Window沒有大小寫之分
如果存取索引不存在於列表索引時、,系統並不會出現錯誤訊息,取而代之是一個紅色框
表示,出現數秒後又會恢復原狀,對列表內容不會有存取修改的動作。(插圖 157)
例如底下都是錯誤的索引(插圖 158):
六、動態的列表:
• 已知列表數量,動態加入內容。
例如已知一班有 30 個學生,要輸入成績,可以在依開始做詢問要建立多少列表內容,
然後再逐一輸入內容:
例如:(插圖 159)(input_score1)
2014 scratch研習講- 38
插圖 156
插圖 157
插圖 158
![Page 39: 2014 Scratch 研習講義目錄 - WordPress.com€¦ · 六、Scratch 1.4與2.0差異: Scratch 2.0的模塊分組由1.4的8組變成了10組。同時也增加了一些新的功能塊,包括:](https://reader033.fdocuments.us/reader033/viewer/2022052019/60332618149b4004dc604f0c/html5/thumbnails/39.jpg)
• 未知列表的數量(input_score2) 此需需要一個指示值(sentinel)來告訴系統已經達到結束狀態,此指示值必須確定不
會在輸入時出現,否則會發生混亂。例如以『-1』表示達到結束狀態,因為-1 並不會在分
數中出現(插圖 160)
範例二十三:列表之應用一:輸入轉長條圖(barchart)
目標:(插圖 161) • 由使用者輸入 1~40 五個數字
• 此五個數字轉成長條圖畫出
• 數字需要顯示在下面
• 每一長條需已不同顏色做區隔
tutor 角色(插圖 162):
• 初始化:
設定大小:70%,顯示與清除舊筆跡
清除舊列表內容
將 pos 變數設為 1(輸入索引) • 重複執行 5 次(準備讀取)5 個輸入值
2014 scratch研習講- 39
插圖 159
插圖 160
插圖 161
![Page 40: 2014 Scratch 研習講義目錄 - WordPress.com€¦ · 六、Scratch 1.4與2.0差異: Scratch 2.0的模塊分組由1.4的8組變成了10組。同時也增加了一些新的功能塊,包括:](https://reader033.fdocuments.us/reader033/viewer/2022052019/60332618149b4004dc604f0c/html5/thumbnails/40.jpg)
提示目前輸入索引
將輸入索引 pos 變數加 1 • 廣播 initial • 隱藏
• 呼叫 draw(呼叫開始畫圖)• initial 模組:
將輸入列表內容逐一轉成
n1~n5 變數,以供畫圖用
painter 角色:(插圖 163):
• 初始化:
1. 隱藏畫筆,設定畫筆大小與
朝上(0度)
2. 變數 n 設為 1(列表索引用) • 重複執行五次
1. 停筆
2. 移到指定位置,位置的 x座標事先放在 xPOS 列表中如下圖,每次則移動一項
3. 設定畫筆顏色為 50,100,150,...250 4. 下筆
5. 取出數入串列中的值*5.6(因為最大為 40,在圖中
範圍為 224,224/40=5.6) 6. 將 n 變數加 1
範例二十四:列表之應用二(找出合於條件的人數
search_inputlist)
目標:
• 自行產生一個長度為 20 的列表
• 列表內容為 40~100隨機取一數存入(插圖 164) • 請過濾出大於或等於 70 的項目存入另一名為『合於
條件的串列』
• 並說明有多少人合於此條件
• count:紀錄合於條件人數
• pos:列表的索引指標
重複檢查列表的資料,若合於條件則將
count加一。每經一次迭代不管是否合於條件,
2014 scratch研習講- 40
插圖 162
插圖 163
插圖 164
插圖 165
![Page 41: 2014 Scratch 研習講義目錄 - WordPress.com€¦ · 六、Scratch 1.4與2.0差異: Scratch 2.0的模塊分組由1.4的8組變成了10組。同時也增加了一些新的功能塊,包括:](https://reader033.fdocuments.us/reader033/viewer/2022052019/60332618149b4004dc604f0c/html5/thumbnails/41.jpg)
pos加一。(插圖 165)
拾、字串
一、字串處理
例如:(插圖 166,167)
二、從字串中搜尋指定的字
範例二十五:在字串中找到含藥、鹽、高等字,共出現多少次(search_ch) • 使用兩變數 count 來紀錄次數,pos 為移動索引
• 若找到這些字之一則 count加一,否則移動指標至下一字
• 最後格式化輸出(插圖 168,169)
三、字元比較應用(迴文)
迴文,亦稱回文、是正讀反讀都能讀通的句子。
例如:
自我突破,突破自我
改變的環境影響人類的活動,活動的人類影響環境的改變
要檢查是否為回文如插圖 170所示:
2014 scratch研習講- 41
插圖 166 插圖 167
插圖 168
插圖 169
![Page 42: 2014 Scratch 研習講義目錄 - WordPress.com€¦ · 六、Scratch 1.4與2.0差異: Scratch 2.0的模塊分組由1.4的8組變成了10組。同時也增加了一些新的功能塊,包括:](https://reader033.fdocuments.us/reader033/viewer/2022052019/60332618149b4004dc604f0c/html5/thumbnails/42.jpg)
第 1 位置與第 8 位置、第 2 位置與第 7 位置、第 3 位置與第 6 位置…
如果有任何比較不成立的話就不是回文(表示兩字元不相等)
範例二十六:迴文檢查(palindrome)tutor 角色說明:
• 提示輸入說明
• 設定 length 為整個字串長度,pos1 為由左→右索引變數,pos2 為由右→左索引變數
• 重複執行(以字串中間為分界)
• 逐一作比對(只要有一組字元比對不相等則停止執行)
• pos1 與 pos2所以加一(插圖 171) 最後格式化輸出(插圖 172)
四、字元搬移
範例二十七:字元搬移應用:Pig Latin(piglatin) Pig Latin:
國外兒童黑話(Pig Latin)是一種英語語言遊戲,形式是在英語上加上一點規則使發音
改變。
兒童黑話多半被兒童用來瞞著大人秘密溝通,有時則只是說著好玩。雖然是起源於英
語的遊戲,但是規則適用很多其他語言。底下我們用中文來玩此遊戲。舉例說明(插圖173):
2014 scratch研習講- 42
插圖 170
插圖 171
插圖 172
![Page 43: 2014 Scratch 研習講義目錄 - WordPress.com€¦ · 六、Scratch 1.4與2.0差異: Scratch 2.0的模塊分組由1.4的8組變成了10組。同時也增加了一些新的功能塊,包括:](https://reader033.fdocuments.us/reader033/viewer/2022052019/60332618149b4004dc604f0c/html5/thumbnails/43.jpg)
由於 Scratch 不支援字元的移動,所以必須將搬移字元輸出到新字串中,這也是為何要有
輸出字的緣故。
通常需要四個變數:
1. 輸入字(outword):原始字串
2. 輸出字:存放處理後的字串
3. 計數器(pos):作為索引計數用
4. 字元(ch):存放從輸入字串中取得的字元
本例的規則是將輸入字串中的第 1 個字元移到最後,然後再加上『兄弟』兩字
• 一開始系統提示輸入字元(插圖 174)
• 呼叫 piglatin 模組
• 由於是從第 2 字元抓娶到
最後字元,所以 pos 從 2開始(插圖 175)
五、字元重新組合
重新將字串中的字元重新排列組合,長度與原字串相同。
例如:
輸入一字串『abcdefg』,
第一步隨意抽出位置為 3 字元 c放在 str1 字串中(c),輸入字串則變為 abdefg 第二步隨意抽出位置為 2 字元 b放在 str1 字串中(cb),輸入字串則變為 adefg 第三步隨意抽出位置為 1 字元 a放在 str1 字串中(cba),輸入字串則變為 defg 第四步隨意抽出位置為 2 字元 e放在 str1 字串中(cbae),輸入字串則變為 dfg ................. 直到輸入字串被抽光為止,如插圖 176 圖:
2014 scratch研習講- 43
插圖 173
插圖 174
插圖 175
![Page 44: 2014 Scratch 研習講義目錄 - WordPress.com€¦ · 六、Scratch 1.4與2.0差異: Scratch 2.0的模塊分組由1.4的8組變成了10組。同時也增加了一些新的功能塊,包括:](https://reader033.fdocuments.us/reader033/viewer/2022052019/60332618149b4004dc604f0c/html5/thumbnails/44.jpg)
範例二十八:成語測驗(fixmyspelling2)
系統隨機從列表中抽出一句成語,將此句成語重新
排列組合,系統提示給使用者,要求使用者做修正,
當使用者輸入後系統判斷正確與否。(插圖 177)
貓角色的程式碼:(插圖 178,179,180)
2014 scratch研習講- 44
插圖 176
插圖 178
插圖 179
插圖 177
![Page 45: 2014 Scratch 研習講義目錄 - WordPress.com€¦ · 六、Scratch 1.4與2.0差異: Scratch 2.0的模塊分組由1.4的8組變成了10組。同時也增加了一些新的功能塊,包括:](https://reader033.fdocuments.us/reader033/viewer/2022052019/60332618149b4004dc604f0c/html5/thumbnails/45.jpg)
範例二十九:分數大小比較測驗(compare_fraction_tutor)
按下 new按鈕,系統隨機取出四個數字,放在指定位置,使用者可以點選中間>=<符號,完成後按下『check』做答案檢查。(插圖 181) 由於數字會在模組中呼叫,所以寫入列表中供其他模組處理。位置座標也放入 x,y座標串列中來處理。
• new 角色:(插圖 182) 隨機從 1~9選取 4 個數字,並放入『數字』列表中,呼叫『新問題』模組
(排列數字位置)
• 數字角色(插圖 183、184)
2014 scratch研習講- 45
插圖 180
插圖 181 插圖 182
插圖 186
![Page 46: 2014 Scratch 研習講義目錄 - WordPress.com€¦ · 六、Scratch 1.4與2.0差異: Scratch 2.0的模塊分組由1.4的8組變成了10組。同時也增加了一些新的功能塊,包括:](https://reader033.fdocuments.us/reader033/viewer/2022052019/60332618149b4004dc604f0c/html5/thumbnails/46.jpg)
check 角色:(插圖 185) operation 角色(>=<)(插圖 186、187)
tutor 角色(插圖 188)
拾壹:發佈
一、作品發表:(1.4 版)
分享→將此作品分享在網路(插圖 189)
2014 scratch研習講- 46
插圖 183 插圖 184
插圖 185
插圖 187
插圖 188
![Page 47: 2014 Scratch 研習講義目錄 - WordPress.com€¦ · 六、Scratch 1.4與2.0差異: Scratch 2.0的模塊分組由1.4的8組變成了10組。同時也增加了一些新的功能塊,包括:](https://reader033.fdocuments.us/reader033/viewer/2022052019/60332618149b4004dc604f0c/html5/thumbnails/47.jpg)
二、sb 轉成 exe
為流傳方便可以將.sb或.sb2 轉成 exe檔案。如果使用 ChirpCompiler 在轉換過程會有一些
錯誤,例如要求使用者輸入時則無法出現,所以在此使用 Scratch所推荐方式,安裝 BYOB 3.1.1(Build Your Own Blocks),基本上與 scratch相似,可以說是 scratch 的分身,目前
有中文化。BYOB 也可轉換 scratch2.0 的.sb2。
BYOB 由美國加州大學柏克萊分校分校。它是由 MioSoft公司的 JensMönig,設計輸入和
文件柏克萊分校的 Brian Harvey 與柏克萊分校的學生與其他地方人士所共同開發。(插圖190) 由於 BYOB 與 Scratch相當接近,甚至有些功能還超越 scratch,那為何不稱為 scratch 改
良版或是以 Scratch相似為名稱,原因是版權限制的問題,MIT雖然將原始碼釋放,也同意可
以重製與修改,但合約規定重製與修改的軟體不得冠上 Scratch 名稱。
線上參考網址 http://snap.berkeley.edu/snapsource/snap.html
轉換步驟:
• step1:下載 BYOB 3.1.1 • step2:解壓縮後,執行 BYOB.exe( 插圖 191)• step3:開始要轉換檔案,最好先執行一次,藉此也可
2014 scratch研習講- 47
插圖 189
插圖 190 插圖 191
插圖 192
![Page 48: 2014 Scratch 研習講義目錄 - WordPress.com€¦ · 六、Scratch 1.4與2.0差異: Scratch 2.0的模塊分組由1.4的8組變成了10組。同時也增加了一些新的功能塊,包括:](https://reader033.fdocuments.us/reader033/viewer/2022052019/60332618149b4004dc604f0c/html5/thumbnails/48.jpg)
以做最後修改
• step4:點選 share/Compile This Project... ( 插圖 192)• step5:要求儲存,注意不要用中文檔名儲存( 插圖 193)• step6:此時系統進入終端機模式開始轉換,轉換完成後,內定是放在在文件資料夾
( 插圖 194)
2014 scratch研習講- 48
插圖 193
插圖 194