[ Ruff 開發套件 ] Lesson 3 - LCD 搶答器

時間 2019-11-10

標籤 ruff 髮套 lesson lcd 简体版

原文原文鏈接

第三課 LCD 搶答器

誰將登場javascript
- LCD 模塊html
- 按鍵模塊java
你將學會函數
- LCD 模塊的初級使用學習

介紹

第一課課後做業「搶答器」你們實現了麼？這節課將實現一個帶 LCD 屏的搶答器：spa

LCD 屏初始顯示「Welcome !」歡迎字樣；code
3秒後，顯示「Who faster?」；htm
按鍵 A 按下，板載藍燈（led-b）亮，LCD 屏顯示「Blue faster!」；blog
按鍵 B 按下，板載紅燈（led-r）亮，LCD 屏顯示「Red faster!」；事件
按鍵 C 用於重置搶答器，C 鍵按下，LCD 屏顯示「Who faster?」；
- 按鍵 A 或 B 按下後，直到按下按鍵 C 重置搶答器，即便另外一按鍵按下，LCD 屏也不會有變化。
- 直到顯示「Who faster?」，以前按鍵 A 或 B 按下 LCD 屏也不會有變化。

元件

Ruff 開發板
大按鍵模塊（3個）
LCD 模塊

外設添加

向項目中添加三個大按鍵模塊，

button_r 對應紅按鍵
button_b 對應藍按鍵
button_reset 對應重置按鍵，
model 都選擇 CK002，驅動版本選擇最新版。
- 添加紅色大按鍵；
- 添加藍色大按鍵；
- 添加劇置按鍵；
向項目中添加名爲lcd的 LCD 模塊，
- model 選擇 lcd1602-02，驅動版本選擇最新版。
- 添加 LCD 模塊

代碼

在編寫代碼以前須要完成 Ruff 開發板的設置鏈接、硬件連線。若是有疑問你們能夠在[第零課]()瞭解，也能夠到這裏瞭解。
想了解 Ruff 應用開發步驟和模型，能夠到這裏。

初始化

咱們首先初始化 LCD 屏以及搶答標誌位：

初始化搶答標誌位爲 false，該標誌位用於控制是否容許搶答；
打開 LCD 屏幕，並打印歡迎語；
很短的延遲後，使用print() 函數在屏幕上打印搶答開始語；
設置搶答標誌位爲 true，容許紅藍雙方搶答；

搶答器初始化代碼以下：

var r_or_b = false;                       //搶答標誌位
$('#lcd').turnOn();                          //打開 LCD 屏開關    
$('#lcd').print('welcome!');              //打印歡迎語
setTimeout(function () {
        $('#lcd').clear();                  //延時3s，清空屏幕
        $('#lcd').print('Who faster?');    //打印搶答開始語
        r_or_b = true;                    //設置搶答標誌位
    }, 3000);

能夠在這裏進一步學習 LCD 模塊知識；

搶答

接下來，咱們實現搶答。

檢測紅藍按鍵模塊的 push 事件，一旦檢測到信號，執行相對應的「行爲」函數。
行爲函數中判斷搶答標誌位是否爲 true：
- 若是爲 true，
  - 使用clear() 函數將 LCD 清屏；
  - 使用print() 函數打印「 red win !」或「blue win !」;
  - 設置搶答標誌位爲 false，紅藍雙方搶答無效。
- 若是爲 false，不進行操做。
想複習大按鍵模塊的知識，能夠前往Ruff-大按鍵模塊。

大按鍵搶答實現：

//紅色按鍵搶答
$('#button_r').on('push', function () {
    if (r_or_b) {
        $('#lcd').clear();
        $('#lcd').print('Red faster!');
        r_or_b = false;
    }
});

//藍色按鍵搶答
$('#button_b').on('push', function () {
    if (r_or_b) {
        $('#lcd').clear();
        $('#lcd').print('Blue faster!');
        r_or_b = false;
    }
});

重置

搶答器的屢次使用須要將搶答器重置到初始狀態。

咱們將解決：如何重置搶答器

檢測重置按鍵模塊的 push 事件，一旦檢測到信號，執行相對應的「行爲」函數。
行爲函數中
- 使用clear() 函數將 LCD 清屏；
- 使用print() 函數打印搶答開始語；
- 設置搶答標誌位爲 true，容許紅藍雙方搶答；

搶答器重置實現：

$('#button_reset').on('push', function () {
    $('#lcd').clear();
    $('#lcd').print('Who faster?');
    r_or_b = true;
}
);

最後，

將 初始化、搶答、重置的實現放在 $.ready 事件下。

完整代碼

'use strict';

$.ready(function (error) {
    if (error) {
        console.log(error);
        return;
    }

    var r_or_b = false;
    $('#lcd').turnOn();
    $('#lcd').print('welcome!');
    setTimeout(function () {
            $('#lcd').clear();
            $('#lcd').print('Who faster?');
            r_or_b = true;
    }, 3000);

    $('#button_r').on('push', function () {
        if (r_or_b) {
            $('#lcd').clear();
            $('#lcd').print('Red faster!');
            r_or_b = false;
        }
    });
  
    $('#button_b').on('push', function () {
        if (r_or_b) {
            $('#lcd').clear();
            $('#lcd').print('Blue faster!');
            r_or_b = false;
        }
    });
  
    $('#button_reset').on('push', function () {
        $('#lcd').clear();
        $('#lcd').print('Who faster?');
        r_or_b = true;
    });
});