Webduino模擬器「瘋」神榜:用三色 LED 幫交通警察控制紅綠燈、學函數(流程)

image
Function 函數,在 Blockly 積木中稱為「流程」,是學習撰寫程式時很重要的概念,尤其是當程式碼愈來愈複雜,或是需要在程式中重複執行某些動作或判斷時,使用 Function 函數(流程) 可以有效減少程式碼的複雜度,增加程式碼的可讀性,也能讓未來為程式進行除錯與多人協同合作時更容易。
在這個範例中,我們將幫助交通警察來控制道路上的紅綠燈,除了可以個別控制紅燈、黃燈、綠燈外,也可以讓紅綠燈的所有動作,按下一個按鈕就完成喔!

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

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

※ 用三色 LED 幫交通警察控制紅綠燈、學函數(流程) Demo  網址 :http://simulator.webduino.io/#-KsU8CCBKe-itaXUyhol

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

一、模擬器「硬體」連接與硬體積木程式:加入三個三色 LED 燈

  • 左邊的紅燈,VCC 接 3.3V,腳位為 R:13、B:12、G:11
  • 中間的黃燈,VCC 接 3.3V,腳位為 R:10、B:9、G:8
  • 右邊的綠燈,VCC 接 3.3V,腳位為 R:7、B:6、G:5
image
image
請將這三個三色 LED 燈分別命名為:led_1、led_2、led_3
※ 特別注意一下,模擬器上的三色 LED 上的訊號腳位順序是:RBG,但是程式積木上的腳位順序是:RGB,順序不一樣喔!程式積木設定時不要弄錯了!(模擬器上的三色 LED 燈元件的配置,與真實三色 LED 燈元件是一樣的喔!)

二、加入紅、黃、綠燈流程積木

先依下面的方式設計紅燈閃爍的流程積木,將流程命名為「red_blink」,讓紅燈以 0.2 秒閃爍 5 次後,再以 0.5 秒閃爍一次後熄滅。
01
複製紅燈「red_blink」流程積木,調整如下圖,並將黃燈與綠燈的流程分別命名為「yellow_blink」、「green_blink」
image

三、網頁互動測試使用「遙控器」

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

image_thumb6

四、設定按下按鈕執行流程:

分別將按鈕 1、2、3 如下圖加入要執行的流程。
02
除了上面個別控制紅、黃、綠燈外,我們再加上一個按鈕,配合等待積木,讓紅綠燈的所有動作,只要按下此按鈕就能一次執行完畢,最後顯示綠燈!
image

五、紅綠燈模擬器實測:

03


※ 延伸閱讀:

留言

這個網誌中的熱門文章

免費影片剪輯「威力導演 365 基礎版」,不用輸入序號,只要註冊會員即可下載使用!

全民學 3D 就從 Blender 3D 開始:Blender 3D 中文化設定、認識視窗介面與學習資源

剪映好用的字幕「簡體轉繁體」工具在這裏,別再找錯了!

ZoomIt 螢幕畫筆推出 8.0 版,繼續榮登電腦教學最佳「隱形」助手!

教學百寶箱:Sizer 幫您記住視窗大小與位置,以後不用每次都辛苦慢慢拖拉滑鼠調整!