图片描述

第三课 LCD 抢答器

谁将登场
- LCD 模块
- 按键模块
你将学会
- LCD 模块的初级使用

介绍

第一课课后作业“抢答器”大家实现了么？这节课将实现一个带 LCD 屏的抢答器：

LCD 屏初始显示 “Welcome !” 欢迎字样；
3秒后，显示“Who faster?”；
按键 A 按下，板载蓝灯（led-b）亮，LCD 屏显示 “Blue faster!” ；
按键 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;
    });
});