回到首页 返回首页
回到顶部 回到顶部
返回上一页 返回上一页

【花雕动手做】Kitronik 可编程游戏开发板基于 ARCADE MakeCode之多人绘画游戏 简单

头像 驴友花雕 2025.09.19 3 0

00 (4).jpg

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

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

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

 

00 (3).jpg

作为学习、练习与尝试,这里创建一个多人绘画的小游戏。
打开网页版:https://arcade.makecode.com/,设置项目名称:多人绘画

MicroPython实验代码

 

代码
@namespace
class SpriteKind:
    Trailing = SpriteKind.create()

def on_player3_button_b_pressed():
    changeBrushSize(2)
controller.player3.on_button_event(ControllerButton.B,
    ControllerButtonEvent.PRESSED,
    on_player3_button_b_pressed)

def on_on_created(sprite):
    sprite.set_stay_in_screen(True)
    sprite.set_flag(SpriteFlag.INVISIBLE, True)
sprites.on_created(SpriteKind.Trailing, on_on_created)

def on_player1_button_a_pressed():
    startPaint(0)
controller.player1.on_button_event(ControllerButton.A,
    ControllerButtonEvent.PRESSED,
    on_player1_button_a_pressed)

def on_on_created2(sprite2):
    sprite2.set_stay_in_screen(True)
sprites.on_created(SpriteKind.player, on_on_created2)

def on_player4_button_a_pressed():
    startPaint(3)
controller.player4.on_button_event(ControllerButton.A,
    ControllerButtonEvent.PRESSED,
    on_player4_button_a_pressed)

def on_player2_button_b_pressed():
    changeBrushSize(1)
controller.player2.on_button_event(ControllerButton.B,
    ControllerButtonEvent.PRESSED,
    on_player2_button_b_pressed)

def changeBrushSize(index: number):
    global sizeIndicator
    sizeIndicator = sprites.create(img("""
            . . 1 1 1 1 1 1 1 1 1 1 1 1 .
            . 1 1 1 1 1 1 1 1 1 1 1 1 1 .
            1 1 1 1 1 1 1 1 1 1 1 1 1 1 1
            1 1 1 1 1 1 1 1 1 1 1 1 1 1 1
            1 1 1 1 1 1 1 1 1 1 1 1 1 1 1
            1 1 1 1 1 1 1 1 1 1 1 1 1 1 1
            1 1 1 1 1 1 1 1 1 1 1 1 1 1 1
            1 1 1 1 1 1 1 1 1 1 1 1 1 1 1
            1 1 1 1 1 1 1 1 1 1 1 1 1 1 1
            1 1 1 1 1 1 1 1 1 1 1 1 1 1 1
            1 1 1 1 1 1 1 1 1 1 1 1 1 1 1
            1 1 1 1 1 1 1 1 1 1 1 1 1 1 1
            . 1 1 1 1 1 1 1 1 1 1 1 1 1 .
            . . 1 1 1 1 1 1 1 1 1 1 1 . .
            . . . . . . 1 1 1 . . . . . .
            . . . . . . . 1 . . . . . . .
            """),
        SpriteKind.player)
    sizeIndicator.x = players[index].x
    sizeIndicator.bottom = players[index].top
    sizeIndicator.lifespan = 750
    brushSize[index] = max(1, (brushSize[index] + 1) % 7)
    spriteutils.fill_circle(sizeIndicator.image,
        7,
        6,
        brushSize[index],
        brushColors[index])

def on_player2_button_a_pressed():
    startPaint(1)
controller.player2.on_button_event(ControllerButton.A,
    ControllerButtonEvent.PRESSED,
    on_player2_button_a_pressed)

def on_player1_button_b_pressed():
    changeBrushSize(0)
controller.player1.on_button_event(ControllerButton.B,
    ControllerButtonEvent.PRESSED,
    on_player1_button_b_pressed)

def startPaint(index2: number):
    spriteutils.place_angle_from(trailingSprites[index2], 0, 0, players[index2])
    spriteutils.place_angle_from(followingSprites[index2], 0, 0, players[index2])

def on_player4_button_b_pressed():
    changeBrushSize(3)
controller.player4.on_button_event(ControllerButton.B,
    ControllerButtonEvent.PRESSED,
    on_player4_button_b_pressed)

def paintLine(color: number, radius: number, fromSprite: Sprite, toSprite: Sprite):
    global angle, distance
    angle = spriteutils.angle_from(toSprite, fromSprite)
    distance = spriteutils.distance_between(fromSprite, toSprite)
    while True:
        spriteutils.place_angle_from(fromSprite, angle, distance, toSprite)
        spriteutils.fill_circle(scene.background_image(),
            Math.round(fromSprite.x),
            Math.round(fromSprite.y),
            radius,
            color)
        distance += -1
        if distance <= 0:
            break
    spriteutils.place_angle_from(fromSprite, 0, 0, toSprite)

def on_player3_button_a_pressed():
    startPaint(2)
controller.player3.on_button_event(ControllerButton.A,
    ControllerButtonEvent.PRESSED,
    on_player3_button_a_pressed)

def on_menu_pressed():
    scene.set_background_image(img("""
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        ................................................................................................................................................................
        """))
controller.menu.on_event(ControllerButtonEvent.PRESSED, on_menu_pressed)

targetAngle = 0
distance = 0
angle = 0
followingSprites: List[Sprite] = []
trailingSprites: List[Sprite] = []
players: List[Sprite] = []
brushColors: List[number] = []
brushSize: List[number] = []
sizeIndicator: Sprite = None
scene.set_background_image(img("""
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    ................................................................................................................................................................
    """))
p1 = sprites.create(img("""
        . . . f . . .
        . . f 2 f . .
        . f f 2 f f .
        f 2 2 2 2 2 f
        . f f 2 f f .
        . . f 2 f . .
        . . . f . . .
        """),
    SpriteKind.player)
p1.set_position(30, 30)
p2 = sprites.create(img("""
        . . . f . . .
        . . f 8 f . .
        . f f 8 f f .
        f 8 8 8 8 8 f
        . f f 8 f f .
        . . f 8 f . .
        . . . f . . .
        """),
    SpriteKind.player)
p2.set_position(130, 30)
p3 = sprites.create(img("""
        . . . f . . .
        . . f 4 f . .
        . f f 4 f f .
        f 4 4 4 4 4 f
        . f f 4 f f .
        . . f 4 f . .
        . . . f . . .
        """),
    SpriteKind.player)
p3.set_position(30, 90)
p4 = sprites.create(img("""
        . . . f . . .
        . . f 6 f . .
        . f f 6 f f .
        f 6 6 6 6 6 f
        . f f 6 f f .
        . . f 6 f . .
        . . . f . . .
        """),
    SpriteKind.player)
p4.set_position(130, 90)
controller.player1.move_sprite(p1, 50, 50)
controller.player2.move_sprite(p2, 50, 50)
controller.player3.move_sprite(p3, 50, 50)
controller.player4.move_sprite(p4, 50, 50)
brushColors = [2, 8, 4, 6]
brushSize = [3, 3, 3, 3]
players = [p1, p2, p3, p4]
trailingSprites = [sprites.create(img("""
            . . . f . . .
            . . f 2 f . .
            . f f 2 f f .
            f 2 2 2 2 2 f
            . f f 2 f f .
            . . f 2 f . .
            . . . f . . .
            """),
        SpriteKind.Trailing),
    sprites.create(img("""
            . . . f . . .
            . . f 2 f . .
            . f f 2 f f .
            f 2 2 2 2 2 f
            . f f 2 f f .
            . . f 2 f . .
            . . . f . . .
            """),
        SpriteKind.Trailing),
    sprites.create(img("""
            . . . f . . .
            . . f 2 f . .
            . f f 2 f f .
            f 2 2 2 2 2 f
            . f f 2 f f .
            . . f 2 f . .
            . . . f . . .
            """),
        SpriteKind.Trailing),
    sprites.create(img("""
            . . . f . . .
            . . f 2 f . .
            . f f 2 f f .
            f 2 2 2 2 2 f
            . f f 2 f f .
            . . f 2 f . .
            . . . f . . .
            """),
        SpriteKind.Trailing)]
followingSprites = [sprites.create(img("""
            . . . f . . .
            . . f 2 f . .
            . f f 2 f f .
            f 2 2 2 2 2 f
            . f f 2 f f .
            . . f 2 f . .
            . . . f . . .
            """),
        SpriteKind.Trailing),
    sprites.create(img("""
            . . . f . . .
            . . f 8 f . .
            . f f 8 f f .
            f 8 8 8 8 8 f
            . f f 8 f f .
            . . f 8 f . .
            . . . f . . .
            """),
        SpriteKind.Trailing),
    sprites.create(img("""
            . . . f . . .
            . . f 4 f . .
            . f f 4 f f .
            f 4 4 4 4 4 f
            . f f 4 f f .
            . . f 4 f . .
            . . . f . . .
            """),
        SpriteKind.Trailing),
    sprites.create(img("""
            . . . f . . .
            . . f 6 f . .
            . f f 6 f f .
            f 6 6 6 6 6 f
            . f f 6 f f .
            . . f 6 f . .
            . . . f . . .
            """),
        SpriteKind.Trailing)]
turnRate = 0.2

def on_on_update():
    global angle, targetAngle
    if controller.player1.is_pressed(ControllerButton.A):
        paintLine(2, brushSize[0], trailingSprites[0], followingSprites[0])
    if controller.player2.is_pressed(ControllerButton.A):
        paintLine(8, brushSize[1], trailingSprites[1], followingSprites[1])
    if controller.player3.is_pressed(ControllerButton.A):
        paintLine(4, brushSize[2], trailingSprites[2], followingSprites[2])
    if controller.player4.is_pressed(ControllerButton.A):
        paintLine(6, brushSize[3], trailingSprites[3], followingSprites[3])
    for index3 in range(4):
        angle = Math.atan2(followingSprites[index3].vy, followingSprites[index3].vx)
        if angle < 0:
            angle += 2 * spriteutils.consts(spriteutils.Consts.PI)
        targetAngle = spriteutils.angle_from(followingSprites[index3], players[index3])
        if targetAngle < 0:
            targetAngle += 2 * spriteutils.consts(spriteutils.Consts.PI)
        if abs(targetAngle - angle) > spriteutils.consts(spriteutils.Consts.PI):
            if angle < targetAngle:
                angle += 0 - turnRate
            else:
                angle += turnRate
        elif angle < targetAngle:
            angle += turnRate
        else:
            angle += 0 - turnRate
        if angle < 0:
            angle += 2 * spriteutils.consts(spriteutils.Consts.PI)
        spriteutils.set_velocity_at_angle(followingSprites[index3],
            angle,
            6 * min(10,
                spriteutils.distance_between(followingSprites[index3], players[index3])))
game.on_update(on_on_update)

MakeCode 多人绘画游戏代码解读
这是一个支持最多4名玩家同时游玩的绘画游戏,玩家可以控制角色移动并在屏幕上绘制彩色线条。

游戏概述
这是一个多人协作绘画游戏,4名玩家分别控制不同颜色的画笔,在共享画布上自由创作。每个玩家可以调整画笔大小并实时绘制。

代码结构分析

1. 自定义精灵类型
python
class SpriteKind:
   Trailing = SpriteKind.create()
创建了"Trailing"精灵类型,用于表示画笔的轨迹点

2. 控制器事件处理
游戏为每个玩家设置了按钮事件监听:
A按钮:开始绘画(按住持续绘制)
B按钮:切换画笔大小
菜单按钮:清空画布

3. 核心游戏机制
画笔系统
python
def changeBrushSize(index: number):
每个玩家可以独立调整画笔大小(1-6像素)
按下B按钮时显示大小指示器
使用spriteutils.fill_circle创建圆形画笔

绘画系统
python
def paintLine(color: number, radius: number, fromSprite: Sprite, toSprite: Sprite):
这是核心的绘画函数,在两个精灵之间绘制线条
使用角度和距离计算来填充圆形点
在场景背景图像上直接绘制
跟随系统
python
def startPaint(index2: number):
初始化绘画的起始位置
使用spriteutils.place_angle_from将轨迹精灵放置在玩家精灵位置

4. 玩家和精灵设置
玩家角色
创建了4个不同颜色的玩家精灵:
玩家1:红色(颜色值2)
玩家2:橙色(颜色值8)
玩家3:紫色(颜色值4)
玩家4:蓝色(颜色值6)
每个玩家都有对应的:
主控精灵(players)
轨迹精灵(trailingSprites)
跟随精灵(followingSprites)

移动控制
python
controller.player1.move_sprite(p1, 50, 50)
每个玩家可以独立控制自己的角色移动
移动速度为50

5. 游戏主循环
python
def on_on_update():
检测玩家是否按住A按钮进行绘画
计算跟随精灵的运动轨迹
使用角度和速度控制使跟随精灵追踪玩家

技术实现细节
绘画算法
python
angle = spriteutils.angle_from(toSprite, fromSprite)
distance = spriteutils.distance_between(fromSprite, toSprite)
while True:
   spriteutils.place_angle_from(fromSprite, angle, distance, toSprite)
   spriteutils.fill_circle(scene.background_image(), ...)
   distance += -1
通过计算两点间的角度和距离
从终点向起点逐步填充圆形点
形成连续的线条效果

平滑跟随系统
python
angle = Math.atan2(followingSprites[index3].vy, followingSprites[index3].vx)
targetAngle = spriteutils.angle_from(followingSprites[index3], players[index3])
使用三角函数计算当前角度和目标角度
应用转向速率(turnRate)实现平滑转向
根据距离调整移动速度,离玩家越远移动越快

画布管理
python
def on_menu_pressed():
   scene.set_background_image(img("""..."""))
菜单按钮可以清空画布,重新开始
使用大片的点图像创建空白背景

游戏玩法
移动:使用方向键控制角色移动
绘画:按住A按钮在移动时绘制线条
调整画笔:按B按钮循环切换画笔大小(1-6像素)
清空画布:按菜单按钮重置画布

技术亮点
实时多人协作:4名玩家可以同时在同一个画布上创作
平滑的绘画效果:使用圆形填充算法产生连续的线条
物理跟随系统:跟随精灵会平滑地追踪玩家移动
自定义画笔系统:每个玩家可以独立调整画笔大小和颜色
画布管理:支持清空画布重新开始

这个游戏展示了MakeCode的高级功能,包括复杂的精灵运动控制、实时绘画算法、多人游戏协调和用户界面反馈,是一个很好的多人协作创意工具示例。

 

 

图形编程参考实验程序

 

147.jpg


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

 

00214.gif


实验场景记录

 

148 (1).jpg
148 (2).jpg

评论

user-avatar
icon 他的勋章
    展开更多