Space Defender - séparez les ennemis

Dans la dernière partie, nous avons créé le vaisseau du joueur et l'avons fait bouger. Dans cette partie, nous allons créer les ennemis et les faire bouger. Et puis nous les abattrons !

Créer les ennemis

Nous allons faire quelque chose de similaire à celui lorsque nous avons créé les puces. Nous allons créer un modèle d'ennemi que nous clonerons chaque fois que nous voudrons créer un nouvel ennemi. Nous devons également suivre les ennemis via un tableau car il peut y en avoir plusieurs en même temps.

Mais d'abord, nous allons créer la méthode qui crée l'ennemi. Ajoutez le code suivant après la méthode createBullet :

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

Comme vous pouvez le voir, c'est assez similaire à la méthode createBullet. Nous créons un modèle d'ennemi que nous clonons chaque fois que nous voulons créer un nouvel ennemi. Nous positionnons ensuite l'ennemi à une position x aléatoire en haut de l'écran. L'ennemi a la même forme que le vaisseau du joueur, mais il est rouge et à l'envers.

Nous spécifions l'emplacement d'apparition de l'ennemi en définissant les propriétés x et y. La propriété x est définie sur une valeur aléatoire comprise entre 25 et 480 - 50, de sorte que l'ennemi soit toujours dans l'écran de jeu. La propriété y est définie sur -50, de sorte que l'ennemi se trouve juste à l'extérieur de l'écran et y pénètre.

Ensuite, nous devons appeler cette méthode pour créer un nouvel ennemi toutes les quelques secondes.

Ennemis engendrés

Nous utiliserons la méthode setInterval pour cela. Ajoutez le code suivant juste après l'endroit où nous avons défini le tableau de puces :

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

Nous créons un nouveau tableau appelé ennemis pour garder une trace de tous les ennemis. Nous créons ensuite une nouvelle variable appelée ennemisSpawnInterval qui spécifie la fréquence à laquelle nous voulons faire apparaître un nouvel ennemi. Nous créons ensuite une nouvelle méthode appelée spawnEnemy qui crée un nouvel ennemi et l'ajoute au tableau des ennemis et à la scène. Nous appelons ensuite cette méthode toutes les millisecondes d'ennemiSpawnInterval en utilisant la méthode setInterval.

Cool, maintenant nous avons des ennemis qui apparaissent en haut de l'écran toutes les 2,5 secondes. Mais ils ne bougent pas encore et on ne les voit pas car ils sont hors de l'écran. Réparons ça.

Déplacer les ennemis

Nous devons mettre à jour la position des ennemis dans la boucle de jeu. Ajoutez le code suivant à votre boucle de jeu, juste en dessous de l'endroit où nous mettons à jour la position des balles :

for(let i = 0; i < enemies.length; i++) {
    const enemy = enemies[i];
    enemy.y += 2.5;

    if(enemy.y > app.screen.height + 50) {
        app.stage.removeChild(enemy);
        enemies.splice(i, 1);
    }
}

Cette partie du code bouclera sur tous les ennemis, mettra à jour leur position en les déplaçant vers le bas de 2,5 pixels et vérifiera s'ils sont hors limites. S'ils le sont, nous les retirons de la scène et du tableau des ennemis.

Bien ! si vous lancez votre jeu maintenant, vous verrez les ennemis apparaître en haut de l'écran et descendre.

Maintenant, il est temps de les abattre !

Tirer sur les ennemis

Ajoutez le code suivant à votre boucle de jeu, juste en dessous de l'endroit où nous mettons à jour la position des ennemis :

for(let i = 0; i < bullets.length; i++) {
    const bullet = bullets[i];
    for(let j = 0; j < enemies.length; j++) {
        const enemy = enemies[j];
        if(
            bullet.x > enemy.x &&
            bullet.x < enemy.x + 50 &&
            bullet.y > enemy.y &&
            bullet.y < enemy.y + 25
        ) {
            app.stage.removeChild(bullet);
            app.stage.removeChild(enemy);
            bullets.splice(i, 1);
            enemies.splice(j, 1);
        }
    }
}

Cette partie du code bouclera sur toutes les balles et tous les ennemis et vérifiera si une balle touche un ennemi. Si c'est le cas, nous retirons à la fois la balle et l'ennemi de la scène et de leurs rangées respectives.

Vous pouvez optimiser ce code en sortant de la boucle interne lorsqu'une balle touche un ennemi, mais pour l'instant, c'est très bien. Vous pouvez également combiner la boucle de mise à jour de la position de la balle avec la boucle de vérification de la frappe de la balle, mais j'aime les garder séparées pour plus de clarté dans ce tutoriel.

Et c'est tout ! Vous disposez désormais d'un jeu dans lequel vous pouvez vous déplacer à gauche et à droite, tirer des balles et abattre des ennemis. Dans la partie suivante, nous allons ajouter quelques éléments HUD au jeu et suivre le score, le niveau et les vies du joueur.

---

Configuration PixiJS avec Vite et TypeScript

M. Linxed ・ 20 avril

#webdev #javascript #débutants #tutoriel

Accomplissez davantage avec le "Cult of Done"

M. Linxed ・ 18 février

#productivité #débutants #discuter #motivation

---

N'oubliez pas de vous inscrire à ma newsletter pour être le premier informé des tutoriels similaires à ceux-ci.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!