Webduino模擬器「瘋」神榜:用 LED 點矩陣學陣列應用、玩賓果(進階版:可記錄與顯示已抽取號碼、Blockly 程式註解)

image
在前一篇「Webduino模擬器「瘋」神榜:用LED 點矩陣學亂數、玩賓果(簡易版與標準版)」文章中,我們已經學會如何使用 Blockly 的亂數積木、陣列列表,現在要再來改良這個賓果遊戲,讓更具「真實性」:
  1. 加上「按下按鈕後,隨機顯示數字動畫」
  2. 將已抽取的數字儲存到另一個陣列中,方便遊戲過程中進行查詢
  3. 加上 Blockly 程式碼的註解
第一個是用來增加遊戲時的「視覺效果」,按一下號碼就顯示出來有點不夠剌激,讓數字隨機跑動一下,馬上就有期待的心情!
第二個要改良的,有玩過賓果遊戲的人,相信都有可能會遇到這個情形:這個號碼有抽過了嗎?剛才前面一個或兩個是哪個號碼,我忘記了!尤其數字範圍較大時,難免會有人忘記,在這個進階版中,程式積木的重點就在於如何將已經取出的數字,儲存到新的陣列列表中,並可以透過指定按鈕,將取出的數字顯示出來!
最後,當 Blockly 程式積木愈來愈多,也愈來愈複雜時,可以適時加入程式碼的註解,除了在設計當下有所助益外,對於日後檢查積木或是協同合作時,更是必備的撰寫程式良好習慣喔!

image

※ Webduino 官方網站:https://webduino.io/

※ Webduino 的Arduino 模擬器網址:http://simulator.webduino.io/

※ 用LED 點矩陣學亂數、玩賓果「進階版」 Demo  網址 :

※ 用LED 點矩陣學亂數、玩賓果「標準版」 Demo  網址 :

註:目前線上模擬器只能在 Windows / MAC 電腦上使用,無法在平板與手機上使用喔!
在 Webduino 線上模擬器中,沒有電壓、連接腳位可連接裝置的限制,所以要玩一些原本因硬體限制,而需要使用麵包板才能完成的應用,都是沒有問題的!

一、模擬器「硬體」連接與硬體積木程式

  • 加入一個 LED 點矩陣,VCC 接 5V,腳位為 DIN:10、CS:9、CLK:8
image_thumb2
image_thumb5
二、網頁互動測試使用「遙控器」

「遙控器」除了有較多按鈕外,在「遙控器」上方還有一個螢幕可以用來「顯示」相關的訊息喔!

image_thumb6

三、程式積木請開啟「賓果(標準版)」來做修改:

※ 用LED 點矩陣學亂數、玩賓果「標準版」 Demo  網址 :http://simulator.webduino.io/#-KpzaPZjm8HnB6XUYrKY

※建立列表的方式,使用 Webduino 官方「大樂透自動選」教學範例會更方便喔!

使用「指定列表內容」列表積木



 
開啟賓果標準備程式積木後,只要再依下面的方式,加入一些積木,就能改造成功囉!
1.加入空的陣列列表變數「k_award」,待會兒儲存已抽出的號碼。
image

2.加入按下按鈕時,在 LED 點矩陣與遙控器螢幕上隨機顯示 10 次數字跳動動畫,增加遊戲氣氛。
image

3.將抽出的號碼加入陣列列表「k_award」中。
image

4.「遙控器」左上角紅色「按鈕 o」重新再玩,除原有的積木外,也要在重設時,一併將儲存已抽出號碼的陣列列表「k_award」清空。
image

5.加入「遙控器」上的「按鈕 2」與「按鈕 3」用來顯示最近已抽出號碼的第 1~5 個與第 6~10 個。
image

四、加入 Blockly 程式積木註解

如果程式比較複雜或是多人協同時,可以在積木上按右鍵 / 加入註解
image
選按積木前面的「?」,跳出註解區塊後,就能開始將程式碼的說明加入其中,方便日後檢視。
image

五、進階版賓果遊戲模擬器實測:

賓果進階實測


※ 延伸閱讀:

留言