小赖子的英国生活和资讯

Microbit 游戏编程: 通过精灵对象来编写吃苹果游戏

JustYY.com 小赖子的英国生活和资讯
阅读 桌面完整版

上周, 我们讲了Microbit最重要的输出装置也就是LED显示屏, 只有25个像素点, 也就是Microbit的显示器. 我们还介绍了让一个像素点从第一行最左边的位置一直往右跑, 跑完第一行就换下一行, 当跑完25个像素点的时候又回到了第一个位置.

我们还可以让这个像素点绕着LED显示屏跑一周. 我们需要2组变量, 分别是像素点的当前位置 (x, y) 和 方向偏移量 (xoffset, yoffset). 比如当方向为右的时候, X偏移量为1, 而Y偏移量为0. 

1
2
3

let x = 0, y = 0;
// 初始方向是右
let xoffset = 1, yoffset = 1;
let x = 0, y = 0;
// 初始方向是右
let xoffset = 1, yoffset = 1;

然后, 类似地使像素朝一个方向奔跑, 我们可以绘制和取消绘制像素, 再等待一些时间间隔. 

1
2
3
4
5
6
7

basic.forever(function() {
   led.plot(x, y);
   basic.pause(100);
   led.unplot(x, y);
   x += xoffset;
   y += yoffset;
});
basic.forever(function() {
   led.plot(x, y);
   basic.pause(100);
   led.unplot(x, y);
   x += xoffset;
   y += yoffset;
});

上面的Javascript代码将使像素点从(0, 0)-左上角向右移动, 当其位置超出了LED屏幕的最右边框, 它很快就会消失. 我们可以加个判断, 当它到达了右上角, 我们就改变方向偏移量-让它接下来往下跑. 

1
2
3
4
5
6
7
8
9
10
11

basic.forever(function() {
   led.plot(x, y);
   basic.pause(100);
   led.unplot(x, y);
   x += xoffset;
   y += yoffset;
   if (x == 4 && y == 0) { // 如果到达了右上角
      xoffset = 0;
      yoffset = 1;   // 往下跑
   }
});
basic.forever(function() {
   led.plot(x, y);
   basic.pause(100);
   led.unplot(x, y);
   x += xoffset;
   y += yoffset;
   if (x == 4 && y == 0) { // 如果到达了右上角
      xoffset = 0;
      yoffset = 1;   // 往下跑
   }
});

同样, 我们必须处理其它三个角落情况, 以使像素保持沿边缘奔跑而不会出现问题. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

basic.forever(function() {
   led.plot(x, y);
   basic.pause(100);
   led.unplot(x, y);
   x += xoffset;
   y += yoffset;
   if (x == 4 && y == 0) { // 右上角
      xoffset = 0;
      yoffset = 1;   // 方向向下
   } else if (x == 4 && y == 4) { // 右下角
      xoffset = -1;
      yoffset = 0;   // 方向向左
   } else if (x == 0 && y == 4) { // 左下角
      xoffset = 0;
      yoffset = -1;  // 上
   } else if (x == 0 && y == 0) { // 左上角
      xoffset = 1;
      yoffset = 0;   // 右
   }
});
basic.forever(function() {
   led.plot(x, y);
   basic.pause(100);
   led.unplot(x, y);
   x += xoffset;
   y += yoffset;
   if (x == 4 && y == 0) { // 右上角
      xoffset = 0;
      yoffset = 1;   // 方向向下
   } else if (x == 4 && y == 4) { // 右下角
      xoffset = -1;
      yoffset = 0;   // 方向向左
   } else if (x == 0 && y == 4) { // 左下角
      xoffset = 0;
      yoffset = -1;  // 上
   } else if (x == 0 && y == 0) { // 左上角
      xoffset = 1;
      yoffset = 0;   // 右
   }
});

代码和 Microbit 模拟器: https://makecode.microbit.org/_L4X75r3b4FUU

使用精灵对象

上面的代码可以正常工作, 但是有点冗长和复杂, 因为我们必须通过修改坐标和方向偏移来处理更改方向和移动像素. 我们可以使用精灵对象-这是一个面向对象的编程(OOP). 精灵可以被认为是一个像素点, 我们可以针对每个精灵对象调用几种方法, 例如 移动, 向左转, 向右转等. 还有一个 ifOnEdgeBounce() 方法可以让精灵碰到边后就向后转.

我们可以使用game.createSprite()方法来创建一个精灵. 参数 (x, y) 是精灵的初始位置. 

1
2
3
4
5
6
7
8
9

let pixel = game.createSprite(0, 0);
 
basic.forever(function() {
   pixel.move(1);  // 让像素点往它的方向前进一个点. 
   if (pixel.isTouchingEdge()) { // 如果碰到了边
      pixel.turnRight(90);       // 就向右转90度. 
   }
   basic.pause(100);
});
let pixel = game.createSprite(0, 0);

basic.forever(function() {
   pixel.move(1);  // 让像素点往它的方向前进一个点. 
   if (pixel.isTouchingEdge()) { // 如果碰到了边
      pixel.turnRight(90);       // 就向右转90度. 
   }
   basic.pause(100);
});

代码和 Microbit 模拟器: https://makecode.microbit.org/_b6q2d8Cym63P
但是, 它不能按预期工作, 虽然有点酷.

该代码背后的原因是: 当像素位于边缘时, 它将向右转. 拐角是边缘, 但是边缘本质上不是拐角. 我们可以通过添加一个函数来检查像素是否在拐角处来修复代码. 

1
2
3
4
5
6
7
8

function isAtCorner(pixel: game.ledSprite): boolean {
  const x = pixel.x();
  const y = pixel.y();
  return ((x == 0) && (y == 0)) ||
         ((x == 0) && (y == 4)) ||
         ((x == 4) && (y == 0)) ||
         ((x == 4) && (y == 4));
}
function isAtCorner(pixel: game.ledSprite): boolean {
  const x = pixel.x();
  const y = pixel.y();
  return ((x == 0) && (y == 0)) ||
         ((x == 0) && (y == 4)) ||
         ((x == 4) && (y == 0)) ||
         ((x == 4) && (y == 4));
}

整个代码和模拟器: https://makecode.microbit.org/_VD17z4exrWED

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

let pixel = game.createSprite(0, 0);
 
function isAtCorner(pixel: game.LedSprite): boolean {
    const x = pixel.x();
    const y = pixel.y();
    return ((x == 0) && (y == 0)) ||
        ((x == 0) && (y == 4)) ||
        ((x == 4) && (y == 0)) ||
        ((x == 4) && (y == 4));
}
 
basic.forever(function () {
    pixel.move(1);
    if (pixel.isTouchingEdge() && isAtCorner(pixel)) {
        pixel.turnRight(90);
    }
    basic.pause(100);
});
let pixel = game.createSprite(0, 0);

function isAtCorner(pixel: game.LedSprite): boolean {
    const x = pixel.x();
    const y = pixel.y();
    return ((x == 0) && (y == 0)) ||
        ((x == 0) && (y == 4)) ||
        ((x == 4) && (y == 0)) ||
        ((x == 4) && (y == 4));
}

basic.forever(function () {
    pixel.move(1);
    if (pixel.isTouchingEdge() && isAtCorner(pixel)) {
        pixel.turnRight(90);
    }
    basic.pause(100);
});

我们使用 game.LedSprite 来指定 isAtCorner 函数的输入参数类型. 该函数的返回类型为布尔值-可以为TRUE或FALSE. 然后, 我们只能在拐角处和边处进行转弯. 请注意, 尽管我们将两个布尔表达式都放在此处以显示逻辑AND运算符(即&&)的用法, 但其实只要检查是否是角就足够了.

游戏的随机性

游戏需要随机性才好玩. 我们使用 Math.randomRange(from, to) 函数生成一个在范围为[from, to]的随机整数. 例如, 以下操作将使像素在LED屏幕中随机跳跃. 

1
2
3
4
5
6
7
8

let pixel = game.createSprite(0, 0);
 
basic.forever(function () {
    const x = Math.randomRange(0, 4);
    const y = Math.randomRange(0, 4);
    pixel.goTo(x, y);
    basic.pause(100);
});
let pixel = game.createSprite(0, 0);

basic.forever(function () {
    const x = Math.randomRange(0, 4);
    const y = Math.randomRange(0, 4);
    pixel.goTo(x, y);
    basic.pause(100);
});

代码和 Microbit 模拟器: https://makecode.microbit.org/_W64WXLEDX6Xq

使用精灵对象来设计一个吃苹果游戏

我们可以通过到目前为止所学的技能来制作一款好玩的游戏. 我们可以生成一个随机掉落的苹果, 然后我们需要捕捉/吃掉它. (很有意思, 在上课的时候突发奇想就写了这么一个小游戏)

1
2

// 在第一行随机生成一个苹果对象
let apple = game.createSprite(Math.randomRange(0, 4), 0);
// 在第一行随机生成一个苹果对象
let apple = game.createSprite(Math.randomRange(0, 4), 0);

然后, 我们可以将盘子最初放在中间的最后一行中: 

1

let pixel = game.createSprite(2, 4);
let pixel = game.createSprite(2, 4);

然后, 我们可以使用两个按钮(按钮A和按钮B)向左或向右移动(一次移动一个像素)来控制盘子(接苹果的). 代码应如下所示很简单清楚: 

1
2
3
4
5
6
7

input.onButtonPressed(Button.A, function() {
    pixel.changeXBy(-1);
});
 
input.onButtonPressed(Button.B, function() {
    pixel.changeXBy(1);
});
input.onButtonPressed(Button.A, function() {
    pixel.changeXBy(-1);
});

input.onButtonPressed(Button.B, function() {
    pixel.changeXBy(1);
});

请注意, sprite.changeXBy(偏移量)方法用一个整数表示要更改的偏移量, 即位置将移动此偏移量. 同样, 我们有changeYBy()方法. 这两种方法将限制精灵在LED屏幕中的位置, 这意味着当像素的坐标X = 0时, 调用changeByX(-1)不会更改X坐标, 因为它已经在最左侧(第一列)并且限制在LED上 屏幕.

为了使游戏更加人性化, 我们可以通过允许平板像素倒退到另一侧(例如, 当像素位于最左边时, 您可以按A按钮转到最右边, 反之亦然. 这有时会缩短抓苹果的时间, 并且为用户提供了更多选择. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14

let px = 2;
let py = 4;
 
input.onButtonPressed(Button.A, function () {
    px--;
    if (px < 0) px = 4;
    pixel.setX(px);
})
 
input.onButtonPressed(Button.B, function () {
    px++;
    if (px > 4) px = 0;
    pixel.setX(px);
})
let px = 2;
let py = 4;

input.onButtonPressed(Button.A, function () {
    px--;
    if (px < 0) px = 4;
    pixel.setX(px);
})

input.onButtonPressed(Button.B, function () {
    px++;
    if (px > 4) px = 0;
    pixel.setX(px);
})

我们还可以定义按钮A + B(同时按下)以重置游戏. 

1
2
3
4
5
6
7

input.onButtonPressed(Button.AB, function () {
    if (apple.y() == 4) { // 避免误操作
        game.setScore(0);
        score = 0;
        apple.goTo(Math.randomRange(0, 4), -1);
    }
})
input.onButtonPressed(Button.AB, function () {
    if (apple.y() == 4) { // 避免误操作
        game.setScore(0);
        score = 0;
        apple.goTo(Math.randomRange(0, 4), -1);
    }
})

在这里, 我们只在苹果落到地面上时重置游戏, 因此您在玩游戏时不会意外重置游戏. 然后我们将分数重置为零. 苹果还需要移动到另一个初始随机位置.

game.setScore(分数)设置内部游戏得分, 当您调用game.gameOver() 时会显示游戏最后得分. 该方法类似于以下内容: 

1
2
3

function gameOver() {
  basic.showString("Game Over, Score: " + score);
}
function gameOver() {
  basic.showString("Game Over, Score: " + score);
}

我们定义了一个全局游戏得分变量-这不是强制性的, 因为我们可以使用game.addScore(score)或game.setScore(score)来更改/更改得分.

为了使游戏更具挑战性, 每当分数增加时(当您抓到一个苹果时), 我们就缩短延迟时间, 让苹果掉得更快一些. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14

basic.forever(function () {
    apple.changeYBy(1);       // 苹果下落一格
    if (pixel.isTouching(apple)) {  // 接到了
        score++;
        apple.goTo(Math.randomRange(0, 4), -1); // 生成另一个随机苹果位置
    } else if (4 <= apple.y()) {   // 当苹果掉到地上了
        basic.showNumber(score);
        game.setScore(score);
        game.gameOver();
    }
    let delay = 500 - 10 * score;   // 下落得越来越快
    delay = Math.max(50, delay);    // 最快的速度有限制
    basic.pause(delay);
})
basic.forever(function () {
    apple.changeYBy(1);       // 苹果下落一格
    if (pixel.isTouching(apple)) {  // 接到了
        score++;
        apple.goTo(Math.randomRange(0, 4), -1); // 生成另一个随机苹果位置
    } else if (4 <= apple.y()) {   // 当苹果掉到地上了
        basic.showNumber(score);
        game.setScore(score);
        game.gameOver();
    }
    let delay = 500 - 10 * score;   // 下落得越来越快
    delay = Math.max(50, delay);    // 最快的速度有限制
    basic.pause(delay);
})

这是主要的游戏逻辑, 在主循环中, 苹果将首先下降1个像素. 然后我们使用sprite.isTouching(anotherSprite)方法(来判断两个精灵是否发生了碰撞检测)借此来检查是否捕获了它. 然后, 我们还检查应用的Y坐标是否大于或等于4-落在了地面上. 然后我们可以延迟一些时间间隔(延迟越来越短, 苹果掉落的速度越来越快).

通过使用Math.max()函数将最大下降速度限制为50, 该函数与以下相同: 

1
2
3

if (delay < 50) {
  delay = 50;
}
if (delay < 50) {
  delay = 50;
}

这个吃苹果游戏代码和Microbit 模拟器: https://makecode.microbit.org/_DV93uT7i0WuK

游戏的可视化显示了该游戏的几大部件:

microbit-eat-apple-game

剑桥 Chesterton Community College – Coding Club

来几张我上课的照片和视频:

视频:

https://justyy.com/wp-content/uploads/2019/12/microbit-coding-club-2019-11-20-cambridge.mp4?_=1
https://justyy.com/videos/2019/microbit-coding-club-2019-11-20-cambridge-2.mp4?_=2
https://justyy.com/wp-content/uploads/2019/12/kids-love-playing-eat-apple-game-on-microbit.mp4?_=3

经过一些修改和参数调整, Microbit吃苹果游戏的可玩性大大提高了

孩子们在玩这个游戏很有兴趣, 老大说比Youshi 好玩

下一周, 我们将让 Microbit 拥有最简单的人工智能来玩这个游戏: Microbit 编程: 简易人工智能让电脑玩游戏

英文: Microbit Programming: How to Make a Catching-Apple Game by Using Sprites Objects?

强烈推荐

微信公众号: 小赖子的英国生活和资讯 JustYYUK

阅读 桌面完整版

相关文章：

  1. 可以用ChatGPT来轻松转换编程语言 阅读 桌面完整版 ChatGPT是今年最火的技术，人工智能AI，但是确实来说，是AGI，也就是通用人工智能 Artificial General Intelligence。ChatGPT可以用来做很多事情，我最近发现它可以拿来转换编程语言。比如我想学习一门新语言了，就可以把现有的程序让ChatGPT转换成新的编程语言。或者在力扣上换个新的编程语言学习一下。 下面这个例子ChatGPT转换后的代码我就可以直接在力扣上跑，就通过了所有的测试用例。 网上还有很多不同语言之间的转换工具，相信实现起来都不简单，但是如今有了ChatGPT这个通用人工智能，完全可以套个UI前端就可以实现不同语言之间的转换工具，而且转换逻辑完全不用自己实现，调用ChatGPT的API即可。 英文：Programming Language Conversion Tool based on ChatGPT...
  2. 无线网络 WIFI 不间断掉线的解决方法 阅读 桌面完整版 搬了新家后, 无线网络WIFI经常不间断的掉线, 于是打电话给 plusnet 客服, 客服很专业的让我在线等了几分钟, 说是已经远程登陆了我的路游器然后更改了设置, 解决了这个问题. 问其原因, 也很容易理解. 现在的路游器都支持 2.4G 和...
  3. Microbit 编程: 简易人工智能让电脑玩游戏 阅读 桌面完整版 上一周, 我们在 Microbit 上编写了第一个游戏: 吃苹果. 我两儿子很喜欢玩, 他们互相比着最高分, 大概极限是35分. 吃苹果的游戏代码和Microbit模拟器: https://makecode.microbit.org/_DV93uT7i0WuK 可能有极限吗? 即使我们做出足够迅速的反应并且没有犯错, 会出现怎么样也无法抓住苹果的情况吗?...
  4. 浅谈虚拟货币交易所三角套利的算法 阅读 桌面完整版 高频交易(HFT, High Frequency Trading) 指得是我们可以让程序调用交易所的API 来自动下买单或者卖单, 赚差价来达到挣钱的目的. 常见的高频交易策略有低买高卖, 本文介绍一种常见的三角套利的策略. 高频交易 (HFT) 简介 高频交易...
  5. Leetcode 的在线调试器 阅读 桌面完整版 最近 leetcode 刷题网站出了一个在线调试器. 个人感觉非常好用. 因为我平时是用 IPAD+蓝牙键盘来刷题, 而在 ipad 上是没有集成的IDE的, 对于调试来说, 只能很原始的让函数退出一个值, 然后尝试不同的输入来发现问题. leetcode在线调试器的好处...
  6. 用 Javascript 做一个贪食蛇的游戏 阅读 桌面完整版 贪食蛇游戏很有趣, 而且也不复杂, 是学习一门编程语言的最好的入门练手的项目. 我在加入GE后接触到GE开发的Magik语言(Wiki), 便很快的用它写了一个贪吃蛇的游戏. 今天, 我们就来用当今最火的语言 Javascript 来写一下, 你就会发现, 其实这个游戏很简单就能实现了. 画板 我们需要一个游戏场景,...
  7. 英国 stagecoach 表演课真是又贵又费时的课外兴趣班啊 阅读 桌面完整版 英国stagecoach 表演课是很贵很费时的课外兴趣班, 一小时大概10几英镑, 然后, 老大下学期将每周三下午 4点半到7点半三小时, 费时. 这个兴趣班就是一群小孩子在学表演, 各种舞台秀, 学期结束最后一节课会邀请家长门一起前去观赏孩子一学期的成果. 听说高年级表演课还有加分, 搞不好这就是为什么这么贵的原因之一. 孩子还特别喜欢,...
  8. GE公司的圣诞团建活动: 知识测验 阅读 桌面完整版 相信很多公司圣诞节都会有团建活动, GE的团建活动非常特别有趣. 我去年12月份加入GE, 参加了一次, 今年又参加了一次. 据说这个圣诞知识测验活动今年是第三次. 知识测验就是天南地北的问题, 有点像国内综艺的那个 江苏卫视《一站到底》. 只不过参赛团队是四人一组. 团队可以自己确定也可以随机分配. 每个组必须给出一个组名, 有人就脑动大开,...
Exit mobile version