太空衛士 - 部分玩家-js教程-PHP中文網

在上一部分中，我們創建了遊戲的基本結構。在這一部分中，我們將開始創建玩家的飛船並使其移動和射擊。

最終的原始碼可以在我的 GitHub 儲存庫中找到
如果你想玩這個遊戲，你可以在這裡找到它

設定鍵盤

在開始設定播放器之前，我們需要一種處理鍵盤事件的方法。為此，我使用了 kittykatattack 的 PixiJS 教程中找到的鍵盤控制器，並將其改編為 TypeScript。
您可以在我的 GitHub 存儲庫中找到它。

我們不會深入探討它的工作原理，因為這超出了本項目的範圍，但它的作用是監聽 keydown 和 keyup 事件，並為每個按下或按下的鍵設置一個布爾值。釋放。這樣我們就可以檢查遊戲循環中是否按下或放開某個鍵，並相應地更新玩家的行為。

要使用鍵盤控制器，請從上面的提交下載keyboard.ts 檔案並將其放在專案的 src/helpers 資料夾中。

建立播放器

現在我們有了處理鍵盤事件的方法，我們可以開始建立播放器了。在未來的教程中，我們將製作一個更複雜的遊戲，並將我們的專案分成多個檔案。現在，我們將堅持使用一個文件。

在 main.ts 檔案中初始化 PixiJS 應用程式之後等待 app.init({ ，加入以下程式碼：

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;

登入後複製

這將建立一個新的 Graphics 對象，使用 poly 方法繪製一個三角形，用淺藍色填充它並將其放置在螢幕底部。

如果您現在開始遊戲，您會在螢幕底部看到一個小三角形。但我們希望能夠移動它。為此，我們需要根據鍵盤輸入更新玩家的位置。

移動播放器

首先我們需要捕捉鍵盤輸入。在我們建立播放器的位置之後加入以下程式碼：

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

登入後複製

這段程式碼的作用是建立兩個 KeyHandler，一個用於左箭頭鍵，一個用於右箭頭鍵。當按下按鍵時，玩家在 x 軸上的速度設定為 -500 或 500。當放開按鍵時，玩家的速度設定為 0。這樣我們就可以左右移動玩家。

這本身不會移動玩家，我們需要更新玩家在遊戲循環中的位置。將 app.ticker.add 呼叫替換為以下程式碼：

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

登入後複製

如果您的程式碼中沒有 app.ticker.add 調用，您可以將其新增至定義 KeyHandlers 的位置之後。

現在，如果您開始遊戲，您將能夠左右移動玩家。偉大的！讓我們來拍攝吧。

射擊

當我們想讓玩家射擊時，我們需要考慮三件事：

當玩家按下空白鍵時，我們想要建立一個新的子彈。
我們想要更新子彈在遊戲循環中的位置。
我們想在子彈出界時將其移除。

所以我們需要一個方法來創建子彈，將其添加到子彈數組中，透過遊戲循環更新子彈位置，然後在超出範圍時將其刪除。

讓我們從建立項目符號的方法開始，在 main.ts 檔案的底部加入以下程式碼：

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;
}

登入後複製

每次我們想要建立項目符號時建立一個新的 Graphics 物件是昂貴的，因此我們建立一個範本項目符號，每次我們想要建立新項目符號時都會複製它。克隆比每次創建一個新物件更便宜。

然後我們使用來源（射出子彈的人）將子彈定位在正確的位置，然後返回圖形物件。

好的，目前還沒有使用此方法，也沒有在螢幕上繪製任何內容。讓我們解決這個問題。

我們將讓玩家可以透過按空白鍵進行射擊，我們將再次使用 KeyHandler 來實現這一點。要告訴 KeyHandler 使用空白鍵，我們必須將「」作為鍵。

在我們定義左右箭頭鍵的 KeyHandler 後加入以下程式碼：

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

登入後複製

這段程式碼將在按下空白鍵時建立一個新的項目符號，將其添加到項目符號陣列中並將其添加到舞台上，以便我們可以看到它。

我們還沒有項目符號數組，所以讓我們在定義 Player 物件之後加上它：

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

登入後複製

現在，如果您開始遊戲，您將能夠左右移動玩家並射擊子彈。但子彈將永遠留在螢幕上。讓我們解決這個問題。
在遊戲循環中，我們將更新子彈位置，並在超出範圍時將其移除。將以下程式碼加入您的遊戲循環中，就在我們更新玩家位置的位置下方：

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="太空衛士 - 部分玩家" 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="太空衛士 - 部分玩家" 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>

登入後複製

以上是太空衛士 - 部分玩家的詳細內容。更多資訊請關注PHP中文網其他相關文章！