Space Defender - bahagian Permainan States

Dalam siaran sebelumnya, kami telah menggunakan HUD dan kini permainan kami pada dasarnya telah selesai, tetapi ia kehilangan beberapa perkara. Kita perlu menambah permainan di atas skrin dengan cara untuk memulakan semula permainan. Kami juga ingin menambah skrin semasa anda baru memulakan permainan, bukannya hanya memulakan permainan dengan segera.

Negeri Permainan

Kami akan menambah beberapa keadaan permainan pada permainan kami. Kami akan mempunyai gameState enum yang akan memegang keadaan permainan yang berbeza. Kami juga akan mempunyai pembolehubah yang mengekalkan keadaan semasa permainan.

Tambahkan kod berikut tepat pada permulaan fail main.ts anda:

enum gameStates {
    "PLAYING",
    "PAUSED",
    "GAME_OVER"
}
let gameState = gameStates.PAUSED;

Kod ini mencipta enum yang dipanggil gameStates yang memegang keadaan permainan yang berbeza. Kami kemudian mencipta pembolehubah yang dipanggil gameState yang memegang keadaan semasa permainan. Kami menetapkan keadaan awal kepada DIJADA.

Sebelum kami melakukan apa-apa dengan keadaan ini, kami memerlukan fungsi tetapan semula. Fungsi ini akan dipanggil sejurus sebelum kita memulakan permainan. Tambahkan kod berikut pada bahagian bawah fail main.ts anda:

function resetGame() {
    lives = 3;
    level = 1;
    score = 0;
    setHudValue("gameLives", lives);
    setHudValue("gameLevel", level);
    setHudValue("gameScore", score);
    Player.x = app.screen.width / 2 - Player.width / 2;
    Player.y = app.screen.height - 50;
    bullets.forEach(bullet => app.stage.removeChild(bullet));
    enemies.forEach(enemy => app.stage.removeChild(enemy));
    bullets.length = 0;
    enemies.length = 0;
    setEnemySpawnInterval();
    spawnEnemy();
}

Ini akan menetapkan semua nilai kepada nilai permulaan awalnya, mengosongkan peluru dan musuh dari pentas dan tatasusunan, menetapkan semula kedudukan pemain dan menetapkan selang peneluran musuh. Kemudian mulakan permainan dengan melahirkan musuh.

Sekarang sudah ditetapkan, mari tambahkan cara untuk memulakan permainan.

Memulakan permainan

Kami akan menambah KeyHandler baharu untuk itu. Tambah kod berikut sejurus selepas tempat kami menentukan KeyHandler untuk kekunci anak panah kiri dan kanan:

KeyHandler(
    "Enter",
    () => {
        if(gameState !== gameStates.PLAYING) {
            if(gameState === gameStates.GAME_OVER) {
                resetGame();
            }
            gameState = gameStates.PLAYING;
            togglePauseText();
        }
    }
);

Kod ini akan memulakan permainan apabila pemain menekan kekunci Enter. Jika permainan tidak berada dalam keadaan BERMAIN, ia akan menetapkan keadaan permainan kepada BERMAIN. Jika permainan berada dalam keadaan GAME_OVER, ia akan menetapkan semula permainan dan kemudian menetapkan keadaan permainan kepada MAIN.

Tetapi pemain tidak akan mengetahui perkara ini, jadi kami memerlukan beberapa teks untuk memberitahu pemain apa yang perlu dilakukan. Tambahkan kod berikut sejurus selepas tempat kami mentakrifkan KeyHandlers

// A simple text style, 24px white text
const textsStyle = {
    fontSize: 24,
    fill: 0xFFFFFF
};

let startGameText = new PIXI.Text({
    text: 'Press enter to start the game',
    style: textsStyle
});

startGameText.y = 250;

function togglePauseText() {
    if(gameState === gameStates.PAUSED || gameState === gameStates.GAME_OVER) {
        // Since the text can change, we need to reposition it.
        startGameText.x = app.screen.width / 2 - startGameText.width / 2;
        app.stage.addChild(startGameText);
    } else {
        app.stage.removeChild(startGameText);
    }
}
togglePauseText();

Kod ini mencipta objek teks baharu yang menyatakan "Tekan enter untuk memulakan permainan" dan meletakkannya di tengah-tengah skrin. Ia kemudian mencipta fungsi yang dipanggil togglePauseText yang akan menunjukkan atau menyembunyikan teks berdasarkan keadaan permainan semasa. Ia kemudian memanggil fungsi ini untuk menunjukkan teks apabila permainan dijeda atau tamat.

Sekarang, kami juga ingin menjeda permainan.

Menjeda permainan

Tambahkan kod berikut sejurus selepas tempat kami menentukan KeyHandler untuk kekunci anak panah kiri dan kanan:

KeyHandler(
    "Escape",
    () => {
        if(gameState !== gameStates.PAUSED) {
            gameState = gameStates.PAUSED;
            startGameText.text = 'Press enter to resume the game';
            togglePauseText();
        }
    }
);

Dalam kod ini kami akan menetapkan keadaan permainan kepada DIJADA apabila pemain menekan kekunci Escape. Kami juga akan menggunakan semula objek startGameText dan menetapkan teks kepada "Tekan enter untuk menyambung semula permainan".

Menggunakan keadaan permainan

Bagus, sekarang kita boleh bertukar-tukar antara keadaan MAIN dan DIJEDA, mari kita gunakan keadaan ini dan biarkan permainan bertindak sewajarnya.

Jika kami tidak berada dalam keadaan BERMAIN, kami tidak mahu menetapkan PlayerSpeed ​​apabila pemain menekan kekunci anak panah kiri atau kanan. Tambahkan kod berikut ke dalam KeyHandlers di mana kami menetapkan playerSpeedX kepada 500 atau -500 untuk kekunci anak panah kiri dan kanan:

if (gameState !== gameStates.PLAYING) {
    return;
}

Juga tambah kod di atas ke dalam pengendali untuk bar ruang KeyHandler, supaya pemain tidak boleh menembak apabila permainan dijeda atau tamat.

Seterusnya, kemas kini pernyataan if dalam fungsi spawnEnemy untuk kelihatan seperti ini:

if(!document.hasFocus() || gameState !== gameStates.PLAYING) {
    return;
}

Dan akhirnya, keseluruhan gelung permainan tidak perlu menyala jika kita dijeda, tambahkan kod berikut tepat pada permulaan gelung permainan:

if(gameState !== gameStates.PLAYING) {
    return;
}

Tamat Permainan

Sekarang kita mempunyai cara untuk memulakan dan menjeda permainan, mari tambahkan permainan di atas skrin.

Sekarang kami mempunyai console.log("Game Over"), kami mahu menetapkan keadaan permainan kepada GAME_OVER dan menunjukkan permainan atas teks. Gantikan console.log dengan kod berikut:

gameState = gameStates.GAME_OVER;
startGameText.text = 'Press enter to restart the game';
scoreText.text = `Score: ${score}`;
scoreText.x = app.screen.width / 2 - scoreText.width / 2;
app.stage.addChild(gameOverText);
togglePauseText();
app.stage.addChild(scoreText);

Kod ini menggunakan dua lagi objek teks yang belum kami buat, mari lakukannya.

Sejurus selepas kami mencipta objek startGameText, tambahkan kod berikut:

let gameOverText = new PIXI.Text({
    text: 'GAME OVER',
    style: textsStyle
});

gameOverText.x = app.screen.width / 2 - gameOverText.width / 2;
gameOverText.y = 200;

let scoreText = new PIXI.Text({
    text: 'Score: 0',
    style: textsStyle
});

scoreText.y = 300;

Sekarang, kita sepatutnya boleh bermain permainan, jeda dan mulakan semula apabila kita kalah.

Kesimpulan

Dan itu sahaja! Anda kini boleh bermain permainan itu, menjedanya dan memulakannya semula apabila anda kalah.

Saya sedar bahawa bahagian terakhir ini mungkin agak menggembirakan, tetapi saya harap anda berjaya mengikuti dan memahami segala-galanya, jangan lupa anda sentiasa boleh menyemak kod sumber penuh. Jika anda mempunyai sebarang soalan atau maklum balas, sila hubungi saya di X atau tinggalkan komen di bawah

---

Dan ini adalah bahagian akhir siri kecil ini, saya harap anda menikmatinya dan mempelajari sesuatu yang baharu. Satu perkara kecil yang saya ingin nyatakan semasa meninggalkan anda dengan ini, ialah ini adalah permainan yang sangat asas, dan terdapat banyak cara untuk memperbaikinya. Anda boleh menambah lebih banyak musuh, peningkatan kuasa, tahap yang berbeza dan sebagainya. Saya menggalakkan anda untuk mencuba dan mencuba perkara baharu, begitulah cara anda belajar dan berkembang sebagai pembangun.

Selain itu, cara permainan ini distrukturkan bukanlah cara terbaik untuk menstruktur permainan, tetapi untuk tujuan tutorial ini, saya ingin memastikannya ringkas dan dalam satu fail. Dalam tutorial akan datang, saya mungkin menunjukkan kepada anda cara menstruktur permainan dengan cara yang lebih berskala.

Terima kasih kerana membaca sepanjang tutorial ini!

---

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