Microbit 编程: 奔跑的像素点

上周，我们简单介绍了 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’。

你将看到，屏幕最左上方的小像素点被点亮了。

切换到 Javascript 代码如下：

basic.forever(function () {
    led.plot(0, 0)
})

要取消绘制像素（擦除），请使用led.unplot方法。基于这两个方法我们就可以开始制作动画了。计算机动画的过程就是：绘制某些东西，等待一段时间（几毫秒），然后擦除原始内容，最后在新位置绘制这些内容，不停的重复这个过程在人的眼睛来看就是动画了。

奔跑吧像素点！

我们可以通过以下方法在第一行上绘制一个奔跑的像素点：

Javascript 代码如下：

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。

因此，以上内容可以写为：

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
})

可视化为：

为了使像素反方向奔跑，从右到左，我们可以每次减小X坐标，并在X变为负数时将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         // 则把它移到最后一列
    }
})

可视化为：

通过使用模数％运算符，我们需要一个特殊的技巧，通过添加5个像素将负数变为正数

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, 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）需要把所有内容转换为二进制才能理解。 二进制由两种类型的数字组成：0和1。例如，二进制的前几个数对应十进制数为：

0      // 0
1      // 1
10     // 2
11     // 3
100    // 4
101    // 5
110    // 6
111    // 7

我们还讨论了Javascript中的数组。 一个数组保存（分组）一些数据，以便我们可以在循环中使用它们。 例如，我们可以在数组中显示一些数字：

basic.forever(function () {
    let data = [1, 3, 5, 2, 3];
    for (let x of data) {
        basic.showNumber(x);
    }
})

可视化为：

我们可以使用以下方法遍历index变量并访问数组中的元素，语法如下：

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 在线编程（无需安装）： https://makecode.microbit.org/#editor

英文: Microbit Programming: Showing a Running Pixel on the LED
同步到博文： https://justyy.com/archives/31308

---

股东工具

1. 成为股东：代理5 SP 即可 （退出股东 输入 0即可）
2. 查询当前股东

请注意：每次代理都是以最后一次输入的SP数量为标准，比如已经代理10 SP，想多代理5 SP则需要输入 最后的数字 15 SP（而不是 5！）

支持我的工作 支持我成为 见证人

1. 我的见证人信息 - 感谢投票，每一票都很重要！
2. 请在 这里 投我一票, 或者
3. 设置我 为代理.

我的一些贡献

1. SteemYY.com - SteemIt 工具、API接口、机器人和教程
2. 好用的 SteemTools 浏览器插件
3. VPS 搜索引擎
4. 在线视频下载
5. Cryptocurrency Discord 机器人
6. SteemIt Discord 机器人

Vote for My Witness

https://steemit.com/~witnesses type in justyy and click VOTE

Or Vote @justyy via Steemconnect Thank you!