在本教程中,我们将使用Kaboom框架来开发一个微信小程序源码框架,类似于Atari 的Breakout和Taito的Arkanoid等经典小程序。
源码:y.wxlbyx.icu
在本教程结束时,您将能够:
使用 Kaboom 框架开发具有多个级别的微信小程序源码框架。
通过添加自己的通电和方块类型来构建基本小程序。
我们完成的小程序源码将如下所示:
我们将使用Michele Bucelli的这组精灵和Jaymin Covy的这个包中的音效。我们还将使用的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 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{a-d}. 每个精灵都有不同的颜色,并且在损坏时将获得不同的分数。我们还保留了精灵表的大部分内容不变——基本小程序只需要几个精灵。
接下来,我们需要导入一种字体,我们将使用它来显示玩家的得分和生命值。由于 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");
如果觉得《开源微信小程序源码+小程序游戏代码附搭建框架教程》对你有帮助,请点赞、收藏,并留下你的观点哦!