跟著Google 學程式設計：Google Blockly Games，讓火星文變 ...

Google 2012 年時推出Blockly，是開源圖像式程式編輯工具，特色是將程式設計具像化為積木拖曳和組合，不用手動輸入程式碼就能做到基礎程式設計應用，並能 ... X 科技新知時時更新 免費訂閱電子報 訂閱 退訂 ※此電子郵件已被使用！ 請勾選您感興趣的類別（至少勾選一項） 產業科技 科技財經 網路趨勢 科技新知 科技新品 同意隱私權政策* 許多人有刻板印象，要成為程式設計師，必定是英文及數學奇材，但事實上多數程式語言的保留字和函式庫會用到的都是固定單字，經常使用自然就能記下來，此外程式設計時，邏輯清楚往往比死背一堆數學公式更重要。

不過對從未接觸程式設計的人來說，日後學習成效往往取決於第一印象好壞，因此如Scratch、Blockly這類入門程式設計工具，對學生的吸引力相對較高，也容易激發興趣。

Google2012年時推出Blockly，是開源圖像式程式編輯工具，特色是將程式設計具像化為積木拖曳和組合，不用手動輸入程式碼就能做到基礎程式設計應用，並能匯出標準JavaScript程式語言。

本篇BlocklyGames則是Google於2004年推出，藉由循序漸進的遊戲目標，將程式語言概念融入遊戲過程，當然，為了避免流於單純攻略，本文不會列出所有關卡的解法。

拼圖關卡：了解資料型態及組成方式 BlocklyGames第一關「拼圖」，可發現Blockly的主要視覺表現形式就是「積木」，此關目標是替每個動物加上圖片、輸入腿的數量並加入特徵，我們可看到程式語言會應用到的基本資料型態，像是整數、字串及圖片等，藉由滑鼠拖拉積木並組合在一起，其實就是替物件（動物）賦予屬性（圖片、特徵等），雖然牠們都是動物，但只需要加入屬性差異，電腦便能區分，即是物件導向程式設計的基本概念。

BlocklyGames：https://blockly-games.appspot.com/ ▲BlocklyGames首頁相當簡單，先從起點的「拼圖」開始。

▲進入關卡時首先會說明此關的過關條件，按下「確定」開始遊戲。

▲綠色積木方塊代表物件，拖拉相對應的圖片及文字積木嵌入空位，即代表封裝屬性的過程。

▲腳的數目代表程式語言的資料型態中，經常出現的整數數值。

▲當所有積木完成，我們也成功建立了4個包含屬性的物件，按下「檢查答案」看看是否正確。

迷宮關卡：程式運作的3種流程控制 從迷宮關開始，每一關都會有10小關，過關後會顯示對應的JavaScript程式碼，便於讓學習者互相對照，了解程式碼的編寫格式與邏輯。

迷宮關卡最重要的是加入流程控制概念，包含循序、迴圈及分支3種主要結構。

「循序」代表依順序執行指令；「迴圈」代表重複執行某段指令，「分支」是依照條件設定不同，執行不同的指令。

就程式設計實務而言，不管多複雜的程式流程，基本上都不脫這3種控制結構範圍。

▲目標是讓衣夾人抵達目的地，第一關是直線，只需循序堆疊兩個「移動─向前」積木便可達成，按下「運行程式」可檢查結果。

▲第二關加入轉向積木，同樣依序堆疊，這兩關的主要概念即是「循序」的控制結構。

▲第三關雖然可以利用重複堆疊「移動─向前」積木達成目標，但限制只能使用兩個積木，所以必須使用「重複執行」積木。

▲「重複執行」積木其實就代表迴圈，把「移動─向前」積木嵌入後，便可重複執行前進動作，直到抵達終點。

▲檢視程式碼，可發現這是一個While迴圈，While後面的括弧代表條件判斷，也就是抵達終點前，一直重複向前移動的動作。

▲第六關加入新的條件積木，同時迷宮也變得更複雜，僅使用重複前進，必然無法解決轉彎問題。

▲因此加入「如果」條件積木，創造出分支結構，前進過程中，當遇到左方有路時，就優先左轉再前進。

▲檢視完成後的程式碼，如果我們要設分支的條件，應用的是「if」語法。

▲第八關迷宮無法靠轉同一方向就抵達終點，不過再加入往右轉的條件判斷即可輕鬆解決。

▲第九關迷宮加入岔路設計，如果遇到就岔路就立刻轉彎，可能會直接走入死胡同。

▲因此在原有架構上加入新的判斷式，前方有路的狀況下，以前進為優先，前方沒有路走再轉彎，接著便可挑戰最後一關了。

小鳥關卡：進階的分支條件控制 此關卡的首要目標是控制小鳥吃到蟲子，並讓牠安全飛回鳥巢，比起迷宮關卡單純前進或轉彎，小鳥移動方式較複雜，除了藉由函式定義小鳥行進，還要透過參數指定飛行角度，同時由於小鳥必須先吃到蟲子，才能回到終點（鳥巢），所以這個關卡的邏輯概念是有條件的控制，相同概念包括猜拳遊戲及計程車費率計算等，例如計程車起程1公里是90元，超過1公里後以每200公尺跳5元計算，必須分別應用不同的條件式。

▲第一關由於小鳥、蟲子及鳥巢位於同一條直線，因此只要設定角度參數為45度，小鳥便能直接飛越。

▲小鳥、蟲子及鳥巢若不位於同一條直線，就需要透過條件積木，設定小鳥吃到蟲之前及之後的飛行角度。

▲還沒吃到蟲時，小鳥會往0度方向飛，吃到蟲子後，設定變更飛行角度為90度，往上飛回鳥巢。

▲程式碼除了有「if」語法，加入「else」代表若出現「if」之外狀況時，該執行何種動作，如此形成簡單的判斷式。

▲第四關沒有蟲，因此「還沒吃到蟲」積木變成無法選取，這代表此關的條件判定基準已經變更。

▲這關程式架構與第三關完全相同，只是改X軸當分界，小鳥抵達座標80之前，都是朝0度方向飛行。

▲從第六關開始，關卡要求複合式條件設定，目的在於精確控制程式的執行流程，點擊齒輪圖示可添加「否則如果」、「否則」等控制選項。

▲先解決第一段程式，還沒吃到蟲前，沿著345度方向往蟲子飛去。

▲條件加入「否則如果」，即在小鳥吃到蟲後，但位置小於Y軸座標80時，持續往90度方向飛。

▲當飛到Y軸座標80，可再下一個「否則」（else）控制指令，讓小鳥接著往180度方向飛，直到抵達鳥巢。

▲摸熟if、else、elseif等程式語法的邏輯，便能接著往後續關卡挑戰。

烏龜關卡：認識進階的迴圈應用 BlocklyGames在迷宮關卡帶出迴圈概念，其實迴圈還有不同種類及功能的變化，亦能為迴圈設定執行條件與次數，烏龜關卡是以繪圖遊戲形式展現。

有趣的是，取消了積木數量限制，假使你用最原始的循序控制，依然能達成繪製圖形的目標，只是這樣疊起來的積木體積將非常巨大，如果可活用迴圈語法，便能達到精簡程式碼，並減少出錯的可能，相似概念除了用於繪圖，也經常出現在猜數字、大樂透等遊戲。

▲第一關可先利用循序結構繪圖，便能發現哪些積木有規律地重複出現，即可將之設為迴圈。

▲留下「移動100單位」積木及「右轉90度」積木，嵌入迴圈積木並設定為4次，這樣只需3個積木就能畫出正方形。

▲檢視程式碼，這裡所使用的迴圈語法是「for」而不是「While」，括號內的條件敘述式表明迴圈執行4次後便終止。

▲第四關必須繪製兩個圖形，首先按照前面關卡的概念先繪出黃色星星。

▲只需加入「停筆」與「下筆」積木，就可讓畫筆往前移動時，保留或清除黃色線段。

▲第五關要繪製4個星星，乍看很難，但原理與前一關類似，先繪出一個星星，再透過「停筆」把畫筆移動至下一個星星的起點。

▲別忘記替畫筆轉向，接著再畫出一個星星。

▲從第2到第4顆星星，都需經過移動畫筆、轉向及繪製星星的相同流程，所以可用迴圈積木包起來，讓它執行3次即可完成。

▲第八關因為沒有提供畫圓工具，所以同樣要透過線段繪製，首先把畫筆移到圓的中心點。

▲接著利用迴圈重複繪製線段，每繪製一條線段便旋轉1度，執行360次便是一個完整的圓，利用下方速度條可加快繪製速度。

▲圓繪製完成後，別忘了再畫筆移回星星頂點，按照步驟8概念，便能用迴圈繪製出3個星星。

影片關卡：動畫製作的基本原理 在BlocklyGames，每道主題關卡的概念，皆延續前面關卡而來，達到循序漸進的學習目標，比方說在烏龜關卡，原來繪製的都是靜態圖像，但影片關卡，不但要繪製，而且還要讓它動起來變成「影片」，因此運用的語法就更複雜。

首先繪圖時會利用函式製作圖形，再搭配座標及時間等變數，讓每個圖形都可以動起來，不過想讓這些圖形按照你的意思做出不同動作，得透過不同的數學公式才能達成，綜合在一起，便形成模組化程式設計的基本概念。

▲第一關是單純的繪製圖形，這次就不需要利用重複繪製線段達成，而是運用函式繪圖積木。

▲依照圖上座標輸入每個圖形的數值，並嵌入顏色積木，就能完成第一關。

▲第二關開始導入時間變數，將時間積木安裝在手臂終點Y軸的位置，讓它隨著時間變換座標，便可形成動態的畫面，按下播放看結果如何。

▲第三關要讓另外一隻手臂呈現反向的運動，於是加入運算積木，用100減去「時間0~100」，那麼Y軸座標就會反過來從座標100移動至0。

▲第四關的原理亦相同，要讓兩隻腳交叉，在X軸上變換終點座標即可。

▲第五關要讓手臂進行更複雜的運動，則需要運算式幫忙，還好Google已提供一組算式讓我們試試看。

 ▲依照前個步驟的公式建立運算式積木，將其嵌入手臂的終點Y軸，效果是讓手臂來回運動。

▲第六關需要替人物加上手掌，並讓它跟著手臂一起運動，這裡有個取巧的方式，只需畫出圓形，並在Y座標複製手臂的運算式嵌入即可。

▲影片最後一關和烏龜關一樣，都是提供更多類型積木讓使用者自由發揮，完成後可以「提交到影片庫」。

▲前一步驟檢視影片庫，可看到其他人的作品，不只是展示執行效果而已。

▲點入後可看到影片的Blockly組合方式，參考別人如何編輯，同時也能修改參數並測試效果。

池塘遊戲：小遊戲的設計邏輯 使用者突破前面所有關卡之後，大致上應該都能掌握Blockly的基礎概念與操作模式，最後的池塘遊戲教程及池塘遊戲關卡，可說是所有概念的融合，也要求學習者試著從圖像化的積木，回歸到程式碼編輯模式，畢竟市面主流的程式設計語言仍以文字進行。

另外，新版BlocklyGames其實在影片關後，插入新的「音樂」關卡，不過音樂關比較像是新功能介紹，讓使用者可透過積木編排音符，創造自己的音樂，但也需要些許音樂素養才行，這裡表過不提。

▲關卡目標是控制黃色小鴨射擊紅色小鴨，第一關只需要設定好角度及射程參數，按下「運行程式」看結果。

▲第二關會發現積木不見了，僅留下一行程式碼，但經過前一關，我們可以很清楚知道cannon函式內該填的參數是什麼。

▲第三關的紅色小鴨有一條紅色血量，只射擊一次並不會死，所以我們可以利用「While迴圈」讓黃色小鴨持續射擊。

▲在While迴圈嵌入邏輯積木「True」，可讓它持續無窮盡的射擊動作，按下「運行程式」看結果。

▲第四關又切換回程式碼編輯，第一行加入While迴圈語法，並用中括弧把cannon函式包起來，代表執行迴圈的對象。

▲也可以把cannon函式縮排，以代表迴圈的從屬關係，如果有大量程式碼時，比較容易辨認及除錯。

▲程式架構不變下，因第五關紅色小鴨會不斷來回移動，所以我們可以把「scan」積木嵌入射程欄位，由電腦判斷。

▲當然，開砲及掃描角度都要正確，才能正確擊中目標。

▲第七關由於大砲射程有限，得控制黃色小鴨接近敵人，才能射中目標，因此要使用新的「swim」積木。

▲對準紅色小鴨設定游向的角度，砲口的設置與步驟8的掃描射擊類似，按下「運行程式」。

▲當完成10關池塘遊戲教程之後，便可進入BlocklyGames的最終關卡，測驗看看能否擊中另外3隻隨機移動的鴨子。

（本文由T客邦授權轉載） 科技新知，時時更新 科技新報粉絲團 訂閱免費電子報 關鍵字:BlocklyGames,Google,程式設計 Postnavigation ←邊拜訪柑仔店邊扶貧，小台商翻身東協尿布王 地球最擁擠的10大城市！前幾名比台灣總人口還多→ 我們偵測 到您有啟用 ADBlock 請您暫停使用ADBlock，以支持我們持續能提供更多新聞資訊與優質的閱讀環境。

贊助專欄 活動專區 研討會 CurrencyRate 本週熱門耶魯大學揭「尚未棄俄」企業名單，台灣3知名大廠上榜 傳旗艦晶片設計欠佳、轉單台積電仍耗能，高通瀉5%台積電4月年度調薪，劉德音：今年調幅大家會很開心就是要踩美國紅線？傳俄羅斯要將台積電代工轉單中國廠商英國民營核融合技術突破，ST40反應爐溫度達攝氏1億度顯卡大幅降價！以太坊礦工掀ETH合併逃難潮？「279工程」復活，俄軍挖出50年代實驗戰車重新測試無線路由器推薦｜6款Wi-Fi6無線路由器大評比 財訊快報 志超2月營收20.52億元 南茂2月營收月減7.8% 榮群2月營收月減60.2% 晶心科2月營收4,156.70萬元 矽力-KY2月營收18.90億元 良維2月營收月減24.4% 系微2月營收1.04億元 海韻電2月營收月減56.5% 撼訊2月營收7.09億元 宣德2月營收8.74億元 更多>> 編輯精選 [專欄]銀行暫停房貸卻續承作土建融的做法，已違背金管會健全房市的初衷 [熱門]台積電4月年度調薪，劉德音：今年調幅大家會很開心 [推廣]為什麼要用VPN？4個關於VPN常見的問題 [獨家]長江存儲正式打入蘋果Flash供應鏈！傳供貨iPhoneSE [專題]【大南方崛起】扭轉重工業城市宿命，除了拉攏台積電高雄還有什麼招式 [專題]【大南方崛起】華邦電路竹建立新12吋晶圓廠，爭取人才、供應鏈、成本加值效益 [專題]【大南方崛起】群聯搶進投資高雄，潘健成：為招募人才與區隔市場發展搶先布局 [專題]【大南方崛起】深耕高雄，默克全球全首座半導體材料生產暨研發中心大解密 FB粉絲團 其它 登入 文章RSS訂閱 迴響RSS訂閱 WordPress台灣正體中文 請您暫停使用ADBlock，以支持我們持續能提供更多新聞資訊與優質的閱讀環境。