【花雕动手做】基于Kitronik可编程开发板之塞维游戏

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

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

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

作为学习、练习与尝试，这里创建一个埃拉托色尼筛子的小游戏。
打开网页版：https://arcade.makecode.com/，设置项目名称：埃拉托色尼筛子

JavaScript 实验代码

let naturals = 0
let idleCount = 0
let j = 0
let boxY = 0
let boxX = 0
let boxSprite: Sprite = null
let spriteList: Sprite[] = null
enum SieveSteps {
    StartList,
    PrintList,
    EndList,
    Scan,
    StartCollect,
    DoCollect,
    EndCollect,
    DropBounce,
    Idle
}
let factor = 2
let idleReturn = SieveSteps.Idle
let step = SieveSteps.StartList
game.splash("Sieve of Eratosthenes")
game.onUpdateInterval(10, function () {
    switch (step) {
        case SieveSteps.StartList:
            boxY = 5
            boxX = 4
            naturals = 2
            step = SieveSteps.PrintList
            break

        case SieveSteps.PrintList:
            if (boxY + 14 < scene.screenHeight()) {
                if (boxX + 16 >= scene.screenWidth()) {
                    boxX = 4
                    boxY += 14
                } else {
                    boxSprite = sprites.create(img`
                        b b b b b b b b b b b b b b b b
                        b 4 4 4 4 4 4 4 4 4 4 4 4 4 4 b
                        b 4 4 4 4 4 4 4 4 4 4 4 4 4 4 b
                        b 4 4 4 4 4 4 4 4 4 4 4 4 4 4 b
                        b 4 4 4 4 4 4 4 4 4 4 4 4 4 4 b
                        b 4 4 4 4 4 4 4 4 4 4 4 4 4 4 b
                        b 4 4 4 4 4 4 4 4 4 4 4 4 4 4 b
                        b 4 4 4 4 4 4 4 4 4 4 4 4 4 4 b
                        b 4 4 4 4 4 4 4 4 4 4 4 4 4 4 b
                        b 4 4 4 4 4 4 4 4 4 4 4 4 4 4 b
                        b 4 4 4 4 4 4 4 4 4 4 4 4 4 4 b
                        b b b b b b b b b b b b b b b b
                    `, SpriteKind.Player)
                    boxSprite.setBounceOnWall(true)
                    boxSprite.image.printCenter("" + naturals, 2)
                    boxSprite.left = boxX
                    boxSprite.top = boxY
                    boxX += 17
                    naturals += 1
                    music.playTone(Note.C, BeatFraction.Sixteenth)
                    idleCount = 5
                    idleReturn = SieveSteps.PrintList
                    step = SieveSteps.Idle
                }
            } else {
                step = SieveSteps.EndList
            }
            break

        case SieveSteps.EndList:
            spriteList = sprites.allOfKind(SpriteKind.Player)
            game.showLongText("Scan for primes in the sequence of numbers. The score will show your current factor.", DialogLayout.Center)
            step = SieveSteps.Scan
            break

        case SieveSteps.Scan:
            j += factor
            if (j < spriteList.length) {
                if (spriteList[j].image.getPixel(0, 0) > 0) {
                    spriteList[j].startEffect(effects.disintegrate, 200)
                    spriteList[j].image.fill(0)
                    music.playTone(Note.C5, BeatFraction.Sixteenth)
                    idleCount = 10
                    idleReturn = SieveSteps.Scan
                    step = SieveSteps.Idle
                }
            } else {
                if (factor > 2) {
                    factor += 2
                } else {
                    factor += 1
                }
                j = factor - 2
            }
            if (factor > spriteList.length + 2) {
                step = SieveSteps.StartCollect
            } else {
                info.setScore(factor)
            }
            break

        case SieveSteps.StartCollect:
            boxY = 5
            boxX = 4
            j = 0
            step = SieveSteps.DoCollect
            break

        case SieveSteps.DoCollect:
            if (j < spriteList.length) {
                if (spriteList[j].image.getPixel(0, 0) > 0) {
                    if (boxX + 16 >= scene.screenWidth()) {
                        boxX = 4
                        boxY += 14
                    }
                    spriteList[j].left = boxX
                    spriteList[j].top = boxY
                    boxX += 17
                    music.playTone(Note.FSharp4, BeatFraction.Sixteenth)
                    idleCount = 10
                    idleReturn = SieveSteps.DoCollect
                    step = SieveSteps.Idle
                }
                j += 1
            } else {
                idleCount = 2
                idleReturn = SieveSteps.EndCollect
                step = SieveSteps.Idle
            }
            break

        case SieveSteps.EndCollect:
            step = SieveSteps.Idle
            music.jumpDown.play()
            idleCount = 100
            idleReturn = SieveSteps.DropBounce
            step = SieveSteps.Idle
            break

        case SieveSteps.DropBounce:
            music.magicWand.play()
            for (let box of spriteList) {
                box.ay = randint(100, 400)
            }
            idleCount = -1
            step = SieveSteps.Idle
            break

        case SieveSteps.Idle:
            if (idleCount > 0) {
                idleCount += -1
            } else if (idleCount == 0) {
                step = idleReturn
            }
            break
    }
})
复制代码

这段代码是一个非常炫酷的可视化演示，用 MakeCode Arcade 的 JavaScript 实现了埃拉托色尼筛法，并通过精灵动画、音效和状态机来展示筛选素数的过程。

总体结构概览



变量说明
javascript

let naturals = 0        // 当前生成的自然数

let factor = 2          // 当前筛选的因子（从2开始）

let spriteList: Sprite[] = null  // 所有数字精灵列表

let step = SieveSteps.StartList // 当前状态
复制代码

状态机流程详解
1、StartList → 初始化生成数字
javascript

boxY = 5

boxX = 4

naturals = 2

step = SieveSteps.PrintList
复制代码

设置起始坐标，从数字 2 开始准备生成精灵

2、PrintList → 创建数字精灵
javascript

boxSprite = sprites.create(...)

boxSprite.image.printCenter("" + naturals, 2)
复制代码

每个数字是一个精灵，显示在屏幕上
自动换行排列
播放音效，节奏感十足
每生成一个数字后进入 Idle，延时继续生成

3、EndList → 准备筛选
javascript

spriteList = sprites.allOfKind(SpriteKind.Player)

step = SieveSteps.Scan
复制代码

获取所有数字精灵
显示提示信息
进入筛选阶段

4、Scan → 埃拉托色尼筛选核心逻辑
javascript

j += factor

if (spriteList[j].image.getPixel(0, 0) > 0) {

    spriteList[j].startEffect(effects.disintegrate, 200)

    spriteList[j].image.fill(0)

}
复制代码

从当前因子的倍数开始筛除
如果该精灵还没被筛掉（像素不为0），就执行销毁动画
每次筛完一个数后进入 Idle，节奏控制
筛完当前因子后，更新 factor，继续下一轮

5、 StartCollect / DoCollect → 收集素数
javascript

if (spriteList[j].image.getPixel(0, 0) > 0) {

    spriteList[j].left = boxX

    spriteList[j].top = boxY

}
复制代码

将剩下的素数重新排列在屏幕上
每移动一个精灵就播放音效
进入 Idle 控制节奏

6、 EndCollect → 收尾准备
javascript

music.jumpDown.play()

idleReturn = SieveSteps.DropBounce
复制代码

播放音效
准备进入炫酷掉落阶段

7、 DropBounce → 炫酷收尾
javascript

for (let box of spriteList) {

    box.ay = randint(100, 400)

}
复制代码

给所有剩下的素数加上重力
让它们像跳跳糖一样弹起来
视觉效果拉满

8、 Idle → 节奏控制器
javascript

if (idleCount > 0) {

    idleCount -= 1

} else if (idleCount == 0) {

    step = idleReturn

}
复制代码

控制每个阶段之间的节奏
让动画和逻辑有呼吸感，不会一口气跑完

可视化亮点
每个数字是一个精灵，带有编号
筛除时播放 disintegrate 粒子特效
剩下的素数重新排列
最后跳跃弹起，收尾炫酷
音效贯穿整个过程，节奏感强。

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



实验场景记录