Scratch少儿编程实战——放烟花游戏设计与实现

本文还有配套的精品资源，点击获取

简介：本课程以Scratch图形化编程工具为基础，通过“放烟花游戏”项目引导儿童在趣味实践中掌握编程核心概念。课程涵盖Scratch积木式编程界面操作、Photoshop素材设计、克隆体机制、消息通信及角色运动控制等关键技术，帮助孩子理解坐标系统、随机数生成、条件判断与程序协同工作原理。项目融合编程逻辑与艺术创作，提升少儿计算思维与综合创新能力，是适合初学者的完整编程学习实践。

1. Scratch编程环境与积木式操作入门

Scratch界面构成与核心组件功能

Scratch 3.0采用模块化布局，主要由 舞台区 （右上方，实时预览角色行为）、 角色列表 （左下方，管理所有角色及其造型）、 代码区 （中央，拖放积木构建脚本）和 积木分类面板 （左侧，八大类别按颜色区分）组成。每个组件协同工作，形成“可视化编程闭环”。例如，点击绿旗触发 当绿旗被点击 事件积木，驱动角色执行移动、说话等动作。

八大积木类别解析与编程逻辑建立

• 运动类 ：控制坐标、方向，实现位移；
• 外观类 ：切换造型、显示文字；
• 声音类 ：播放音效或背景音乐；
• 事件类 ：作为程序起点（如绿旗、按键触发）；
• 控制类 ：支持循环、条件判断；
• 侦测类 ：获取鼠标、距离等状态；
• 运算类 ：数学与逻辑计算；
• 变量/列表 ：存储数据并跨角色共享。

当绿旗被点击
将 x 坐标设为 -150
说 “新年快乐！” 2 秒
重复执行 10 次
  移动 10 步
end

代码说明：通过事件→外观→控制→运动积木串联，形成“触发→说话→移动”的指令流，体现程序顺序执行特性。

拖拽-拼接式编程的操作流程与认知建构

Scratch的核心在于“ 拖拽即编码 ”，学习者无需记忆语法，只需理解积木语义并将之拼接成逻辑链。以小猫动画为例：
1. 从“事件”中拖出 当绿旗被点击 作为起始块；
2. 接入 说...2秒 （外观类），设置台词；
3. 再接 移动10步 放入 重复执行10次 循环中。
运行时，系统按自上而下顺序解释执行，帮助初学者建立“事件驱动 + 指令序列 = 行为输出”的编程思维模型，为后续克隆、广播等复杂机制打下基础。

2. Photoshop在游戏素材设计中的应用

在当代青少年编程教育中，视觉表现力已成为提升项目吸引力与学习动机的关键因素。Scratch等图形化编程平台虽降低了代码门槛，但其最终呈现效果高度依赖于外部导入的美术资源质量。Photoshop作为行业标准级图像处理软件，在游戏素材设计领域具有不可替代的地位——它不仅提供精细的像素控制能力，更支持图层管理、非破坏性编辑和高效批量输出，是构建高质量、风格统一的游戏视觉资产的核心工具。尤其在“放烟花”这类以动态视觉为核心的项目中，从礼炮造型到爆炸光效，每一个元素的设计都需要借助Photoshop完成前期创作与优化。

本章将深入剖析如何利用Photoshop为Scratch项目定制专属美术资源，涵盖基础操作、设计原则、特效技法及后期处理全流程。重点聚焦于儿童向节日主题下视觉语言的构建逻辑，结合具体案例演示如烟花扩散、光晕叠加、多帧动画草图绘制等关键技术，并系统讲解素材导出前的尺寸规范、透明背景设置与文件压缩策略。通过本章内容，开发者不仅能掌握实用的设计技能，更能理解美术与编程之间的协同机制：即每一幅图像不仅是静态画面，更是未来程序中可被克隆、移动、切换造型的“活”的对象。

2.1 图像处理软件基础操作

Photoshop的强大之处在于其模块化的界面结构与灵活的图层系统，这使得复杂图像可以被分解为多个独立且可编辑的部分进行管理。对于初涉数字美术的游戏开发者而言，理解工作环境的基本构成与核心功能模块，是高效创作的前提条件。

2.1.1 Photoshop工作界面与图层概念

启动Photoshop后，默认进入的工作区由多个面板组成：左侧为工具栏（Tools Panel），右侧为属性、图层、颜色等控制面板（Panels），中央为主画布区域（Canvas Area）。其中，“图层面板”（Layers Panel）是最关键的功能模块之一。图层类似于透明胶片的堆叠，每一层可独立绘制内容而不影响其他层，最终合成时按上下顺序叠加显示。

graph TD
    A[背景层] --> B[建筑剪影层]
    B --> C[云层动画帧1]
    C --> D[烟花爆炸帧1]
    D --> E[文字标题层]

如上流程图所示，一个典型的节日场景由多个图层构成，便于分别编辑与动画化处理。例如，若需修改烟花颜色，只需选中对应图层调整色相，而不会波及背景或其他元素。

图层类型主要包括普通图层、调整图层、形状图层和智能对象。 普通图层 用于存放像素信息； 调整图层 （如亮度/对比度、色阶）则实现非破坏性色彩校正； 形状图层 保存矢量路径，支持无限缩放； 智能对象 允许嵌入外部文件或保留原始数据，避免因多次变换导致画质损失。

实践建议 ：在制作游戏素材时，应始终启用“命名图层”习惯。例如将不同烟花形态命名为“firework_burst_01”、“firework_spray_02”，以便后续在Scratch中快速识别并匹配造型。

2.1.2 画布设置、选区工具与基本绘图功能

创建新文档时，合理的画布设置直接影响最终输出效果。点击“文件 > 新建”（File > New）可配置以下参数：

参数项	推荐值	说明
宽度 × 高度	480×360 px	匹配Scratch舞台默认分辨率
分辨率	72 PPI	屏幕显示标准，过高会增加文件体积
颜色模式	RGB	适用于显示器输出
背景内容	透明	支持PNG导出带Alpha通道

完成设置后，即可开始使用基础绘图工具。常用工具有：

• 矩形选框工具（M） ：创建规则选区，常用于裁剪角色区域。
• 套索工具（L） ：自由选取不规则形状，适合提取手绘图案。
• 画笔工具（B） ：核心绘图工具，可通过调整硬度、大小、不透明度模拟各种笔触。
• 橡皮擦工具（E） ：擦除像素，配合低硬度边缘可实现羽化过渡。

下面是一段使用画笔工具绘制简单礼炮头部的操作示例：

// 步骤1：新建图层“cannon_head”
Layer.new("cannon_head");

// 步骤2：选择画笔工具，设置圆头硬边笔刷，直径20px
Brush.select("Hard Round 20px");
Brush.size(20);
Brush.hardness(100%);

// 步骤3：设置前景色为金色 (#FFD700)，绘制圆形头部
Color.setForeground("#FFD700");
Brush.stroke(circle_at(240, 100), radius=10);

// 步骤4：添加描边效果增强立体感
Layer.applyStroke(color="#B8860B", size=2, position="Outside");

逻辑分析 ：
- 第一行代码表示新建一个专用图层，确保不影响其他部分；
- 使用硬边画笔是为了获得清晰边界，适合机械类造型；
- 金色赋予金属质感，符合“发射器”的科技意象；
- 外部描边通过深棕色强化轮廓，提升在深色背景下的可见性。

该过程体现了“分层+样式”的设计理念，也为后续动画扩展预留了空间——例如可在另一图层添加火焰喷射效果。

2.1.3 颜色模式与分辨率设置对输出质量的影响

颜色模式决定了图像的颜色表达方式，直接影响视觉真实感与兼容性。Photoshop中最常用的两种模式是RGB与CMYK：

• RGB （红绿蓝）：基于光的加色混合原理，适用于屏幕显示设备，色彩范围广，是游戏素材首选。
• CMYK （青品黄黑）：用于印刷品，减色模式，部分亮色无法再现，不适合数字项目。

若误用CMYK模式导出PNG图像，可能导致颜色偏暗、饱和度下降等问题。因此，在新建文档时务必确认颜色模式为RGB。

分辨率方面，72 PPI（Pixels Per Inch）是Web和交互媒体的标准设定。虽然高分辨率（如300 PPI）能提升打印质量，但在Scratch中并无实际意义，反而会导致图像过大、加载缓慢甚至超出角色尺寸限制。

此外， 位深度 也需关注。8位/通道是最常见设置，支持约1670万种颜色，足以满足大多数需求；16位或32位主要用于专业摄影后期，普通游戏素材无需启用。

优化提示 ：可使用“图像 > 图像大小”（Image > Image Size）命令检查并重采样。勾选“约束比例”防止变形，选择“两次立方（较平滑）”算法保证缩放质量。

综上所述，正确的初始设置是高效工作流的基础。只有在合适的画布环境中，才能充分发挥Photoshop的创作潜力，产出既美观又适配目标平台的优质素材。

2.2 游戏美术资源的设计原则

游戏美术不仅仅是“好看”的图像，更是服务于玩法体验的信息载体。特别是在面向青少年用户的Scratch项目中，美术设计必须兼顾认知发展水平、审美偏好与技术可行性。

2.2.1 像素风格与儿童审美特征匹配

研究表明，儿童对图形的认知倾向于简洁、夸张与高对比度的表现形式。因此，在设计如“放烟花”这类节日主题项目时，采用 像素艺术风格 （Pixel Art）尤为合适。这种风格通过有限的像素点阵构建形象，强调轮廓清晰、色彩鲜明、细节抽象化，既能激发想象力，又便于在低分辨率舞台上清晰显示。

例如，设计一个“魔法棒”发射器时，不应追求写实纹理，而应突出其标志性特征：尖端发光、手柄有星形装饰、整体呈斜向上姿态。可通过以下步骤实现：

1. 使用放大视图（Zoom to 800%）逐像素绘制；
2. 限定调色板不超过8种颜色，增强视觉统一性；
3. 利用“对称画笔”插件辅助绘制左右平衡结构；
4. 添加简单的动态暗示，如尾迹光点。

| 设计要素 | 儿童偏好表现 | 示例应用 |
|---------|--------------|----------|
| 形状简化 | 圆润无尖角 | 礼炮口部做圆角处理 |
| 色彩对比 | 高饱和原色 | 红黄蓝为主色调 |
| 动作暗示 | 明确方向性 | 火花朝上飞散箭头感 |
| 拟人化 | 赋予表情或动作 | 给礼炮加上眨眼动画帧 |

此类设计不仅符合发展目标心理学理论中的“符号表征阶段”，也提升了用户的情感投入度。

2.2.2 色彩搭配心理学在节日主题中的体现

色彩是传递情绪最直接的媒介。在中国传统节日语境下，红色象征喜庆，金色代表富贵，紫色寓意神秘，绿色则带来生机。合理运用这些色彩心理效应，可显著增强项目的氛围感染力。

以“春节烟花秀”为例，主色调宜选用红金渐变背景，辅以蓝绿点缀形成冷暖对比。具体配色方案如下：

/* 节日主题调色板 */
--theme-red: #D42C2C;     /* 主体火焰 */
--theme-gold: #FFD700;    /* 光晕高光 */
--theme-darkblue: #0A1E3F; /* 夜空底色 */
--theme-silver: #C0C0C0;  /* 星点闪烁 */
--theme-green: #3CB371;   /* 辅助爆炸色 */

在Photoshop中，可将上述HEX值保存为“色板”（Swatches），确保全项目配色一致。同时，利用“渐变工具”创建从深蓝到紫红的夜空背景，模拟真实天幕变化。

操作步骤 ：
1. 新建图层命名为“sky_gradient”；
2. 选择渐变工具（G），打开渐变编辑器；
3. 设置起点颜色为 #0A1E3F ，终点为 #4B0082 ；
4. 从画布顶部向下拖动，生成垂直线性渐变；
5. 降低不透明度至80%，叠加星点图层。

此方法实现了既真实又富有幻想感的夜空基底，为后续烟花特效提供了理想衬托。

2.2.3 素材尺寸规范与透明背景（PNG格式）导出技巧

为确保素材顺利导入Scratch并正确显示，必须遵循严格的尺寸与格式规范。Scratch角色推荐尺寸一般不超过240×180像素，过大会导致舞台拥挤或性能下降。

导出流程如下：

1. 完成绘制后，隐藏不需要导出的图层（如参考线）；
2. 选择“文件 > 导出 > 导出为”（Export As）；
3. 格式选择 PNG ，启用“透明度”选项；
4. 设置缩放比例为100%，避免模糊；
5. 勾选“最大化兼容性”确保跨平台可用。

flowchart LR
    A[完成绘图] --> B{是否含透明区域?}
    B -- 是 --> C[选择PNG格式]
    B -- 否 --> D[可选JPG]
    C --> E[启用Alpha通道]
    E --> F[导出]

参数说明 ：
- PNG优势 ：支持无损压缩与透明通道，适合带边缘羽化的光效；
- Alpha通道 ：记录每个像素的透明度值（0~255），实现软边融合；
- 文件命名 ：建议采用小写字母、下划线分隔，如 firework_star_yellow.png ，避免空格或特殊字符引发导入错误。

通过规范化输出流程，可大幅提升资源复用效率，减少调试阶段的图像适配问题。

2.3 烟花元素的视觉表现技法

烟花作为本项目的视觉焦点，其表现质量直接决定整体观赏性。Photoshop提供了多种手段来模拟真实的爆炸光效，结合图层样式与手工绘制，可创造出极具冲击力的瞬间绽放效果。

2.3.1 使用画笔工具模拟光晕扩散效果

要表现烟花升空后的光晕扩散，关键是模仿光线在空气中散射的现象。可通过自定义柔边画笔实现：

1. 选择画笔工具（B）；
2. 在画笔预设中选择“柔边圆”（Soft Round）；
3. 调整大小至100px，不透明度设为30%；
4. 选择浅黄色（#FFFACD）作为前景色；
5. 在新图层上单击一次，形成柔和光斑。

重复上述操作，使用更大尺寸（200px）、更低不透明度（15%）再点一次，形成外层弥散光圈。两层叠加后产生自然的辉光层次。

// 模拟多层光晕叠加逻辑
for (let i = 0; i < 3; i++) {
    let size = 80 + i * 60;
    let opacity = 40 - i * 15;
    createHaloAt(centerX, centerY, size, opacity, "#FFFACD");
}

执行逻辑说明 ：
- 循环三次生成三个同心光晕；
- 尺寸递增模拟光线向外传播；
- 不透明度递减符合物理衰减规律；
- 所有光晕位于独立图层，便于单独调节。

此技法可用于创建菊花型、喷泉型等多种烟花原型的基础光核。

2.3.2 图层样式（外发光、渐变叠加）增强立体感

为进一步提升视觉张力，可为光斑图层添加图层样式。右键图层 → “混合选项” → 启用“外发光”（Outer Glow）：

• 结构：不透明度75%，杂色3%，颜色为#FFD700；
• 扩展：20%，大小：30px；
• 质量：抗锯齿开启。

同时添加“渐变叠加”（Gradient Overlay）：

• 渐变：从白色到透明径向分布；
• 不透明度：60%；
• 缩放：80%。

| 样式类型 | 参数设置 | 视觉作用 |
|----------|----------|----------|
| 外发光 | 金色边缘，中等扩散 | 模拟高温炽热感 |
| 渐变叠加 | 中心亮四周暗 | 强化光源聚焦效果 |
| 内阴影 | 距离5px，阻塞20% | 增加轻微凹陷立体感 |

这些非破坏性样式可随时修改，极大提高了迭代效率。相比直接绘制，样式化处理更具灵活性与可控性。

2.3.3 多帧草图绘制爆炸形态演变过程

真正的烟花是动态过程，包含上升、爆裂、扩散、消散四个阶段。为在Scratch中实现动画播放，需预先在Photoshop中绘制多个关键帧。

建议在一个PSD文件中创建多个图层，分别命名为：

• burst_frame_01 : 初始小光点
• burst_frame_02 : 初步展开八芒星
• burst_frame_03 : 完全绽放放射状
• burst_frame_04 : 边缘碎裂下落

每帧之间保持位置对齐，可通过“对齐工具”或“参考线”辅助。完成后，使用“文件 > 脚本 > 将图层导出到文件”功能，批量生成独立PNG图像。

提示 ：启用“仅限可见图层”选项，可手动切换显示单一帧进行导出。

这一流程实现了从静态设计到动态序列的转化，为后续在Scratch中实现“造型切换”动画打下坚实基础。

2.4 素材导入Scratch前的优化处理

即使完成了精美设计，若未经过适当优化，仍可能在Scratch中出现显示异常、加载缓慢或内存占用过高等问题。因此，导入前的最后处理至关重要。

2.4.1 切割大图生成独立角色图像

当一幅PSD包含多个元素（如一组烟花组合）时，需将其拆分为独立角色。可使用“切片工具”（Slice Tool）划定区域：

1. 选择切片工具，按住Shift绘制矩形切片；
2. 每个切片对应一个导出单元；
3. 执行“文件 > 导出 > 存储为Web所用格式”；
4. 输出时自动按切片生成多个文件。

// 切片命名规范建议
sliceNamePattern = "character_type_variant.png";
// 示例：firework_burst_red_01.png

此举避免了手动裁剪误差，提高批量处理效率。

2.4.2 调整透明度与边缘羽化提升融合度

某些硬边图像在深色背景下会产生“剪纸感”。解决方法是在边缘添加轻微羽化：

1. 使用魔棒工具选中背景；
2. 反选（Select > Inverse）；
3. 菜单“选择 > 修改 > 收缩”1像素；
4. 回到原图层，应用“羽化”1px；
5. 填充半透明像素或保留为空。

Action.applyFeather(selection, radius=1px);
Layer.fill(alpha=128); // 半透明填充边缘

参数说明 ：
- 羽化半径不宜超过2px，否则导致模糊；
- 透明度梯度应自然过渡，避免阶跃变化。

处理后的图像能更好地融入舞台背景，实现“无缝嵌入”效果。

2.4.3 文件大小压缩与兼容性测试

最终导出的PNG文件应尽可能轻量化。可通过以下方式优化：

• 使用TinyPNG等在线工具进一步压缩；
• 移除元数据（EXIF、XMP）；
• 确保无隐藏图层或冗余通道。

导入Scratch后进行三项测试：

1. 显示测试 ：确认透明区域正常，无白边；
2. 旋转测试 ：观察90°/180°翻转是否失真；
3. 缩放测试 ：尝试放大至150%，检查像素断裂情况。

建立检查清单如下：

checkList
    title 导出前验证清单
    tick 是否启用透明度
    tick 文件名无空格
    tick 尺寸≤240px
    cross 是否包含音频轨道 ❌（图像不应有声音）
    tick 已压缩体积

唯有经过完整验证的素材，才能真正成为稳定可靠的游戏组件。

3. 背景与角色美术创作：节日氛围图像制作

在交互式数字项目中，尤其是面向青少年用户的创意编程实践中，视觉表现力是决定用户体验质量的关键因素之一。以“放烟花”类Scratch项目为例，其核心魅力不仅来源于程序逻辑的精巧设计，更在于能否通过富有节日气息的美术资源激发用户的情感共鸣。本章将围绕如何构建一个具有沉浸感的节日夜景场景展开系统性讲解，涵盖从静态背景绘制到动态角色造型设计、多状态管理以及美术资源与编程结构之间的协同规划策略。重点聚焦于如何利用图像设计增强叙事性，使技术实现与艺术表达相辅相成。

3.1 主题场景构建策略

节日主题的游戏或动画往往依赖强烈的视觉符号传递情绪，如红色灯笼、金色星光、璀璨烟花等元素共同构成“喜庆”“欢腾”的感知基调。因此，在进入具体绘图操作前，必须确立清晰的主题构建策略——即如何通过构图、色彩与层次安排来营造空间纵深感和氛围沉浸感。

3.1.1 夜空背景的深色渐变与星点点缀

夜空作为烟花表演的主要舞台，承担着衬托主体效果的重要功能。理想的夜空背景应具备低亮度、高对比度的特点，避免干扰前景元素的表现力。使用Photoshop创建画布后（建议尺寸为480×360像素，符合Scratch默认舞台比例），首先选择“渐变工具”（Gradient Tool），设置从顶部的深蓝色 (#0d1b2a) 向底部的靛紫色 (#1b263b) 进行线性渐变填充，模拟大气层对光线的散射效应。

参数说明：
- 渐变类型：线性渐变（Linear Gradient）
- 颜色停靠点：顶部 #0d1b2a，底部 #1b263b
- 模式：正常（Normal），不透明度100%
- 背景图层命名：“Sky_Background”

完成基础渐变后，添加星点效果可显著提升画面生动性。新建一层命名为“Stars”，设置前景色为白色，选择“画笔工具”，选用软边圆笔刷（Hardness: 0%，Size: 3px），通过手动点击方式随机散布亮点。为进一步增强真实感，可复制该图层并应用“高斯模糊”（Gaussian Blur, Radius ≈ 1.5px），形成光晕扩散效果。

此外，可通过调整图层混合模式为“叠加”（Overlay）或“滤色”（Screen），使星点仅作用于亮部区域，避免压暗整体色调。此技法遵循了光学原理：微弱光源在暗背景下更容易被感知。

星点分布算法可视化（Mermaid流程图）

graph TD
    A[开始] --> B{是否达到预定数量?}
    B -- 否 --> C[生成随机坐标(X,Y)]
    C --> D[判断是否重叠]
    D -- 是 --> C
    D -- 否 --> E[绘制星点]
    E --> F[计数+1]
    F --> B
    B -- 是 --> G[结束绘制]

上述流程体现了程序化思维在美术设计中的迁移应用：即使是手工绘制，也可借助规则控制分布密度与均匀性，防止视觉拥堵或空白区过大。

3.1.2 地面建筑剪影增强空间纵深感

仅有夜空会显得画面空旷且缺乏参照物。引入地面建筑剪影不仅能界定空间边界，还能通过遮挡关系强化烟花升空的高度感。创建新图层组“City_Silhouette”，内部包含多个独立图层用于不同建筑物。

采用矩形选框工具结合自由变换（Ctrl+T）拉伸变形，绘制高低错落的楼体轮廓。所有填充颜色统一为纯黑（#000000）或极深灰（#1a1a1a），确保不会抢夺注意力。关键技巧在于边缘处理——执行“滤镜 → 模糊 → 高斯模糊”（Radius: 2–4px），模拟远距离观察时的大气透视现象，使远处建筑略显朦胧。

下表展示了不同建筑层级的设计参数：

层级	距离感	模糊半径(px)	不透明度(%)	图层顺序
前排高楼	近景	2	100	最上
中排住宅	中景	3	85	中间
远山/天际线	背景	4	70	最下

设计逻辑解析 ：通过分层模糊与透明度递减，构建出符合人眼视觉习惯的空间退远效果。这种非写实但具暗示性的手法特别适用于低分辨率平台如Scratch，能在有限资源下最大化表现力。

3.1.3 动态云层缓慢位移营造动感

尽管Scratch本身支持背景切换实现动画，但在静态图像阶段预设动态意图仍至关重要。云层的作用不仅是装饰，更是运动引导线——其走向可暗示风向，影响烟花轨迹的心理预期。

使用硬边圆形画笔绘制云朵基本形态，随后用橡皮擦工具（Eraser Tool）软化边缘，制造蓬松质感。将整组云朵置于单独图层，并命名为“Cloud_Movement”。导出时保留多个偏移版本（如Cloud_01.png, Cloud_02.png…），每帧水平移动约5–8像素，形成连续平移序列。

/* 示例CSS动画（供参考，实际在Scratch中通过代码控制） */
@keyframes moveCloud {
  from { background-position: 0px; }
  to   { background-position: -50px; }
}
div.cloud-layer {
  animation: moveCloud 20s linear infinite;
}

代码逻辑逐行解读 ：
- 第1行：定义名为 moveCloud 的关键帧动画；
- 第2–3行：设定起始与结束位置，形成左移效果；
- 第4行：绑定至 .cloud-layer 元素，持续20秒线性播放，无限循环；
- 实际在Scratch中可用“重复执行”+“向右移动x点”积木替代，配合“下一个背景”实现无缝滚动。

3.2 角色造型设计实践

角色是交互行为的核心载体，其外观直接影响玩家的情感投射。在“放烟花”项目中，主要涉及两类角色：发射装置（主动方）与烟花本身（被动特效）。两者需在风格统一的前提下体现功能差异。

3.2.1 设计发射器（如礼炮或魔法棒）的静态形象

发射器作为动作发起者，应具备明确的指向性和仪式感。若采用“魔法棒”设定，则宜使用细长线条+顶端发光球体的组合；若为“礼炮”，则推荐圆筒状结构配底座支撑。

在Photoshop中新建透明背景文件（PNG格式），绘制步骤如下：
1. 使用椭圆工具绘制炮口圆形；
2. 用矩形工具延伸为筒身；
3. 添加图层样式：“斜面与浮雕”增加金属光泽，“外发光”模拟口部余焰。

{
  "element": "Cannon_Muzzle",
  "style": {
    "fill_color": "#ffcc00",
    "stroke_width": 2,
    "stroke_color": "#996600"
  },
  "effects": [
    "Outer Glow: #ffff66, Size=10px",
    "Bevel and Emboss: Depth=150%, Shadow Color=#333"
  ]
}

参数说明 ：
- 填充色选用暖黄色系，传达能量蓄积感；
- 描边加深轮廓，便于小尺寸显示时辨识；
- 外发光大小控制辉光范围，不宜超过整体宽度的1/3；
- 斜面深度影响立体程度，过高易产生塑料感。

最终导出为单个PNG文件，注意保持中心对齐，方便后续旋转定位。

3.2.2 创建多种形态烟花原型（菊花型、喷泉型、旋转型）

烟花的核心吸引力在于形态多样性。根据物理爆炸模型抽象化处理，可设计三类典型样式：

类型	特征描述	分支数量	扩散角度	颜色组合建议
菊花型	线条细长，末端轻微回钩	16–24	360°均匀分布	红+黄渐变
喷泉型	内层密集，外层稀疏	8–12	下倾15°–30°	金+白交替
旋转型	带螺旋轨迹，动态感强	6–8	螺旋扩展	彩虹渐变

绘制时建议使用“路径工具”+“描边路径”方法，确保线条平滑可控。例如绘制菊花型时，先用极坐标网格辅助画出放射状路径，再沿路径描边并应用“波浪”扭曲滤镜（Filter > Distort > Wave），形成自然抖动。

烟花形态演化流程图（Mermaid）

flowchart LR
    Start --> ShapeChoice{选择烟花类型}
    ShapeChoice -->|菊花型| PetalDesign[绘制细长花瓣路径]
    ShapeChoice -->|喷泉型| FountainPattern[内密外疏排列]
    ShapeChoice -->|旋转型| SpiralPath[螺旋曲线建模]
    PetalDesign --> GlowEffect[添加外发光]
    FountainPattern --> LayerOpacity[调节图层透明度]
    SpiralPath --> AnimateFrame[生成多帧旋转动画]
    GlowEffect --> ExportPNG
    LayerOpacity --> ExportPNG
    AnimateFrame --> ExportPNG
    ExportPNG --> End[导出为PNG序列]

该流程强调从概念选择到输出的完整链条，适用于批量生产素材。

3.2.3 定义不同爆炸颜色组合的情感表达意义

颜色不仅是美学选择，更是情感语言。研究显示，暖色调（红、橙、黄）常关联兴奋、热烈；冷色调（蓝、紫、绿）则倾向宁静、神秘。在节日语境中，合理搭配可引导用户心理预期。

例如：
- 红+金 ：传统节庆，象征富贵吉祥；
- 蓝+银 ：科技感未来风，适合科幻主题；
- 粉+紫 ：梦幻浪漫，吸引年轻女性用户；
- 彩虹全谱 ：极致狂欢，常用于高潮时刻。

在PS中可通过“色相/饱和度”调整图层快速测试配色方案，无需重复绘制。保存为不同命名的造型文件（firework_red.png, firework_blue.png等），便于程序按条件调用。

3.3 多状态角色管理

在Scratch中，角色的行为变化依赖于“造型”（Costume）的切换。掌握多状态管理技术，是实现流畅动画的基础。

3.3.1 同一角色多个造型切换实现动画帧播放

以烟花上升→爆炸全过程为例，需拆解为至少三个阶段：未发射、上升中、爆炸瞬间。每个阶段对应一组造型。

假设爆炸动画由8帧组成，可在Scratch角色编辑器中依次导入 explode_01 至 explode_08 ，然后编写如下脚本：

当接收到 [引爆信号 v]
切换造型为 [explode_01 v]
重复 (7) 次
  等待 (0.1) 秒
  下一个造型
end
删除此克隆体

逻辑分析 ：
- 接收广播启动动画；
- 强制跳转至第一帧，保证一致性；
- 每0.1秒切换一次，总时长约0.7秒；
- 结束后自动销毁，释放资源。

此模式适用于任何帧动画，关键是命名规范与时间节奏控制。

3.3.2 造型中心点校准确保运动精准性

中心点（Pivot Point）决定了旋转与移动的基准位置。若未正确设置，可能导致烟花“绕圈飞行”或“偏离轨道”。

在Scratch编辑器中双击造型缩略图进入“造型中心设置”模式，拖动十字准星至物理重心处。例如：
- 发射器：置于底部接触面；
- 上升烟花：位于底部喷口；
- 爆炸图案：严格居中。

错误示例：若爆炸图中心偏移，则旋转动画会出现“公转”错觉，破坏真实感。

3.3.3 批量导入外部图像作为连续帧序列

当拥有大量PNG文件（如Photoshop导出的动画帧）时，可使用批量导入功能提升效率。

操作步骤：
1. 将所有文件按名称排序（Windows资源管理器默认按ASCII码排序）；
2. 在Scratch中点击“从文件上传造型”按钮；
3. 按住Ctrl键多选全部相关图片；
4. 系统自动按文件名顺序排列造型。

注意事项 ：
- 文件名应带前导零（如 frame_01.png, frame_02.png…frame_10.png），否则可能乱序；
- 单个角色建议不超过30个造型，以防内存占用过高；
- 可结合变量 current_frame 手动索引，实现非线性播放。

3.4 美术资源与编程逻辑的协同规划

优秀的项目开发离不开跨领域的协作意识。美术设计不应孤立进行，而需与脚本架构同步推进。

3.4.1 根据脚本需求预设造型命名规则

命名混乱是后期维护的最大障碍。建议建立统一命名体系：

<角色>_<状态>_<编号>.png
例如：
cannon_idle_01.png
firework_ascend_01.png
explosion_star_05.png

在代码中可通过字符串拼接动态调用：

设 [造型名称 v] 为 (连接 [explosion_] 和 (选择随机项 [star spiral burst]))
切换造型为 (造型名称)

优势 ：提高可读性，支持模块化替换。

3.4.2 分层保存PSD文件便于后期修改

所有复杂图像均应以PSD格式分层存档。图层组织建议如下：

📁 Firework_PSD/
├── Background/
│   ├── Sky_Gradient
│   └── City_Silhouettes
├── Characters/
│   ├── Cannon_Base
│   └── Glowing_Tip
└── Effects/
    ├── Spark_Layer_1
    └── Glow_Effect

好处 ：未来只需修改特定图层即可更新全局素材，无需重绘整图。

3.4.3 建立资源清单避免遗漏关键图像

使用Excel或Markdown表格记录所有所需资源及其状态：

资源名称	类型	分辨率	已完成	导出路径
night_sky_v1	背景	480×360	✅	/assets/bg/sky1.png
cannon_idle	角色	80×120	✅	/chars/cannon_a.png
explode_flower_03	动画帧	100×100	❌	待绘制

定期核对清单，确保开发进度可控。

综上所述，节日氛围图像制作不仅是艺术创作过程，更是系统工程。唯有将视觉设计纳入整体架构考量，才能真正实现“技美融合”的高品质作品。

4. 克隆体编程原理与多实例控制实现

在Scratch这类图形化编程环境中，单个角色的行为逻辑往往不足以支撑复杂交互场景的实现。尤其是在开发如“放烟花”这样的动态视觉项目时，需要同时呈现多个独立运动、形态各异且具有生命周期的对象。传统的角色复制方式不仅效率低下，还会导致代码冗余和维护困难。此时， 克隆体机制 便成为解决多实例并发处理的核心技术手段。它允许开发者基于一个原型角色动态生成若干副本，并通过统一的初始化脚本赋予每个克隆差异化行为，从而高效模拟群体动画效果。

克隆体的本质是一种运行时对象实例化机制。与静态添加多个相同角色不同，克隆是在程序执行过程中按需创建的临时实体，具备完整的属性继承能力，又能通过条件判断实现个性化控制。这种“一变多”的编程范式广泛应用于粒子系统、子弹发射、人群模拟等场景中。以烟花为例，每一次爆炸并非预设好的固定动画，而是由一个母体（发射器）在特定时刻触发生成多个具有随机轨迹与颜色的克隆体，这些克隆体各自独立上升、扩散并最终消失，形成逼真的空中绽放效果。

理解克隆体的工作机制不仅是掌握高级Scratch技巧的关键一步，更是通往面向对象思维的重要桥梁。尽管Scratch并未提供传统意义上的类与实例概念，但其克隆系统已初步体现了封装、继承与生命周期管理的思想内核。通过对“创建克隆体”指令的精准调度、“当作为克隆体启动时”事件的合理利用，以及对克隆数量与存活时间的有效管控，开发者可以构建出结构清晰、性能可控的复杂动画系统。

更为重要的是，克隆体编程强调了“行为模板”与“数据驱动”的设计理念。所有克隆共享同一套基础行为逻辑，但通过变量注入的方式实现差异化表现——例如为每个克隆分配不同的速度、方向或颜色参数。这种模式极大提升了代码复用率，降低了维护成本，也为后续引入广播通信、状态同步等协同机制打下基础。接下来的内容将深入剖析克隆体的技术细节，从底层机制到实际应用层层递进，帮助读者建立起系统化的多实例控制能力。

4.1 克隆技术的核心机制解析

Scratch中的克隆功能并非简单的角色复制粘贴，而是一套完整的运行时实例化系统。它通过三个关键环节—— 创建、初始化、销毁 ——构成一个闭环的生命流程。理解这一机制是实现高效多实例控制的前提。

4.1.1 “创建克隆体”指令的工作流程

“创建克隆体”积木位于“控制”类别中，其作用是基于当前角色生成一个新的运行时实例。该操作不会改变舞台上的原始角色，而是在内存中新增一个完全独立的对象。这个新对象被称为“克隆体”，而原角色则称为“原型”或“母体”。

当绿旗被点击
重复执行
    如果 <按下 [空格键] ?> 那么
        创建克隆体 [自己 v]
    end
end

上述代码展示了基本的克隆触发逻辑。每当用户按下空格键，系统就会调用一次 创建克隆体 [自己 v] 指令。值得注意的是，此积木仅负责“发起创建请求”，并不直接定义克隆体的行为。真正的行为逻辑必须依赖另一个特殊事件：“当作为克隆体启动时”。

该事件的作用类似于面向对象语言中的构造函数（constructor），它会在每一个克隆体诞生后的第一帧自动执行一次。因此，所有针对克隆体的初始化设置——如位置设定、方向调整、变量赋值等——都应放置在此事件之下。

当作为克隆体启动时
设置 x 坐标为 (随机数 -200 到 200)
设置 y 坐标为 (-150)
面向 [90 度 v]
重复执行
    改变 y 坐标 by (5)
    如果 <y 坐标 > 150> 那么
        删除此克隆
    end
end

在这段代码中，每个克隆体在启动后都会从屏幕底部随机水平位置出发，向上移动直至超出顶部边界，随后自我删除。这正是典型的“子弹发射”或“烟花升空”行为模型。

参数	说明
创建克隆体 [角色名]	可选择克隆自身或其他角色，若选择其他角色，则以该角色为模板生成克隆
当作为克隆体启动时	所有克隆体专属的初始化事件，不可用于普通角色
删除此克隆	终止当前克隆体的运行并释放资源，仅可在克隆体内使用

⚠️ 注意 ：如果不显式调用“删除此克隆”，克隆体会一直存在于内存中，即使它已移出视野或停止动作，这将导致严重的性能问题。

graph TD
    A[用户触发事件] --> B{是否满足创建条件?}
    B -- 是 --> C[执行"创建克隆体"]
    C --> D[系统生成新克隆实例]
    D --> E["触发'当作为克隆体启动时'事件"]
    E --> F[执行初始化脚本]
    F --> G[进入主循环]
    G --> H{是否达到终止条件?}
    H -- 是 --> I[执行"删除此克隆"]
    H -- 否 --> G
    I --> J[释放内存资源]

该流程图清晰地描绘了从用户输入到克隆体消亡的完整路径。整个过程呈现出典型的“事件驱动+状态判断”结构，体现了可视化编程中常见的响应式设计思想。

4.1.2 原型与克隆体之间的属性继承关系

克隆体在创建瞬间会完整继承原型角色的所有属性，包括：

• 当前坐标、大小、旋转角度、可见性
• 所有自定义变量的值（局部变量）
• 造型与声音列表
• 积木脚本（但不会重复执行原型的脚本）

然而，这种继承是“快照式”的，即只复制创建时刻的状态，之后两者互不影响。例如，若原型在克隆生成后改变了自己的x坐标，所有已有克隆体不会随之移动。

更重要的是， 局部变量的继承行为容易引发误解 。Scratch中的局部变量（仅适用于当前角色）在克隆创建时会被复制一份给新克隆体。这意味着每个克隆体拥有自己独立的变量空间，彼此之间不会干扰。这一特性为实现差异化控制提供了基础支持。

当绿旗被点击
设 [速度 v] 为 (随机数 3 到 8)
创建克隆体 [自己 v]
等待 (0.5) 秒
设 [速度 v] 为 (随机数 3 到 8)
创建克隆体 [自己 v]

当作为克隆体启动时
重复执行
    改变 y 坐标 by (速度)
    如果 <触摸 [边缘 v]> 那么
        删除此克隆
    end
end

在这个例子中，两个克隆体虽然共享名为“速度”的变量，但由于它们各自持有独立副本，因此可以拥有不同的数值。第一个克隆体使用第一次设置的速度值，第二个则使用第二次设置的值。这种机制使得无需全局数组或复杂索引即可实现参数差异化。

但也存在例外情况： 全局变量不被继承 ，而是所有角色（包括克隆体）共享同一份数据。因此，在涉及计数、状态标志等跨实例协调任务时，应优先使用全局变量进行同步。

4.1.3 克隆体生命周期：启动、运行、删除

克隆体的生命周期可分为三个明确阶段：

1. 启动阶段 ：从 创建克隆体 指令执行开始，到 当作为克隆体启动时 事件完成初始化为止。
2. 运行阶段 ：克隆体执行主逻辑脚本，可能包含运动、外观变化、侦测交互等行为。
3. 销毁阶段 ：通过 删除此克隆 指令终止运行，释放相关资源。

为了确保系统稳定性，必须严格管理生命周期。尤其要注意以下几点：

• 避免无限生成 ：未限制频率的克隆创建会导致内存迅速耗尽。建议结合“等待”或“计时器”机制控制生成节奏。
• 及时清理无用克隆 ：超出边界、完成动画或超时未响应的克隆应及时删除。
• 防止重复初始化 ： 当作为克隆体启动时 只能执行一次，不应在循环中反复调用。

下面是一个带生命周期监控的完整示例：

当绿旗被点击
清空 [活跃克隆数 v] // 全局变量用于跟踪
重复执行
    如果 <按下 [C] 键 ?> 且 <(活跃克隆数) < 10> 那么
        更改 [活跃克隆数 v] 由 (1)
        创建克隆体 [粒子 v]
    end
end

当作为克隆体启动时
设 [寿命计时器 v] 为 (0) // 局部变量
重复执行
    等待 (0.1) 秒
    更改 [寿命计时器 v] 由 (0.1)
    如果 <(寿命计时器) > 5> 或 <y 坐标 > 180> 那么
        更改 [活跃克隆数 v] 由 (-1)
        删除此克隆
    end
end

该设计通过全局变量 活跃克隆数 实现了总量控制，同时为每个克隆设置了最大存活时间（5秒）和边界检测双重清理机制，有效防止资源泄漏。

此外，还可以借助广播机制实现批量清理：

当按下 [X] 键
广播 [清除所有粒子 v]

当接收到 [清除所有粒子 v]
删除此克隆

这种方式适用于紧急终止所有动态效果的场景，如游戏重置或关卡切换。

综上所述，克隆体机制不仅仅是“复制角色”的便利工具，更是一种结构化的程序组织方式。只有深刻理解其工作原理与生命周期规律，才能在实践中安全、高效地构建复杂的多实例系统。

4.2 实现多枚烟花并发发射

在“放烟花”项目中，最核心的视觉体验来自于多个烟花同时升空并在不同高度爆炸的效果。要实现这一现象，必须突破单一角色行为的局限，采用克隆技术进行大规模实例化控制。本节将围绕“如何以发射器为母体批量生成烟花克隆”展开详细讲解，涵盖触发机制、初始行为设定与性能保护策略。

4.2.1 以发射器为母体批量生成烟花克隆

在Scratch中，通常将负责生成克隆的角色命名为“发射器”或“生成器”。该角色本身不一定可见，它的主要职责是监听外部事件（如鼠标点击、按键按下或接收广播），并在适当时机调用“创建克隆体”指令。

假设我们希望每次点击舞台时，从底部某个区域发射一枚烟花。首先需要定义发射器的行为：

当绿旗被点击
隐藏 // 发射器不可见
重复执行
    如果 <鼠标被点击> 且 <y 坐标 < -100> 那么
        设 [发射点x v] 为 (鼠标指针 x)
        创建克隆体 [烟花母体 v]
        等待 (0.3) 秒 // 防止连续点击造成密集发射
    end
end

这里引入了一个局部变量 发射点x 来记录鼠标点击的水平位置，并将其传递给即将生成的克隆体。由于变量在克隆创建时被复制，因此每个克隆都能准确获知自己的起始坐标。

对应的克隆体初始化脚本如下：

当作为克隆体启动时
显示
设 x 坐标为 (发射点x)
设 y 坐标为 (-150)
设 大小为 (80)
指向 [鼠标指针 v]
滑行 (1) 秒 到 x: (发射点x) y: (随机数 80 到 140)
删除此克隆

这段代码实现了烟花的上升动画：克隆体从地面升起，沿直线滑向高空某点后自动消失。虽然尚未加入爆炸效果，但它已经构成了基本的“发射-升空”流程。

为进一步增强真实感，可加入轻微的轨迹偏移模拟风力影响：

当作为克隆体启动时
设 [目标x v] 为 ((发射点x) + (随机数 -30 到 30))
滑行 (1.2) 秒 到 x: (目标x) y: (随机数 90 到 150)

通过在目标x坐标上叠加一个小范围随机值，使每枚烟花飞行路径略有差异，避免机械式的整齐排列。

控制要素	实现方式	目的
触发源	鼠标点击 + y坐标过滤	确保仅在地面区域点击才触发
起始位置	记录鼠标x坐标并通过变量传递	定位发射点
上升动画	滑行至高空随机点	模拟升空过程
发射间隔	等待0.3秒防抖	防止过快连发导致卡顿

4.2.2 利用“当作为克隆体启动时”设定初始行为

“当作为克隆体启动时”是克隆编程中最关键的事件之一。它确保了每个新生克隆体都能获得一致的初始化流程，是实现标准化行为模板的基础。

在烟花项目中，除了基本的位置设定外，还应在该事件中完成以下配置：

• 设置初始造型（如“未爆炸”状态）
• 初始化个性化参数（速度、颜色、类型）
• 启动主循环或协程式动画序列

示例代码如下：

当作为克隆体启动时
设 x 坐标为 (发射点x)
设 y 坐标为 (-150)
设 旋转样式 为 [左右翻转 v]
设 [垂直速度 v] 为 (8) // 局部变量
设 [水平扰动 v] 为 (随机数 -1 到 1)
重复执行
    更改 y 坐标 by (垂直速度)
    更改 x 坐标 by (水平扰动)
    更改 (垂直速度) 由 (-0.2) // 模拟重力减速
    如果 <(垂直速度) < 0> 那么
        广播 [爆炸 v] // 达到最高点触发爆炸
        停止 [这个脚本 v]
    end
    如果 <y 坐标 < -160> 那么
        删除此克隆
    end
end

该脚本采用“速度积分”方式模拟抛物线运动：初始给予较大的向上速度，然后每帧减去一个小量（模拟重力加速度），当速度降为负值时表示达到顶峰，随即广播“爆炸”消息。

此处巧妙运用了物理建模思想，虽未使用复杂公式，但通过简单的数值递减实现了自然的升空减速效果。

sequenceDiagram
    participant 用户
    participant 发射器
    participant 克隆体

    用户->>发射器: 点击舞台
    发射器->>发射器: 记录x坐标
    发射器->>系统: 创建克隆体
    system->>克隆体: 触发“当作为克隆体启动时”
    克隆体->>克隆体: 初始化位置与速度
    loop 每帧更新
        克隆体->>克隆体: 更新坐标
        克隆体->>克隆体: 减速计算
        alt 到达顶点
            克隆体->>系统: 广播“爆炸”
            克隆体->>自身: 停止脚本
        end
    end

该时序图展示了从用户交互到动画结束的全过程，突出了事件链的传递关系。

4.2.3 控制克隆数量上限防止性能崩溃

尽管克隆体能带来丰富的视觉效果，但过度使用会导致严重性能问题。Scratch运行于浏览器环境，资源受限明显，一般建议同时存在的克隆体不超过50个。

为此，必须实施数量限制策略：

当绿旗被点击
设 [最大并发数 v] 为 (15)
设 [当前克隆数 v] 为 (0)

当按下 [空格键]
如果 <(当前克隆数) < (最大并发数)> 那么
    更改 [当前克隆数 v] 由 (1)
    创建克隆体 [烟花 v]
否则
    播放声音 [警告音效 v]
end

当作为克隆体启动时
... // 正常初始化

当克隆体被删除
更改 [当前克隆数 v] 由 (-1)

遗憾的是，Scratch并无“当克隆体被删除”事件。因此需手动在删除前减少计数：

如果 <(垂直速度) < 0> 那么
    更改 [当前克隆数 v] 由 (-1)
    删除此克隆
end

或者使用广播统一管理：

当接收到 [清理所有烟花 v]
更改 [当前克隆数 v] 由 (-1)
删除此克隆

此外，还可结合“克隆体总数”侦测积木进行实时监控：

如果 <(克隆体总数) > 20> 那么
    等待 (1) 秒
end

通过暂停生成来缓解压力。

综上，多烟花并发发射的实现依赖于精确的事件调度、合理的参数传递与严格的资源管控。唯有如此，方能在视觉丰富性与系统稳定性之间取得平衡。

5. 消息广播机制与角色间通信编程

在Scratch项目开发中，随着角色数量和功能模块的增加，单一角色独立执行逻辑已无法满足复杂交互需求。特别是在“放烟花”这类多角色协同、状态联动的场景中，如何实现发射器、烟花克隆体、背景动画、音效系统之间的有序协作，成为决定项目流畅性与可维护性的关键。传统顺序执行模式难以应对异步事件驱动的需求，而 消息广播机制 正是解决这一问题的核心工具。它允许一个角色发出信号，其他多个角色根据预设条件接收并响应该信号，从而实现跨角色、跨模块的松耦合通信。

Scratch中的广播系统并非简单的指令传递，而是构建了一个基于事件驱动的轻量级发布-订阅模型。这种机制不仅提升了程序结构的清晰度，还显著增强了扩展性和调试便利性。例如，在烟花项目中，当用户点击绿旗后，并非所有元素立即启动，而是通过“准备开始”广播通知各个角色进入待命状态；随后倒计时结束时发送“发射烟花”信号，触发发射器生成克隆体；最后在爆炸完成时广播“播放音效”，由声音角色响应。整个流程无需显式调用彼此代码，各角色只需关注自身对特定消息的反应即可。

更进一步地，合理使用广播可以有效解耦程序逻辑，避免出现“意大利面条式”的混乱脚本。以往开发者可能倾向于将所有控制逻辑集中在主控角色中，导致其脚本臃肿且难以修改。而引入广播后，每个角色仅需监听与其职责相关的消息，形成高内聚、低耦合的设计范式。这不仅是可视化编程进阶的重要标志，也为后续向文本编程（如JavaScript或Python中的事件总线）过渡打下认知基础。

此外，广播机制还支持精细的状态管理与流程调度。通过定义阶段性消息（如“阶段一：初始化”、“阶段二：发射中”），可以在不依赖全局变量频繁轮询的情况下，精准控制游戏节奏。结合标志位与延迟去抖技术，还能防止因重复点击导致的异常行为。这些高级技巧使得广播不仅仅是“通知某事发生”，更成为组织大型项目的中枢神经系统。

5.1 广播系统的运作机理

Scratch的消息广播系统本质上是一种 事件驱动通信模型 ，其核心在于“发送—监听—响应”三步闭环。理解其底层工作原理是高效利用该机制的前提。系统提供了两种主要类型的广播指令：“广播 [消息名]” 和 “广播 [消息名] 并等待”。二者看似相似，实则在执行流程上有本质区别，直接影响程序的行为逻辑。

5.1.1 消息类型：普通广播与广播并等待的区别

类型	指令块	执行方式	是否阻塞原角色	适用场景
普通广播	broadcast [message v]	异步发送，立即继续执行下一条指令	否	多角色并发响应，如同时启动多个动画
广播并等待	broadcast [message v] and wait	同步发送，暂停当前脚本直至所有接收者处理完毕	是	需要确保前序动作完成后才进行下一步，如倒计时结束后再发射

为了直观展示差异，以下代码演示了同一消息在不同广播类型下的行为表现：

// 角色：主控制器
when green flag clicked
set [count v] to (0)
broadcast [start animation v]
change [count v] by (1)

// 角色：动画A（监听消息）
when I receive [start animation v]
wait (1) seconds
say [Animation A started!] for (2) secs

// 角色：动画B（监听消息）
when I receive [start animation v]
wait (0.5) seconds
say [Animation B started!] for (2) secs

逻辑分析 ：

• 若使用“广播 [start animation]”，主控制器会在发出消息后立刻执行 change [count v] by (1) ，此时两个动画仍在后台运行。
• 若改为“广播并等待”，主控制器将暂停脚本，直到动画A和B都完成各自的 say 动作后才继续执行。
• 因此，“广播并等待”适用于需要严格顺序控制的场景，比如必须等所有准备工作完成后再进入下一阶段。

参数说明：

• [message v] ：下拉列表中的自定义消息名称，可通过“新建消息”添加。
• Scratch最多支持约100个不同的消息名，建议命名具有语义性（如 launch_firework , play_explosion_sound ）以提高可读性。

5.1.2 接收端如何响应特定消息事件

每个角色都可以通过 when I receive [消息名 v] 积木来注册对某个消息的监听。一旦该消息被广播，所有绑定了该消息的角色都会并行启动对应的脚本段。

flowchart TD
    A[主控制器] -->|broadcast "explode"| B(烟花克隆体)
    A -->|broadcast "explode"| C(音效角色)
    A -->|broadcast "explode"| D(背景闪烁效果)
    B --> E[播放爆炸动画]
    C --> F[播放爆炸音效]
    D --> G[舞台颜色特效变化]

上述流程图展示了“爆炸”消息触发后的多角色响应路径。这种设计实现了 事件解耦 ：主控制器无需知道谁会响应，只需发出信号；各接收方也无需主动查询状态，只需被动监听。

值得注意的是，Scratch允许同一角色监听多个消息，也可以为不同状态设置不同的响应逻辑。例如：

when I receive [launch]
set y to (-150)
glide (1) secs to y: (100)

when I receive [explode]
switch costume to [explosion_1 v]
repeat (5)
  next costume
  wait (0.1) seconds
end
delete this clone

逐行解读 ：

1. when I receive [launch] ：当收到“发射”消息时，开始上升动画。
2. set y to (-150) ：将克隆体初始位置置于底部（模拟礼炮口）。
3. glide (1) secs to y: (100) ：用1秒时间向上滑动到y=100的位置（接近空中爆炸点）。
4. 第二个脚本块监听“爆炸”消息，切换至爆炸造型序列，并在播放完后自我删除。

这种分离式设计使代码结构更加清晰，易于维护和扩展。

5.1.3 消息命名规范与作用域管理

尽管Scratch没有严格的命名空间或作用域限制，但良好的命名习惯能极大提升项目的可维护性。以下是推荐的命名策略：

命名风格	示例	优点	缺点
动词+名词	launch_firework , play_sound	明确表达动作意图	名称较长
阶段标记法	phase_start , phase_explode	便于流程控制	抽象层次较高
角色前缀法	cat_says_hello , firework_launched	易于追踪来源	可能造成冗余

避免使用模糊词汇如“go”、“do something”等，应尽量采用 动宾结构 ，体现具体行为。例如：

// 推荐
broadcast [start countdown v]

// 不推荐
broadcast [go now v]

此外，可通过创建“消息清单”表格来统一管理项目中使用的所有广播消息：

消息名称	发送角色	接收角色	触发条件	备注
start_game	舞台	所有角色	点击绿旗	初始化状态
countdown_done	计时器	发射器	倒计时结束	触发发射
firework_exploded	烟花克隆体	音效、计分板	爆炸完成	通知播放声效
clear_all	主控	所有动态角色	游戏重置	删除克隆、停止音效

该表可用于团队协作或后期重构，确保消息使用的准确性与一致性。

5.2 构建跨角色协同流程

在复杂的互动项目中，单个角色往往不足以承载全部逻辑。通过广播机制，可以实现多个角色之间的协同工作，形成有机的整体行为。以“放烟花”项目为例，完整的发射流程涉及至少四个角色：用户界面、发射器、烟花克隆体、音效系统。它们之间通过广播建立通信链路，共同完成一次完整的视觉体验。

5.2.1 由用户交互触发“发射烟花”信号

用户的操作（如点击按钮或按下空格键）应作为整个流程的起点。此时不应直接编写运动代码，而应先发送一条标准化的消息：

// 角色：按钮
when this sprite clicked
broadcast [user_launch_request v]

参数说明 ：

• 使用 user_launch_request 而非直接 launch ，是为了区分“请求”与“执行”两个阶段，便于加入验证逻辑（如是否处于冷却期）。

接收端（通常是发射器）在监听到该请求后，可进行判断并转发正式指令：

// 角色：发射器
when I receive [user_launch_request v]
if <(current_state) = [ready]> then
  set [current_state v] to [launching]
  broadcast [execute_launch v]
end

逻辑分析 ：

• 此处引入了状态机思想，通过 current_state 变量控制流程合法性。
• 即便用户多次点击，只要状态不是 ready ，就不会重复发射，防止性能过载。

5.2.2 多个角色监听同一消息执行联动动作

一个消息可以被多个角色同时响应，这是实现同步动画的关键。例如，在烟花达到顶点时广播 explode_now ，以下角色均可做出反应：

// 烟花克隆体
when I receive [explode_now v]
start effect ghost for (0.5) secs
switch costume to [burst_large v]

// 音效角色
when I receive [explode_now v]
play sound [explosion_pop v]

// 舞台
when I receive [explode_now v]
change [color effect v] by (50)
wait (0.2) seconds
clear graphic effects

执行逻辑说明 ：

• 所有监听脚本几乎同时启动，形成“声光同步”的沉浸感。
• 图形与声音的微小延迟可通过 wait 微调，增强真实感。

5.2.3 分阶段广播控制游戏节奏（准备→发射→爆炸）

将整个流程划分为明确阶段，有助于组织代码结构和调试异常。典型的时间轴如下：

timeline
    title 放烟花项目广播时序图
    section 用户操作
        点击按钮 ： 0s
        广播 user_launch_request ： 0.1s
    section 准备阶段
        发射器检查状态 ： 0.2s
        广播 prepare_launch ： 0.3s
    section 发射阶段
        生成克隆体 ： 0.5s
        广播 launch_trajectory ： 0.6s
    section 爆炸阶段
        达到高点 ： 1.8s
        广播 explode_now ： 1.85s
        播放音效/动画 ： 1.9s

每个阶段对应一个专用消息，既便于跟踪执行进度，也方便后期添加新环节（如“烟雾消散”阶段）。此外，还可结合广播实现 非线性流程跳转 ，如游戏中途暂停或紧急终止。

5.3 状态同步与事件解耦

在实际开发中，常常面临“状态不一致”或“事件重复响应”的问题。例如，用户快速连续点击导致多个烟花同时发射，超出性能承受范围；或某角色未正确接收到消息而导致动画中断。这些问题可通过合理的状态管理和广播优化策略加以解决。

5.3.1 使用标志变量配合广播实现状态切换

引入布尔型或枚举型变量作为系统状态标识，可有效防止非法操作。例如：

// 全局变量
current_phase : "idle" // 可选值: idle, launching, exploding, cooldown

// 控制器角色
when I receive [start_game v]
set [current_phase v] to [launching]
broadcast [launch_sequence_initiate v]

// 发射器角色
when I receive [user_click v]
if <(current_phase) = [idle]> then
  broadcast [proceed_to_launch v]
else
  // 忽略请求或提示“请等待”
end

优势 ：

• 将决策逻辑集中于状态判断，而非分散在各处。
• 易于扩展更多状态（如“夜间模式开启”影响烟花颜色）。

5.3.2 避免重复响应：引入去抖动延迟机制

由于Scratch的事件系统默认允许多次触发，若用户快速点击按钮，可能导致同一消息被反复广播。解决方案是在发送前加入短暂延迟窗口：

// 角色：按钮
when this sprite clicked
if <(last_click_time) + (0.5) > (timer)> then
  stop [this script v]
end
set [last_click_time v] to (timer)
broadcast [launch_firework v]

参数说明 ：

• last_click_time ：记录上次点击时间。
• timer ：Scratch内置计时器，单位为秒。
• 设置0.5秒防抖窗口，防止误触。

另一种方法是使用“锁变量”：

when this sprite clicked
if <(can_broadcast?) = [yes]> then
  set [can_broadcast? v] to [no]
  broadcast [fire_one v]
  wait (1) seconds
  set [can_broadcast? v] to [yes]
end

确保每次广播后强制冷却1秒，适合用于限制发射频率。

5.3.3 错误处理：未收到预期响应时的备用路径

有时因脚本错误或角色隐藏，消息可能未被正确处理。为此可设置超时检测机制：

// 主控角色
when I receive [request_explosion v]
set [expect_response v] to [yes]
broadcast [explode_now v]
wait (2) seconds
if <(expect_response) = [yes]> then
  // 可能失败，尝试重新发送或启用本地替代方案
  play sound [fallback_explosion v]
end

虽然Scratch本身不提供“确认回执”机制，但通过此类监控手段可在一定程度上提升健壮性。

5.4 综合应用场景设计

广播机制的价值最终体现在真实项目的整合能力上。以下三个典型场景展示了其在“放烟花”项目中的综合运用。

5.4.1 实现倒计时开始后的集体启动

// 舞台角色：倒计时
when green flag clicked
say [3] for (1) seconds
say [2] for (1) seconds
say [1] for (1) seconds
broadcast [fireworks_begin v]

多个发射器同时监听该消息，各自生成随机方向的烟花克隆体，形成齐射效果。

5.4.2 爆炸完成后通知音效模块播放声效

// 烟花克隆体
when I receive [detonate v]
repeat (6)
  next costume
  wait (0.1) seconds
end
broadcast [sound_trigger_pop v] // 通知音效
delete this clone

// 音效角色
when I receive [sound_trigger_pop v]
play sound [pop_small v]

通过分离视觉与听觉逻辑，提高了模块复用性。

5.4.3 游戏结束信号统一关闭所有动态元素

// 主控角色
when [space v] key pressed
broadcast [emergency_stop v]

所有活动角色监听此消息：

// 任意动态角色
when I receive [emergency_stop v]
stop all sounds
delete this clone
clear graphic effects

实现一键清理，保障系统稳定性。

6. 放烟花游戏项目整合与完整流程实战

6.1 项目架构顶层设计

在完成素材设计、克隆体控制、消息广播等关键技术模块后，进入项目整合阶段。本节将从系统工程角度出发，构建可扩展、易维护的“放烟花”交互程序整体架构。

模块划分与职责定义

模块名称	主要功能	关键积木类别
输入响应模块	监听鼠标点击或键盘事件，触发发射流程	事件、侦测
运动控制模块	控制烟花上升轨迹、模拟重力下落、实现抛物线偏移	运动、控制、运算
特效渲染模块	管理爆炸动画帧切换、光晕扩散效果、音效同步	外观、声音、克隆
资源调度模块	动态加载不同造型、管理变量池、控制资源释放	变量、数据操作

该结构采用 松耦合设计原则 ，各模块通过广播消息和共享变量进行通信，而非直接调用彼此代码，提升了系统的可测试性和复用性。

数据流分析与消息流向图

graph TD
    A[用户点击] --> B{广播"firework_start"}
    B --> C[发射器角色: 创建克隆]
    C --> D[克隆体启动: 设置随机高度/方向]
    D --> E[执行上升运动+重力模拟]
    E --> F{到达最高点?}
    F -- 是 --> G[切换至爆炸造型序列]
    G --> H[播放爆炸音效]
    H --> I[启动外发光特效]
    I --> J[延时后删除克隆]
    F -- 否 --> E

此流程体现了典型的 事件驱动 + 状态机 模式，确保行为逻辑清晰且易于追踪。

6.2 核心玩法循环实现

核心玩法是整个项目的灵魂，需保证每次点击都能生成自然逼真的烟花效果。

用户交互触发机制

当绿旗被点击
重复执行
    如果 <鼠标被按下且碰到[发射器]> 那么
        广播 [firework_start]
        等待 (0.2) 秒 // 防止连发
    end
end

参数说明 ：
- 等待0.2秒 ：实现去抖动（debounce），避免一次点击产生多个烟花。
- 使用“碰到”判断而非坐标硬编码，提高适配性。

随机选择烟花类型与位置

当接收到 [firework_start]
设 [random_type v] 为 (1 到 5 的随机数)
设 [launch_x v] 为 (舞台宽度 × (0.3 到 0.7 的随机数))
创建克隆体 [烟花角色 v]

• random_type 决定后续使用哪组爆炸造型（如菊花型、喷泉型）。
• 发射范围限制在舞台中央区域，防止边缘异常。

上升运动与物理模拟

当作为克隆体启动时
移到 x:(launch_x) y:(-180)
面向 90 度
将 Y 增加 (speed::custom) // 初始速度向上
重复直到 <y 位置 > max_height 或 <触摸到边缘>>
    将 Y 增加 ((speed - gravity * time)::operators)
    将 X 增加 (wind_offset::variables)
    改变 [亮度 v] 效果 by 10
    等待 (0.05) 秒
end
广播 [explode_now]

执行逻辑说明 ：
- speed 初始化为 8~12； gravity 设为 0.3； time 每帧递增。
- 引入 wind_offset 实现轻微水平漂移，增强真实感。

爆炸动画与声光联动

当接收到 [explode_now]
将特效 [马赛克 v] 设为 50
重复 (5) 次
    下一个造型
    播放声音 [explosion_short v]
    等待 (0.1) 秒
end
删除此克隆

支持多种爆炸音效轮换播放，提升听觉多样性。

6.3 随机性与多样性增强

为避免视觉疲劳，必须引入多维度随机机制。

飞行参数随机化配置表

参数项	取值范围	影响效果
初始速度	8 ~ 14	决定飞行高度
最大高度	100 ~ 160	控制爆炸发生位置
水平偏移	-2 ~ +2	模拟风力扰动
爆炸持续时间	0.4 ~ 0.8 秒	调节节奏紧张度
扩散半径	80 ~ 120 步	视觉冲击力
音效选择	explosion_1 ~ 4	增强沉浸体验
造型序列长度	6 ~ 10 帧	动画细腻程度
克隆数量上限	15	平衡性能与表现力
重力系数	0.25 ~ 0.35	物理真实性
亮度渐变步长	8 ~ 15	光效强度变化速率

这些参数通过全局变量传递给克隆体，在“当作为克隆体启动时”中统一读取应用。

造型组合策略示例

如果 <(random_type) = [1]> 那么
    使用造型 [burst_a01] 到 [burst_a08]
否则
    如果 <(random_type) = [2]> 那么
        使用造型 [fountain_b01] 到 [fountain_b06]
    end
end

结合外部导入的PNG序列帧，形成丰富多样的爆炸形态。

6.4 完整调试与发布流程

逐模块功能验证清单

测试项	预期结果	实际结果	备注
点击发射器是否生成克隆	成功创建新实例	✔️
是否正确继承初始变量	X/Y坐标、速度、类型一致	✔️
上升过程是否有重力减速	速度逐渐减小直至停止	✔️
到达高点后是否触发爆炸	播放动画并发出声音	✔️
动画结束后是否自动清除	克隆体消失，内存释放	✔️
连续点击是否受防抖保护	至少间隔0.2秒才响应	✔️
不同类型烟花是否差异化显示	造型、颜色、扩散方式各异	✔️
多个克隆能否并发运行	最多同时存在15个	✔️
性能是否稳定	CPU占用率<30%，无卡顿	✔️
导出后是否可在移动端播放	支持浏览器打开，触控正常	✔️	需压缩音频大小

性能优化建议

• 减少过度绘制 ：关闭非必要角色的“始终在最前”属性。
• 精简造型数量 ：单个爆炸动画控制在8帧以内。
• 延迟加载音效 ：仅在首次播放时加载音频资源。
• 批量清理机制 ：添加“全部清除”按钮应对异常堆积。

发布与分享操作步骤

1. 点击右上角「文件」→「保存到电脑」导出 .sb3 文件；
2. 登录 Scratch官网 ，上传项目；
3. 系统自动生成分享链接与二维码；
4. 可嵌入网页使用 <iframe> 标签展示：

<iframe src="https://scratch.mit.edu/projects/123456789/embed/" 
        allowtransparency="true" 
        width="480" height="400" 
        frameborder="0" scrolling="no"></iframe>

支持在微信公众号、教学平台中无缝集成，便于传播与教学评估。

本文还有配套的精品资源，点击获取

简介：本课程以Scratch图形化编程工具为基础，通过“放烟花游戏”项目引导儿童在趣味实践中掌握编程核心概念。课程涵盖Scratch积木式编程界面操作、Photoshop素材设计、克隆体机制、消息通信及角色运动控制等关键技术，帮助孩子理解坐标系统、随机数生成、条件判断与程序协同工作原理。项目融合编程逻辑与艺术创作，提升少儿计算思维与综合创新能力，是适合初学者的完整编程学习实践。

本文还有配套的精品资源，点击获取