Space Defender - bahagian pemain

Dalam bahagian sebelumnya kami mencipta struktur asas untuk permainan kami. Dalam bahagian ini kita akan mula mencipta kapal pemain dan membuatnya bergerak dan menembak.

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

Menyediakan papan kekunci

Sebelum kami mula menyediakan pemain kami, kami memerlukan cara untuk mengendalikan acara papan kekunci. Untuk ini, saya telah menggunakan pengawal papan kekunci yang terdapat pada tutorial PixiJS daripada kittykatattack dan menyesuaikannya dengan TypeScript.
Anda boleh menemuinya di repositori GitHub saya.

Kami tidak akan mendalami cara ia berfungsi, kerana itu di luar skop projek ini, tetapi apa yang dilakukannya ialah mendengar acara keydown dan keyup serta menetapkan nilai boolean untuk setiap kekunci yang ditekan atau dilepaskan. Dengan cara ini kami boleh menyemak dalam gelung permainan kami jika kekunci ditekan atau dilepaskan dan mengemas kini tingkah laku pemain kami dengan sewajarnya.

Untuk menggunakan pengawal papan kekunci, muat turun fail keyboard.ts daripada komit di atas dan letakkan dalam folder src/helpers projek anda.

Mencipta pemain

Sekarang kami mempunyai cara untuk mengendalikan acara papan kekunci, kami boleh mula mencipta pemain kami. Dalam tutorial akan datang, kami akan membuat permainan yang lebih kompleks dan membahagikan projek kami dalam berbilang fail. Buat masa ini, kami akan berpegang pada satu fail.

Sejurus selepas anda telah memulakan aplikasi PixiJS anda menunggu app.init({ dalam fail main.ts, tambah kod berikut:

const Player = new Graphics();

Player
    .poly([
        0, 0,
        50, 0,
        25, -25,
    ])
    .fill(0x66CCFF);

Player.x = app.screen.width / 2 - Player.width / 2;
Player.y = app.screen.height - 50;

Apa yang akan dilakukan ialah mencipta objek Grafik baharu, lukis segitiga dengan kaedah poli, isi dengan warna biru muda dan letakkannya di bahagian bawah skrin.

Jika anda memulakan permainan anda sekarang, anda akan melihat segitiga kecil di bahagian bawah skrin. Tetapi kami mahu dapat menggerakkannya. Untuk melakukan ini, kami perlu mengemas kini kedudukan pemain berdasarkan input papan kekunci.

Menggerakkan pemain

Mula-mula kita perlu menangkap input papan kekunci. Tambahkan kod berikut sejurus selepas tempat kami mencipta pemain kami:

let playerSpeedX = 0;

const arrowLeftHandler = KeyHandler(
    "ArrowLeft",
    () => playerSpeedX = -500,
    () => {
        // To prevent player from stopping moving if the other arrow key is pressed
        if(!arrowRightHandler.isDown) {
            playerSpeedX = 0;
        }
    }
);

const arrowRightHandler = KeyHandler(
    "ArrowRight",
    () => playerSpeedX = 500,
    () => {
        // To prevent player from stopping moving if the other arrow key is pressed
        if(!arrowLeftHandler.isDown) {
            playerSpeedX = 0;
        }
    }
);

Apa yang dilakukan oleh kod ini ialah mencipta dua KeyHandler, satu untuk kekunci anak panah kiri dan satu untuk kekunci anak panah kanan. Apabila kekunci ditekan, kelajuan pemain pada paksi-x ditetapkan kepada -500 atau 500. Apabila kekunci dilepaskan, kelajuan pemain ditetapkan kepada 0. Dengan cara ini kita boleh menggerakkan pemain ke kiri dan kanan.

Ini dengan sendirinya tidak akan menggerakkan pemain, kita perlu mengemas kini kedudukan pemain dalam gelung permainan. Gantikan panggilan app.ticker.add dengan kod berikut:

app.ticker.add((ticker) => {
    const delta = ticker.deltaTime / 100;
    Player.x += playerSpeedX * delta;
});

Jika anda tidak mempunyai app.ticker.add panggilan dalam kod anda, anda boleh menambahnya sejurus selepas tempat anda mentakrifkan KeyHandlers.

Kini jika anda memulakan permainan anda, anda akan dapat menggerakkan pemain ke kiri dan kanan. Hebat! Jom buat penggambaran.

Menembak

Ada tiga perkara yang perlu kita fikirkan apabila kita ingin membuat pemain menembak:

1. Apabila pemain menekan bar ruang, kami mahu mencipta peluru baharu.
2. Kami mahu mengemas kini kedudukan peluru dalam gelung permainan.
3. Kami mahu mengeluarkan peluru apabila ia keluar dari sempadan.

Jadi, kami memerlukan kaedah yang mencipta peluru, menambahkannya pada tatasusunan peluru, mengemas kini kedudukan peluru melalui gelung permainan dan kemudian mengalih keluarnya jika ia di luar batas.

Mari kita mulakan dengan kaedah yang mencipta peluru, tambah kod berikut di bahagian bawah fail main.ts anda:

let bulletTemplate: PIXI.Graphics | undefined = undefined;
function createBullet(source: PIXI.Graphics) {
    if(!bulletTemplate) {
        bulletTemplate = new Graphics();
        bulletTemplate
            .circle(0, 0, 5)
            .fill(0xFFCC66);
    }

    const bullet = bulletTemplate.clone();
    bullet.x = source.x + 25;
    bullet.y = source.y - 20;
    return bullet;
}

Mencipta objek Grafik baharu setiap kali kami ingin mencipta peluru adalah mahal, jadi kami mencipta peluru templat yang kami klon setiap kali kami ingin mencipta peluru baharu. Pengklonan lebih murah daripada mencipta objek baharu setiap kali.

Kami kemudian menggunakan sumber (yang menembak peluru) untuk meletakkan peluru di tempat yang betul, dan kemudian mengembalikan objek grafik.

Baiklah, jadi pada masa ini, kaedah ini tidak digunakan dan tiada apa yang dilukis ke skrin. Mari kita betulkan.

Kami akan membuatnya supaya pemain boleh menembak dengan menekan bar ruang, kami akan menggunakan KeyHandler untuk ini sekali lagi. Untuk memberitahu KeyHandler menggunakan bar ruang, kami perlu memberikannya " " sebagai kunci.

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

KeyHandler(
    " ",
    () => {
        const bullet = createBullet(Player);
        bullets.push(bullet);
        app.stage.addChild(bullet);
    }
);

Kod ini akan mencipta peluru baharu apabila bar ruang ditekan, menambahnya pada tatasusunan peluru dan menambahnya pada pentas, supaya kita dapat melihatnya.

Kami belum mempunyai tatasusunan peluru, jadi mari tambahkan itu sejurus selepas tempat kami menentukan objek Pemain:

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

Kini jika anda memulakan permainan anda, anda akan dapat menggerakkan pemain ke kiri dan ke kanan serta menembak peluru. Tetapi peluru akan kekal pada skrin selama-lamanya. Mari kita betulkan.
Dalam gameloop kami akan mengemas kini kedudukan peluru dan mengeluarkannya jika ia keluar dari had. Tambahkan kod berikut pada gelung permainan anda, betul-betul di bawah tempat kami mengemas kini kedudukan pemain:

for(let i = 0; i 


<p>This part of the code will loop over all the bullets, update their position by moving them up 10 pixels and check if they are out of bounds. If they are, we remove them from the stage and the bullets array.</p>

<p>And that's it! You now have a player that can move left and right and shoot bullets. In the next part we'll create enemies and shoot them down!</p>

<hr>


<div class="ltag__link">
  
    <div class="ltag__link__pic">
      <img src="https://img.php.cn/upload/article/000/000/000/172152276283279.png" alt="Space Defender - bahagian pemain" loading="lazy">
    </div>
  
  
    <div class="ltag__link__content">
      <h2>PixiJS Setup with Vite and TypeScript</h2>
      <h3>Mr. Linxed ・ Apr 20</h3>
      <div class="ltag__link__taglist">
        #webdev
        #javascript
        #beginners
        #tutorial
      </div>
    </div>
  
</div>



<div class="ltag__link">
  
    <div class="ltag__link__pic">
      <img src="https://img.php.cn/upload/article/000/000/000/172152276283279.png" alt="Space Defender - bahagian pemain" loading="lazy">
    </div>
  
  
    <div class="ltag__link__content">
      <h2>Accomplish more with the "Cult of Done"</h2>
      <h3>Mr. Linxed ・ Feb 18</h3>
      <div class="ltag__link__taglist">
        #productivity
        #beginners
        #discuss
        #motivation
      </div>
    </div>
  
</div>




<hr>

<p>Don't forget to sign up to my newsletter to be the first to know about tutorials similar to these.</p>


          

            
  

            
        

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