← На главную
Серия руководств

Шаг 10. Столкновение героя с платформой

Создание платформера с PixiJS • Шаг 10 из 15

Сейчас герой может выполнить только два прыжка, поскольку счётчик this.jumpIndex никогда не сбрасывается. В какой момент его нужно сбросить, чтобы снова разрешить двойной прыжок?

В момент касания платформы. Это означает, что герой приземлился и предыдущий прыжок завершён.

Как отследить столкновение героя и платформы? Снова используем физический движок и взаимодействие их физических тел.

Движок Matter отправляет событие при столкновении двух физических тел. Нужно подписаться на него. Сделаем это в классе GameScene:

import * as Matter from 'matter-js';
import { App } from '../system/App';
//...

export class GameScene extends Scene {
    create() {
        //...
        this.setEvents();
    }

    setEvents() {
        Matter.Events.on(App.physics, 'collisionStart', this.onCollisionStart.bind(this));
    }

    onCollisionStart(event) {
        const colliders = [event.pairs[0].bodyA, event.pairs[0].bodyB];
        const hero = colliders.find(body => body.gameHero);
        const platform = colliders.find(body => body.gamePlatform);

        if (hero && platform) {
            this.hero.stayOnPlatform(platform.gamePlatform);
        }
    }
    // ...
}

Метод onCollisionStart автоматически запускается при событии collisionStart, означающем столкновение физических тел.

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

Если найдены и герой, и платформа, вызовем stayOnPlatform, чтобы установить героя на платформу.

Реализуем этот метод в классе Hero:

export class Hero {
    // ...

    stayOnPlatform(platform) {
        this.platform = platform;
        this.jumpIndex = 0;
    }

Нужно лишь сбросить счётчик и сохранить текущую платформу в свойстве this.platform.

Теперь улучшим startJump, добавив проверку, находится ли герой на платформе. Если прыжок разрешён, свойство this.platform нужно сбросить.

    startJump() {
        if (this.platform || this.jumpIndex === 1) {
            ++this.jumpIndex;
            this.platform = null;
            Matter.Body.setVelocity(this.body, { x: 0, y: -this.dy });
        }
    }