返回網站

玩回力球 Pong!

Pong Game

2016年7月1日

他們是:「熊熊遇見你」卡通裡面的阿極跟胖達。
今天,他們在草地上玩回力球。
阿極很厲害,從來不會漏接。你和胖達同一隊,一起來玩吧!

這個一小時程式設計(Hour of Code™)活動將一步步引導你使用Scratch製作一個經典的乒乓球遊戲:你可以使用滑鼠控制角色的移動,再把球彈回去。
跟你喜愛的角色比賽一回合吧!

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

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

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

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

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

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

第1步
活動前準備

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

project: 玩回力球 - 熊熊遇見你 Remix (*僅於電腦上操作),點紅色圖示來停止。

第2步
開始程式設計

1. 註冊並登入Scratch

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

2. 看看遊戲作品動畫

<Q> 想一想:
你有玩過類似的遊戲嗎?

有沒有什麼運動跟這個遊戲很像?

網球、桌球、足球,你最喜歡哪一種?

引導學生前往:玩回力球 - 熊熊遇見你-教學範例 ,準備開始創作遊戲。

3. 讓球動起來

使用程式積木,讓角色移動​

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

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

加入以下的程式積木:

現在,用滑鼠點一下「移動5步」藍色積木。

小黃球是不是,稍微移動了一點點呢?很好!

試試看:多按幾下,發生了什麼事?

<T> 小技巧:

  • Scratch中的人物又都稱為「角色(Sprite)」。這個字是我們從第一款電子遊戲(video game)引用來的。
  • 輸入的數字越大,角色移動越快:試試看輸入「移動10步」、「移動15步」,看看效果。

4. 讓球持續移動,來回彈跳

遊戲開始後:

讓球開始移動

碰到牆壁會反彈,並繼續彈跳。​

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

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

加入以下的程式積木:

程式積木如下:

好,現在用滑鼠點一下綠色旗子:

小黃球,是不是在舞台上,開始移動了呢?
碰到舞台的邊緣時,小黃球有沒有反彈呢?

酷!

<T> 小技巧:

  • 舞台的座標範圍:如下圖
    舞台正中心(x=0, y=0)、舞台最右邊(x=240)、最左邊(x=-240)
    最上方(y=180)、最下方(y=-180)。
    設定x, y座標,可以改變「角色」的位置。
    試試看:輸入不同的數字,來改變黃色球的出發位置。
  • 角色的移動方向:如下圖
    面向90方向(右方)、面向0方向(上方)、面向-90方向(左方)、面向180方向(下方)
    面向45方向(右上方)、面向135方向(右下方)。
    設定面向[...]方向,可以改變「角色」的移動方向。
    試試看:輸入不同的數字,來改變黃色球的移動位置。

<Q> 小問題:

觀察看看,黃色球上的 > ,代表什麼意思呢?

5. 讓北極熊,自動把球彈回來,決不漏接

遊戲開始後
將北極熊的位置設定到舞台上方​

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

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

加入以下的程式碼:

現在,點一下綠色旗子:
北極熊移到舞台正中間的上方了嗎?

很好!

<T> 小技巧:
使用「移到 x: _ y: _」來改變角色在舞台上的位置:輸入不同的數值,來看看效果。

讓北極熊跟著小黃球的位置左右移動

我們可以讓北極熊在舞台上方左右移動

不斷跟著小黃球左右移動

製作北極熊一直把球彈回來的感覺

將原本的程式積木,修改如下:

最後,程式積木如下:

<T> 小技巧:

x座標 (Ball) 代表的是: 小黃球(Ball)水平方向的位置。

現在,點一下綠色旗子:

北極熊--阿極是不是在舞台上方,跟著小黃球左右移動呢?

當球碰到上方邊緣時,阿極也會移動到相同的位置

看起來好像阿極把球彈回來了!

6. 讓「熊貓」的跟著滑鼠,左右移動

以滑鼠移動

控制角色的移動​

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

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

加入以下的程式積木:

程式積木如下:

現在用滑鼠點一下綠色旗子:

左右移動滑鼠

熊貓是不是跟著左右移動呢?太棒了!

<T> 小技巧:

被「重複執行」積木包起來的指令,會不斷地執行,直到程式結束才會停止。

如果要中途停止,可使用「停止」積木,如下圖:

7. 使用「熊貓」把球彈回去

設定小黃球的行為:

當球碰觸到熊貓時

朝向北極熊的方向反彈回去

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

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

<Q> 想一想:

為什麼是設定「小黃球」的行為,而不是設定「胖達」的行為呢?

因為反彈回去的是「小黃球」哦!

<!> 引導者請注意:
年少的學習者在這一段可能會產生疑問:應該是熊貓把球彈回去,為什麼不是設定熊貓的行為呢?
其實更細緻的程式寫法,可能是:偵測熊貓碰到球時,會廣播一個「碰觸」訊息,當小黃球接受到「碰觸」的訊息時,再設定球的反彈方向。

  • 如果學習者已熟練「廣播」的應用,引導者可嘗試進行這樣的改寫。
  • 如果學習者未能理解「廣播」的使用,引導者可說明:因為回彈的是小黃球,因此要在小黃球裡面寫程式。

加入以下的程式積木:

完整的程式積木如下:

現在,點一下綠色旗子:

以滑鼠左右移動,讓胖達左右移動。
當小黃球碰到胖達時,球有沒有彈回去呢?

很好! 繼續把球彈回去給阿極吧!

<T> 小技巧:
球反彈的設定,反彈的角度示意圖:

  1. 將球的移動方向,設定朝向阿極(icebear):模擬要把球打回去給阿極。
  2. 隨機旋轉一個角度,取-45度至45度之間:更生動地模擬球彈回去的效果,每次都不一樣。

試試看設定不同的角度,看看有什麼效果。

8. 記錄得分

使用變數,來記錄得分:

當胖達把小黃球反彈一次,就獲得一分

在「資料」類別中,點擊「製作一個變數」,並把它命名為「得分(score)」:

點一下「資料」,

點一下「製作一個變數」,

輸入:「得分」作為變數名稱,

點一下「確定」。

接下來,滑鼠點一下「角色區」中的黃色球(Ball),再點一下「程式」分頁。

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

修改原本的程式積木為:

  1. 每次遊戲重新開始時,要把得分歸零。
  2. 每次當熊熊與捲餅接觸的時候,就會增加一分。

最後,程式積木會像下面這樣:

現在,點一下綠色旗子,

移動胖達來回彈小黃球吧

得分有沒有增加呢? 你獲得了幾分? 太酷了!

9. 增加難度:漏接球,碰到邊界線,扣一分

使用繪圖工具,加入「邊界線」角色:

首先,製作「邊界線」的角色:

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

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

將邊界線,放置到舞台下方合適的位置​

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

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

<T> 小技巧:

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

當小黃球碰到邊界線:

  • 小黃球朝向阿極反彈
  • 得分減一分

<Q> 想一想:
你會怎麼做呢?

小提示:「小黃球碰到邊界線的程式碼」很像「小黃球碰到胖達的程式碼」

<!> 引導者請注意:
可留一段時間讓學習者自行嘗試或分組討論。

修改原本的程式積木: ​

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

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

最後,程式積木會像下面這樣:

「小黃球碰到邊界線」的程式碼,跟「小黃球碰到胖達」非常相似,只有兩個差異:

  • 碰到:角色1?  
    角色1是邊界線的名子
  • 將得分變數改變 -1
    如果小黃球碰到邊界線要扣一分

現在,點一下綠色旗子,

移動胖達來回彈小黃球,得分有沒有增加呢?

試試看故意漏掉幾個球,得分有沒有減少呢?

<T> 小技巧:

你的邊界線,在胖達的上面嗎?要如何把胖達移到邊界線的上面呢?

在舞台區,用你的滑鼠左鍵點著胖達,左右拉一下,胖達就會移到邊界線的上面哦!

10. 增加難度:分數變高、球速變快;分數變低、球速變慢

<Q> 小問題:
觀察一下,現在球的移動速度是多少呢?

答案應該是5 (移動5步)

<T> 小技巧:

變數除了用來記錄得分,因為它可以改變的特性,我們可以做更多的運用,例如:改變球的移動速度。現在,球的移動速度是5:

  • 如果我要變快,數字應該要變大,例如:10
  • 如果我要變慢,數字應該要變小,例如:1

使用變數概念,來改變球的移動速度。​

在「資料」類別中,點擊「製作一個變數」,並把它命名為「球的速度」:

點一下「資料」,

點一下「製作一個變數」,

輸入:「球的速度」作為變數名稱,

點一下「確定」。

接下來,滑鼠點一下「角色區」中的黃色球(Ball),再點一下「程式」分頁。

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

修改原本的程式積木:

最後,程式積木會像下面這樣:

繼續加入以下的程式積木:

完整的程式碼如下:

三個區段範圍:

  • 得分 < 5分: 球的速度為 1
  • 5分 < 得分 < 10分: 球的速度為10
  • 得分 > 10分: 球的速度為20

現在,點一下綠色旗子,

移動胖達來回彈小黃球,得分超過5之後,球的速度有沒有加快?

遊戲難度增加了!試試看,你最高幾分!

覺得太快或太慢?

調整「球的速度」中的數字,來加快或減慢球速。

<C> 小挑戰:

  1. 發揮創意:加入音效與更多有趣的效果!
  2. 直向與橫向:現在,阿極跟胖達是在舞台的上下方,你可以把遊戲修改成「阿極在左邊」、「胖達在右邊」嗎?
  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電子報
取得最新教學課程與活動訊息