JS + Phaser пишем игру с Дино (часть 3) 🦖

В этой части мы с вами разберемся с тем, как добавить препятствия в нашу игру, научимся создавать дополнительные объекты!

Заготовка к созданию врагов

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

create() {
    // Оставшийся код функции
    this.respawnTime = 0;
}

Дальше давайте создадим пустую группу физических объектов, в которую мы в дальнейшем будем помещать наши препятствия:

create() {
    // Оставшийся код функции
    this.obsticles = this.physics.add.group();
}

Ну что же, теперь нужно написать функцию, которая как раз будет отвечать за создание препятствий:

placeObsticle() {
}

Для начала объявим количество препятствий, которые мы хотим создать, думаю оптимально будет сделать максимальное количество 7, чтобы создать, например 6 кактусов и 1го птиродактеля. Еще надо бы сделать рандомную дистанцию между ними, но так, чтобы Дино физически мог пройти игру:

placeObsticle() {
    const obsticleNum = Math.floor(Math.random() * 7) + 1;
    const distance = Phaser.Math.Between(600, 900);
}

Нам нужно где-то вызывать функцию создания препятствий, а самое подходящее место - это функция update(), давайте допишем туда следующий код:

update() {
    // Оставшийся код функции
    
    // delta - время, которое прошло с момента прошлого фрейма
    this.respawnTime += delta * this.gameSpeed * 0.08;
    if (this.respawnTime >= 1500) {
        this.placeObsticle();
        // после того как создадим препятствие,
        // надо бы обнулить таймер до следующей пачки
        this.respawnTime = 0;
    }
}

Сейчас у вас код будет ругаться, на то, что delta не объявлена, на самом деле она может появиться в качестве параметров функции update(), так что давайте это тоже добавим:

update(time, delta) {
    // код функции
}

Больше кактусов и птеродактилей

Давайте вернемся к функции placeObsticle() и начнем там создавать наших врагов, напишем обработчик так, чтобы когда obsticleNum > 6, мы будем создавать 1го птеродактиля, а если меньше то кактусы:

placeObsticle() {
    // Получим ширину и высоту из конфигов игры
    const { width, height } = this.game.config;
    
    const obsticleNum = Math.floor(Math.random() * 7) + 1;
    const distance = Phaser.Math.Between(600, 900);

    let obsticle;
    if (obsticleNum > 6) {
        // Птеродактиль может лететь на разной высоте
        const enemyHeight = [50, 70];
        obsticle = this.obsticles.create(width + distance, height - enemyHeight[Math.floor(Math.random() * 2)], `enemy-bird`)
          .setOrigin(0, 1);
        // Дальше мы с вами создадим эту анимацию
        obsticle.play('enemy-dino-fly', 1);
        obsticle.body.height = obsticle.body.height / 1.5;
    } else {
        // Если вы посмотрите в нашу статику,
        // то там есть 6 разных вариантов отрисовки кактусов,
        // именно поэтому картинка спрайта obsticle-${obsticleNum}
        obsticle = this.obsticles.create(width + distance, height, `obsticle-${obsticleNum}`)
          .setOrigin(0, 1);

        obsticle.body.offset.y = +10;
    }
 }

Если вы сейчас запустите игру, то вы не сможете увидеть наши препятствия, нам для начала нужно научить их передвигаться:

update(time, delta) {
    // Остальной код функции
    Phaser.Actions.IncX(this.obsticles.getChildren(), -this.gameSpeed);
}

Давайте наконец-то запустим нашу игру:

Давайте еще научим нашего претодактиля красиво летать, для этого создадим для него анимацию:

initAnims() {
    // Оставшийся код функции

    this.anims.create({
        key: 'enemy-dino-fly',
        frames: this.anims.generateFrameNumbers('enemy-bird', {start: 0, end: 1}),
        frameRate: 6,
        repeat: -1
    });
 }

На этом я закончу третью часть из цикла статей по созданию игры с Дино, надеюсь вам было интересно и вы попробовали сами с нуля создать свою игру!

JS + Phaser пишем игру с Дино (часть 4) 🦖->