【花雕动手做】基于Kitronik可编程开发板之太空冒险氛围

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

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

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

作为学习、练习与尝试，这里创建一个太空冒险氛围的小游戏。
打开网页版：https://arcade.makecode.com/，设置项目名称：太空冒险氛围

MicroPython实验参考代码

@namespace
class SpriteKind:
    Star = SpriteKind.create()
ship: Sprite = None
hyper = False
star: Sprite = None
scroll = False
lineAdjust = 0
sagaSprite: Sprite = None
sagaImage: Image = None
storyLines = ["TALE OF TALAGRON",
    "",
    "Once upon a time,",
    "like really long ago,",
    "a peaceful people lived",
    "happily on Planet Talagron.",
    "",
    "They used the rare mineral",
    "Xelantium for energy to",
    "power their planet.",
    "",
    "Dobanites raided Talagron",
    "and took all the known",
    "Xelantium from them. Not",
    "nice! Ugh! Err!",
    "",
    "Your mission is to help",
    "protect Talagron from the",
    "greedy Dobanites. So, on",
    "your way now and good luck!"]
scroll = True
sagaImage = image.create(scene.screen_width(), 10 * len(storyLines))
i = 0
while i <= len(storyLines) - 1:
    sagaImage.print_center(storyLines[i], i * 10, 7 if i > 0 else 4)
    i += 1
sagaSprite = sprites.create(sagaImage, 0)
sagaSprite.top = scene.screen_height() - 1
sagaSprite.set_flag(SpriteFlag.AUTO_DESTROY, True)
sagaSprite.vy = -10

def on_a_pressed():
    global hyper, scroll
    if not hyper:
        sagaSprite.vy = 0 if scroll else -10
        scroll = not (scroll)
controller.A.on_event(ControllerButtonEvent.PRESSED, on_a_pressed)

def on_up_pressed():
    global hyper, scroll, lineAdjust
    if not hyper:
        sagaSprite.vy = 0
        scroll = False
        lineAdjust = (sagaSprite.bottom + 1) % 10
        sagaSprite.bottom -= lineAdjust if (lineAdjust > 0) else 10
controller.up.on_event(ControllerButtonEvent.PRESSED, on_up_pressed)

def on_down_pressed():
    global hyper, scroll, lineAdjust
    if not hyper:
        sagaSprite.vy = 0
        scroll = False
        lineAdjust = (sagaSprite.top + 1) % 10
        sagaSprite.top += 10 - lineAdjust
controller.down.on_event(ControllerButtonEvent.PRESSED, on_down_pressed)

def on_on_update():
    global star
    if sagaSprite.bottom < 0:
        sagaSprite.destroy()
    if Math.percent_chance(25) or hyper:
        star = sprites.create(img("""
            1
            """), SpriteKind.Star)
        star.set_flag(SpriteFlag.AUTO_DESTROY, True)
        star.set_flag(SpriteFlag.GHOST, True)
        star.x = randint(0, scene.screen_width())
        star.y = randint(0, scene.screen_height())
        star.vx = -2 if (star.x < scene.screen_width() / 2) else 2
        star.vy = -1 if (star.y < scene.screen_height() / 2) else 1
        if hyper:
            star.ax = star.vx * 1000
            star.ay = star.vy * 1000
            if Math.percent_chance(15):
                ship.x = randint(scene.screen_width() / 2 - 5, scene.screen_width() / 2 + 5)
                ship.y = randint(scene.screen_height() / 2 - 2, scene.screen_height() / 2 + 2)
game.on_update(on_on_update)

def on_on_destroyed():
    global ship, hyper
    ship = sprites.create(img("""
            . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
            . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
            . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
            . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
            . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
            . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
            . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
            . . . . . . . . . . . . . . . 7 4 . . . . . . . . . . . . . . .
            . . . . . . . . . . . . . . . e e . . . . . . . . . . . . . . .
            . . . . . . . . . . . . . . . e e . . . . . . . . . . . . . . .
            . . . . . . . . . . . . . . . e e . . . . . . . . . . . . . . .
            . . . . . . . . . . . . . . . e e . . . . . . . . . . . . . .
            . . . . . . . . . . . . . . 4 e e 4 . . . . . . . . . . . . . .
            . . . . . . . . . . . . e e e e e e e e . . . . . . . . . . . .
            . . . . . . . . . . . e e e e e e e e e e . . . . . . . . . . .
            . . . . . . . . . . e e e e 5 3 3 5 e e e e . . . . . . . . . .
            . . . . . . . . . 4 e e e 5 3 5 2 2 5 e e e 4 . . . . . . . . .
            . . . . . . . 7 7 e e e e 5 2 2 5 5 2 e e e e 7 7 . . . . . . .
            . . . . . . 7 e e e e e e 2 2 5 2 3 3 e e e e e e 7 . . . . . .
            . . . . 7 e e e e e e e e 5 2 2 2 5 2 e e e e e e e e 7 . . . .
            . . e e e e e e e e e e e e 3 5 5 2 e e e e e e e e e e e e . .
            . e e e e e e . . . 7 e e e e e e e e e e 7 . . . e e e e e e .
            e e e e 7 . . . . . . . e e e e e e e e . . . . . . . 7 e e e e
            e 7 . . . . . . . . . . . e e e e e e . . . . . . . . . . . 7 e
            . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
            . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
            . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
            . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
            . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
            . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
            . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
            . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
            """),
        SpriteKind.player)
    ship.start_effect(effects.warm_radial)
    hyper = True
    for slowStar in sprites.all_of_kind(SpriteKind.Star):
        slowStar.ax = slowStar.vx * 1000
        slowStar.ay = slowStar.vy * 1000
sagaSprite.on_destroyed(on_on_destroyed)
复制代码

这段代码是用 MakeCode Arcade 编写的一个具有剧情滚动展示 +星空特效 + 飞船登场的游戏开场动画系统。它融合了文字叙述、视觉动态和交互控制，营造出一种富有故事感的太空冒险氛围。

一、核心结构概览



二、剧情展示逻辑
创建剧情文本图像

sagaImage = image.create(scene.screenWidth(), 10 * storyLines.length)

for (let i = 0; i <= storyLines.length - 1; i++) {

    sagaImage.printCenter(storyLines[i], i * 10, i > 0 ? 7 : 4)

}
复制代码

创建一个高度足够容纳所有文本的图像。

每行文字垂直间隔为 10 像素，使用不同字体大小区分标题与正文。

创建剧情精灵并滚动

sagaSprite = sprites.create(sagaImage, 0)

sagaSprite.top = scene.screenHeight() - 1

sagaSprite.vy = -10
复制代码

将剧情图像作为精灵显示，并从底部开始向上滚动。

设置 AutoDestroy 标志，当滚动出屏幕自动销毁。

三、控制器交互逻辑
A键：暂停/恢复滚动

controller.A.onEvent(...): sagaSprite.vy = scroll ? 0 : -10
复制代码

切换滚动状态，允许玩家手动控制剧情节奏。

↑键：向上滚动一行

lineAdjust = (sagaSprite.bottom + 1) % 10

sagaSprite.bottom -= (lineAdjust > 0) ? lineAdjust : 10
复制代码

精确对齐每行文字，避免错位。

↓键：向下滚动一行

lineAdjust = (sagaSprite.top + 1) % 10

sagaSprite.top += 10 - lineAdjust
复制代码

同样实现逐行滚动，适合手动阅读。

四、星空背景动态生成
星星生成逻辑

if (Math.percentChance(25) || hyper) {

    star = sprites.create(img`1`, SpriteKind.Star)

    star.vx = (star.x < screenWidth/2) ? -2 : 2

    star.vy = (star.y < screenHeight/2) ? -1 : 1

}
复制代码

随机生成星星，模拟星空流动。

星星速度根据位置决定方向，制造“向中心汇聚”或“向外扩散”效果。

超空间模式（hyper）

if (hyper) {

    star.ax = star.vx * 1000

    star.ay = star.vy * 1000

}
复制代码

星星加速，模拟飞船进入超空间时的视觉冲击。

飞船位置也随机微调，增强动态感。

五、剧情结束后飞船登场
sagaSprite 被销毁时触发

sagaSprite.onDestroyed(function () {

    ship = sprites.create(..., SpriteKind.Player)

    ship.startEffect(effects.warmRadial)

    hyper = true

})
复制代码

创建飞船精灵并启动径向特效。

设置 hyper = true，触发星星加速与飞船中心定位。

六、总结亮点与设计意图
叙事驱动：通过文字滚动引导玩家进入游戏世界。

视觉沉浸：星空动态与特效营造太空氛围。

交互控制：玩家可暂停或逐行阅读剧情，提升参与感。

状态切换：剧情结束后进入“游戏主阶段”，飞船登场，节奏转换自然。

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



实验场景记录