介紹

對(duì)於我對(duì)Hacktoberfest 的第三次貢獻(xiàn)，我發(fā)現(xiàn)了一個(gè)我從未想過(guò)會(huì)是我會(huì)貢獻(xiàn)的存儲(chǔ)庫(kù)，這個(gè)存儲(chǔ)庫(kù)特別以JavaScript 中的2D 遊戲開(kāi)發(fā)為中心，因?yàn)槲乙呀?jīng)掌握了JavaScript 的工作知識(shí)，潛水和探索程式碼庫(kù)不會(huì)成為問(wèn)題，因此我選擇了此儲(chǔ)存庫(kù)中的問(wèn)題之一來(lái)做出貢獻(xiàn)。

ZTM-探索

該儲(chǔ)存庫(kù)被命名為 ZTM-Quest

問(wèn)題

我要解決的問(wèn)題與向遊戲添加片尾字幕場(chǎng)景有關(guān)，該場(chǎng)景會(huì)從Github API 動(dòng)態(tài)獲取貢獻(xiàn)者的姓名，還會(huì)獲取資源片尾字幕並將其顯示在滾動(dòng)方式，類(lèi)似於現(xiàn)在普通2D 遊戲的方式。

要包含的其他功能有

• 加入觸發(fā)片尾場(chǎng)景和退出場(chǎng)景的按鈕
• 透過(guò)鍵盤(pán)提供退出/觸發(fā)製作人員名單的選項(xiàng)

卡普拉

整個(gè)程式使用了KAPLAY框架，這是一個(gè)可以在Javascript中使用來(lái)製作2D遊戲的框架

這背後的整個(gè)抽象思想是擁有可以相互互動(dòng)以觸發(fā)互動(dòng)的各種組件或角色。開(kāi)發(fā)人員可以在程式中提供的背景圖像在這裡被稱為精靈，它甚至可以是可以放置角色或組件並可以導(dǎo)致不同互動(dòng)的地圖

我發(fā)現(xiàn)大多數(shù) 2D 遊戲開(kāi)發(fā)都涉及在 2D 平面中對(duì)物件進(jìn)行幾何操作，並添加互動(dòng)和動(dòng)態(tài)調(diào)整大小的功能

所做的核心改變

我在這裡所做的核心更改如下

直覺(jué)

接下來(lái)的直覺(jué)是程式將有 3 個(gè)元件，一個(gè)背景，一個(gè)文字容器或文字本身，以及一個(gè)退出按鈕

我的第一次迭代更改涉及進(jìn)行這些更改，但後來(lái)我意識(shí)到在後臺(tái)也有一個(gè)精靈會(huì)更好，所以我做了以下更改

    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)
    ]);

可以看出，我還放置了一個(gè)覆蓋層，以使圖像比文字本身更不清晰

至於要顯示的文本，我創(chuàng)建了兩個(gè)函數(shù)來(lái)為我獲取數(shù)據(jù)，然後我可以將其放入 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")

}

我相信，每當(dāng)請(qǐng)求 API 獲取數(shù)據(jù)時(shí)，90% 的任務(wù)是轉(zhuǎn)換數(shù)據(jù)，以便開(kāi)發(fā)人員可以最佳地利用它，這就是我在這裡所做的。

我的回購(gòu)經(jīng)驗(yàn)

說(shuō)實(shí)話，這是我在不知道如何在JavaScript 中使用2D-GameDev 框架之前研究過(guò)的最有趣的問(wèn)題之一，這給了我急需的經(jīng)驗(yàn)，我很高興為此做出貢獻(xiàn)

事實(shí)上，我在為此做出貢獻(xiàn)時(shí)學(xué)到的其他事情之一是正確使用 git rebase 和 git checkout -B

這些指令確實(shí)為我節(jié)省了時(shí)間，

我經(jīng)常使用 git rebase 來(lái)使我的問(wèn)題分支與合併到上游主分支的更改同步，並避免衝突

當(dāng)我曾經(jīng)搞亂分支上的程式碼並想回到最新的工作提交時(shí)，我使用了 git checkout -B

我通常會(huì)做以下事情

    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)
    ]);

結(jié)論

這是我的第三次 Hacktoberfest 貢獻(xiàn)，我喜歡為開(kāi)源做出貢獻(xiàn)，這次我獲得的實(shí)踐經(jīng)驗(yàn)是無(wú)與倫比的

以上是Hacktoberfest 對(duì) ZTM-Quest 的貢獻(xiàn)的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！