开源微信小程序源码+小程序游戏代码附搭建框架教程

　　在本教程中，我们将使用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 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");

开源微信小程序源码+小程序游戏代码附搭建框架教程相关推荐

小程序源码：喝酒娱乐小游戏助力神器微信小程序源码下载多种游戏选择玩法多种
大家好今天给大家带来另外一款喝酒小神器好像记得小编之前也发过好几款这种小程序源码吧但是每一款的UI或者功能什么的都还是会有所不一样的大家也可以找找之前所发的那几款对比一下然后决定自己需要哪一款哟 ...
喝酒娱乐小游戏助力神器微信小程序源码下载多种游戏选择玩法多种
大家好今天给大家带来另外一款喝酒小神器好像记得小编之前也发过好几款这种小程序源码吧但是每一款的UI或者功能什么的都还是会有所不一样的大家也可以找找之前所发的那几款对比一下然后决定自己需要哪一款哟 ...
仿微信导航网站源码小程序商店商城系统 PHPCMS
介绍: 本小程序商店可直接扫码进入. 小程序可以通过扫描二维码二维码或是搜一搜,就能立即使用. 可以进行关联,并相互跳转. 通过公众号查看并进入所绑定的小程序一个公众号可以绑五个小程序. 小程序&q ...
娱乐小游戏助力神器威信小程序源码下载多种游戏选择玩法多种
大家好今天给大家带来另外一款小神器好像记得小编之前也发过好几款这种小程序源码吧但是每一款的UI或者功能什么的都还是会有所不一样的大家也可以找找之前所发的那几款对比一下然后决定自己需要哪一款哟这 ...
Java聊天室程序源码 Java即时通讯代码 Java局域网聊天系统 Java即时通讯 Java聊天系统
Java聊天室程序源码 Java即时通讯代码 Java局域网聊天系统 Java即时通讯 Java聊天系统 public Swingtest002() {// 设置标题setTitle("请 ...
收费短剧小剧场类影视小程序源码支持多运营模式+详细搭建教程
分享一个收费短剧小剧场类影视小程序源码,支持多种运营模式,支持影视剧集选择.单集付费.整部付费.开通会员等模式,源码包含完整前后端和详细搭建教程. 小程序源码下载地址:春哥技术博客获取
【demo】奶茶小程序源码小福利
奶茶店点餐小程序功能亮点:多门店功能.优惠券.自助点单.扫码点餐功能等等营销方式. 1.多门店功能打开小程序,根据消费者当前位置,可以自动定位最近的门店.还可以在管理后台维护门店信息. 2.自助点 ...
【java毕业设计】基于java+swing+GUI的连连看游戏设计与实现（毕业论文+程序源码）——连连看游戏
基于java+swing+GUI的连连看游戏设计与实现(毕业论文+程序源码) 大家好,今天给大家介绍基于java+swing+GUI的连连看游戏设计与实现,文章末尾附有本毕业设计的论文和源码下载地址哦 ...
java毕业设计——基于java+Java awt+swing的愤怒的小鸟游戏设计与实现（毕业论文+程序源码）——愤怒的小鸟游戏
基于java+Java awt+swing的愤怒的小鸟游戏设计与实现(毕业论文+程序源码) 大家好,今天给大家介绍基于java+Java awt+swing的愤怒的小鸟游戏设计与实现,文章末尾附有本毕 ...
【java毕业设计】基于java+swing+Eclipse的俄罗斯方块游戏GUI设计与实现（毕业论文+程序源码）——俄罗斯方块游戏
基于java+swing+Eclipse的俄罗斯方块游戏GUI设计与实现(毕业论文+程序源码) 大家好,今天给大家介绍基于java+swing+Eclipse的俄罗斯方块游戏GUI设计与实现,文章末尾 ...

开源微信小程序源码+小程序游戏代码附搭建框架教程

开源微信小程序源码+小程序游戏代码附搭建框架教程相关推荐

最新文章

热门文章