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

烏龜關卡：認識進階的迴圈應用

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雜誌
          
          歡迎加入PC home雜誌粉絲團！