Space Defender - memisahkan musuh

Di bahagian terakhir kami mencipta kapal pemain dan membuatnya bergerak. Dalam bahagian ini kita akan mencipta musuh dan membuat mereka bergerak. Dan kemudian kami akan menembak mereka!

Mencipta musuh

Kami akan melakukan sesuatu yang serupa seperti semasa kami mencipta peluru. Kami akan mencipta musuh templat yang akan kami klon setiap kali kami ingin mencipta musuh baharu. Kita juga perlu menjejaki musuh melalui tatasusunan kerana boleh ada lebih daripada satu pada masa yang sama.

Tetapi pertama, kami akan mencipta kaedah yang mencipta musuh. Tambahkan kod berikut selepas kaedah createBullet:

let enemyTemplate: PIXI.Graphics | undefined = undefined;
function createEnemy() {
    if(!enemyTemplate) {
        enemyTemplate = new Graphics();
        enemyTemplate
            .poly([
                0, 0,
                50, 0,
                25, 25,
            ])
            .fill(0xFF6666);
    }

    const enemy = enemyTemplate.clone();
    enemy.x = 25 + (Math.random() * 480) - 50;
    enemy.y = -50;

    return enemy;
}

Seperti yang anda lihat, ia hampir serupa dengan kaedah createBullet. Kami mencipta musuh templat yang kami klon setiap kali kami ingin mencipta musuh baharu. Kami kemudian meletakkan musuh pada kedudukan x rawak di bahagian atas skrin. Musuh mempunyai bentuk yang sama seperti kapal pemain, tetapi ia berwarna merah dan terbalik.

Kami menentukan lokasi pembiakan musuh dengan menetapkan sifat x dan y. Sifat x ditetapkan kepada nilai rawak antara 25 dan 480 - 50, supaya musuh sentiasa berada dalam skrin permainan. Sifat y ditetapkan kepada -50, supaya musuh berada di luar skrin, dan akan bergerak ke dalamnya.

Seterusnya, kita perlu memanggil kaedah ini untuk mencipta musuh baharu setiap beberapa saat.

Melahirkan musuh

Kami akan menggunakan kaedah setInterval untuk ini. Tambahkan kod berikut sejurus selepas tempat kami menentukan tatasusunan peluru:

const enemies: PIXI.Graphics[] = [];

const enemySpawnInterval = 2500;
function spawnEnemy() {
    if(!document.hasFocus()) {
        return;
    }
    const enemy = createEnemy();
    enemies.push(enemy);
    app.stage.addChild(enemy);
}

setInterval(spawnEnemy, enemySpawnInterval);
spawnEnemy();

Kami mencipta susunan baharu yang dipanggil musuh untuk menjejaki semua musuh. Kami kemudian mencipta pembolehubah baharu yang dipanggil enemySpawnInterval yang menentukan kekerapan kami mahu melahirkan musuh baharu. Kami kemudian mencipta kaedah baharu yang dipanggil spawnEnemy yang mencipta musuh baharu dan menambahkannya pada susunan musuh dan pentas. Kami kemudian memanggil kaedah ini setiap milisaat enemySpawnInterval menggunakan kaedah setInterval.

Sejuk, kini kami mempunyai musuh yang bertelur di bahagian atas skrin setiap 2.5 saat. Tetapi mereka belum bergerak lagi, dan kami tidak melihatnya kerana mereka berada di luar skrin. Mari kita betulkan.

Menggerakkan musuh

Kami perlu mengemas kini kedudukan musuh dalam gelung permainan. Tambahkan kod berikut pada gelung permainan anda, betul-betul di bawah tempat kami mengemas kini kedudukan peluru:

for(let i = 0; i < enemies.length; i++) {
    const enemy = enemies[i];
    enemy.y += 2.5;

    if(enemy.y > app.screen.height + 50) {
        app.stage.removeChild(enemy);
        enemies.splice(i, 1);
    }
}

Bahagian kod ini akan melingkari semua musuh, mengemas kini kedudukan mereka dengan menurunkannya 2.5 piksel dan menyemak sama ada ia berada di luar sempadan. Jika ya, kami mengeluarkan mereka dari pentas dan susunan musuh.

Bagus! jika anda menjalankan permainan anda sekarang, anda akan melihat musuh bertelur di bahagian atas skrin dan bergerak ke bawah.

Kini tiba masanya untuk menembak jatuh mereka!

Menembak musuh

Tambahkan kod berikut pada gelung permainan anda, betul-betul di bawah tempat kami mengemas kini kedudukan musuh:

for(let i = 0; i < bullets.length; i++) {
    const bullet = bullets[i];
    for(let j = 0; j < enemies.length; j++) {
        const enemy = enemies[j];
        if(
            bullet.x > enemy.x &&
            bullet.x < enemy.x + 50 &&
            bullet.y > enemy.y &&
            bullet.y < enemy.y + 25
        ) {
            app.stage.removeChild(bullet);
            app.stage.removeChild(enemy);
            bullets.splice(i, 1);
            enemies.splice(j, 1);
        }
    }
}

Bahagian kod ini akan melingkar pada semua peluru dan semua musuh dan memeriksa sama ada peluru mengenai musuh. Jika ia berlaku, kami mengeluarkan kedua-dua peluru dan musuh dari pentas dan susunan masing-masing.

Anda boleh mengoptimumkan kod ini dengan keluar dari gelung dalaman apabila peluru mengenai musuh, tetapi buat masa ini, ini tidak mengapa. Anda juga boleh menggabungkan gelung kemas kini kedudukan bullet dengan gelung semak bullet hit, tetapi saya suka mengasingkannya untuk kejelasan tutorial ini.

Dan itu sahaja! Anda kini mempunyai permainan di mana anda boleh bergerak ke kiri dan kanan, menembak peluru, dan menembak jatuh musuh. Dalam bahagian seterusnya, kami akan menambah beberapa elemen HUD pada permainan dan menjejaki markah, tahap dan kehidupan pemain.

---

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 - memisahkan musuh. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!