跟著Google學程式設計：Google Blockly Games，讓火星文變積木
許多人有一種刻板印象，要成為程式設計師，必定是英文及數學奇材，但事實上多數程式語言的保留字和函式庫會用到的都是固定的單字，經常使用自然就能記下來，此外在程式設計的過程中，邏輯清楚往往比死背一堆數學公式更為重要。
不過對於從未接觸程式設計的人來說，日後的學習成效往往取決於第一印象的好壞，因此如 Scratch、Blockly 這類入門程式設計工具，對於學生的吸引力相對是較高的，也容易激發興趣。Google 在2012年時推出 Blockly，是一款開源的圖像式程式編輯工具，特色是將程式設計具像化為積木的拖曳和組合，不用手動輸入程式碼就能實現基礎的程式設計應用，並且能夠匯出成為標準的 JavaScript 程式語言，本篇的 Blockly Games，則是 Google 於2004年推出，藉由循序漸進的遊戲目標，將程式語言的概念融入遊戲過程中，當然，為了避免流於單純的攻略，這裡並不會列出所有關卡的解法。
拼圖關卡：瞭解資料型態及組成方式
在 Blockly Games 第一關「拼圖」當中，可以發現 Blockly 的主要視覺表現形式就是「積木」，此關的目標是替每個動物加上圖片、輸入腿的數量並加入其擁有的特徵，在這裡我們可以看到程式語言中會應用到的一些基本資料型態，像是整數、字串以及圖片等等，而藉由滑鼠拖拉積木並將其組合在一起時，其實就是替物件（動物）賦予其屬性（圖片、特徵等），雖然牠們都是動物，但只需要加入屬性的差異，電腦便能加以區分，這即是物件導向程式設計的基本概念。
Blockly Games
網址：https://blockly-games.appspot.com/
▲ 1. Blockly Games 的首頁相當簡單，我們先從起點的「拼圖」開始。
▲ 2.進入關卡時首先會說明此關的過關條件，按下「確定」開始遊戲。
▲ 3.綠色積木方塊代表物件，拖拉相對應的圖片及文字積木並嵌入空位，即代表封裝屬性的過程。
▲ 4.腳的數目代表著在程式語言的資料型態當中，經常會出現的整數數值。
▲ 5.當所有積木都完成後，我們也成功建立了4個包含屬性的物件，按下「檢查答案」看看是否正確。
迷宮關卡：程式運作的三種流程控制
從迷宮關開始，每一關都會有10個小關，當過關之後則會顯示對應的 JavaScript 程式碼，便於讓學習者可以互相對照，瞭解程式碼的編寫格式與邏輯。迷宮關卡最重要的是加入了流程控制的概念，包含循序、迴圈以及分支三種主要結構。「循序」代表依順序執行指令；「迴圈」則代表某重複執行某段指令，「分支」則是依照條件設定之不同，而會執行不同的指令。就程式設計實務上而言，而不管多麼複雜的程式流程，基本上都不脫這三種控制結構的範圍。
▲ 1.目標是讓衣夾人抵達目的地，第1關是直線，只需循序堆疊兩個「移動-向前」積木便可達成，按下「運行程式」可檢查結果。
▲ 2.第2關加入轉向積木，同樣依序堆疊，這兩關的主要概念即是「循序」的控制結構。
▲ 3.第3關雖然可以利用重複堆疊「移動-向前」積木達成目標，但由於限制只能使用兩個積木，所以必須使用「重複執行」積木。
▲ 4.「重複執行」積木其實就是代表迴圈，把「移動-向前」積木嵌入後，便可重複執行前進的動作，直到抵達終點。
▲ 5.檢視程式碼，可發現這是一個 While 迴圈，While 後面的括弧代表條件判斷，也就是當抵達終點前，一直重複向前移動的動作。
▲ 6.第6關加入了新的條件積木，同時迷宮也變得更為複雜，僅使用重複前進，必然無法解決轉彎的問題。
▲ 7.因此我們加入「如果」的條件積木，創造出分支結構，在前進的過程中，當遇到左方有路時，就優先進行左轉再前進。
▲ 8.檢視完成後的程式碼，如果我們要設下分支的條件設定，所應用的是「if」這個語法。
▲ 9.第8關迷宮無法靠著轉同一邊方向就能抵達終點，不過再加入一個往右轉的條件判斷即可輕鬆解決。
▲ 10.第9關的迷宮加入了岔路的設計，如果遇到就岔路就立刻轉彎，可能會直接走入死胡同。
▲ 11.因此我們在原有架構上，加入新的判斷式，在前方有路的狀況下，以前進為優先，前方沒有路走再轉彎，接著便可以挑戰最後一關了。
小鳥關卡：進階的分支條件控制
此關卡的首要目標是控制小鳥吃到蟲子，並讓牠安全的飛回鳥巢，比起迷宮關卡的單純前進或轉彎來說，小鳥的移動方式較為複雜，我們除了藉由函式來定義小鳥的行進外，還要透過參數來指定其飛行的角度，同時由於小鳥必須先吃到蟲子之後，才能回到終點（鳥巢），所以這一個關卡的邏輯概念，其實是一種有條件的控制，相同的概念包括猜拳遊戲以及計程車費率計算等等，例如計程車起程1公里是90元，超過1公里後以每200公尺5元計算，因此就必須分別應用不同的條件式。
▲ 1.第1關由於小鳥、蟲子及鳥巢位於同一條直線上，因此只要設定角度參數為45度，小鳥便能直接飛越。
▲ 2.小鳥、蟲子及鳥巢若不位於同一條直線上，就需要透過條件積木，來設定小鳥在吃到蟲之前以及之後的飛行角度。
▲ 3.在還沒吃到蟲時，小鳥會往0度方向飛，直到吃到蟲子後，則設定變更飛行角度為90度，往上飛回鳥巢。
▲ 4.其程式碼中除了有「if」的語法外，加入「else」則代表若出現「if」之外的狀況時，該執行何種動作，如此形成了一個簡單的判斷式。
▲ 5.在第4關沒有蟲，因此「還沒吃到蟲」積木變成無法選取，這代表此關的條件判定基準已經變更。
▲ 6.這一關程式架構與第3關完全相同，只是改為X軸來做為分界，小鳥在抵達座標80之前，都是朝著0度方向飛行。
▲ 7.從第6關開始，關卡要求複合式的條件設定，目的在於精確控制程式的執行流程，點擊齒輪圖示可以添加「否則如果」、「否則」等控制選項。
▲ 8.先解決第一段程式，在還沒吃到蟲前，沿著345度的方向往蟲子飛去。
▲ 9.在條件上加入「否則如果」，即在小鳥吃到蟲後，但位置小於Y軸座標80時，持續往90度方向飛。
▲ 10.當飛到Y軸座標80之後，可再下一個「否則（else）」的控制指令，讓小鳥接著往180度方向飛，直到抵達鳥巢。
▲ 11.摸熟 if、else、else if 等程式語法的邏輯，便能接著往後續的關卡挑戰 。
下一頁還有更多招數！
烏龜關卡：認識進階的迴圈應用
Blockly Games 在迷宮關卡中帶出了迴圈的概念，不過其實迴圈還有不同種類及功能的變化，亦能為迴圈設定執行的條件與次數，在烏龜關卡中則是以繪圖遊戲的形式展現，有趣的是，這裡取消了積木數量的限制，假使你用最原始的循序控制，依然能夠達成繪製圖形的目標，只是這樣疊起來的積木體積將會非常巨大，如果可以活用迴圈的語法，便能達到精簡程式碼，並減少出錯的可能，相似的概念除了用於繪圖外，也經常出現在猜數字、大樂透等遊戲上。
▲ 1.在第1關中可先利用循序結構來繪圖，便能發現哪些積木是有規律地重複出現，即可將其設為迴圈。
▲ 2.留下「移動100單位」積木以及「右轉90度」積木，將其嵌入到迴圈積木並設定為4次，這樣只需3個積木就能畫出正方形。
▲ 3.檢視程式碼，這裡所使用的迴圈語法是「for」而不是「 While 」，在括號內的條件敘述式表明迴圈執行4次後便行終止。
▲ 4.第4關必須繪製兩個圖形，首先按照前面關卡的概念先繪製出黃色星星。
▲ 5.只需加入「停筆」與「下筆」積木，就可以讓畫筆在往前移動的過程中，保留或清除黃色線段。
▲ 6.第5關要繪製4個星星，乍看很難，但原理與前一關類似，先繪出一個星星，再透過「停筆」把畫筆移動至下一個星星的起點。
▲ 7.別忘記替畫筆轉向，接著再畫出一個星星。
▲ 8.從第2到第4顆星星，都需經過移動畫筆、轉向及繪製星星的相同流程，所以可用迴圈積木包起來，讓它執行3次即可完成。
▲ 9.在第8關因為沒有提供畫圓的工具，所以同樣要透過線段來繪製，首先把畫筆移到圓的中心點。
▲ 10.接著利用迴圈從重複繪製線段，每繪製一條線段便旋轉1度，執行360次便是一個完整的圓，利用下方速度條可加快繪製速度。
▲ 11.當圓繪製完成後，別忘了再畫筆移回星星的頂點，按照步驟8相同的概念，便能用迴圈繪製出3個星星。
影片關卡：動畫製作的基本原理
在 Blockly Games 中，每一道主題關卡的概念，皆延續著前面的關卡而來，進而達到循序漸進的學習目標，比方說在烏龜關卡中，我們原來所繪製的都是靜態的圖像，但在影片關卡當中，不但要進行繪製，而且還要讓它動起來變成「影片」，因此所運用到的語法也就更為複雜。首先在繪圖的過程中會利用函式來製作圖形，再搭配座標以及時間等變數，讓每個圖形都可以動起來，不過想要讓這些圖形按照你的意思做出不同的動作，得透過不同的數學公式才能達成，綜合在一起，便形成了模組化程式設計的基本概念。
▲ 1.第一關是單純的繪製圖形，這次就不需要利用重複繪製線段的方式來達成，而是運用函式繪圖積木。
▲ 2.依照圖上的座標輸入每個圖形的數值，並嵌入顏色積木，就能完成第1關。
▲ 3.第2關開始導入時間變數，將時間積木安裝在手臂終點Y軸的位置，讓它隨著時間變換座標，便可形成動態的畫面，按下播放看結果如何。
▲ 4.第3關要讓另外一隻手臂呈現反向的運動，於是加入運算積木，用100減去「時間0~100」，那麼Y軸座標就會反過來從座標100移動至0。
▲ 5.第4關的原理亦相同，要讓兩隻腳交叉，在X軸上進行終點座標的變換即可。
▲ 6.第5關要讓手臂進行更複雜的運動，則需要運算式的幫忙，還好Google已經提供一組算式讓我們試試看。
▲ 7.依照前一個步驟的公式建立運算式積木，將其嵌入手臂的終點Y軸，其效果則是會讓手臂進行來回運動。
▲ 8.第6關需要替人物加上手掌，並讓它跟著手臂一起運動，這裡有個取巧的方式，只需畫出圓形，並在Y座標上複製手臂的運算式嵌入即可。
▲ 9.影片的最後一關和烏龜關一樣，都是提供更多類型的積木讓使用者自由發揮，完成後可以「提交到影片庫」。
▲ 10.在前一步驟檢視影片庫，則可以看到其他人的作品，而且不只是演示執行效果而已。
▲ 11.點入之後可以看到該影片的 Blockly 組合方式，參考別人如何編輯，同時也能修改參數並測試效果。
池塘遊戲：小遊戲的設計邏輯
當使用者突破前面所有關卡之後，大致上應該都能掌握住 Blockly 的基礎概念與操作模式，最後的池塘遊戲教程以及池塘遊戲關卡，則可說是所有概念的融合，它也要求學習者試著從圖像化的積木，回歸到程式碼的編輯模式，畢竟市面主流的程式設計語言仍然是以文字方式進行。另外，新版的 Blockly Games 其實在影片關之後，插入了新的「音樂」關卡，不過音樂關比較像是新功能的介紹，讓使用者可透過積木編排音符，創造自己的音樂，但也需要些許音樂素養才行，因此這裡就表過不提。
▲ 1.關卡目標是控制黃色小鴨射擊紅色小鴨，第1關只需要設定好角度及射程參數，按下「運行程式」看結果。
▲ 2.第2關會發現積木不見了，僅留下一行程式碼，但經過前一關，我們可以很清楚知道 cannon 函式內該填的參數是什麼。
▲ 3.第3關的紅色小鴨有一條紅色的血量，只射擊一次並不會死，所以我們可以利用「While迴圈」讓黃色小鴨持續射擊。
▲ 4.在 While 迴圈上嵌入邏輯積木「True」，可讓它持續進行無窮盡的射擊動作，按下「運行程式」看結果。
▲ 5.第4關又切換回程式碼的編輯，在第一行加入 While 迴圈語法，並用中括弧把 cannon 函式包起來，代表執行迴圈的對象。
▲ 6.也可以把 cannon 函式做進行縮排，以代表其迴圈的從屬關係，如果有大量程式碼時，比較容易辨認及除錯。
▲ 7.在程式架構不變下，因為第5關紅色小鴨會不斷來回移動，所以我們可以把「scan」積木嵌入射程欄位，由它去判斷。
▲ 8.當然，開砲的角度以及掃描的角度也都要正確，才能夠正確擊中目標。
▲ 9.在第7關中由於大砲射程有限，得控制黃色小鴨接近敵人，才能射中目標，因此要使用新的「swim」積木。
▲ 10.對準紅色小鴨設定游向的角度，砲口的設置與步驟8的掃描射擊類似，按下「運行程式」。
▲ 11.當完成10關的池塘遊戲教程之後，便可進入 Blockly Games 的最終關卡，測驗看看能否擊中另外3隻隨機移動的鴨子。
歡迎加入PC home雜誌粉絲團！