Scratch‎ > ‎

廣播&接收、綜合應用

2012/10/29 謝碧景(c)編製更新 

 學習目標:

  • 學會『事件』類別積木中【廣播→當接收到】之設計與應用。
  • 學會動畫短片之設計與應用。
  • 學會聲音類積木之設計與應用。
  • 學會變數、清單、分身、畫筆、『廣播→當接收到』等指令積木之綜合應用

一、廣播&接收 Scratch官網 http://scratch.mit.edu

  • 『事件』類別積木中有【廣播→當接收到】積木,廣播的功能用於角色之間的互動,例如某角色使用廣播告知其他的角色,而所有角色在接收到廣播後會執行指定之動作。

 範例1:貓與狗的對話【重點:(1)學會『廣播→當接收到』(2)劇本構思創作→數位說故事(檔名:broadcast-1.sb2)  分享

1.腳本設計

 貓和狗相遇在科學大樓的門口,開始一段對話。
  • 貓:嗨!你要去合作社嗎?
  • 狗:對!我好餓,我想去吃點東西。
  • 貓:你想買什麼吃呢?
  • 狗:我喜歡吃焗烤麵。
  • 貓:我不喜歡吃麵,但我喜歡吃飯。一起走吧!

2.【場景設計】(準備素材)

    • 5個聲音檔
    • 貓的對話:c1.wav,c2.wav,c3.wav
    • 狗的對話:d1.wavd2.wav
    • 1個背景圖:校門口 (Scratch\Backgrounds\Outdoors\school2.jpg)
school

    • 2個角色:貓、狗各有2個造型圖。
資料夾:Scratch\Media\Costumes\Animals
→貓:命名『cat』,造型圖:cat1-a.gif、cat1-b.gif
cat-1
cat1-a.gif
cat-2
cat1-b.gif
→狗:命名『dog』,造型圖:dog2-b.png、dog2-c.png
dog-1
dog2-b.png
dog-2
dog2-c.png

3.【程式設計

(1)起始場景佈置:舞台程式。


(2)起始角色佈置:設定貓及狗的起始狀態,角色及狗角色,並利用narrow 縮小工具】縮小角色尺寸。

(3)安排起始動畫:貓往前方走向狗,貓狗顯示座標定位,因貓及狗都僅能左右翻轉移動,故角色中可增加

狗: 起始定位


(4)安排角色橋段:讓貓說話。讓狗說話。

 貓:廣播cat-1
 狗:當接收到

(5)讓貓告訴狗該他說話了(廣播)→狗接收後(當接收到) ,狗再通知貓該他說話了 (廣播)→(當接收到)。

(6)完成對話後,讓貓及狗向左走出舞台後消失。

 貓角色:程式
 狗角色:全部程式 


4.【測試程式】:按下螢幕上方綠旗 按鈕,開始執行程式。


 範例2:開關燈,如果按下開關(即開燈ON)則燈泡亮,否則開關OFF時(即關燈)燈泡沒亮。【重點:學會[廣播→當接收到]積木之應用。執行畫面如下圖 (檔名:broadcast-2.sb2)  分享

1.【場景設計】

(1)開新檔案:先【檔案→開新檔案】,再於『角色區』的『貓咪』角色身上【按下右滑鼠鍵→選取『刪除』】,即刪除貓咪的角色。

(2)新增角色:
  • 在角色區按下【()繪製新角色】按鈕, 編輯→進入【繪圖工具】 編輯→以【橢圓、方形、填色等工具】畫出燈泡,並命名為『燈泡』,畫面如下圖 。
繪製燈泡(暗)
燈泡角色
  • 在角色區按下【()繪製新角色】按鈕, 編輯→ 進入【繪圖工具】 編輯→以【方形、填色、文字等工具】畫出開關,並命名為『開關』,畫面如下圖 。 
開關
開關角色

(3)變數設定:選取「資料」類別的積木→按下『做一個變數』→輸入『變數名稱:light』→再選取『適用所有的角色』→按下『確定』。如果「開燈」為「1」,否則「關燈」為「0」。

Scratch 2.0 版:
 Scratch 1.4 版:


2.【程式設計

(1)選取『燈泡』角色:選取「程式」,編寫程式碼,如下圖。

Scratch 2.0 版:
 Scratch 1.4 版:
 


(2)選取『開關』角色:選取「程式」,編寫程式碼,如下圖。

Scratch 2.0 版:
 Scratch 1.4 版:


3.【測試程式】:按下螢幕上方綠旗 按鈕開始執行程式,再移動滑鼠點按『開關』角色,即可切換「開燈」、或「關燈」。

延伸思考:承上題,增加【開燈中】中文圖示:若【開關圖示】ON,則顯示【開燈中】圖示;否則【開關圖示】OFF,則隱藏【開燈中】圖示。執行畫面如下圖 (檔名:broadcast-2.sb2)  分享

【開關圖示】OFF,則隱藏【開燈中】圖示。
【開關圖示】ON,則顯示【開燈中】圖示。

  • 【程式設計


(1)『燈泡』及『開關』角色:程式碼同上題。

(2)『舞台』造型程式碼
  • 畫新背景:以向量圖繪製漸層圖,如下左圖,造型1→命名『暗』,造型2→命名『亮』;程式碼如下右圖。
 『舞台』程式碼:
 

(3)新增『開燈中』角色,程式碼,如下圖,即可按下【綠旗】→測試程式。


【開燈中】中文圖示製作:參閱PhotoImpact 影像處理軟體元件設計師 及 去背效果〉設計與應用。


二、綜合應用

 範例3: 彈鋼琴【重點:學會[廣播→當接收到]積木之應用。執行畫面如下圖 (檔名:broadcast-3_piano.sb2)  分享

1.【場景設計】

  • 題目說明:
(1) Pico 站在琴鍵上唱歌。
(2) 當滑鼠按下琴鍵,Pico會說出該琴鍵之音名“Do、Re、Mi、Fa、So、La、Si
(3) 可以滑鼠演奏:當按下白色琴鍵,分別彈奏Do、Re、Mi、Fa、So、La、Si。
(4) 亦可使用鍵盤彈奏:1、2、3、4、5、6、7。

1.【場景設計】

(1)開新檔案:先【檔案→開新檔案】,再於『角色區』的『貓咪』角色身上【按下右滑鼠鍵→選取『刪除』】,即刪除貓咪的角色。

(2)舞台佈置:背景→選擇【背景範例庫:sparkling

(3)新增琴鍵角色:分別上傳角色檔案→ DoReMiFaSoLaSi

(4)新增Pico角色:從角色倉庫中選則裝扮→魔幻→Pico。

2.【程式設計依據問題分析步驟撰寫程式碼:



步驟1】各琴鍵座標位置、以滑鼠演奏、及鍵盤彈奏時樣貌及音符設定,並廣播各音符名稱。

Do 角色:
 Re 角色:
 Mi 角色:
Fa、So、La、Si 角色依此類推,略。

步驟2】Pico 角色:站在琴鍵上唱歌,當按下琴鍵或演奏時,Pico會說出該琴鍵之音名“Do、Re、Mi、Fa、So、La、Si”,下圖為 Pico 造型及程式



3.【執行程式】:按下螢幕右上方綠旗 按鈕,開始執行程式。

延伸思考:製作遊戲前之說明畫面,承上題彈鋼琴】,執行畫面如下圖 (檔名:broadcast-3-2.sb2)  分享

彈鋼琴:演奏前之說明畫面。
 →2秒後,開始演奏:
2秒後,開始演奏 


步驟1】製作舞台之『說明』背景圖。

(1)請在Scratch 1.4 離線版:舞台→背景→編輯:請在繪圖編輯器→匯入『背景圖片』,如下圖,先選取【文字輸入工具點選背景圖再輸入說明文字後按下確定】。


(2)接著如下圖,在舞台區按下右滑鼠→選取將舞台存成圖片】,例如:說明.gif。


步驟2舞台背景及程式設計。

(3)進入Scratch 2.0:舞台→背景上傳背景檔案,如下造型名稱『說明』;再選擇背景範例圖『sparkling』造型名稱『遊戲開始』;接著,如下右
程式設計

舞台→背景:
 舞台→程式:
 (1)新增廣播訊息:
 

 (2) 新訊息:game
 (3)程式積木:

步驟3】各琴鍵角色:程式設計→加入【當我接收到game】即可開始演奏。

Do 角色:
 Re 角色:
 Mi 角色:

Fa、So、La、Si 角色依此類推,略。

步驟4Pico 角色:程式設計→加入【當我接收到game】即可開始彈奏。




 範例4:貪吃蛇【重點:學會變數、清單、畫筆、『廣播→當接收到』等積木之綜合應用】執行畫面如下圖。(檔名:broadcast-4.sb2 分享

 
 
 註:當蛇碰到邊緣,則遊戲結束。
  • 題目說明:
(1) 利用鍵盤方向鍵控制蛇的前進方向。
(2) 遊戲中老鼠會隨機出現,當蛇吃到老鼠,蛇身會變長。
(3) 當蛇碰到邊緣,或自己的身體,則遊戲就會結束。
(4) 畫面左上方會顯示蛇吃了幾隻老鼠。
  • 問題分析:
(1) 如何切換舞台上之遊戲開始』及『遊戲結束』畫面
(2) 如何讓老鼠隨機出現?
(3) 如何控制蛇的方向,及身長?
(4) 如何判斷蛇碰到邊緣,或自己的身體,則遊戲結束?
*原創:http://scratch.mit.edu/projects/2620771/

1.設計大綱
https://sites.google.com/site/jingprogram/sb2_broadcast-3_%E8%B2%AA%E5%90%83%E8%9B%87%E5%A4%A7%E7%B6%B1.png


2.【場景設計】

(1)開新檔案:先【檔案→開新檔案】,再於『角色區』的『貓咪』角色身上【按下右滑鼠鍵→選取『刪除』】,即刪除貓咪的角色。

(2)舞台佈置:背景→複製「白色背景」→編輯→開啟【繪圖編輯器】→選取【文字輸入工具→輸入Game over!」,造型名稱分別輸入遊戲開始、「遊戲結束」



(3)新增角色:
  • 『蛇頭』角色:自行繪製或匯入 蛇頭(圖片):()上傳角色檔案→開啟舊檔】即可匯入 snake.png 圖片,並旋轉調整蛇頭之方向,角色命名為『蛇頭』。

    • 匯入:蛇吃掉老鼠的聲音 slurp(音效檔)。

      Scratch 2.0 版:


      Scratch 1.4 版:


  • 『蛇尾』角色:自行繪製→【()繪製新角色】。
  • 『老鼠』角色:自行繪製或匯入 老鼠(圖片):()上傳角色檔案→開啟舊檔】即可匯入 mouse.png 圖片,角色命名為『老鼠』。

(4)變數設定:選取『資料』類別積木→新增變數及清單。

Scratch 2.0 版:
 Scratch 1.4 版:
 
→按下【資料→做一個變數】
  • 新增『吃到老鼠』變數:記錄『蛇頭』角色碰到『老鼠』角色時累加其個數用,為全域變數(適用所有的角色);顯示。
  • 新增『蛇長』變數:記錄『蛇頭』角色碰到『老鼠』角色時累加蛇身長度用,為全域變數(適用所有的角色);不顯示。
  • 新增『遊戲中』變數:判斷遊戲是否結束,為全域變數(適用所有的角色);不顯示。

→按下【資料→做一個清單】
  • 新增『x座標』清單:紀錄『蛇頭』角色移動時的所有x座標路徑,以利畫筆繪製綠色蛇身長度,為全域變數(適用所有的角色);不顯示。
  • 新增『y座標』清單:紀錄『蛇頭』角色移動時的所有y座標路徑,以利畫筆繪製綠色蛇身,為全域變數(適用所有的角色);不顯示。


3.【程式設計依據問題分析步驟撰寫程式碼:

步驟1如何切換舞台上之『遊戲開始』及『遊戲結束』畫面

(1)在舞台上撰寫程式碼:程式設計時一般會在舞台之程式碼中定義所有變數的初始值,其中「遊戲中」變數若為,則遊戲結束。



步驟2如何讓老鼠隨機出現?

(2)因匯入的『老鼠』圖片過大,故縮小『老鼠』角色,再讓『老鼠』出現。接著讓『老鼠』重複的隨機出現在(x:-240~240,y:-160~160)舞台上,等待20秒後再換到另一個隨機位置;若接收到『蛇吃到老鼠』的廣播訊息,則讓老鼠換到新的隨機位置。

*註:按下螢幕右上方綠旗 按鈕,測試程式,此時『老鼠』角色會縮小出現在畫面中,間隔20秒後隨機出現在另一個位置


步驟3如何控制蛇的方向,及身長?又如何判斷當蛇碰到邊緣,或自己的身體,則遊戲結束?

(3)可利用鍵盤的方向鍵控制蛇面向何方向。
(4)因匯入的蛇頭圖片過大,故縮小蛇頭』角色,再讓『蛇頭』角色由原點(0,0)座標,面向右方出現,以綠色【畫筆】(大小為10)下筆繪製蛇身。
(5)當廣播「遊戲開始」則重複將蛇移動的x座標及y座標分別放入列表(x座標及y座標)中。
(6)當蛇碰到邊緣或蛇的紅色舌頭碰到自己的綠色身體(即畫筆下筆之綠色),則設定「遊戲中變數為,在『舞台』程式碼中控制遊戲結束」。
(7)當蛇頭』角色碰到『老鼠』角色,「吃到老鼠」的變數會累加1,接著廣播「蛇吃到老鼠」並等待,接收到訊息後「蛇長」變數會累加2。

*註:按下螢幕右上方綠旗 按鈕,測試程式,此時蛇身是否越來越長,如下圖,該如何讓蛇身不會越來越長?

測試後→問題產生蛇身越來越長。




步驟4如何讓蛇身不會越來越長?若加入『蛇尾』角色跟著蛇頭』走過的路徑不斷移動以背景色覆蓋(即清除)綠色蛇身。

(8)『蛇尾』角色之座標移到『蛇頭』角色位置,隱藏『蛇尾』角色圖案,跟著蛇頭』走過的路徑(列表x座標及y座標),以白色畫筆覆蓋蛇身綠色軌跡,即可不斷跟著列表之x座標及y座標路徑移動清

  • 測試:可先將畫筆顏色設定為淡黃色,即可檢測蛇尾不斷下筆覆蓋清除綠色。測試完成後,再將畫筆顏色設定為白色(背景色)即可,如下圖。




4.【執行程式】:按下螢幕右上方綠旗 按鈕,開始執行程式。



 範例5:翻牌:配對遊戲。【重點:學會變數、清單(列表)蓋章、『廣播→當接收到』等積木之綜合應用執行畫面如下圖。(檔名:broadcast-5.sb 分享


  • 題目說明:
(1) 有8張牌,若翻開2張一樣的牌,即配對成功,則2張牌皆消失。
(2) 若翻開2張不同的牌,則2張牌蓋起來,直到所有的牌都配對完成。
(3) 列表會顯示8張牌之不同座標位置。如下:
 (-180,130)   (-90,130)  (0,130) 
   (-135,42)   (-45,42)
(-180,-46) (-90,-46) (0,-46)
  • 問題分析:
(1) 如何將8張牌能隨機的分配8個特定座標位置。
(2) 以變數紀錄翻開的牌是第1張,或是第2張。
(3) 比較翻開的第1張與第2張牌,是否為相同圖案。
*原創:http://scratch.mit.edu/projects/1797330/

1.【場景設計】

(1)開新檔案,刪除貓咪的角色。

(2)舞台佈置:
舞台→背景→編輯→進入【繪圖工具】以【填色工具】填入『黑色』背景。

(3)角色製作:
    • 『牌1』角色:
      • 『背面』製作: 牌-背面(圖片): 開啟角色檔案】匯入 cards.png 圖片,造型命名為『背面』。
      • 『正面』製作:複製背面造型圖,再【編輯】→進入【繪圖工具】→匯入 fantasy11.png 並縮小角色,確定後,造型命名為『正面』。
  牌-背面(圖片)



 
    • 『牌5』角色:在『牌1』角色身上按下右滑鼠鍵,如下圖,選取【複製】,即可複製角色,並修改角色名稱為『牌5』。


    • 同上法操作:分別製作『牌2』、『牌6』角色,與『牌3』、『牌7』角色,及『牌4』、『牌8』角色。


2.【程式設計依據問題分析步驟撰寫程式碼:

步驟1將8張牌能隨機的分配8個特定座標位置。

(1)在舞台上撰寫程式碼:
    • 將8張牌隨機的分配8個特定座標位置:先在『變數』類別中『產生一個列表』存放8張牌的位置,且每次綠旗執行時座標會隨機放入列表中的任意位置。
    • 遊戲開始8張牌皆以背面顯示:此例以「廣播“洗牌”」代表8張牌皆顯示背面。
    • 可按綠旗 按鈕測試,列表中之座標會隨機變動。

列表會顯示8張牌之不同座標位置。如下:

 (-180,130)   (-90,130)  (0,130) 
   (-135,42)   (-45,42)
(-180,-46) (-90,-46) (0,-46)

 
 

(2)在『牌1』角色上撰寫程式碼:
    • 新增角色變數:在『變數』類別中『產生一個變數』→命名「數字」→選取『只適用此角色』→確定。同法操作,新增「x」及「y」變數。

    • 自『列表』中找出座標:依據座標位置放置『牌1』圖案,程式碼如下。


步驟2以變數紀錄翻開的牌是第1張,或是第2張。

(3)新增變數以利紀錄:在『變數』類別中『產生一個變數』→命名「牌編號」→選取『適用所有角色』→確定。同法操作,新增「翻第幾張」變數。



(4)更新舞台程式碼:增添「變數初始值」→「翻第幾張=1」。



步驟3比較翻開的第1張與翻開的第2張牌,是否為相同圖案。

(5)更新『牌1』角色上程式碼:
  • 『牌1』被點一下,牌會顯示「正面」,可應用『蓋章』積木顯示【參閱:蓋章遊戲】,後再與翻開的第2張牌比較圖案。
  • 『牌1』與『牌5』是相同圖案,故廣播“答對A”」,翻開之牌會消失(即設定為透明);若圖案不相同,則牌蓋起來。
  • 可將『牌1』之程式碼拖曳【複製】『牌5』,再修正『牌5』之部分積木指令即可,程式碼如下:
 『牌1』角色之程式碼:
 『牌5』角色之程式碼:


(6)『牌2』角色與『牌6』角色之程式碼:同上法操作,利用拖曳複製程式碼的方式修改其他角色之程式碼。

 『牌2』角色之程式碼:
 『牌6』角色之程式碼:


(7)『牌3』角色與『牌7』角色之程式碼,如下圖。

 『牌3』角色之程式碼:
 『牌7』角色之程式碼:


(8)『牌4』角色與『牌8』角色之程式碼,如下圖。

 『牌4』角色之程式碼:
 『牌8』角色之程式碼:

3.【測試程式】:按下螢幕上方綠旗 按鈕,開始執行程式。

延伸思考:呈上題,以角色分身設計翻牌配對遊戲。【重點:學會變數、清單(列表)角色分身『廣播→當接收到』等積木之綜合應用執行畫面如下圖。(檔名:broadcast-5_clone.sb2)  分享

 遊戲開始:
 配對成功,顯示第9張『Game Over』牌
一、題目說明:
(1) 有8張牌,若翻開2張一樣的牌,即配對成功。
(2) 若配對成功,則發出『hey』音效;若失敗,則發出『owl』音效
(3) 若翻開2張不同的牌,則2張牌再蓋起來,直到所有的牌都配對完成。
(4) 若4組牌皆配對成功,則出現第9張『Game Over』牌,並發出『cheer』音效
二、問題分析:
(1) 如何避免按下同一張牌。
(2) 比較翻開的第1張與第2張牌,是否為相同圖案。
(3)以變數紀錄翻第幾張牌。
(4) 配對皆成功,如何顯示第9張『Game Over』牌。

1.【角色設計

(1)『牌1』角色:新增不同圖案造型。
 『牌1』角色:製作不同圖案之造型。


(2)新增『結束』角色。

2.程式設計

(1)『牌1』角色身上寫程式碼:



(2)『結束』角色身上寫程式碼:


homework 作業1:過三關,接食物遊戲。【重點:學會變數累加與累減,並結合『廣播→當接收到』等綜合應用】。參閱範例:接雞蛋遊戲。(檔名:broadcast-6.sb2) 

  • 題目說明:
    • 第一關:食物由上往下掉落,主角若接住食物A則得1分,食物A沒接到落地則扣1分,滿10分則進入第二關。
    • 第二關:掉落物增加非食物,接住食物A加1分,食物A落地扣1分,接住非食物扣2分,滿20分則進入第三關。
    • 第三關:掉落物增加食物B,接住食物A加1分,食物A落地扣1分,接住食物B加3分,食物B落地扣3分,接住非食物扣2分,滿50分則顯示『過關』,並顯示總花費時間。

homework 作業承接範例3,16張(4x4) 翻牌遊戲。【重點:學會單向選擇結構的設計與運算式(邏輯運算)的應用】。執行畫面如下圖。(檔名:broadcast-7.sb2 分享

  • 題目說明: 
(1) 承上題,為第一關遊戲,當配對完成後,進入第二關16張(4x4) 翻牌。
(2) 若翻開2張一樣的牌,即配對成功,則2張牌皆消失。
(3) 若翻開2張不同的牌,則2張牌再蓋起來,直到所有的牌都配對完成。
(4) 列表會顯示16張牌之不同座標位置。如下:

 (-180,130)   (-90,130)   (0,130)   (90,130) 
 (-180,42)   (-90,42)  (0,42)  (90,42)
 (-180,-46)   (-90,-46)   (0,-46)   (90,-46) 
 (-180,-134)   (-90,-134)   (0,-134)   (90,-134) 
*原創:http://scratch.mit.edu/projects/1797330/

homework 作業九宮拼圖。【重點:學會指令積木之綜合應用及動手做、邏輯思考】。執行畫面如下圖。(檔名:broadcast-8.sb2 分享展示遊戲

(1)按下綠色旗子,畫面中8張圖片會隨機打亂。
(2)若用滑數點空格旁(上方、下方、左方、右方)之圖片,則該圖片會與空格交換位置。
(3)若成功將8張圖片移回正確位置,空格會顯示該格隱藏之圖片,畫面中並顯示『Pass』。
  • 問題分析:
(1)如何製作9宮拼圖?
(2)如何判斷移動方向(上方、下方、左方、右方)?
(3)如何判斷9張圖是否完成拼圖?

提示;(1)九宮拼圖割圖片法:參閱講義 PhotoImpact影像處理軟體切割圖片功能tv 教學影片