太空卫士 - 部分玩家

在上一部分中，我们创建了游戏的基本结构。在这一部分中，我们将开始创建玩家的飞船并使其移动和射击。

最终的源代码可以在我的 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 的位置之后。

现在，如果您开始游戏，您将能够左右移动玩家。伟大的！让我们来拍摄吧。

射击

当我们想让玩家射击时，我们需要考虑三件事：

1. 当玩家按下空格键时，我们想要创建一个新的子弹。
2. 我们想要更新子弹在游戏循环中的位置。
3. 我们想在子弹出界时将其移除。

所以我们需要一个方法来创建子弹，将其添加到子弹数组中，通过游戏循环更新子弹位置，然后在超出范围时将其删除。

让我们从创建项目符号的方法开始，在 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中文网其他相关文章！