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

作者 | 發布日期 2019 年 08 月 18 日 9:51 | 分類 Google , 科技教育 follow us in feedly


許多人有刻板印象,要成為程式設計師,必定是英文及數學奇材,但事實上多數程式語言的保留字和函式庫會用到的都是固定單字,經常使用自然就能記下來,此外程式設計時,邏輯清楚往往比死背一堆數學公式更重要。

不過對從未接觸程式設計的人來說,日後學習成效往往取決於第一印象好壞,因此如 Scratch、Blockly 這類入門程式設計工具,對學生的吸引力相對較高,也容易激發興趣。Google 2012 年時推出 Blockly,是開源圖像式程式編輯工具,特色是將程式設計具像化為積木拖曳和組合,不用手動輸入程式碼就能做到基礎程式設計應用,並能匯出標準 JavaScript 程式語言。本篇 Blockly Games 則是 Google 於 2004 年推出,藉由循序漸進的遊戲目標,將程式語言概念融入遊戲過程,當然,為了避免流於單純攻略,本文不會列出所有關卡的解法。

拼圖關卡:了解資料型態及組成方式

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

迷宮關卡:程式運作的 3 種流程控制

從迷宮關開始,每一關都會有 10 小關,過關後會顯示對應的 JavaScript 程式碼,便於讓學習者互相對照,了解程式碼的編寫格式與邏輯。迷宮關卡最重要的是加入流程控制概念,包含循序、迴圈及分支 3 種主要結構。「循序」代表依順序執行指令;「迴圈」代表重複執行某段指令,「分支」是依照條件設定不同,執行不同的指令。就程式設計實務而言,不管多複雜的程式流程,基本上都不脫這 3 種控制結構範圍。

小鳥關卡:進階的分支條件控制

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

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

Blockly Games 在迷宮關卡帶出迴圈概念,其實迴圈還有不同種類及功能的變化,亦能為迴圈設定執行條件與次數,烏龜關卡是以繪圖遊戲形式展現。有趣的是,取消了積木數量限制,假使你用最原始的循序控制,依然能達成繪製圖形的目標,只是這樣疊起來的積木體積將非常巨大,如果可活用迴圈語法,便能達到精簡程式碼,並減少出錯的可能,相似概念除了用於繪圖,也經常出現在猜數字、大樂透等遊戲。

影片關卡:動畫製作的基本原理

在 Blockly Games,每道主題關卡的概念,皆延續前面關卡而來,達到循序漸進的學習目標,比方說在烏龜關卡,原來繪製的都是靜態圖像,但影片關卡,不但要繪製,而且還要讓它動起來變成「影片」,因此運用的語法就更複雜。首先繪圖時會利用函式製作圖形,再搭配座標及時間等變數,讓每個圖形都可以動起來,不過想讓這些圖形按照你的意思做出不同動作,得透過不同的數學公式才能達成,綜合在一起,便形成模組化程式設計的基本概念。

池塘遊戲:小遊戲的設計邏輯

使用者突破前面所有關卡之後,大致上應該都能掌握 Blockly 的基礎概念與操作模式,最後的池塘遊戲教程及池塘遊戲關卡,可說是所有概念的融合,也要求學習者試著從圖像化的積木,回歸到程式碼編輯模式,畢竟市面主流的程式設計語言仍以文字進行。另外,新版 Blockly Games 其實在影片關後,插入新的「音樂」關卡,不過音樂關比較像是新功能介紹,讓使用者可透過積木編排音符,創造自己的音樂,但也需要些許音樂素養才行,這裡表過不提。

(本文由 T客邦 授權轉載)