Webduino模擬器「瘋」神榜:用 LED 點矩陣+按鈕+蜂鳴器模擬擲骰子、認識等待、聲音播放與停止積木
玩大富翁、桌遊都少不了這個東西:骰子,我們也可以利用 Webduino 模擬器輕鬆製作出兼具動畫、音效的「虛擬骰子」,這樣下次就不用擔心玩遊戲時,找不到骰子囉!
在這個範例中我們將製作「數字版」與「圖形板」兩個版本,前者著重在如何判斷聲音是否還在播放、聲音停止積木與等待積木的使用,後者則再加強 LED 點矩陣圖形繪製的練習!
此外,在這個範例中,也第一次介紹到「按鈕開關」元件,使用上就跟一般的實體按鈕相同,也具有「按下」、「放開」、「長按」等三種不同狀態。
註:目前線上模擬器只能在 Windows / MAC 電腦上使用,無法在平板與手機上使用喔!
在 Webduino 線上模擬器中,沒有電壓、連接腳位可連接裝置的限制,所以要玩一些原本因硬體限制,而需要使用麵包板才能完成的應用,都是沒有問題的!
![image image](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjboz2eer7D-yYHL4lh7pZ_39R1ojUJs5lBCUQKqjPuoVasxXK17aDxgZQ4F-ePaZBhFdAPM0GWyob_0sU9ULwXZPvDMr2g7e2iBB3cwqg_LA2TBquhb_zj6-Zqk2DbHIIzZQLewe4xfA/?imgmax=800)
![image image](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIpdcywfk6FX34KnIuNy1LvouPkEYVbf87n3EzN0tHWGDrG39CjB2e7XAO5RtE1uDvCHM6ZigLMY_MZKCkTSvIacqnPAmLqyEmM6CKQqa2VBH8bLfmS9N2gqh9fiJU_55fX4ATu5VjzQ/?imgmax=800)
![image image](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0D0jK7xtAHFHuUUHa0geKIF0b1Mnv2fSMxUYelu8iL65WF2ZCK8nEN0trOjocVyNYIlp-2mSZ3OrlRH1YIBFyNaebPrTy205eg_AeozjoY57OKuwP5dZe7PPnq1SXJN_sUZUxCepkXA/?imgmax=800)
![image image](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEQVb7xv9jmdPSwnyhmXxH0eaDzstqnWV6elKcCKExe3i-WLMRt2OcvbtbjiufmV68UxhJfFg3kmm0Q3SXuT2zEoOuOIfjQSetrGN7fLTztuGbdOIhBWCuQ1bn8foml_6lOVZS7jZIlw/?imgmax=800)
![01 01](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXi3-FhitXOsLjpWPp3t0SmuBhJPB8nNQ2TbReqdijpLIuwJ_mJ6Ewtz-1Vo5XUcnIhXZQQyzV_WO93EmNJYtkP4kGsGNIN1XLqTumzrnPIdV01jGwx_GXpRul_VZzSx14oiSTJZowRQ/?imgmax=800)
![02 02](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhujgVSL19O3RFdFeaHC_5R-paj4bD-x14ZY-FN3zbLoKlq7H_w2yM2nAqxg9IOWqLEpmusAeJsTQYkzCVJPTLnI06-ImiSg30_gLAM__EvIESKukC0MXLG5hvQvWeBQ459_YFEB3cZyQ/?imgmax=800)
![03 03](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuxFRhoit7Qkdc19RVEjxaDrzrqR_AFox55ooRX3J5QC7cTBkq-Q1VVIB24lh1V12E1S5mQcqpUqXSVAFAojTCwgsikg2R01CF7-JrmNsXlWP_cNIGCTDcK_BxeCzgh9nDYQMl1CrhSA/?imgmax=800)
![image image](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWWuUogGYFdtaxYUpwKbDQm5zRcv8SH297C_HC-YjfKtoW4d0uKsYnf9IPwsSuxKUvq5-I3AN9IsdEZJ2mTi-6dIKlaCAqMzaOewKL2RUVs3h2U6V9j8x_6J9PXfS7trIFTwVeFHUXsw/?imgmax=800)
因為只有 64 顆 LED 燈,所以骰子 1 ~ 6 的圖形需精簡繪出如下:
![image image](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu0XZX8ND93c3iDb4agHhjgc1ESh60spR38-Q_lWtdYgOk6oL9WLn1xecPmp-un_erBqvlHTnAl1XnofOyi2HWGZOd7OFGwxMNKafmnMHKhkTssrgB0z935VGcWVDg9svBZ_mQH1GPDg/?imgmax=800)
![image image](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKg5zozZEOd3rCl149TuQKRjsvDO8jwLK-ej1iWuVUD2_rrp5ubaXr0GzM2EEbqqFDfhUbthstKd92Yg_1lHpq8oYBYPM5V1Wz8IVrdAfM-jDEXXBqgnLHDCxoWNOoADcSWKAeoLHjNQ/?imgmax=800)
![04 04](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggGGhWbqQKkUj3DdYxNzMOkdwgBzWSDt8sEyeQ1KdN2CVynt6kGmd1qJa4VUrkx0f3Jhc7t8FBICsqwak5XWdWgvcU1VjhtlFc6E2I86sLtoMc-II83KnNkihyphenhyphenqxDeXgwGZOGyLtSLxA/?imgmax=800)
![image image](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5nGo4oyp48afIaZHOHFgZgeuj1zQ06QBOf6RAOJn8DwTu9sy39PRzIV8doHkJv8kTfTK1w841vfHs9Ilo0a13fqJmT1SP29hMHsLL8J5qermkV53A6mK5YHs6CXHfekekAwsfipgaEg/?imgmax=800)
![05 05](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRhsXgPiP9ipJDd6IKqP-HaMcRfei3mr1DGGcR32lP-Zt3v89oL-HqfFfmyEz4WQWcBgbTY9kh99HR7IHUP_HQqaysXXBdjkVZKxqrI1kFFrPFErZegYPIpQwRJdZYnU9iX94zXe_7qQ/?imgmax=800)
要讓 LED 點矩陣完全不顯示亮燈,可以使用代碼「0000000000000000」,如果不是很確定代碼該如何使用,可以在「動畫相關」的積木上,按滑鼠右鍵 / 說明,或前往此網址 http://webduinoio.github.io/demo/max7219/ ,就能以圖形化的方式取得代碼囉!
![image image](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHPM6DAqfquqNIRJQsphf_untTlmYFXqzlR-wl51AU6oWzHZutJjfV6kgsAQYMvOKMz8htg33PFJCtjM4jhHSKrfx-A6weNyCB4xiSZZV5zmjPmOAWcUc8ApWWdkNTkZlEYtx-yJZ1eA/?imgmax=800)
![image image](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVlk4WjTaL-v6rNyLrd5OvgQT-IR5BnFbOoY8zQ2LsE4TeKrMWtdxv-zOU3EDXwQ-z6yRhjvB2SXLNH-Kew4TQt_dBaFZ3V8-UOEaef59Zis8vfDxn7PSowc43emL6LeTtpbamfh6DtQ/?imgmax=800)
![06 06](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKvOCz7C29P61msEgGr0j7mK7wkScN783TM2bSBAs1N-ssopkzf1mihpMLGP8U-5z1V6Q64mz13hjRm1CydtMV0MojH3De5Gla35tREXEQsngjOEzy82JN3tUTO_rFWYxbZrUtoCWW7Q/?imgmax=800)
![image image](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg__SXpVCZxILeBLhH7q1F_xbiL8z06mZOyYxLi9HM_OAKR-hWI3gxtxqMnXX12QN1edYpgVHZbnKc6Jnw8pcS2lO0Aoq1eZyxapOnisrFqrIHQxYWZZQRL-EMbz27s5BCqJ5OL2yyC-A/?imgmax=800)
![webduino-blocks webduino-blocks](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYTUwabIbCHK31BtWp7VH5Fj5PVDVQgO1Tk5NyVGM4UPmEb4HHhk5ZmSP2Mu8mxmRlIKfFllfaZTsnVyiuOn3NsY8GqDxJOq_yy-CyW-RDzFDKY-5duFj4mU_zCRu2TLpvVmKmxZZHwA/?imgmax=800)
在這個範例中我們將製作「數字版」與「圖形板」兩個版本,前者著重在如何判斷聲音是否還在播放、聲音停止積木與等待積木的使用,後者則再加強 LED 點矩陣圖形繪製的練習!
此外,在這個範例中,也第一次介紹到「按鈕開關」元件,使用上就跟一般的實體按鈕相同,也具有「按下」、「放開」、「長按」等三種不同狀態。
※ Webduino 官方網站:https://webduino.io/
※ Webduino 的Arduino 模擬器網址:http://simulator.webduino.io/
※ 用 LED 點矩陣+按鈕+蜂鳴器:模擬擲骰子「數字版」 Demo 網址 :
※ 用 LED 點矩陣+按鈕+蜂鳴器:模擬擲骰子「圖形版」 Demo 網址 :
在 Webduino 線上模擬器中,沒有電壓、連接腳位可連接裝置的限制,所以要玩一些原本因硬體限制,而需要使用麵包板才能完成的應用,都是沒有問題的!
一、模擬器「硬體」連接與硬體積木程式
- 加入一個 LED 點矩陣,VCC 接 5V,腳位為 DIN:13、CS:12、CLK:11
- 加入蜂鳴器,腳位為2,另一個腳位接到 GND
- 加入按鈕,S:7、V:3.3V、G:GND
二、加入「按鈕開關」積木
三、加入「變數 K」自 1 到 6 數字隨機取得
四、使用邏輯積木判斷聲音是否已停止播放,才繼續播放聲音
在 Webduino 模擬器中的蜂鳴器元件與真實蜂鳴器元件時,都需要留意一下這樣的問題,尤其是當播放聲音音符較多時,需加上判斷聲音是否已停止播放的判斷,若沒有加上這樣的判斷,會造成前一次播放聲音尚未結束,就進行第二次的播放,而形成聲音不斷重疊的情形!五、製作 LED 點矩陣數字跳動動畫
增加 LED 點矩陣動畫,可以讓隨機取得數字比較有臨場感!1.數字版
這個版本比較單純,只需要如下圖加入相關數字積木就可以囉!2.圖形版
圖形版可以先使用 LED 點矩陣 8 X 8 的面板,參考下圖的骰子六面圖,自行勾選產生喔!因為只有 64 顆 LED 燈,所以骰子 1 ~ 6 的圖形需精簡繪出如下:
六、加入「等待」積木,並停止聲音播放
在一般情形下,「等待」積木多數是直接使用下圖的第三個,輸入需要等待的秒數即可,但這次我們需要等待一些時間,等第五步驟骰子 1 ~ 6 的動畫顯示完成,才將正在播放的聲音停止,並顯示後續取出的亂數號碼。若沒有加上此等待積木,執行模擬器時,骰子 1 ~ 6 的動畫顯示會一下子就跳過,就顯示最後的亂數號碼。七、以閃爍方式顯示亂數取出的號碼
用閃爍動畫可以讓大家比較清楚知道號碼已選出,以便跟骰子 1 ~ 6 的動畫做一個區隔!要讓 LED 點矩陣完全不顯示亮燈,可以使用代碼「0000000000000000」,如果不是很確定代碼該如何使用,可以在「動畫相關」的積木上,按滑鼠右鍵 / 說明,或前往此網址 http://webduinoio.github.io/demo/max7219/ ,就能以圖形化的方式取得代碼囉!
八、模擬擲骰子模擬器實測:
「數字版」完整積木如下圖:
「圖形版」完整積木如下圖:
※ 延伸閱讀:
- 跟著 Webduino 一起翻轉 IoT 物聯網:什麼,連測試的 Blockly 積木都懶得寫?那就使用「載入範例積木」功能吧!
- Webduino模擬器「瘋」神榜:用 LED 點矩陣學陣列應用、玩賓果(進階版:可記錄與顯示已抽取號碼、Blockly 程式註解)
- Webduino模擬器「瘋」神榜:用LED 點矩陣學小綠人動畫與分鏡設計
- 跟著 Webduino 一起翻轉 IoT 物聯網:杜邦線使用PK賽「張君雅小妹妹麵條餅」一排一排 V.S「模範生點心麵」獨立麵條式一條一條?
- Webduino模擬器「瘋」神榜:用LED燈+蜂鳴器+超音波完成「倒車雷達」、學「多重邏輯判斷」
- Webduino模擬器「瘋」神榜:用「多顆LED霹靂燈」學列陣與多重迴圈
- Webduino模擬器「瘋」神榜:用「多顆LED霹靂燈」學變數命名與迴圈
- Webduino模擬器「瘋」神榜:模擬器為什麼無法「模擬」出結果?
- Webduino模擬器「瘋」神榜:用「如來神掌」玩超音波感測器!
- 跟著 Webduino 一起翻轉 IoT 物聯網:線上模擬器為何無法做元件的「連線」?
- 20170630 嘉義女中:用 Webduino Fly 開發板,一起 High 翻 IoT 物聯網
- 什麼?Webduino 也能玩假的?Webduino 最新推出的 Arduino 模擬器,讓您也能「弄假成真」!
留言