Space Defender - bahagian menyediakan projek

Dalam catatan sebelumnya saya menunjukkan kepada anda cara menyediakan projek PixiJS dengan Vite dan TypeScript. Dalam siaran ini, kami akan mencipta bangunan permainan pertahanan angkasa yang ringkas di atas persediaan itu.

Untuk projek ini saya menganggap anda mempunyai pengetahuan asas tentang cara memprogram dalam TypeScript/JavaScript. Dan kerana kami memfokuskan pada PixiJS, saya tidak akan terlalu menumpukan pada aspek HTML/CSS.

Kod sumber terakhir boleh didapati dalam repositori GitHub saya dan jika anda ingin bermain permainan, anda boleh menemuinya di sini.

Menyediakan projek

Jika anda belum menyediakan projek PixiJS dengan Vite dan TypeScript lagi, saya syorkan anda membaca siaran saya sebelum ini terlebih dahulu di mana saya menerangkan cara untuk menyediakannya dan menjalankannya.

Mari kita sediakan fail index.html dengan cepat dengan kandungan yang kita perlukan untuk projek ini. Gantikan kandungan

elemen dengan yang berikut:

<div id="app">
    <div id="gameHud">
        <div>
            Lives: <span id="gameLives"></span>
        </div>
        <div>
            Level: <span id="gameLevel"></span>
        </div>
        <div>
            Score: <span id="gameScore"></span>
        </div>
    </div>
    <div id="game">

    </div>
</div>

Ini akan menjadi struktur permainan kami, kami mempunyai HUD (Heads Up Display) yang akan menunjukkan kehidupan, tahap dan skor pemain. Dan bekas permainan di mana kami akan membuat permainan. Dalam bahagian 4 kita akan mula menggunakan ini.

Seterusnya, kita perlu menggunakan beberapa CSS untuk ini supaya ia dipaparkan dengan baik pada skrin. Navigasi ke lembaran gaya yang dipanggil styles.css dalam folder src dan tambah kandungan berikut:

body {
    margin: 0;
    background-color: darkgrey;
}

#app {
    height: 100vh;
    width: 480px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#gameHud {
    display: flex;
    width: 100%;
    padding: 10px;
    background-color: #333;
    color: white;

    > div {
        flex: 1;
    }
}

Menyediakan skrin permainan

Hebat! Sekarang kita mempunyai struktur asas, mari mulakan dengan mencipta skrin permainan. Kita perlu mempunyai pembolehubah yang memegang elemen bekas permainan supaya permainan mengetahui tempat untuk memasukkan kanvas permainan ke dalam DOM.

(async () => {
    let gameContainer = document.getElementById("app");

    // ....
});

Selepas itu kami perlu mengemas kini saiz apl kami agar sepadan dengan saiz permainan yang kami mahukan, dalam kes kami, kami mahukan permainan yang lebar 480 dan tinggi 720. Jadi kita perlu mengemas kini panggilan app.init untuk memadankan saiz itu.

await app.init({
    width: 480,
    height: 720,
});

Dan kemudian ganti

document.body.appendChild(app.canvas);

dengan

gameContainer.appendChild(app.canvas);

Kami kini mempunyai skrin permainan bersaiz 480x720 piksel dan dipaparkan di tengah-tengah skrin.

Dalam bahagian seterusnya kita akan mula mencipta kapal pemain dan membuatnya bergerak dan menembak.

---

Persediaan PixiJS dengan Vite dan TypeScript

En. Linxed ・ 20 Apr

#webdev #javascript #pemula #tutorial

Mencapai lebih banyak lagi dengan "Cult of Done"

En. Linxed ・ 18 Feb

#produktiviti #pemula #bincang #motivasi

---

Jangan lupa untuk mendaftar ke surat berita saya untuk menjadi orang pertama yang mengetahui tentang tutorial yang serupa dengan ini.

Atas ialah kandungan terperinci Space Defender - bahagian menyediakan projek. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!