Google Blockly Games，讓火星文變積木 - T客邦

許多人有一種刻板印象，要成為程式設計師，必定是英文及數學奇材，但事實上多數程式語言的保留字和函式庫會用到的都是固定的單字，經常使用自然就能記 ... 為提供良好的使用體驗，本站使用Cookies技術。

若您繼續瀏覽本網站，表示您同意本網站使用Cookies。

關於更多Cookies資訊以及如何關閉Cookies設定，請閱讀本站的隱私權政策。

我知道了 關閉 登入 註冊 新聞半導體/電子產業5G/網路AI/大數據電動車/交通加密貨幣/區塊鏈遊戲/電競雲端/資訊安全商業/金融尖端科技3C新品趨勢產品手機/平板行動周邊電信服務手錶/手環筆電桌機印表機顯示器鍵鼠電視投影機耳機/音響相機攝影器材空拍機/無人機處理器主機板顯示卡記憶體/儲存裝置機殼/電源/散熱網通/網路NAS智慧家居家電汽機車電動車車用科技遊戲/電競軟體/APP商業應用手機遊戲/電競評測教學影片活動抽獎/得獎公告體驗試玩活動課程講座討論區課程#NFT防疫上班懶人包新一代工作術GalaxyS22最新情報 關注T客邦最新動態 facebooklinetelegramyoutubeinstagram 關於我們| 聯絡我們 廣告刊登| 隱私權聲明 著作權聲明| 網友投稿 分享次數 許多人有一種刻板印象，要成為程式設計師，必定是英文及數學奇材，但事實上多數程式語言的保留字和函式庫會用到的都是固定的單字，經常使用自然就能記下來，此外在程式設計的過程中，邏輯清楚往往比死背一堆數學公式更為重要。

不過對於從未接觸程式設計的人來說，日後的學習成效往往取決於第一印象的好壞，因此如Scratch、Blockly這類入門程式設計工具，對於學生的吸引力相對是較高的，也容易激發興趣。

Google在2012年時推出Blockly，是一款開源的圖像式程式編輯工具，特色是將程式設計具像化為積木的拖曳和組合，不用手動輸入程式碼就能實現基礎的程式設計應用，並且能夠匯出成為標準的JavaScript程式語言，本篇的BlocklyGames，則是Google於2004年推出，藉由循序漸進的遊戲目標，將程式語言的概念融入遊戲過程中，當然，為了避免流於單純的攻略，這裡並不會列出所有關卡的解法。

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

BlocklyGames網址：https://blockly-games.appspot.com/ ▲1.BlocklyGames的首頁相當簡單，我們先從起點的「拼圖」開始。

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

下一頁還有更多招數！ 上一頁12下一頁 FacebookLINE 關注T客邦 粉絲專頁 官方帳號 官方頻道影音頻道 IG帳號 標籤：Google,教學,程式語言,程式設計 使用Facebook留言 謹慎發言，尊重彼此。

按此展開留言規則 留言板發文規則： 請注意！留言要自負法律責任，相關案例層出不窮，請慎重發文！ 請勿一文多貼灌水洗板或發表無意義字串，違者直接刪除留言。

請勿張貼廣告，不允許任何形式的商業廣告行為，包含頭像、簽名檔等。

禁止發表非官方所舉辦的團購性質活動，違者直接刪除留言。

發言時請勿涉及人身攻擊、侮辱、色情或其他有違社會善良風俗之內容，違者直接刪除留言。

嚴禁發表討論破解軟體、註冊碼、音樂、影片、軟體複製等違反智慧財產權之留言。

請尊重他人之文章著作權，轉載者請標明來源。

1 特斯拉開除了一名測試工程師，因為他在Youtube上分享自己實測自動駕駛內容「太過誠實」 2 iPhone14Pro和14ProMax設計圖曝光，詳細尺寸全公開 3 重建模糊、低解析度人臉圖像的正經AI，被人用表情包玩壞了 4 傳三星晶片廠員工用手機翻拍螢幕，3nm與5nm晶片製程機密資料外流 5 肯德基向山寨店嗆聲並推免費圖庫ChickenStock：別再盜我們的雞腿圖了，直接拿去用吧！ 6 以圖搜圖手機這樣做：教你用Google上傳圖片、圖片搜尋，還有兩個搜圖器 7 4680電池將帶給電動車界重大變革，松下表示有助大幅降低特斯拉電動車成本 8 首款Android13旗艦：GooglePixel7外形曝光，螢幕尺寸接近小米12 9 麥當勞退出俄羅斯後，當地企業立馬註冊山寨LOGO「凡尼亞舅舅」想原地接手850間漢堡店面 10 一場俄烏戰爭，揭開了Web3和NFT所謂「去中心化」的遮羞布