返回網站

一起賽跑 Race!

Race Game

2016年7月1日

他們是:「熊熊遇見你」卡通裡面的的大大、胖達跟阿極。
今天,他們要跟ScratchCat賽跑,看看誰先到終點線。
你的加油聲越大,他們跑得越快,一起來幫他們加油吧!

這個一小時程式設計(Hour of Code™)活動將一步步引導你使用Scratch製作一個互動性賽跑遊戲。你可以用聲音控制角色的移動速度,與電腦或是朋友比賽。

讓你喜愛的角色上場一起比賽吧!

你還可以將這個作品分享給朋友與家人噢!

聲明:內容與圖像版權歸屬於 SCRATCH.MIT.EDU 與CARTOON NETWORK。
由Scratch-TW進行中文化編輯、翻譯與衍生創作,製作者:方毓賢(YU HSIEN FANG)。
引用來源:https://scratch.mit.edu/go​/race games

使用Scratch,兒童與青少年可以編寫程式來創作專屬的遊戲、故事、動畫以及更多的可能性。透過這個一個小時的Scratch活動,參與者將藉由設計一個遊戲作品來獲得寫程式的經驗。完成的遊戲作品也可透過網路分享給其他人。

MIT Scratch Team團隊提供了以下的教學素材與建議,可協助老師將這個活動帶入教室、圖書館或其他學習場所:

準備好開始了嗎?我們的建議如下

  1. 請先閱讀以下的活動指引,留意活動需準備的事項,建議導引者自己完整實作一次。
  2. 下載教育者指南中文版,導引者可更了解如何籌備教學活動。
  3. 下載活動卡片中文版,可印發給學員們。
  4. 前往ThinkinViz協力製作的一起賽跑 - 熊熊遇見你-教學範例頁面,創作遊戲作品。
  5. 如果遇到困難,可參考由ThinkinViz協力製作的Scratch Project: 一起賽跑 - 熊熊遇見你 Remix

第1步
活動前準備

  • 確認活動場所是否有「網際網路連線」。這是一個需要電腦設備與網路連線的活動,務必事先確認。
  • 建議教師可準備投影設備(例如:投影機)以便讓學生看見操作畫面。
  • 學習註冊Scratch帳號,詳細步驟請查閱:Scratch 註冊指引
  • 試玩一起賽跑 - 熊熊遇見你 Remix ,來激發靈感。

project: 一起賽跑 - 熊熊遇見你 Remix (*僅於電腦上操作),點紅色圖示來停止。
安全性說明:這個遊戲程式會使用麥克風來接收音量,請允許Flash的授權詢問。
遊戲程式儲存於MIT Scratch網路平台,Scratch-TW不會記錄或留存任何聲音。

第2步
開始程式設計

1. 註冊並登入Scratch

引導學生前往Scratch網站,註冊Scratch帳號並登入。​

2. 看看遊戲作品動畫

<Q> 想一想:
說到賽跑,你會想到什麼呢?

操場、跑道、終點線、

加油聲、還有至少兩個人?對嗎?

引導學生前往:一起賽跑 - 熊熊遇見你-教學範例 ,準備開始創作遊戲。

3. 按個按鍵讓角色開始移動

當按下方向鍵時,讓熊熊開始移動。

首先,滑鼠點一下「角色區」中的熊熊(bearstack),再點一下「程式」分頁。

藍色外框表示,你選到了那個角色,例如:熊熊(bearstack)。

加入以下的程式積木:

程式積木如下:

現在,按一下鍵盤上的「向右鍵 —>」

熊熊是不是開始移動了呢?

很好!

<T>小技巧:

  • Scratch中的人物又都稱為「角色(Sprite)」。這個字是我們從第一款電子遊戲(video game)引用來的。
  • 你可以讓你喜歡的角色加入賽跑:
    點一下「a. 從範例庫中選擇角色」,從範例庫中選出一個你喜歡的角色:
  • 你可以刪除不需要的角色:
    先點擊「剪刀」圖示,在舞台上點一下你想要刪除的角色,例如下圖:

4. 畫上終點線

使用繪圖工具,來畫出賽跑的終點線:​

製作「終點線」的角色,作為賽跑的終點。

點擊「b. 畫新角色」按鈕,來手繪一個新的角色:​

在右邊的繪圖編輯器,畫出一條直線:​

你也可以:更改顏色、變更線條的寬度、旋轉直線的角度。

<T> 小技巧:

按住鍵盤上的「shift」鍵,再畫線,就能畫出直線。

將終點線,放置到舞台右方合適的位置:​

滑鼠點一下「角色區」中的直線。
在舞台上,滑鼠左鍵按著直線來移動。

5. 抵達終點線,歡呼!

設定角色抵達終點線時,會發生的行為:

<Q> 想一想:

當你賽跑時,抵達終點線你會怎麼樣呢?

歡呼、Oh Yeah!

我們也讓熊熊們這樣做吧。

首先,滑鼠點一下「角色區」中的熊熊(bearstack),再點一下「程式」分頁。

藍色外框表示,你選到了那個角色,例如:熊熊(bearstack)。

修改原本的程式積木:

<!> 注意:終點線的名字是「角色1」。

完成的程式積木如下:

當熊熊抵達終點線時,他們會歡呼,並且說:我們贏了!

現在,使用鍵盤上的「向右鍵」

讓熊熊們一直移動,碰到終點線吧!

酷!我們贏了!

6. 當遊戲開始,回到起跑線。

當遊戲開始時(按下綠色旗子),讓角色回到預設的位置(起跑線後):

首先,滑鼠點一下「角色區」中的熊熊(bearstack),再點一下「程式」分頁。

藍色外框表示,你選到了那個角色,例如:熊熊(bearstack)。

加入以下的程式積木:

完整的程式積木如下:

現在,點一下綠色旗子。

使用鍵盤上的「向右鍵」讓熊熊們一直移動到終點線。

然後,再點一下「綠色旗子」

熊熊們是不是回到起跑線了呢? 非常好!

7. 加入另一位賽跑選手:

讓其他角色也能藉由控制,移動到終點線:

現在,我們已經讓熊熊可以賽跑到終點線了!

接下來,我們也要讓Scratch貓咪,可以移動到終點線。

想一想,你會怎麼做呢?

<T> 小技巧:

Scratch貓咪的程式積木,應該與熊熊的程式積木非常相似。

差異只在:

1. 操控的鍵盤 (我們建議使用:鍵盤的a鍵)

2. 到終點線的行為 (我們建議播放不同的音效,跟說不同的話)

首先,

滑鼠點一下「角色區」中的Scratch貓咪(Cat 1 Flying),

再點一下「程式」分頁。

加入以下的程式積木:​

現在,點一下綠色旗子。

試試看鍵盤上的「a鍵」,能不能讓貓咪一直移動到終點線呢?

熊熊也可以使用「向右鍵」移動喔!

8. 讓角色看起來更生動

變換造型,讓角色更像在賽跑:​

滑鼠點一下「角色區」中的熊熊(bearstack),

再點一下「程式」分頁。

將原本的程式積木修改為:

滑鼠點一下「角色區」中的Scratch貓咪(Cat 1 Flying),

再點一下「程式」分頁。

將原本的程式積木修改為:

現在,點一下綠色旗子。

使用「a鍵」:讓貓咪開始跑步

使用「向右鍵」:讓熊熊們開始跑步

他們是不是更像在賽跑了呢?

<T> 小技巧:

先點角色、再點選「造型」分頁,可以看看這個角色有沒有其他的造型。

你也可以加入新造型或編輯原本的造型。

9. 用加油聲,熊熊動起來!

<!> 注意:

引導者請注意:有時候會因為瀏覽器的安全性設定,而無法使用麥克風。

因此,這個階段可能需要一段時間來排除問題。引導者可思考是否要實作這一段。

如果你有麥克風,
可以運用「聲音偵測」,來與角色互動:

現在,我們要用加油聲,來讓熊熊移動到終點線。
聲音愈大,熊熊就會移動越快喔!

滑鼠點一下「角色區」中的熊熊(bearstack),

再點一下「程式」分頁。

加入以下的程式積木:

完整的程式積木如下:

<T> 小技巧:

  • 在積木上按右鍵,選擇「複製」,可以複製相同程式碼。
  • 「音量值」積木:可用來偵測麥克風的音量。
  • 音量值可能會很大,所以用「除法積木」,來調整移動的步數。

現在,點一下綠色旗子。

大聲拍手、喊出聲音幫熊熊們加油,讓他們跑到終點線吧!

我們贏了!喔耶!

10. 讓電腦控制Scratch貓咪,讓貓咪自己跑到終點線。

<!> 注意:

引導者請注意:這是補充的部分,會讓遊戲變成「單人遊戲」,不一定要實作。

我們將要改變Scratch貓咪內的程式碼,當點下綠色旗子,就會開始跑向終點線。

這樣,我們只能用「向右鍵」或「音量」控制熊熊們。

讓電腦控制其中一個角色,讓角色自己動起來:

滑鼠點一下「角色區」中的Scratch貓咪(Cat1 Flying),

再點一下「程式」分頁。

將原本的程式碼改為:

現在,點一下綠色旗子。

Scratch貓咪是不是開始往終點線奔跑了呢?

趕快一起幫熊熊們加油吧!

<C> 小挑戰:

  1. 塗鴉與裝飾:你可以加入更多的角色、用繪圖編輯器來修改舞台背景,讓比賽場景更豐富。
  2. 現在由電腦控制的Scratch貓咪,他不會變換造型了!你知道怎麼修改嗎?
  3. 發揮創意:你可以製作一個游泳比賽的遊戲嗎?

11. 儲存並分享你的作品

恭喜!你已經完成了一個遊戲!

為你的程式專案取個名字(輸入標題)。

點一下,畫面右上方的「改編」或是「分享」

將遊戲作品分享給世界上的所有人!

這個影片會教你,如何進行分享。
(記得打開中文字幕)

<T> 小技巧:

  • 你需要註冊Scratch並登入,才可以在線上儲存與分享你的程式專案。
  • 你也可以儲存程式專案到你的電腦中:點選「檔案」選單,再選擇「下載到您的電腦」。

第3步
活動結束後

謝謝你的參與!
恭喜!你已經完成了一小時程式設計活動(Hour of Code)。

協助學生分享

每位學生完成遊戲作品後,點擊畫面右上方的「分享」,這樣便會將學生創作的遊戲在Scratch平台上公開。學生只需要複製程式專案的網址,再將網址傳送給想要分享的朋友或家人,便可讓大家一起玩賽跑遊戲。

學習更多

  • 學生們可前往:Scratch-TW/學習者專區,進行另外其他的Scratch活動。
  • 老師們可前往:Scratch-TW/教育者專區,下載完整的教學指引手冊,規劃更完整的Scratch程式設計課程。
  • 找尋更多Scratch程式教育資源,可前往:ScratchEd查看來自世界各地教育者分享與討論的事項。

參考資源與連結:

https://scratch.mit.edu/go​ (Scratch 2016 Things to Try)⬀

一起賽跑 - 熊熊遇見你-教學範例 (Scratch Project by ThinkinViz)⬀

一起賽跑 - 熊熊遇見你 Remix (Scratch Project by ThinkinViz)⬀

賽跑遊戲-活動卡片中文版⬇︎(Credit: dnowba)

賽跑遊戲-教育者指南中文版⬇︎ (Credit: 李元毓、劉家均、蔡凱如、孫賜萍 - 軟體自由協會)

第4步
分享與討論

留言分享你的Scratch作品網址
歡迎討論、一起學習

訂閱Scratch-TW電子報
取得最新教學課程與活動訊息