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

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雜誌
 
          Sony Ear Duo- 無線開放式耳機內建語音助理
          歡迎加入PC home雜誌粉絲團
想看小編精選的3C科技情報&實用評測文,快來加入《T客邦》LINE@

使用 Facebook 留言

發表回應

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