iT邦幫忙

2021 iThome 鐵人賽

DAY 19
0
自我挑戰組

micro:bit 從入門到精通系列 第 19

Day 19 ( 中級 ) 陣列點燈 ( 動畫 )

陣列點燈 ( 動畫 )

教學原文參考:陣列點燈 ( 動畫 )

這篇文章延續「陣列點燈 ( 顯示圖形 )」文章,繼續介紹使用「陣列」積木,搭配「迴圈」和「點亮」積木,讓 micro:bit 能將陣列顯示的圖形,變成上下左右可移動的動畫。

相關文章參考:陣列點燈 ( 顯示圖形 )陣列迴圈點亮

積木程式原理

參考「陣列點燈 ( 顯示圖形 )」文章,開啟陣列點燈範例。

範例:陣列點燈 ( 顯示圖形 ) - 點燈版

micro:bit - 陣列點燈 ( 動畫 )

在畫面中新增一個「重複無限次」積木,將啟動中的計次迴圈移動到重複無限次積木裡,在計次迴圈結束後,加入「插入到索引值」以及「取得並移除最末項目」,就能把第一層陣列的最後一個項目,移到最前面。

micro:bit - 陣列點燈 ( 動畫 )

完成後,啟動 micro:bit,就會看見圖案「從上往下」移動。

micro:bit - 陣列點燈 ( 動畫 )

如果要改成水平方向移動,就需要再度使用「計次迴圈」讀取第一層陣列的內容,讀取後,把最後一個項目移動到第一個項目,就能做出水平方向移動的動畫。

micro:bit - 陣列點燈 ( 動畫 )

完成後,啟動 micro:bit,就會看見圖案「從左到右」移動。

micro:bit - 陣列點燈 ( 動畫 )

加入按下 A、B 和 A+B 按鈕控制動畫移動的程式,按下 A 按鈕時設定 type 變數為 2,按下 B 按鈕時設定 type 變數為 1,,按下 A+B 按鈕時設定 type 變數為 0。

micro:bit - 陣列點燈 ( 動畫 )

修改剛剛的動畫程式,加入邏輯判斷,判斷如果 type 等於 1,就往右移動 ( 最後一個項目移動到第一個項目 ),如果 type 等於 2,就往左移動 ( 第一個項目移動到最後一個項目 ),因為只判斷 type 等於 1 或 2,所以如果 type 等於 0 就不會執行動畫的程式。

micro:bit - 陣列點燈 ( 動畫 )

完成後,啟動 micro:bit,就能夠用 A、B 按鈕控制燈號移動 ( AB 同時按下就會停止動畫)。

micro:bit - 陣列點燈 ( 動畫 )

範例解答

實作「陣列點燈 ( 動畫 )」的小技巧

  • 為什麼要使用「陣列」呢?

    使用陣列可以輕鬆完成「大型」( 超過 5x5 ) 的圖案,以及進行較為複雜的動畫效果或圖案效果。

  • 「陣列」可以應用在哪些地方呢?

    熟悉陣列操作之後,能夠應用於較為複雜的遊戲、燈號圖形設計、長條圖...等,特別是跟燈號相關的遊戲,都會看到大量的陣列操作。

關於我

大家好,我是 OXXO,是個即將邁入中年的斜槓青年,如果對我有點興趣(笑,可以與我聯繫,一起來做點有玩又有創意的東西吧!


上一篇
Day 18 ( 中級 ) 陣列點燈 ( 顯示圖形 )
下一篇
Day20 ( 中級 ) 依序點燈 ( 座標 )
系列文
micro:bit 從入門到精通46

尚未有邦友留言

立即登入留言