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

下一頁還有更多招數!

使用 Facebook 留言

發表回應

謹慎發言,尊重彼此。按此展開留言規則