上周, 我们简单介绍了 Microbit 的编程基本知识, 我们介绍了 Javascript 的循环 (for, while), 这周, 我们将学习如何在 Microbit 的 LED 显示屏上编程.
LED基本知识
LED是Microbit具有的微小”屏幕”. 它是一个25像素输出设备(5行5列). 我们将行称为Y轴, 列为X轴. 计算机通常从零开始而不是从1开始计数(索引). 因此, 左上角(第一像素)被称为X ＝ 0, Y ＝ 0, 第一像素第二行被称为X ＝ 0, Y ＝ 1.
在 Microbit 上进行画和擦的操作
要绘制一个像素(在LED屏幕上显示一个像素), 我们可以在LED选项卡上拖动’Plot’.
microbit-plot-on-led
你将看到, 屏幕最左上方的小像素点被点亮了.
microbit-plot-a-pixel
切换到 Javascript 代码如下:
1 2 3 | basic.forever(function () { led.plot(0, 0) }) |
basic.forever(function () {
led.plot(0, 0)
})要取消绘制像素(擦除), 请使用led.unplot方法. 基于这两个方法我们就可以开始制作动画了. 计算机动画的过程就是: 绘制某些东西, 等待一段时间(几毫秒), 然后擦除原始内容, 最后在新位置绘制这些内容, 不停的重复这个过程在人的眼睛来看就是动画了.
奔跑吧像素点!
我们可以通过以下方法在第一行上绘制一个奔跑的像素点:
microbit-a-running-pixel-on-the-first-row
Javascript 代码如下:
1 2 3 4 5 6 7 8 9 10 11 | let x = 0; // 初始的X坐标 basic.forever(function () { led.plot(x, 0); // 写像素 basic.pause(100); // 等100毫秒 led.unplot(x, 0); // 擦掉像素 x += 1; // 往右移动一格 if (x > 4) { // 如果位置超过了4 x = 0 // 让它回到最左边 } }) |
let x = 0; // 初始的X坐标
basic.forever(function () {
led.plot(x, 0); // 写像素
basic.pause(100); // 等100毫秒
led.unplot(x, 0); // 擦掉像素
x += 1; // 往右移动一格
if (x > 4) { // 如果位置超过了4
x = 0 // 让它回到最左边
}
})我们使用Microbit的第一个动画完成了! 我们使用 // 开始一个行注释, 该注释将被计算机忽略. 注释可以帮助人们更好地理解代码.
当像素的x的坐标超出LED屏幕的最大范围时, 我们需要将其设置为行的开头-通过将其设置为零.
我们还可以使用取模运算符(％)来获得除法运算的余数. 例如, 7％3为1, 其读取方式为: 7除以3, 余数为1.
因此, 以上内容可以写为:
1 2 3 4 5 6 7 8 | let x = 0; // 初始X位置 basic.forever(function () { led.plot(x, 0); // 写像素 basic.pause(100); // 等100毫秒 led.unplot(x, 0); // 擦掉该像素 x = (x + 1) % 5; // 往右移动1格 如果等于5则设置为0 }) |
let x = 0; // 初始X位置
basic.forever(function () {
led.plot(x, 0); // 写像素
basic.pause(100); // 等100毫秒
led.unplot(x, 0); // 擦掉该像素
x = (x + 1) % 5; // 往右移动1格 如果等于5则设置为0
})可视化为:
microbit-a-running-pixel-on-the-first-row-second-version
为了使像素反方向奔跑, 从右到左, 我们可以每次减小X坐标, 并在X变为负数时将X倒退到4.
1 2 3 4 5 6 7 8 9 10 11 | let x = 0; // 初始X坐标 basic.forever(function () { led.plot(x, 0); // 画该像素 basic.pause(100); // 等待100毫秒 led.unplot(x, 0); // 擦掉该像素 x -= 1; // 往左移一格 if (x < 0) { // 如果坐标为负的了 x = 4 // 则把它移到最后一列 } }) |
let x = 0; // 初始X坐标
basic.forever(function () {
led.plot(x, 0); // 画该像素
basic.pause(100); // 等待100毫秒
led.unplot(x, 0); // 擦掉该像素
x -= 1; // 往左移一格
if (x < 0) { // 如果坐标为负的了
x = 4 // 则把它移到最后一列
}
})可视化为:
microbit-a-running-pixel-on-the-first-row-to-the-left
通过使用模数％运算符, 我们需要一个特殊的技巧, 通过添加5个像素将负数变为正数:
1 2 3 4 5 6 7 | let x = 0 basic.forever(function () { led.plot(x, 0) basic.pause(100) led.unplot(x, 0) x = (x - 1 + 5) % 5; // 当X为0的时候, 下一个坐标则是4 }) |
let x = 0
basic.forever(function () {
led.plot(x, 0)
basic.pause(100)
led.unplot(x, 0)
x = (x - 1 + 5) % 5; // 当X为0的时候, 下一个坐标则是4
})为了使像素从第一行到最后一行逐行(从左到右)运行, 我们可以将像素移动到下一行的开始, 并且当像素超出最后一行时, 我们需要对其进行设置回到第一行. 代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | let x = 0, y = 0; basic.forever(function () { led.plot(x, y); // 显示该像素 basic.pause(100); // 等待100毫秒 led.unplot(x, y); // 擦掉该像素 x ++; // 往右移一格 if (x == 5) { // 如果已经超过最后一列了 y ++; // 移动到下一行 x = 0; // 移动到第一列 if (y == 5) { // 已经超过最后一行了 y = 0; // 回到第一行 } } }) |
let x = 0, y = 0;
basic.forever(function () {
led.plot(x, y); // 显示该像素
basic.pause(100); // 等待100毫秒
led.unplot(x, y); // 擦掉该像素
x ++; // 往右移一格
if (x == 5) { // 如果已经超过最后一列了
y ++; // 移动到下一行
x = 0; // 移动到第一列
if (y == 5) { // 已经超过最后一行了
y = 0; // 回到第一行
}
}
})请注意, 我们需要声明两个变量: X和Y来保存当前像素的位置.
microbit-running-pixel-from-left-to-right-top-to-bottom
其它知识点
我们讨论了计算机的基础: 二进制数. 计算机(包括Microbit)需要把所有内容转换为二进制才能理解. 二进制由两种类型的数字组成: 0和1. 例如, 二进制的前几个数对应十进制数为:
1 2 3 4 5 6 7 8 | 0 // 0 1 // 1 10 // 2 11 // 3 100 // 4 101 // 5 110 // 6 111 // 7 |
0 // 0 1 // 1 10 // 2 11 // 3 100 // 4 101 // 5 110 // 6 111 // 7
我们还讨论了Javascript中的数组. 一个数组保存(分组)一些数据, 以便我们可以在循环中使用它们. 例如, 我们可以在数组中显示一些数字:
1 2 3 4 5 6 | basic.forever(function () { let data = [1, 3, 5, 2, 3]; for (let x of data) { basic.showNumber(x); } }) |
basic.forever(function () {
let data = [1, 3, 5, 2, 3];
for (let x of data) {
basic.showNumber(x);
}
})可视化为:
microbit-show-array
我们可以使用以下方法遍历index变量并访问数组中的元素, 语法如下:
1 2 3 4 5 6 | basic.forever(function () { let data = [1, 3, 5, 2, 3]; for (let x = 0; x < data.length; x ++) { basic.showNumber(data[x]); } }) |
basic.forever(function () {
let data = [1, 3, 5, 2, 3];
for (let x = 0; x < data.length; x ++) {
basic.showNumber(data[x]);
}
})请注意, 我们使用data[x]访问位置为x(位置从零开始)的数据数组中的元素. .length属性返回数组的大小, 以便我们知道索引的范围是0到.length-1.
家庭作业(跟进)
您能否在Microbit上制作一个从右下角从右到左, 从下到上奔跑的像素? 例如 当像素降落在左上角时, 其下一个位置将倒退到LED屏幕上的最后一个像素点.
英文: Microbit Programming: Showing a Running Pixel on the LED
Microbit 在线编程(无需安装): https://makecode.microbit.org/#editor
loading...
上一篇: 无线网络 WIFI 不间断掉线的解决方法
下一篇: 一年一度的音乐会让我们看到了孩子的进步
