使用micro:bit學習Python & JavaScript程式語言|台灣STEAM教學團隊 oursteamtw
icon教學資源
212021.05

使用micro:bit學習Python & JavaScript程式語言

應用01 兵乓迴力球Paddle ball Super Smash
  • 學習使用JavaScript在5*5顯示器上編寫一款簡單有趣的遊戲!乒乓迴力球可能與其他更加圖形化的遊戲有意外的相似之處。
  • 在這項應用中,將製作一款簡單的遊戲。將球彈向牆壁,如果漏接即結束遊戲。而遊戲的難易度會隨著級別增加!
../../_images/ngNx9A3.jpg

材料
  • 1 x BBC Micro:bit主板
  • 1 x Micro USB線
製作方法

步驟一


首先,將microbit microcompute插入您自己的電腦,不需要其他組件。
../../_images/fqrpqTW.jpg

步驟二_預編碼

我們需要新增程式碼包才能使用套件。點選「Code drawer」中的「Advanced」,點選最底部的「Add Package」。
../../_images/I2L5019.jpg

點選後會出現搜尋欄,請搜尋「Tinker Kit」,然後點選並下載。
../../_images/8a7kDKF.png
注意:如果跳出「不相容的軟體包將被刪除」的警示,請按照提示操作,或在「Projects file」中建立一個新項目。

步驟三_編碼

../../_images/SfkOKmO.png
首先,定義變數!我們需要許多變數來設定球的位置、速度和方向、球拍的長度和位置以及分數!

../../_images/oYBRGY9.png
接下來要對控制球拍的功能進行編碼。「xb」代表從左側開始拍板的第一個像素位置,而「yb」代表拍板的長度。左右功能控制xb並移動球拍,而board功能則在螢幕上印出球拍影像。

../../_images/lQ0drJR.png
接下來,要控制球何時運動。開始時,球每秒移動一次,越進階的關卡,球會以越來越短的間隔移動!多麼激動人心!

../../_images/c6jUmNb.png
現在,要對控制球與周圍環境相互作用的功能進行編程。當球撞擊側面時,其水平運動會反轉,但垂直運動保持不變。當球撞擊天花板時,可以向任何方向反彈,進而使遊戲更加有趣。

../../_images/MrcNyKJ.png
最重要的是,我們需要查看球是否擊中了球拍。如果未命中,代表您輸了,會顯示您的分數!如果接住了,球也會以隨機的方向反彈,比賽難度也會增加。

../../_images/WIXWKV0.png
最後,設定一個for迴圈當作時鐘,控制球不斷地移動。另外用onButtonPressed()函數來移動球拍。

示範編碼:https://makecode.microbit.org/63331-03858-42547-81536

使用方式
  • 只需將microcontroller連接到電腦啟動程序即可!簡單!
  • 如果得分超過12分,會獲得一張笑臉!反之,可能會獲得一張哭臉...
../../_images/yARLugY.jpg ../../_images/cV3q2Ar.jpg
 
 
應用02 小鳥飛飛Flappy Bird

我們要在5x5的LED螢幕上製作一個完整的互動遊戲。這個遊戲適合各個年齡段的玩家。在這個過程中,你將會學習...。 第一步:將micro:bit程式碼導入到Python。然後,在螢幕上滾動顯示「READY」,並啟動遊戲開始時顯示的倒計時。
  • 第1行:導入micro:bit程序。
  • 第4行:在螢幕上滾動顯示「READY」雙引號標誌指的是字符串(在這個案例中是「READY」)。
  • 第5-10行:使用sleep()函數在螢幕上閃爍每個數字1秒鐘(或1000毫秒,測量時間也包括在內)。
  • 第11行:清除畫面,為後來的小鳥和牆的繪製做準備。
 注意: 在你的編碼添加註解來解釋,有助於你或者其他人理解編碼。也可以添加一個帶#的註解。如有必要,需要將編碼隔開,把不同的編碼劃分為不同的部分。
../../_images/EWlMcgc.jpg

材料
  • 1 x BBC Micro:bit
  • 1 x Micro USB線

為什麼選擇Python?
  • 像英語一樣易讀, Python是最容易閱讀的語言之一,適合初學者。
  • 多功能:Python會成為業界標準是有充分理由的,它可以用來做很多事情,這也是Google和YouTube選擇使用該語言作為後台軟體語言的原因。
  • 廣泛應用: Python是最受初學者歡迎的語言之一,它有著成千上萬的資源,除了可以幫助您查看編碼外,還能獲得很多幫助。這大大協助您清除編程路上的絆腳石。
  • 實際的編程看起來比積木拖曳式編程看起來更酷。先看看以下示範的這些編程的顏色吧!
如何連接Python?

如果您是初學編程,可能還沒有安裝Python。別擔心!可以進入到官方Micro:bit Python編輯器或下載離線的Python編輯器Mu即可編寫程式碼並將其傳送到您的Micro:bit。也可以使用自己的編輯器(Sublime 3和Atom),但必須將其更新到Micro:bit,可能會花點時間。
另外您可以使用Micro:bit模擬器,可以有效測試程式碼,不必每次都下載.hex文件,方便即時修復錯誤。
設置完成後,用USB線將您的micro:bit連接至電腦,它應該連接micro:bit頂部的接口。完成連接後,當下載程式碼時,micro:bit會閃黃色的光來提示您目前正在下載檔案。如果你用的是模擬器,則是直接觀看模擬器的呈現即可。


製作方法

步驟一:321 READY


../../_images/EujWzha.gif

../../_images/DG97oWg.png
第一步是將micro:bit編碼下載到Python。然後讓「READY」的訊息在螢幕上滾動。當遊戲開始時,初始化倒計時。

第1行:導入micro:bit程序。第4行:初始化螢幕的滾動信息「READY」。雙引號代表字符串(在本案例中用「READY」)。第5-10行:使用函數sleep()會讓螢幕上的每個字母閃爍一秒(或者1000毫秒,包括測量時間在內)。第11行:清除螢幕為後來的小鳥和牆的繪製做準備。

**注意: ** 在編碼中添加註解是一種好習慣。可以讓你或者其他人回看這段編碼的時候,能更快地理解。添加註解一般會使用「#」。而且,要表明不同的部分做不同的事情的時候,需要將編碼隔開。

你正在做的是將函數應用到目標顯示器上,例如:將LED螢幕點亮的函數。在Python中,也可以自由地調節第4行文字的滾動速度。
  • display.scroll(“READY”, delay = 200)的文字滾動速度快2倍
  • display.scroll(“READY”, delay = 800)的文字滾動速度則是速度的一半。
標準的延時設置是400。增加數值會減緩文字滾動的速度,而減少數值會增加文字滾動的速度。

恭喜你!您完成了遊戲前的消息設置哦!接下來,需要正式進入到遊戲的設定,讓玩家可以玩這個遊戲。

步驟二:小鳥飛吧!

../../_images/TEgiQ62.png
接著,需要製作小鳥的圖像。對於從未分析過遊戲的人,Flappy Bird只允許小鳥上下飛行,並且均速地讓小鳥朝著牆的方向前進。我們的螢幕只有5排LED燈,因此螢幕的顯示區域非常有限。為了使小鳥的飛行變得更加可行,把這5個部分拆分成100個不同的位置。這為後來新增的下降速度帶來了更多的靈活性。在這個案例中,螢幕頂部的位置位於y=0,按鈕的位置位於y=99,因此這裡面有100個位置。初始位置是y=50。
 
  • 第13行: 因為y=0是頂部,而y=99是在底部,所以小鳥的初始位置剛好被設置在中間。
  • 第17行: 決定了小鳥在螢幕上的實際位置,因為螢幕上有100個位置和5排LED燈。因此,當你將儲存在變量y中的數值除以20的時候,小鳥就會被你嚇跑到螢幕的下方。
  • 第18行: 將小鳥顯示在螢幕上,使用了函數display.set_pixel。這個函數有3個參數:x、y 和亮度。x軸是1,因此會顯示在第二欄。y軸當前是2,因為用50除以20,並四捨五入,就是第三排。(註解:在電腦編程中,指數通常從0開始。因此從上到下,你有0-4排,從左到右你有0-4列。) 亮度可以是從0到9的任意整數,9代表最亮。在這個案例中,亮度為7就足夠了,這樣可以防止眼睛疲勞。
  • 增加一個while迴圈,告訴micro:bit一直持續運行。(Python用縮進來分隔代碼。)
  • sleep代碼告訴micro:bit每20秒運行這個迴圈一次,這樣使遊戲更加容易管理,並且讓你的CPU不會過度運轉以至崩潰(這是有可能發生的)。
  • 遊戲檢查:在這個時候,歡迎的消息應該會出現又消失,隨後出現一隻小鳥。
步驟三:離開巢穴

../../_images/Ezp6Je5.png
上一步只顯示了小鳥的圖像,但是小鳥還不能移動哦!這就是我們接下來將要做的–通過模擬真實的重力來實現小鳥的移動。

首先,在y軸的正下方新增新的變量「speed」(速度)。將display.clear()移動到while迴圈中。這樣不僅能清除歡迎的消息,還能在每次生成小鳥的新位置的時候,清除小鳥之前的位置。第25-29行: 在邊界值(最大值:y=99, 最小值y=0)內設置了小鳥新的y坐標,這個坐標是根據「gravity」(重力)設定。為什麼要把這些都放到while迴圈中呢?因為想讓這個編碼區每幾毫秒(精確地來說是20毫秒)持續更新小鳥的位置,所以這個編碼區域將不斷地重複運算。

終端速度:為了讓小鳥的運動變得更加實際,讓它的速度達到常量速率2,但是只限speed = 0變成了speed =2的兩次編碼運算之後。函數if確保小鳥的速度不會大於2。可以運用if函數來設置不同的下降速度。

步驟四:克服重力

../../_images/ZbTEnWI.png
現在,透過按下按鈕A讓小鳥跳躍。在這一步,也會新增一個新的變量「score」(得分)追踪小鳥飛過的牆的數量,這在任何時候都可以用按鈕B來實現。

為了回應按鈕A被按下的狀態,在if迴圈中運行button_a.was_pressed(),就像第21行一樣。在那次運算中,按鈕A在任何時候被按下,會讓小鳥回升到原來的位置,重置下降速率,增加小鳥的飛行速度,讓小鳥以原來的飛行速度飛向地面,以此給出上升和下降的運動。改變小鳥向上飛行的速度(當前的速度是-8)觀察小鳥下降速率的改變。新增變量「score = 0」(得分=0),將新的變量score設置為0,並設置下方的速度以及變量y。基於編碼的習慣,試著將你所有的變量放在變量編碼的上方的同一個地方,這樣更容易追蹤與輸入,達到使用目的。透過新增和按鈕A類似的if迴圈,當按下按鈕B會顯示得分。display.show(score)在任何時候都能及時顯示得分。我們也會學習到統計並更新每堵牆被穿過之後的得分。

遊戲檢查: 歡迎消息出現及消失後,向下飛行的小鳥出現。按下按鈕A,讓小鳥向上飛行,按下按鈕B來檢查得分(現在應該還是0分)。

步驟五:管道衝擊波

../../_images/ERqJM7p.png
我們將用一個make_pipe函數來製作第一個管道。然後將它賦值為變量i,並且在while迴圈中顯示管道。有點複雜,但是這將會讓遊戲變得完整哦!

函數是以函數名字進行便捷運算的編碼區塊。透過使用函數,可以執行它內部的整個編碼指令。利於我們理解每一步在做的事。

在這個範例中,將給函數make_pipe()命名。每次運算函數make_pipe()中的編碼的時候就會生成一個新的管道。讓我們將函數make_pipe()的每一步進行分解。
  • 在第19行,用def make_pipe(): 定義函數。它是make up the function(形成函數)下方嵌入的程式碼。
  • 在第20行,繪製一個定製的圖像。「0」代表每個坐標的0亮度。從第1排第1列開始,然後是第1排第2列,以此類推。當亮度等於4的時候,會點亮最後一列所有的LED燈。(可以根據自己的喜好進行調整。我個人喜歡小鳥比牆更亮,這樣就可以識別出它的位置。) 
  • 在第21行,使用隨機編碼庫來使用一個在0到3之間,且包含0和3的隨機數,也就是0、1、2和3,不使用4,因為這樣會使2個孔爆炸,其中一個是gap+1。如果選擇了4,就會使第5排第4列的孔爆炸。但是這裡沒有第5排,所以只會回傳一個錯誤。我們需要傳回這個圖像,讓它可以作為後面的i的數值被調用。透過設定間隔位置及其上方的LED燈的位置為0,會使孔爆炸。
是不是非常酷呢?這就是你的第一個函數。做得好!注意:你需要時常定義實際編碼上方和變量下方的函數。這只是一個小習慣,但它可以讓程序變得更加好讀哦!讓我們給函數賦值變量i,就像第27行一樣。現在,在while迴圈中,如果我們增加了一個display.show(i),螢幕上就會顯示管道(和一個孔)i。加油! 基本上快要完成了。現在需要讓牆移動、統計得分以及為小鳥和牆的碰撞做出反應。
遊戲檢查: 和步驟四一樣,現在有了帶孔的牆!檢查一下之前的步驟,看看是否不小心遺漏了什麼吧!

步驟六:影格率

../../_images/tL1Y2ML.png
這一步我們需要設置遊戲常量。這裡變量frame(幀)從0開始,每20分鐘增加1,這樣變量frame增加到20就需要400ms或者0.4s。這讓接下來的數學變得更加簡單。這些常量在步驟七才會用到,但是先讓我們把它們設定好吧!
  • 第15行表示frame增加1所花的時間(單位:ms),這會加到第37行(frame += 1)的while迴圈中。可以把底部的sleep(20)改成sleep(DELAY),程式就會做出反應。
  • 第16行設定了牆移動1列所花費的時間,目前設定的時間是0.4s或者20 frames(幀)。
  • 第17行設置另一堵牆出現的間隔時間,目前設定的時間是2.0或者100 frames(幀)。
  • 第18行設置得分增加所花費的時間,應該會一直等於FRAMES_PER_NEW_WALL的數值,因此經過的每堵牆等於1個額外的得分。
為了增加遊戲的難度,需要調整遊戲的常量,或者縮短每堵牆之間的距離,以便於顯示更多牆(但是相對地,也需要改變FRAMES_PER_SCORE)。目前這個遊戲在螢幕上只顯示了一堵牆,但是可以透過這些數值讓它變得更加熱鬧。注意:為了和其他使用過的變量區分開來,遊戲的常量需要大寫,這是Python編程的標準規則。其實不遵循規則仍然可以運作,但是遵循規則可讓編碼更清楚明嘹。

步驟七:水管夢


../../_images/BCHdRPp.png
這裡會比較frame的數值和遊戲常量讓牆往左移動,創造新牆以及增加得分。這些都在while迴圈中,因此每20ms就會檢查一次。準備好了就讓我們開始吧!

這裡要使用模數符號(%)。當一個數除以另一個數時會產生餘數,因此4%2等於0;而4%3等於3。接著要用它來檢查變量frame是否等於遊戲的任意一個常量。
  • 牆往左移動時查看第65-67行編碼,這表示當frame等於20、40、60…的時候,牆就會移動,因為這些數字都能被FRAMES_PER_WALL_SHIFT 的數值20整除。你可以改變數值讓牆移動得更快,進而增加遊戲難度,目前牆是每0.4s移動一次。
  • 創造新牆可查看第69-71行,每100 frames(幀)或者2秒鐘,透過使用i = make_pipe()產個一個新的管道,這就是創造和移動牆的常量。
  • 增加得分可查看第73-75行,這表示當小鳥飛行了2秒或者飛過了一堵牆就會加一分,這個數值和牆與牆之間的距離相對應,因此每經過一堵牆就會加一分。
遊戲檢查: 基本上可以進行遊戲了。在歡迎的訊息滾動過螢幕後,按下按鈕A就可以讓小鳥移動,並透過按下按鈕B查看得分。而遊戲中小鳥受到重力作用,因此隨時會掉下來,向右移動就可以穿過隨機生成的牆。哇哦~你基本上已經成功了哦!現在只需要對管道的碰撞做出反應,結束遊戲並在小鳥撞上管道的時候顯示得分。

步驟八:碰撞

../../_images/s3dl5xU.png
終於到達了最後一步了哦!準備起飛了嗎?現在只需要增加碰撞反應即可。

用函數get_pixel回傳該位置的LED燈亮度,同時也使用了'!='(函數NOT)。下面解釋了如何使用。新增這個檢查碰撞的編碼到while迴圈中,將它放在繪製小鳥和移動牆的編碼之間,表示在新牆產生之前會檢查碰撞,這裡不會因為失誤產生額外的分數。

正如在第66行所顯示的,我們使用了一個if迴圈。「i.get_pixel(1, led_y) != 0」會檢查管道是否位於第1列的位置(小鳥所在的位置),特別是led_y(顯示小鳥的位置)。如果在與小鳥坐標相同的位置有管道,i.get_pixel(1, led_y)就會返回到4(牆的亮度)。

這時下方的函數NOT 0會執行碰撞檢查,而第67-68行顯示內建的哭臉圖像0.5秒。你可以改變哭臉顯示的時間長短,或任何你喜歡的其它圖像。在Python中可以輸入很多圖像,可以在此查看完整的清單(here)。

第69行將得分顯示為「Score」後面的字符串;第70行結束while迴圈,也就結束了遊戲,表示game over(遊戲結束)。

 
 
應用03 貪食蛇Snake Game

../../_images/jzfY1Q6.jpg

材料
  • 1 x BBC micro:bit
  • 1 x USB線
  • 1x 耐心(編程大概需要30 min)

如何連接Python?

如果您是初學編程,可能還沒有安裝Python。別擔心!可以進入到官方Micro:bit Python編輯器或下載離線的Python編輯器Mu即可編寫程式碼並將其傳送到您的Micro:bit。也可以使用自己的編輯器(Sublime 3和Atom),但必須將其更新到Micro:bit,可能會花點時間。
另外您可以使用Micro:bit模擬器,可以有效測試程式碼,不必每次都下載.hex文件,方便即時修復錯誤。
設置完成後,用USB線將您的micro:bit連接至電腦,它應該連接micro:bit頂部的接口。完成連接後,當下載程式碼時,micro:bit會閃黃色的光來提示您目前正在下載檔案。如果你用的是模擬器,則是直接觀看模擬器的呈現即可。


製作方法

步驟一:下載編碼庫


因為這項應用比較簡單,只需要從預設的的micro:bit編碼庫。匯入randint的函數即可生成所需要的隨機數。
../../_images/K6mVRAt.png

步驟二:初始化變量

Micro:bit上的一個點可以用一組「x,y」的坐標序列展示,x代表行; y代表列。一列點就是一條蛇(是的,一列坐標序列就組成了蛇哦!),包含了一個以上的點。蛇是從螢幕左上角的一個單獨的像素點開始,以(0,0)為坐標。之後會有更多的點入到這個列隊中。食物則是一個單獨的像素點隨機地分佈(不在同一行或同一列)。

每個方向都是由一個坐標序列組成,包含行的方向增加或減少,或者是在列的方向增加或減少(本質上來就是一個向量)。例如,向右是由「1,0」表示,也就是在行的方向前進一步,在列的方向不變。蛇預設是朝右邊移動,也就是方向序列中的第一選項。要讓蛇朝左轉彎,只需要進行到序列的下一個方向(朝右-> 朝上-> 朝左-> 朝下-> 朝右)。要讓蛇朝右邊轉彎,則需要回到序列的初始方向。

../../_images/NKceck9.png

步驟三:建立主迴圈

迴圈中的程式碼重複運行,直到循環中斷為止。請記住這是Python,因此所有後續的行數都必須縮進。
../../_images/h67k1b0.png

步驟四:顯示蛇和食物

首先,需要清除之前繪製的東西以空白的螢幕開始。接下來要繪製食物,用顯示螢幕上的亮點來表示。之後,透過蛇的序列和以中等亮度繪製每個單獨的像素點進行循環。然後,在螢幕下一次繪製之前讓程序暫停0.8秒。

../../_images/LFOxrrV.png

編碼要時常重複檢查確保所有編碼正常運行是非常重要的。這個時候,micro:bit上應該有2個像素點亮起來了。按住重置鍵,食物會移動到另一個位置。

../../_images/scaxgXR.gif

步驟五:移動蛇

../../_images/Md7Cw2s.png

所有的編碼都應該放在上一段的顯示編碼的頂部(參考已完成的編碼)。第一行編碼決定了蛇的下一個像素點將移動到哪裡。以當前蛇頭的位置,增加方向(就行和列而言),可以找到下一個像素點。取用模數5,可以把蛇的運動限制在螢幕大小內。

如果下個點被蛇的身體佔據了,會發生什麼呢?這種情況下,程序就會潰堤,遊戲結束,也使while:True迴圈停止運行。

下一個點現在成了新的蛇頭位置。接下來要檢查食物是否被蛇吃了。如果是的話,那麼應該會產生新的食;。如果不是的話,要刪掉蛇尾,讓蛇只是簡單地移動不會變長。

運行這些程式碼!當你意識到自己無法獲勝的時候你可能會生氣。

 
../../_images/QB2mtTE.gif

步驟六:設定勝負和輸贏條件

這一段編碼應該放置在顯示編碼的頂端和運動編碼的下方。時常檢查看看蛇是否已經佔據了25個像素點,也就是整個螢幕。如果蛇已經佔滿了螢幕,則玩家獲勝。
../../_images/HT3NoFN.png

享受功能齊全的貪食蛇遊戲吧!

../../_images/4KFsrSE.gif
  • icon
  • icon
  • icon
  • icon
  • icon
  • icon電話:04-2337-1605
  • icon傳真:04-2256-9949
  • icon統編:13438259
  • iconE-mail:oursteamtw@gmail.com
  • iconLINE ID:@oursteam