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

驴友花雕 发表于 2025-9-17 15:50:01

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

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

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

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

驴友花雕 发表于 2025-9-17 15:52:16

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

作为学习、练习与尝试，这里创建一个埃拉托色尼筛子的小游戏。
打开网页版：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.image.getPixel(0, 0) > 0) {
               spriteList.startEffect(effects.disintegrate, 200)
               spriteList.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.image.getPixel(0, 0) > 0) {
               if (boxX + 16 >= scene.screenWidth()) {
                     boxX = 4
                     boxY += 14
               }
               spriteList.left = boxX
               spriteList.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
}
})

驴友花雕 发表于 2025-9-17 16:01:24

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

这段代码是一个非常炫酷的可视化演示，用 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.image.getPixel(0, 0) > 0) {

spriteList.startEffect(effects.disintegrate, 200)

spriteList.image.fill(0)

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

5、 StartCollect / DoCollect → 收集素数
javascript
if (spriteList.image.getPixel(0, 0) > 0) {

spriteList.left = boxX

spriteList.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 粒子特效
剩下的素数重新排列
最后跳跃弹起，收尾炫酷
音效贯穿整个过程，节奏感强。

驴友花雕 发表于 2025-9-17 16:03:53

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

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

实验场景记录

驴友花雕 发表于 2025-9-17 16:06:42

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

页: [1]

DF创客社区 - 分享创造的喜悦's Archiver

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

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

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

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

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