介绍
对于我对 Hacktoberfest 的第三次贡献，我发现了一个我从未想过会是我会贡献的存储库，这个存储库特别以 JavaScript 中的 2D 游戏开发为中心，因为我已经掌握了 JavaScript 的工作知识，潜水和探索代码库不会成为问题，因此我选择了此存储库中的问题之一来做出贡献。
ZTM-探索
该存储库被命名为 ZTM-Quest
问题
我要解决的问题与向游戏添加片尾字幕场景有关，该场景会从 Github API 动态获取贡献者的姓名，还会获取资源片尾字幕并将其显示在滚动方式，类似于现在普通 2D 游戏的方式。
要包含的其他功能有
- 添加触发片尾场景和退出场景的按钮
- 通过键盘提供退出/触发制作人员名单的选项
卡普拉
整个程序使用了KAPLAY框架，这是一个可以在Javascript中使用来制作2D游戏的框架
这背后的整个抽象思想是拥有可以相互交互以触发交互的各种组件或角色。开发人员可以在程序中提供的背景图像在这里被称为精灵，它甚至可以是可以放置角色或组件并可以导致不同交互的地图
我发现大多数 2D 游戏开发都涉及在 2D 平面中对对象进行几何操作，并添加交互和动态调整大小的功能
所做的核心改变
我在这里所做的核心更改如下
直觉
接下来的直觉是该程序将有 3 个组件，一个背景，一个文本容器或文本本身，以及一个退出按钮
我的第一次迭代更改涉及进行这些更改，但后来我意识到在后台也有一个精灵会更好，所以我做了以下更改
const background = k.add([
k.sprite("backgroundImage", { width: k.width(), height: k.height() }),
k.pos(0, 0),
k.opacity(0.2),
k.scale(1),
k.z(60),
k.fixed()
]);
const overlay = k.add([
k.rect(k.width(), k.height()),
k.pos(0, 0),
k.color(0, 0, 0), // 40% transparent black
k.z(50),
k.fixed()
]);
// Add the credit text
const center = k.vec2((k.canvas.width / 2), k.canvas.height / 2);
const text = k.add([
k.text(creditText, {
size: 15 / camScale,
width: k.width() * 0.9 / camScale,
lineSpacing: 15 / camScale,
align: "center"
}),
k.pos(k.width() / 2, k.height()),
k.anchor("top"),
k.color(255, 255, 255),
k.z(101),
k.scale(camScale)
]);
const crossButton = k.add([
k.rect(65, 35),
k.color(255, 0, 0),
k.anchor('topright'),
k.z(101),
k.area(),
k.scale(1),
]);
const exitText = k.add([
k.text("Exit", { size: 26 / camScale }),
k.color(255, 255, 255),
k.anchor("topright"),
k.z(102),
k.scale(camScale)
]);
登录后复制
登录后复制
可以看出，我还放置了一个覆盖层，以使图像比文本本身更不清晰
至于要显示的文本，我创建了两个函数来为我获取数据，然后我可以将其放入 CreditText 字段
export async function getAssets(){
const fileSHA = await fetch("https://api.github.com/repos/zero-to-mastery/ZTM-Quest/contents/asset_credits.md")
const data = await fileSHA.json()
const fileContents = atob(data.content)
return fileContents.split("\n").filter(content=>content.trim()!=='').join("\n")
}
export async function getContributors(){
const contributors = await fetch("https://api.github.com/repos/zero-to-mastery/ZTM-Quest/contributors")
const data = await contributors.json()
return data.map((person)=>{
return person.login
}).join("\n")
}
登录后复制
我相信，每当请求 API 获取数据时，90% 的任务是转换数据，以便开发人员可以最佳地利用它，这就是我在这里所做的。
我的回购经验
说实话，这是我在不知道如何在 JavaScript 中使用 2D-GameDev 框架之前研究过的最有趣的问题之一，这给了我急需的经验，我很高兴为此做出贡献
事实上，我在为此做出贡献时学到的其他事情之一是正确使用 git rebase 和 git checkout -B
这些命令确实为我节省了时间，
我经常使用 git rebase 来使我的问题分支与合并到上游主分支的更改同步，并避免冲突
当我曾经搞乱分支上的代码并想返回到最新的工作提交时，我使用了 git checkout -B
我通常会做以下事情
const background = k.add([
k.sprite("backgroundImage", { width: k.width(), height: k.height() }),
k.pos(0, 0),
k.opacity(0.2),
k.scale(1),
k.z(60),
k.fixed()
]);
const overlay = k.add([
k.rect(k.width(), k.height()),
k.pos(0, 0),
k.color(0, 0, 0), // 40% transparent black
k.z(50),
k.fixed()
]);
// Add the credit text
const center = k.vec2((k.canvas.width / 2), k.canvas.height / 2);
const text = k.add([
k.text(creditText, {
size: 15 / camScale,
width: k.width() * 0.9 / camScale,
lineSpacing: 15 / camScale,
align: "center"
}),
k.pos(k.width() / 2, k.height()),
k.anchor("top"),
k.color(255, 255, 255),
k.z(101),
k.scale(camScale)
]);
const crossButton = k.add([
k.rect(65, 35),
k.color(255, 0, 0),
k.anchor('topright'),
k.z(101),
k.area(),
k.scale(1),
]);
const exitText = k.add([
k.text("Exit", { size: 26 / camScale }),
k.color(255, 255, 255),
k.anchor("topright"),
k.z(102),
k.scale(camScale)
]);
登录后复制
登录后复制
结论
这是我的第三次 Hacktoberfest 贡献，我喜欢为开源做出贡献，这次我获得的实践经验是无与伦比的
以上是Hacktoberfest 对 ZTM-Quest 的贡献的详细内容。更多信息请关注PHP中文网其他相关文章！
