使用micro:bit學習JavaScript & Python程式語言|奧斯丁國際有限公司 OURSTEAM Internationl

JavaScript

應用01 兵乓迴力球Paddle ball Super Smash

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

材料

1 x BBC Micro:bit主板
1 x Micro USB線

製作方法

步驟一

首先，將microbit microcompute插入您自己的電腦，不需要其他組件。

步驟二_擴充程式

點選「Code Drawer」欄目中的「Advanced」，點選「Extensions」為Tinker kit套件下載擴充程式，將跳出一個搜尋欄。

輸入「Tinker kit」並點選下載其擴充程式。

注意：如果跳出「不相容的軟體包將被刪除」的警示，請按照提示操作，或點選「New Project 」建立一個新專案。

步驟三_編碼

首先，定義變數！我們需要許多變數來設定球的位置、速度和方向、球拍的長度和位置以及分數！

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

接下來，要控制球何時運動。開始時，球每秒移動一次，越進階的關卡，球會以越來越短的間隔移動！多麼激動人心！

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

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

最後，設定一個for迴圈當作時鐘，控制球不斷地移動。另外用onButtonPressed（）函數來移動球拍。

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

使用方式

只需將microcontroller連接到電腦啟動程序即可！簡單！
如果得分超過12分，會獲得一張笑臉！反之，可能會獲得一張哭臉...

應用02 電子水平儀Electric Spirit Level

材料

1 x BBC Micro:bit
1 x Micro USB線
2 x AA電池
1 x 雙AA電池組

預編碼

使用micro USB線將BBC micro:bit連接到電腦。
在makecode.microbit.org上取得micro:bit的javascript編輯器。

在開始編寫程式碼之前，需要訂定想要達到的目標以及每個組件應按什麼順序運行。對於電子水平儀，我們將在每個迴圈的程式碼中採取的步驟是：

從加速度計獲取傾斜讀數，將傾斜度讀數轉換為傾斜度水平顯示在LED矩陣上，檢查上一迴圈的傾斜度讀數是否有變化
為不同的傾斜情況和方向建立LED坐標數組
將LED坐標繪製到micro:bit LED矩陣上。

其它涵蓋在內的功能有：校對初始傾斜位置，返回預設的校對未置。

製作方法

步驟一：定義變數

首先定義所需的變量，如下所示。以下是一些變量的細分：

tiltList：排列儲存由0-4編列的傾斜角度「左、右、前、後」。
tiltBoundary：在0（無傾斜）和1（輕微傾斜）之間的prevState：排列來自前一個迴圈micro:bit獲取的傾斜數值，格式與tiltList相同，用於檢查反覆運算ledPlotList(以x、y形式繪製的led坐標數組）其數值的傾斜度變化。定義數組我們使用「number [] []」表示一連串的數組。

步驟二：將傾斜值轉換為水平

由於5x5 LED矩陣只能顯示固定量的訊息，因此實際的傾斜值無法顯示。

取而代之的是，「function tiltExtent()」引用參數num，該參數引用來自加速度計的傾斜值，並將這些傾斜值（num）轉換為0到4的傾斜級別。

0表示在特定方向上沒有傾斜，4表示傾斜非常大，而出現錯誤時返回-1。
在此，tiltBoundary和tiltSensitivity為傾斜度之間的邊界值。

步驟三：編輯傾斜度

這兩個函數checkRoll（）和checkPitch（）顯示了從tiltExtent()中獲得的傾斜度分別寫入tiltList的roll (left-right)及pitch (forward-backward)軸數。

在使用傾斜值之前，要利用稍後會編寫的校準函數的零值來校準俯仰值（zeroPitch）和橫滾（zeroRoll）值。

由於加速計的讀數對於左向和向前傾斜均為負，因此需要使用Math.abs（）函數來獲取負值的模量，該負值將作為這兩個方向的參數提供給tiltExtent（）函數。

步驟四：編寫LEDPlotList函數

在傾斜列表中獲得傾斜度之後，現在可以針對可能出現的不同情況編寫led繪圖功能，即：

plotSingle（）：僅單方向傾斜，以在特定方向上的傾斜程度作為參數。plotDiagonal（）：以相同角度的兩個方向傾斜，以任一方向的傾斜程度為參數。
plotUnequal（）：在兩個不同角度的方向上傾斜，以每個方向上的傾斜程度作為參數。先使用plotDiagonal（），然後新增到ledPlotList數組。

這些繪圖函數將led坐標數組寫入ledPlotList，以便稍後進行繪圖。

步驟五：為每種情況繪製LED矩陣

現在，使用步驟四中的三種情況繪圖，我們可以為不同的傾斜度繪製實際的LED矩陣。由於步驟四中的三個功能不能區分方向，因此需要調整傳遞到LED矩陣的坐標值，才能在正確的方向上繪製LED。

PlotResult（）包含多個if條件，並根據led.plot（x，y這些條件檢查傾斜的種類及並繪製LED矩陣。傾斜的組合可能為：

單向：僅左或僅右。

單向：僅前進或僅後退。

兩個方向：左前或左後。

兩個方向：又錢或右後。

注意：對於兩個方向的傾斜，每種組合可能具有相同或不同的大小（透過maxX和maxY比較檢查），因此分別使用plotDiagonal（）或plotUnequal（）繪圖。

步驟六：編寫校準函數

完成大部分程式碼後，現在要新增calibTilt（）和resetTilt（）函數。

calibTilt（）讓用戶在micro:bit的當前位置將傾斜度校正為零。resetTilt（）將電路板的校準重置為其原始狀態。

步驟七：編寫狀態函數

新增一個簡單的功能函數「checkState（）」，用於檢查傾斜程度是否與上一次運算相同。
如果上一次運算的傾斜度沒有變化，即stateChange == 0，可以直接進行下一次的運算，跳過繪製LED矩陣，進而減少計算量。

步驟八：將所有編碼結合

現在，終於可以將所有必要的功能放入micro:bit的forever迴圈中，重複運算。

首先，使用「input.onButtonPressed（）」為micro:bit上的按鈕A和B分別設訂為「calibTilt（）」和「resetTilt（）」函數，並在校準完成後在LED矩陣上繪製刻度。

步驟九：將所有編碼結合

接下來，執行根據步驟0中的程式碼運算必要的功能，並檢查狀態是否發生變化（這裡指自上次運算以來，micro:bit的傾斜度變化）。

如果傾斜度發生變化，即stateChange == 1，則程式碼將prevState更新為新的傾斜度，並將stateChange設置回0以進行下一次運算，且使用PlotResult（）在LED矩陣上繪製更新的傾斜度。

示範編碼：https://makecode.microbit.org/56811-31458-64502-76623

將Micro:bit和電池組牢固地連接到任何物體上即可使用！

Python

應用01 小鳥飛飛Flappy Bird

我們要在5x5的LED螢幕上製作一個完整的互動遊戲。這個遊戲適合各個年齡段的玩家。在這個過程中，你將會學習...。第一步：將micro:bit程式碼導入到Python。然後，在螢幕上滾動顯示「READY」，並啟動遊戲開始時顯示的倒計時。

第1行：導入micro:bit程序。
第4行：在螢幕上滾動顯示「READY」雙引號標誌指的是字符串（在這個案例中是「READY」）。
第5-10行：使用sleep()函數在螢幕上閃爍每個數字1秒鐘（或1000毫秒，測量時間也包括在內）。
第11行：清除畫面，為後來的小鳥和牆的繪製做準備。

注意：在你的編碼添加註解來解釋，有助於你或者其他人理解編碼。也可以添加一個帶#的註解。如有必要，需要將編碼隔開，把不同的編碼劃分為不同的部分。

材料

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

第一步是將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。增加數值會減緩文字滾動的速度，而減少數值會增加文字滾動的速度。

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

步驟二：小鳥飛吧!

接著，需要製作小鳥的圖像。對於從未分析過遊戲的人，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不會過度運轉以至崩潰（這是有可能發生的）。
遊戲檢查：在這個時候，歡迎的消息應該會出現又消失，隨後出現一隻小鳥。

步驟三：離開巢穴

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

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

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

步驟四：克服重力

現在，透過按下按鈕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分）。

步驟五：管道衝擊波

我們將用一個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。加油! 基本上快要完成了。現在需要讓牆移動、統計得分以及為小鳥和牆的碰撞做出反應。
遊戲檢查：和步驟四一樣，現在有了帶孔的牆！檢查一下之前的步驟，看看是否不小心遺漏了什麼吧!

步驟六：影格率

這一步我們需要設置遊戲常量。這裡變量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編程的標準規則。其實不遵循規則仍然可以運作，但是遵循規則可讓編碼更清楚明嘹。

步驟七：水管夢

這裡會比較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查看得分。而遊戲中小鳥受到重力作用，因此隨時會掉下來，向右移動就可以穿過隨機生成的牆。哇哦~你基本上已經成功了哦！現在只需要對管道的碰撞做出反應，結束遊戲並在小鳥撞上管道的時候顯示得分。

步驟八：碰撞

終於到達了最後一步了哦！準備起飛了嗎？現在只需要增加碰撞反應即可。

用函數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（遊戲結束）。

應用02 貪食蛇Snake Game

材料

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

步驟二：初始化變量

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

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

步驟三：建立主迴圈

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

步驟四：顯示蛇和食物

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

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

步驟五：移動蛇

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

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

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

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

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

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

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