В прошлой части мы создали корабль игрока и заставили его двигаться. В этой части мы создадим врагов и заставим их двигаться. И тогда мы их собьем!

Создание врагов

Мы собираемся сделать что-то похожее на то, как мы создавали пули. Мы собираемся создать шаблон врага, которого будем клонировать каждый раз, когда захотим создать нового врага. Нам также необходимо отслеживать врагов через массив, потому что их может быть несколько одновременно.

Но сначала мы создадим метод, создающий врага. Добавьте следующий код после метода 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;
}

Как видите, он очень похож на метод createBullet. Мы создаем шаблонного врага, которого клонируем каждый раз, когда хотим создать нового врага. Затем мы размещаем врага в случайной позиции x вверху экрана. Враг имеет ту же форму, что и корабль игрока, но красный и перевернутый.

Мы указываем место появления врага, задав свойства x и y. Свойству x присвоено случайное значение от 25 до 480–50, чтобы враг всегда находился внутри игрового экрана. Для свойства y установлено значение -50, так что враг находится сразу за пределами экрана и перемещается в него.

Далее нам нужно вызывать этот метод для создания нового врага каждые несколько секунд.

Нерест врагов

Для этого мы будем использовать метод setInterval. Добавьте следующий код сразу после определения массива маркеров:

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

Мы создаем новый массив под названием враги, чтобы отслеживать всех врагов. Затем мы создаем новую переменную под названием врагСпаунИнтервал, которая определяет, как часто мы хотим создавать нового врага. Затем мы создаем новый метод spawnEnemy, который создает нового врага и добавляет его в массив врагов и на сцену. Затем мы вызываем этот метод каждые миллисекунды врагаSpawnInterval, используя метод setInterval.

Круто, теперь враги появляются в верхней части экрана каждые 2,5 секунды. Но они пока не движутся, и мы их не видим, потому что они находятся за пределами экрана. Давайте это исправим.

Перемещение врагов

Нам нужно обновить положение врагов в игровом цикле. Добавьте следующий код в игровой цикл прямо под тем местом, где мы обновляем положение пуль:

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

Эта часть кода будет перебирать всех врагов, обновлять их положение, перемещая их на 2,5 пикселя вниз, и проверять, выходят ли они за пределы поля. Если да, мы удаляем их со сцены и из массива врагов.

Хороший! если вы сейчас запустите игру, вы увидите, как враги появляются в верхней части экрана и перемещаются вниз.

Теперь пришло время их сбить!

Стрельба по врагам

Добавьте следующий код в игровой цикл прямо под тем местом, где мы обновляем положение врагов:

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


Эта часть кода будет перебирать все пули и всех врагов и проверять, попадает ли пуля во врага. Если это так, мы удаляем и пулю, и врага со сцены и их соответствующих массивов.

Вы могли бы оптимизировать этот код, выйдя из внутреннего цикла, когда пуля попадает во врага, но на данный момент это нормально. Вы также можете объединить цикл обновления положения пули с циклом проверки попадания пули, но я предпочитаю разделить их для ясности этого урока.

Вот и все! Теперь у вас есть игра, в которой вы можете перемещаться влево и вправо, стрелять пулями и сбивать врагов. В следующей части мы добавим в игру некоторые элементы HUD и будем отслеживать счет, уровень и жизни игрока.


  
    

      
  
  
    

      
Настройка PixiJS с помощью Vite и TypeScript
      
Мистер. Линксед ・ 20 апреля 
      

        #webdev
        #javascript
        #новички
        #руководство
      
    
  





  
    

      
  
  
    

      
Достигайте большего с «Культом готового»
      
Мистер. Linxed ・ 18 февраля 
      

        #производительность
        #новички
        #обсуждать
        #мотивация
      
    
  





Не забудьте подписаться на мою рассылку, чтобы первыми узнавать о подобных уроках.