對於我對Hacktoberfest 的第三次貢獻，我發現了一個我從未想過會是我會貢獻的存儲庫，這個存儲庫特別以JavaScript 中的2D 遊戲開發為中心，因為我已經掌握了JavaScript 的工作知識，潛水和探索程式碼庫不會成為問題，因此我選擇了此儲存庫中的問題之一來做出貢獻。
該儲存庫被命名為 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中文網其他相關文章！
