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