在本教程中，我们将使用Kaboom框架来开发一个微信小程序源码框架，类似于Atari 的Breakout和Taito的Arkanoid等经典小程序。
源码：y.wxlbyx.icu
在本教程结束时，您将能够：
使用 Kaboom 框架开发具有多个级别的微信小程序源码框架。
通过添加自己的通电和方块类型来构建基本小程序。
我们完成的小程序源码将如下所示：
我们将使用Michele Bucelli的这组精灵和Jaymin Covy的这个包中的音效。我们还将使用Soundimage.org的Eric Matyas的音乐。
入门
登录您的Replit帐户并创建一个新的 repl。选择Kaboom作为您的项目类型。给这个 repl 起个名字，比如“blockbreaker”。
创建一个新的副本
Kaboom repls 与您之前可能见过的其他类型的 repls 完全不同：您将处理代码、声音和精灵，而不是直接处理文件夹中的文件，后者可以直接在 Replit 的图像编辑器中绘制。
在我们开始编码之前，我们需要上传我们的精灵和声音。下载此 ZIP 文件并将其解压缩到您的计算机上。单击侧边栏上的“文件”图标，将提取文件的 Sounds 文件夹中的所有内容上传到 repl 的“sounds”部分，并将 Sprites 文件夹中的所有内容上传到 repl 的“sprites”部分。
上传文件后，您可以单击侧边栏中的“Kaboom”图标，然后返回“主”代码文件。
加载源码文件
当您第一次打开新的 Kaboom repl 时，您会看到一个包含以下示例代码的文件。
import kaboom from "kaboom";
// initialize context
kaboom();
// load assets
loadSprite("bean", "sprites/bean.png");
// add a character to screen
add([
// list of components
sprite("bean"),
pos(80, 40),
area(),
]);
// add a kaboom on mouse click
onClick(() => {
addKaboom(mousePos())
})
// burp on "b"
onKeyPress("b", burp)
在我们开始开发我们的小程序之前，让我们删除大部分代码，只留下以下几行：
import kaboom from "kaboom";
// initialize context
kaboom();
现在我们可以为我们自己的小程序搭建舞台了。首先，我们将小程序背景设置为黑色，并通过更改Kaboom 上下文初始化来修复小程序的屏幕大小。将以下内容添加到该行kaboom();：
// initialize context
kaboom({
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{a-d}. 每个精灵都有不同的颜色，并且在损坏时将获得不同的分数。我们还保留了精灵表的大部分内容不变——基本小程序只需要几个精灵。
接下来，我们需要导入一种字体，我们将使用它来显示玩家的得分和生命值。由于 Kaboom 带有许多我们可以使用的默认字体，这一步是可选的，但它有助于为我们的小程序提供一种有凝聚力的视觉风格。
loadFont("breakout", "sprites/breakout_font.png", 6, 8, { chars: "ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789:!'" }); 我们使用了 Kaboom 的loadFont()函数，指定了字体的名称、从中获取字体的图像文件、单个字符的宽度和高度，以及它包含的字符。查看 Kaboom的布局breakout_font.png以了解 Kaboom 所期望的格式。另请注意，我们将无法使用此处表示的字符之外的任何字符——这包括小写字母。
最后，我们需要加载我们的音效和音乐。在底部添加以下代码来执行此操作：
// sounds
loadSound("blockbreak", "sounds/Explosion5.ogg");
loadSound("paddlehit", "sounds/Powerup20.ogg");
loadSound("powerup", "sounds/Powerup2.ogg");
loadSound("ArcadeOddities", "sounds/Arcade-Oddities.mp3");