pengenalan

Untuk sumbangan ketiga saya kepada Hacktoberfest, saya menjumpai repositori yang tidak pernah saya fikir akan menjadi repositori yang akan saya sumbangkan, repositori ini tertumpu terutamanya pada 2D-Game Dev dalam JavaScript kerana saya sudah mempunyai pengetahuan tentang JavaScript, menyelam dan meneroka pangkalan kod tidak akan menjadi masalah jadi saya mengambil salah satu isu dalam repositori ini untuk disumbangkan.

ZTM-Quest

Repositori itu dinamakan ZTM-Quest

Isu

Isu yang saya ambil untuk selesaikan adalah berkaitan dengan menambahkan adegan kredit akhir pada permainan yang akan mengambil secara dinamik nama penyumbang daripada API Github dan juga akan mengambil kredit aset dan memaparkannya dalam cara menatal, sesuatu yang serupa dengan permainan 2D biasa pada masa kini.

Ciri lanjut yang perlu disertakan ialah

• Menambah butang untuk mencetuskan adegan kredit dan untuk keluar dari adegan
• Menyediakan pilihan melalui papan kekunci untuk keluar/mencetuskan adegan kredit

KAPLAY

Keseluruhan program menggunakan rangka kerja KAPLAY, iaitu rangka kerja yang boleh digunakan dalam Javascript untuk membuat permainan 2D

Keseluruhan idea abstrak di sebalik ini adalah untuk mempunyai pelbagai komponen atau watak yang boleh berinteraksi antara satu sama lain untuk mencetuskan interaksi. Imej latar belakang yang boleh disediakan oleh pembangun dalam program ini dikenali sebagai sprite di sini, malah ia boleh menjadi peta tempat watak atau komponen boleh diletakkan dan boleh membawa kepada interaksi yang berbeza

Apa yang saya dapati ialah kebanyakan 2D-Game Dev melibatkan memanipulasi objek secara geometri dalam satah 2D dengan ciri tambahan interaksi dan saiz semula dinamik

Perubahan Teras Dibuat

Perubahan teras yang saya buat di sini adalah seperti berikut

Intuisi

Gerakan yang mengikutinya ialah program ini akan mempunyai 3 komponen, latar belakang, bekas teks atau teks itu sendiri dan butang keluar

Perubahan lelaran pertama saya melibatkan pembuatannya tetapi kemudian saya sedar adalah lebih baik untuk mempunyai sprite di latar belakang juga, jadi saya membuat perubahan berikut

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

seperti yang dapat dilihat, saya meletakkan tindanan juga untuk menjadikan imej kurang fokus daripada teks itu sendiri

Bagi teks yang akan dipaparkan, saya membuat dua fungsi yang akan mengambil data untuk saya, yang kemudiannya boleh saya masukkan ke dalam medan 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")

}

Saya percaya bahawa setiap kali API diminta untuk data, 90% tugasnya adalah untuk mengubah data supaya pembangun dapat menggunakannya secara optimum, itulah yang saya lakukan di sini.

Pengalaman Saya Dengan Repo

Sejujurnya, ini adalah salah satu isu paling menarik yang telah saya usahakan sebelum saya tidak pernah tahu cara bekerja dengan rangka kerja 2D-GameDev dalam JavaScript, ini memberi saya pengalaman yang sangat diperlukan dan saya seronok menyumbang kepada ini

Malah salah satu perkara lain yang saya pelajari semasa menyumbang kepada ini ialah penggunaan git rebase dan git checkout -B yang betul

Arahan ini benar-benar menyelamatkan saya,

Saya kerap menggunakan git rebase untuk menjadikan cabang isu saya selari dengan perubahan yang digabungkan ke dalam cawangan utama hulu dan untuk mengelakkan konflik juga

Saya menggunakan git checkout -B apabila saya pernah mengacaukan kod pada cawangan dan mahu kembali kepada komit kerja terkini

Saya biasanya melakukan perkara berikut

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

Kesimpulan

Ini adalah sumbangan Hacktoberfest saya yang ke-3 dan saya suka menyumbang kepada Open-Source, jumlah pengalaman hands-on yang saya peroleh kali ini tiada tandingan

Atas ialah kandungan terperinci Sumbangan Hacktoberfest kepada ZTM-Quest. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!