Funpack第十期-使用makecode实现小游戏

内容介绍

大家好, 我是james, 一名hacker. 平时喜欢研究一些可编程的小东西.

1 实现功能

第十期funpack活动的板卡是来自kitronik的kitronik arcade. 该板卡搭载了一颗来自atmel的sam(smart arm microcontroller) d51. 核心是120MHz的arm cortex-m4f, sram为192KB, flash为512KB. 屏幕是160x128分辨率的lcd, 实际在用makecode编程的时候可用尺寸为160x120.

本期我又实现了一个贪吃蛇游戏，名字叫yasnake, yet another snake. 这个是根据很多年前我还是学生的时候用turbo c写的一个贪吃蛇游戏改过来的, 基本算法逻辑完全一样, 我也努力用makecode提供的框架来实现borland bgi api,除了必须的语法改变(从c到typescript)其他基本上没有变化. 这里的难点是理解 makecode框架, 实现字符显示矩阵.

2 设计思路

2.1 snake

这里的贪吃蛇游戏采用了基于方块的棋盘设计, 一个屏幕可以最多显示20x15个方块, 这些方块构成了游戏的基础. 这里直接使用image相关函数在场景的画布上直接绘制, 没有使用sprite以节省资源, 提高速度. 这些基础设计思路完全可以用来实现其他的经典游戏, 比如俄罗斯方块, 象棋, 连连看, 爱消除, 等棋盘游戏.

游戏使用了makecode controler的插件, 可以在吃到水果的时候播放音乐和驱动震动马达震动.

2.2 makecode

使用微软的makecode环境, 我们可以不用搭建任何开发环境, 只要有个浏览器就能开始编程, 这个要得益于pxt团队的工作, 他们以typescript为核心语言, 开发了云ide, 云编译器, 云模拟器. 云ide基于monaco editor(和vscode用的同一个编辑器组件), 可以方便的切换用python, javascript(typescript), 或者 blockly来编程. 云编译器可以把static typescript编译成thumb2指令集的指令, 并连接到c++/c编写的函数库. 由于各项技术的集成度很高, 相互配合, 所以用起来很顺畅, 确实提高了编程效率. 特别是云模拟器, 如果模拟器里面运行没有问题, 基本上下载到板子上一定没有问题, 调试也通过模拟器进行, 这就完全不需要jtag之类较为底层的工具了. 特别是makecode支持"龟速"单步模式, 这个调试简单的程序实在是很方便.

2.3 makecode-arcade

makecode arcade据说是使用10000行typescript写成, 实现了基本的小游戏框架, 一些常见的游戏开发基础概念在这里都有实现, 比如精灵, 场景, 贴图, 地图, 粒子等. 这些在构建一些绚丽的复杂游戏是必不可少的. 得益于makecode的架构, 这个arcade框架运行得相当流畅, 基本上模拟器里面运行啥效果, 下载到板子上就运行啥效果.

2.4 static typescript和micropython

对于刚刚接触makecode的初学者, 肯定想直接从网上找到一些python片段复制粘贴进去就能运行, 但是很遗憾, 即便是typescript的片段也没有办法100%直接运行, 这也是初学者的误区, 他们只是像而已, 也可以说都是对应语言的子集, 还是有很多语言特性没有实现, 有些是硬件限制, 有些是没有意义, 有些为了效率考虑, 总之不能直接当作对应的语言, 特别是python, 它会被转译成 typescript, 然后再编译成机器码. 值得一提的是, 据pxt的测试, static typescript执行效率要比micropython高很多, 最低支持16KB sram, 256KB flash(microbit v1), micropython并不是编译成机器码之后再下载到板卡, 所以可能会有一些额外开销, 但是他们都能在最低能支持到 16KB/256KB. micropython可能更简单一些, 但是效率也稍低一些.

3 环境搭建

使用makecode无需搭建环境, 直接访问arcade.makecode.com即可.

Fi57nLEuFlmisHVPwdk74qDPJIac

4 软件实现

4.1 主函数

function main () {
    p.listenToEvent();

    opening();
    init_run();

    (function while_true_loop_with_delay() {
        setInterval(function () {
            dir_select();
            run();
            draw();
            judge();
        }, 100)
    })();
}

4.2 输出字符(tile)

export function outtextxy(x: number, y: number, s: string) {
    let img :Image = scene.backgroundImage();
    let tile :Image;
    for (let i = 0; i < s.length; ++i) {
        tile = tiles[s.charAt(i)];
        tile.replace(tile_sketch_color, pencil_color);
        img.drawImage(tile, (x + i)* 8, y * 8);
        tile.replace(pencil_color, tile_sketch_color);
    }
}

5 硬件实现

本期没有硬件变动.

FvsMKgIm9Me8HSFrZPu0UUSSZqmv

6 心得体会

makecode arcade这个平台使用起来很方便, 可以很好的实现创意
kitronik arcade这个板卡整体设计很好, 但是屏幕稍微有点小, 显示效果也不太好, 可以改进, 拿起来还是有点分量的, 特别是装上3节AA电池后
这次是一次愉快的编程体验

7 常见问题

使用字库字库我使用的是找到的一个开放的8x8中文字库, 通过开源工具转换成图片
多源文件 makecode显然对多源文件并不是特别支持, 可能是本身是面向教育的用途. 但是如果使用的是typescript, ide还是给了增加多个文件的界面功能.

8 Code&Future

https://github.com/picospuch/eetree-funpack-workshop/tree/phase-ten

感谢硬禾学堂和得捷电子，让我接触到了makecode arcade板卡，让我能在业余时间参与更多有趣项目的学习，也感谢群的小伙伴提供很多种实现题目功能的思路，感谢大家一路的折腾与陪伴，谢谢！