KPM大比拼

mostblack

前言：没别的就是比手快！

方案描述：
做这个的初衷其实是受到一些网红玩具的启发——例如下面这款

也想借此机会探究一下Micro:Bit的不同之处。
这个超级简易的小游戏玩法和上图差不多，只管按就对啦！


一、硬件部分：
主控：Micro：Bit（感谢小喵家的特别赞助）以及扩展板一块

按键：小学生用的响板

杜邦线，导电胶带若干



硬件制作过程：
       这块没什么复杂的地方，将杜邦线去壳，采用导电铜箔胶带将金属头的杜邦线粘贴在响板的上下两侧，之后插接在Micro:Bit的P0以及P2口上，一端接I/O口，一端接地。


硬件复杂程度：⭐


二、软件部分
这里我们使用到了Kittenbot提供的Makecode离线版图形化编程界面以及Processing来制作小游戏的界面。
看不请单击图片即可大图观看。

可以从上图看出，我们的图形化代码这块也是非常简单的，主要就是对按键的三种情况使用串口进行传输，然后用processing读取Micro:Bit发送的数据，完成简单粗暴的交互。
在用Processing制作之前，首先从度娘上当一些素材，比如小汽车啦~

然后用PhotoShop简单处理一下，把底色去除并保存为透明底色的PNG格式图片。

接下来我们还需要一个简易的跑道什么的，这里依旧用PS简单搞一搞。

下面是处理好的jpg格式，需要的同学可以直接拿去。


以及冲线之后的冠军归属画面


好了，现在我们打开Processing，将这些素材和我们的Micro:Bit联动起来吧！

第一步：先上完整代码由于电脑中Processing版本不支持中文，所以这里注释都是后加上的。
processing的语法和Arduino很相似，不过也略有区别，光从上手度来说的话，也是很容易理解和操作的。

游客，如果您要查看本帖隐藏内容请回复

int car1X = 0;//上方小车的起始X轴坐标
int car2X = 0;//下方小车的起始X轴坐标
int speed = 20;//步进幅度，单位是像素
void draw()//所有动画在draw函数里完成
{
  background(loadImage("E:\\arduinocn\\KPM\\background.jpg"));//设置初始背景，这里换成你自己的路径，记得要用‘\’转义，不然会报错
  PImage car1 = loadImage("E:\\arduinocn\\KPM\\car1.png");//导入上方小汽车
  PImage car2 = loadImage("E:\\arduinocn\\KPM\\car2.png");//导入下方小汽车
  if (myPort.available()>0)//检测串口活动，当有数据传进来时
  {
    String zuile = myPort.readString();//字符串保存数据（为什么用zuile这个变量名。。。因为一直提示各种变量名不能使用，真的是醉了！就顺手打了个zuile，能用，也懒得再改了）
    print(zuile);//串口输出zuile字符串目前的数据。

    switch (zuile.charAt(0))//用switch。。。case做逻辑选择
    {
    case 'A'://当对比结果是A也就是P0口被按下时，上方小车前进
      car1X+=speed;
      break;
    case 'B'://当对比结果是B也就是P2口被按下时，下方小车前进
      car2X+=speed;
      break;
    case 'C'://当对比结果是C，也就是P0\P2口同时被按下时，双方小车前进
      car1X+=speed;
      car2X+=speed;
      break;
    }
  }

  image(car1, car1X, 192);//按照修改后的X轴坐标显示上方小车位置
  image(car2, car2X, 576);//按照修改后的X轴坐标显示上方小车位置
  if (car1X>680 || car2X >680)//其中一方到达终点，阈值设为X轴坐标680
  {
    if(car1X-car2X>0)//当上方小车先到时，显示WINNER1
    {
    background(loadImage("E:\\arduinocn\\KPM\\WINNER1.png"));
    delay(3000);
    }
    else if(car1X-car2X<=0)//当下方小车先到时，显示WINNER2
    {
    background(loadImage("E:\\arduinocn\\KPM\\WINNER2.png"));
    delay(3000);
    }
   
  }
  
}

[/mw_shl_code]


这里有个小BUG，就是在最后显示获胜界面时，不能很好的显示，希望知道的朋友可以告知一下原因。
这个程序做过Arduino的朋友都可以无缝转换看懂，说几个我碰到的问题。
1、读取字符串中第N位的数据，这里用——字符串名.charAt(位置)来获取；
2、经常会有提示变量名不能用（未解）
3、最后显示获胜方时显示不正常


总的来说，这是一个非常好上手的小项目，在简单的硬件搭接时又配以图形化以及简单的代码编程任务，可以完成同学们关于IO口状态、串口传输、以及初级的编程思维等锻炼。
项目视频：

190808149

非常有趣的互动游戏。

seesea

最后的winner不是显示的挺正常嘛，是说想透明显示却是红色半透明吗？管他了，这个效果也不错啊，不说没人以为不正常ヽ(￣д￣;)ノ=3=3=3

mostblack

190808149 发表于 2019-5-5 10:15
非常有趣的互动游戏。

还是宋老师的项目更有意思一些

mostblack

seesea 发表于 2019-5-5 13:49
最后的winner不是显示的挺正常嘛，是说想透明显示却是红色半透明吗？管他了，这个效果也不错啊，不说没人以 ...

23333333，游戏大神面前我这实在是见笑了

seesea

mostblack 发表于 2019-5-5 21:48
23333333，游戏大神面前我这实在是见笑了

这。。。。。

z496657702

很强，楼主。学习arduino还有很长到路要走