跟著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 等程式語法的邏輯，便能接著往後續的關卡挑戰 。

下一頁還有更多招數！