Im letzten Teil haben wir das Schiff des Spielers erstellt und es in Bewegung gesetzt. In diesem Teil erstellen wir die Feinde und bringen sie in Bewegung. Und dann schießen wir sie ab!

Die Feinde erschaffen

Wir werden etwas Ähnliches tun wie bei der Erstellung der Aufzählungszeichen. Wir werden eine Feindvorlage erstellen, die wir jedes Mal klonen, wenn wir einen neuen Feind erstellen möchten. Wir müssen die Feinde auch über ein Array im Auge behalten, da es mehr als einen gleichzeitig geben kann.

Aber zuerst erstellen wir die Methode, die den Feind erschafft. Fügen Sie nach der Methode createBullet den folgenden Code hinzu:

let enemyTemplate: PIXI.Graphics | undefined = undefined;
function createEnemy() {
    if(!enemyTemplate) {
        enemyTemplate = new Graphics();
        enemyTemplate
            .poly([
                0, 0,
                50, 0,
                25, 25,
            ])
            .fill(0xFF6666);
    }

    const enemy = enemyTemplate.clone();
    enemy.x = 25   (Math.random() * 480) - 50;
    enemy.y = -50;

    return enemy;
}

Wie Sie sehen können, ist es der Methode createBullet ziemlich ähnlich. Wir erstellen eine Feindvorlage, die wir jedes Mal klonen, wenn wir einen neuen Feind erstellen möchten. Anschließend positionieren wir den Feind an einer zufälligen x-Position oben auf dem Bildschirm. Der Feind hat die gleiche Form wie das Schiff des Spielers, ist jedoch rot und steht auf dem Kopf.

Wir geben den Spawn-Standort des Feindes an, indem wir die x- und y-Eigenschaften festlegen. Die x-Eigenschaft wird auf einen zufälligen Wert zwischen 25 und 480 – 50 gesetzt, sodass sich der Feind immer innerhalb des Spielbildschirms befindet. Die y-Eigenschaft ist auf -50 gesetzt, sodass sich der Feind direkt außerhalb des Bildschirms befindet und sich hineinbewegt.

Als nächstes müssen wir diese Methode aufrufen, um alle paar Sekunden einen neuen Feind zu erstellen.

Feinde hervorbringen

Wir verwenden hierfür die setInterval-Methode. Fügen Sie den folgenden Code direkt nach der Definition des Aufzählungszeichen-Arrays hinzu:

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

const enemySpawnInterval = 2500;
function spawnEnemy() {
    if(!document.hasFocus()) {
        return;
    }
    const enemy = createEnemy();
    enemies.push(enemy);
    app.stage.addChild(enemy);
}

setInterval(spawnEnemy, enemySpawnInterval);
spawnEnemy();

Wir erstellen ein neues Array mit dem Namen „Feinde“, um den Überblick über alle Feinde zu behalten. Anschließend erstellen wir eine neue Variable namens „FeindSpawnInterval“, die angibt, wie oft wir einen neuen Feind erzeugen möchten. Anschließend erstellen wir eine neue Methode namens spawnEnemy, die einen neuen Feind erstellt und ihn dem Feindes-Array und der Bühne hinzufügt. Anschließend rufen wir diese Methode alle feindseligen SpawnInterval-Millisekunden mit der setInterval-Methode auf.

Cool, jetzt erscheinen alle 2,5 Sekunden Feinde am oberen Bildschirmrand. Aber sie bewegen sich noch nicht und wir sehen sie nicht, weil sie außerhalb des Bildschirms sind. Lasst uns das beheben.

Die Feinde bewegen

Wir müssen die Position der Feinde in der Spielschleife aktualisieren. Fügen Sie den folgenden Code zu Ihrer Spielschleife hinzu, direkt unter der Stelle, an der wir die Position der Kugeln aktualisieren:

for(let i = 0; i  app.screen.height   50) {
        app.stage.removeChild(enemy);
        enemies.splice(i, 1);
    }
}

Dieser Teil des Codes durchläuft alle Feinde, aktualisiert ihre Position, indem er sie um 2,5 Pixel nach unten verschiebt, und prüft, ob sie sich außerhalb der Grenzen befinden. Wenn ja, entfernen wir sie von der Bühne und aus der Gegnerreihe.

Hübsch! Wenn Sie Ihr Spiel jetzt ausführen, sehen Sie, wie Feinde oben auf dem Bildschirm erscheinen und sich nach unten bewegen.

Jetzt ist es Zeit, sie abzuschießen!

Auf die Feinde schießen

Fügen Sie den folgenden Code zu Ihrer Spielschleife hinzu, direkt unter der Stelle, an der wir die Position der Feinde aktualisieren:

for(let i = 0; i  enemy.x &&
            bullet.x  enemy.y &&
            bullet.y 


Dieser Teil des Codes durchläuft alle Kugeln und alle Feinde und prüft, ob eine Kugel einen Feind trifft. Wenn dies der Fall ist, entfernen wir sowohl die Kugel als auch den Feind von der Bühne und ihren jeweiligen Aufstellungen.

Sie könnten diesen Code optimieren, indem Sie aus der inneren Schleife ausbrechen, wenn eine Kugel einen Feind trifft, aber im Moment ist das in Ordnung. Sie können die Schleife zur Aktualisierung der Geschossposition auch mit der Schleife zur Überprüfung der Geschosstreffer kombinieren, aber ich möchte sie aus Gründen der Übersichtlichkeit dieses Tutorials getrennt halten.

Und das ist es! Sie haben jetzt ein Spiel, in dem Sie sich nach links und rechts bewegen, Kugeln abfeuern und Feinde abschießen können. Im nächsten Teil werden wir dem Spiel einige HUD-Elemente hinzufügen und den Punktestand, das Level und die Leben des Spielers verfolgen.


  
    

      
  
  
    

      
PixiJS-Setup mit Vite und TypeScript
      
Herr. Linxed ・ 20. April
      

        #webdev
        #javascript
        #Anfänger
        #Lernprogramm
      
    
  





  
    

      
  
  
    

      
Erreichen Sie mehr mit dem „Cult of Done“
      
Herr. Linxed ・ 18. Februar
      

        #Produktivität
        #Anfänger
        #diskutieren
        #Motivation
      
    
  





Vergessen Sie nicht, sich für meinen Newsletter anzumelden, um als Erster über ähnliche Tutorials informiert zu werden.