【花雕动手做】基于Kitronik开发板之斐波那契图块和螺旋

Kitronik ARCADE 是一款由英国教育科技公司 Kitronik 精心打造的可编程游戏机开发板，专为编程教学与创客实践而设计。该设备原生支持微软的 MakeCode Arcade 平台，用户可通过图形化或 JavaScript 编程方式，轻松创建、下载并运行复古风格的街机游戏。

它集成了彩色 LCD 显示屏、方向控制键、功能按键、蜂鸣器和震动马达等交互组件，提供完整的游戏输入输出体验。无论是初学者进行编程启蒙，还是创客群体开发交互式作品，Kitronik ARCADE 都能作为理想的硬件载体，助力创意实现。

凭借其开源友好、易于上手、兼容性强等特点，该开发板广泛应用于中小学编程课程、创客工作坊、游戏开发教学以及个人项目原型设计，深受教育者与技术爱好者的喜爱。

作为学习、练习与尝试，这里创建一个斐波那契图块和螺旋的小游戏。
打开网页版：https://arcade.makecode.com/，设置项目名称：斐波那契图块和螺旋

MicroPython实验代码

def on_up_pressed():
    global cy
    cy += -15
    scene.center_camera_at(cx, cy)
controller.up.on_event(ControllerButtonEvent.PRESSED, on_up_pressed)

def on_down_pressed():
    global cy
    cy += 15
    scene.center_camera_at(cx, cy)
controller.down.on_event(ControllerButtonEvent.PRESSED, on_down_pressed)

def on_right_pressed():
    global cx
    cx += 20
    scene.center_camera_at(cx, cy)
controller.right.on_event(ControllerButtonEvent.PRESSED, on_right_pressed)

def drawArc():
    global x, y
    # draw a circle arc using random dots!
    for index in range(100000):
        x = randint(0, f)
        y = randint(0, f)
        # test if the point will draw the circle
        if x * x + y * y >= (f - 1) ** 2 and x * x + y * y < (f + 1) ** 2:
            if rotate == 0:
                x = f - x
                y = f - y
            elif rotate == 1:
                x = f - x
            elif rotate == 3:
                y = f - y
            fibSquare.set_pixel(x, y, 1)

def on_left_pressed():
    global cx
    cx += -20
    scene.center_camera_at(cx, cy)
controller.left.on_event(ControllerButtonEvent.PRESSED, on_left_pressed)

fibSprite: Sprite = None
f0 = 0
fibSquare: Image = None
rotate = 0
y = 0
f = 0
x = 0
cy = 0
cx = 0
clr = 1
repeat = 14
f1 = 1
fibSprite0 = sprites.create(img("""
    .
    """), 0)
cx = scene.screen_width() / 2
cy = scene.screen_height() / 2
fibSprite0.top += 20

def on_update_interval():
    global f0, f1, f, repeat, fibSquare, clr, fibSprite, rotate, fibSprite0
    if repeat > 0:
        f0 = f1
        f1 = f
        f = f1 + f0
        info.set_score(f)
        repeat += -1
        fibSquare = image.create(f, f)
        fibSquare.fill_rect(0, 0, f, f, clr)
        clr += 1
        fibSprite = sprites.create(fibSquare, 0)
        if rotate == 0:
            fibSprite.top = fibSprite0.bottom
            fibSprite.left = fibSprite0.left
            rotate += 1
        elif rotate == 1:
            fibSprite.bottom = fibSprite0.bottom
            fibSprite.left = fibSprite0.right
            rotate += 1
        elif rotate == 2:
            fibSprite.bottom = fibSprite0.top
            fibSprite.right = fibSprite0.right
            rotate += 1
        elif rotate == 3:
            fibSprite.top = fibSprite0.top
            fibSprite.right = fibSprite0.left
            rotate = 0
        drawArc()
        fibSprite0 = fibSprite
game.on_update_interval(1000, on_update_interval)
复制代码

这段代码是用 MakeCode Arcade 编写的一个视觉数学演示项目，名为 “斐波那契图块与螺旋”。它通过不断生成斐波那契数列大小的方块，并在其边缘绘制弧线，最终形成一个类似黄金螺旋的图形。

代码逐段解析
1、摄像机控制逻辑
python

controller.up.on_event(...): cy -= 15

controller.down.on_event(...): cy += 15

controller.left.on_event(...): cx -= 20

controller.right.on_event(...): cx += 20

scene.center_camera_at(cx, cy)
复制代码

玩家可使用方向键移动视角

cx, cy 控制摄像机中心位置

实现对整个图形的平移观察

2、方块生成与排列逻辑
python

f0 = 0

f1 = 1

f = f1 + f0

repeat = 14
复制代码

使用斐波那契数列生成方块边长

每秒生成一个新方块，最多生成 14 个

python

fibSquare = image.create(f, f)

fibSquare.fill_rect(0, 0, f, f, clr)

fibSprite = sprites.create(fibSquare, 0)
复制代码

创建一个边长为 f 的图像并填充颜色

将其作为精灵添加到场景中

3、方块旋转排列逻辑
python

if rotate == 0:

    fibSprite.top = fibSprite0.bottom

    fibSprite.left = fibSprite0.left

    rotate += 1

...

elif rotate == 3:

    fibSprite.top = fibSprite0.top

    fibSprite.right = fibSprite0.left

    rotate = 0
复制代码

每个新方块根据 rotate 值放置在前一个方块的不同方向

顺序为：下 → 右 → 上 → 左，形成螺旋结构

4、弧线绘制逻辑
python

def drawArc():

    for index in range(100000):

        x = randint(0, f)

        y = randint(0, f)

        if x² + y² ≈ f²:

            fibSquare.set_pixel(x, y, 1)
复制代码

使用随机点模拟圆弧边缘（近似圆周）

根据 rotate 值调整弧线方向，使其与方块位置匹配

实现黄金螺旋的视觉效果

5、分数系统（可选）
python

info.set_score(f)
复制代码

每次生成新方块时更新分数为当前斐波那契数

可用于展示数列增长过程。

图形编程参考实验程序

通过模拟器，调试与模拟运行



实验场景记录