Space Defender – trenne den Spieler

Im vorherigen Teil haben wir die Grundstruktur für unser Spiel erstellt. In diesem Teil beginnen wir mit der Erstellung des Spielerschiffs und sorgen dafür, dass es sich bewegt und schießt.

Der endgültige Quellcode ist in meinem GitHub-Repository zu finden
Und wenn Sie das Spiel spielen möchten, finden Sie es hier

Einrichten der Tastatur

Bevor wir mit der Einrichtung unseres Players beginnen, benötigen wir eine Möglichkeit, mit Tastaturereignissen umzugehen. Dazu habe ich den Tastatur-Controller aus einem PixiJS-Tutorial von kittykatattack verwendet und ihn an TypeScript angepasst.
Sie finden es in meinem GitHub-Repository.

Wir werden nicht näher auf die Funktionsweise eingehen, da dies den Rahmen dieses Projekts sprengt, aber es wartet auf Keydown- und Keyup-Ereignisse und legt einen booleschen Wert für jede gedrückte Taste fest freigegeben. Auf diese Weise können wir in unserer Spielschleife überprüfen, ob eine Taste gedrückt oder losgelassen wird, und das Verhalten unserer Spieler entsprechend aktualisieren.

Um den Tastatur-Controller zu verwenden, laden Sie die Datei „keyboard.ts“ aus dem obigen Commit herunter und legen Sie sie im Ordner „src/helpers“ Ihres Projekts ab.

Erstellen des Players

Da wir nun eine Möglichkeit haben, mit Tastaturereignissen umzugehen, können wir mit der Erstellung unseres Players beginnen. In einem zukünftigen Tutorial werden wir ein komplexeres Spiel erstellen und unser Projekt in mehrere Dateien aufteilen. Vorerst bleiben wir bei einer Datei.

Unmittelbar nach der Initialisierung Ihrer PixiJS-Anwendung warten Sie auf app.init({ und fügen Sie in der Datei main.ts den folgenden Code hinzu:

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;

Dadurch wird ein neues Grafikobjekt erstellt, ein Dreieck mit der Poly-Methode gezeichnet, es mit einer hellblauen Farbe gefüllt und am unteren Bildschirmrand positioniert.

Wenn Sie Ihr Spiel jetzt starten, sehen Sie am unteren Bildschirmrand ein kleines Dreieck. Aber wir wollen es bewegen können. Dazu müssen wir die Position des Spielers basierend auf der Tastatureingabe aktualisieren.

Den Spieler bewegen

Zuerst müssen wir die Tastatureingabe erfassen. Fügen Sie den folgenden Code direkt nach der Erstellung unseres Players hinzu:

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

Dieser Code erstellt zwei KeyHandler, einen für die linke Pfeiltaste und einen für die rechte Pfeiltaste. Wenn die Taste gedrückt wird, wird die Geschwindigkeit des Spielers auf der x-Achse auf -500 oder 500 gesetzt. Wenn die Taste losgelassen wird, wird die Geschwindigkeit des Spielers auf 0 gesetzt. Auf diese Weise können wir den Spieler nach links und rechts bewegen.

Dies allein wird den Spieler nicht bewegen, wir müssen die Position des Spielers in der Spielschleife aktualisieren. Ersetzen Sie den app.ticker.add-Aufruf durch den folgenden Code:

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

Wenn Sie den app.ticker.add-Aufruf nicht in Ihrem Code hatten, können Sie ihn einfach direkt nach der Definition der KeyHandlers hinzufügen.

Wenn Sie jetzt Ihr Spiel starten, können Sie den Spieler nach links und rechts bewegen. Großartig! Lass es uns schießen.

Schießen

Es gibt drei Dinge, über die wir nachdenken müssen, wenn wir den Spieler zum Schießen bringen wollen:

1. Wenn der Spieler die Leertaste drückt, möchten wir eine neue Kugel erstellen.
2. Wir möchten die Position der Kugel in der Spielschleife aktualisieren.
3. Wir wollen die Kugel entfernen, wenn sie ins Aus geht.

Wir brauchen also eine Methode, die ein Aufzählungszeichen erstellt, es zu einer Reihe von Aufzählungszeichen hinzufügt, die Position des Aufzählungszeichens über die Spielschleife aktualisiert und es dann entfernt, wenn es außerhalb der Grenzen liegt.

Beginnen wir mit einer Methode, die das Aufzählungszeichen erstellt. Fügen Sie den folgenden Code am Ende Ihrer main.ts-Datei hinzu:

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

Jedes Mal, wenn wir ein Aufzählungszeichen erstellen möchten, ein neues Grafikobjekt zu erstellen, ist teuer. Deshalb erstellen wir ein Vorlagenaufzählungszeichen, das wir jedes Mal klonen, wenn wir ein neues Aufzählungszeichen erstellen möchten. Das Klonen ist günstiger, als jedes Mal ein neues Objekt zu erstellen.

Wir verwenden dann die Quelle (die die Kugel abgefeuert hat), um die Kugel an der richtigen Stelle zu positionieren, und geben dann das Grafikobjekt zurück.

Okay, derzeit wird diese Methode nicht verwendet und es wird nichts auf dem Bildschirm angezeigt. Lasst uns das beheben.

Wir werden dafür sorgen, dass der Spieler durch Drücken der Leertaste schießen kann. Dafür verwenden wir wieder den KeyHandler. Um den KeyHandler anzuweisen, die Leertaste zu verwenden, müssen wir ihr „ “ als Schlüssel übergeben.

Fügen Sie den folgenden Code direkt nach der Definition der KeyHandler für die linke und rechte Pfeiltaste hinzu:

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

Dieser Code erstellt ein neues Aufzählungszeichen, wenn die Leertaste gedrückt wird, fügt es einer Reihe von Aufzählungszeichen hinzu und fügt es der Bühne hinzu, damit wir es sehen können.

Wir hatten das Aufzählungszeichen-Array noch nicht, also fügen wir es direkt nach der Definition des Player-Objekts hinzu:

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

Wenn Sie jetzt Ihr Spiel starten, können Sie den Spieler nach links und rechts bewegen und Kugeln abfeuern. Aber die Kugeln bleiben für immer auf dem Bildschirm. Lasst uns das beheben.
Im Gameloop aktualisieren wir die Position der Kugeln und entfernen sie, wenn sie außerhalb der Grenzen liegen. Fügen Sie den folgenden Code zu Ihrer Spielschleife hinzu, direkt unter der Stelle, an der wir die Position des Spielers aktualisieren:

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 – trenne den Spieler" 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 – trenne den Spieler" 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>


          

            
  

            
        

Das obige ist der detaillierte Inhalt vonSpace Defender – trenne den Spieler. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!