在本教程中，我们将使用Kaboom框架开发一个Momo小程序源代码框架，类似于Atari的Breakout和Taito的Arkanoid等经典小程序。
源代码：y.wxlbyx.icu
在本教程结束时，您将能够：
使用Kaboom框架开发多层次的Momo小程序源码框架。
通过添加您自己的电源和小块类型来构建基本小程序。
我们完成的小程序的源代码如下所示：
我们将使用 Michele Bucelli 的这套精灵和 Jaymin Covy 的这套精灵包的音质。 我们还将使用来自 Soundimage.org 的 Eric Matyas 的音乐。
入门
登录您的 Replit 帐户并创建一个新的 repl。 选择 Kaboom 作为您的项目类型。 给这个 repl 一个名称，例如“blockbreaker”。
创建一个新副本
Kaboom repl 与您以前见过的其他类型的 repl 完全不同：您将使用代码、声音和精灵，而不是直接处理文件夹中的文件，这些可以直接在 Replit 的图像编辑器中绘制草图。
在开始编码之前，我们需要上传精灵和声音。 下载 ZIP 文件并将其解压到您的计算机。 单击侧边栏上的“文件”图标，将您提取文件的 Sounds 文件夹中的所有内容上传到 repl 的“声音”部分小程序游戏源码导入，并将 Sprites 文件夹中的所有内容上传到 repl 的“sprites”部分。
文件上传后，您可以单击侧栏中的“Kaboom”图标并返回到“主”代码文件。
加载源文件
当您第一次打开新的 Kaboom repl 时，您将听到一个包含以下示例代码的文件。
import kaboom from "kaboom";// initialize contextkaboom();// load assetsloadSprite("bean", "sprites/bean.png");// add a character to screenadd([// list of componentssprite("bean"),pos(80, 40),area(),]);// add a kaboom on mouse clickonClick(() => {addKaboom(mousePos())})// burp on "b"onKeyPress("b", burp)在我们开始开发我们的小程序之前，让我们删除大部分代码，只留下以下几行：import kaboom from "kaboom";// initialize contextkaboom();
现在我们可以为我们自己的小程序奠定基础了。 首先，我们将小程序背景设置为白色，并通过修改 Kaboom 上下文初始化来修补小程序的屏幕尺寸。 将以下内容添加到 kaboom(); 行：
// initialize contextkaboom({width: 768,height: 360,background: [0,0,0]});
接下来，我们需要导出小程序对象的精灵：玩家的球拍、球和可破坏的块。 由于我们使用的 OpenGameArt 精灵都在一个图像文件中，因此我们将使用 Kaboom 的 loadSpriteAtlas() 函数加载它们。 这省去了我们将每个精灵分割成自己的图像文件的麻烦。 将以下代码添加到主代码文件的顶部：
loadSpriteAtlas("sprites/breakout_pieces.png", {"blocka": {x: 8,y: 8,width: 32,height: 16,},"blockb": {x: 8,y: 28,width: 32,height: 16,},"blockc": {x: 8,y: 48,width: 32,height: 16,},"blockd": {x: 8,y: 68,width: 32,height: 16,},"paddle": {x: 8,y: 152,width: 64,height: 16,},"ball": {x: 48,y: 136,width: 8,height: 8,},"heart": {x: 120,y: 136,width: 8,height: 8,}});
请注意，我们已经导出了四个名为 block{ad} 的不同块精灵。 每个精灵都有不同的颜色，受伤时会得到不同的分数。 我们还保留了大部分精灵表不变——基本小程序只需要一些精灵。
接下来，我们需要导出用于显示玩家得分和生命值的字体。 由于 Kaboom 附带了许多我们可以使用的默认字体，因此此步骤是可选的，但它有助于为我们的小程序提供有凝聚力的视觉风格。
loadFont("breakout", "sprites/breakout_font.png", 6, 8, { chars: "ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789:!'" });我们使用 Kaboom 的 loadFont() 函数，指定字体的名称、从中获取字体的图像文件、单个字符的长度和高度以及它包含的字符。 请参阅 Kaboom 的布局breakout_font.png 了解 Kaboom 期望的格式。 另请注意小程序游戏源码导入，我们将很难使用此处表示的字符以外的任何字符 - 这包括小写字母。
最后，我们需要加载音质和音乐。 在顶部添加以下代码来执行此操作：
// soundsloadSound("blockbreak", "sounds/Explosion5.ogg");loadSound("paddlehit", "sounds/Powerup20.ogg");loadSound("powerup", "sounds/Powerup2.ogg");loadSound("ArcadeOddities", "sounds/Arcade-Oddities.mp3");
