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

Шаг 11. Создание алмазов

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

Алмазы будут располагаться над платформами так, чтобы побуждать игрока прыгать и собирать их.

Алмазы для каждой платформы создадим в соответствующем классе. Создадим некоторое число изображений алмазов над платформой:

// ...
export class Platform {
    constructor(rows, cols, x) {
        // ...
        this.diamonds = [];
        this.createDiamonds();
    }

    createDiamonds() {
        const y = App.config.diamonds.offset.min + Math.random() * (App.config.diamonds.offset.max - App.config.diamonds.offset.min);

        for (let i = 0; i < this.cols; i++) {
            if (Math.random() < App.config.diamonds.chance) {
                const diamond = new Diamond(this.tileSize * i, -y);
                this.container.addChild(diamond.sprite);
                this.diamonds.push(diamond);
            }
        }
    }
    // ...
}

Пройдём по всем тайлам платформы и для каждого проверим возможность создания алмаза сверху. Вероятность берётся из глобальной конфигурации App.config.diamonds.chance.

Если над тайлом нужно создать алмаз, создадим экземпляр Diamond. Поместим его в this.diamonds и добавим дочерним элементом контейнера платформы.

Добавим настройки создания алмазов в глобальную конфигурацию:

// ...
export const Config = {
    // ...
    diamonds: {
        chance: 0.4,
        offset: {
            min: 100,
            max: 200
        }
    }
}

Свойство chance задаёт вероятность появления алмаза над каждым тайлом платформы. Объект offset определяет допустимый диапазон высоты алмаза над платформой.

Осталось реализовать класс Diamond. Пока реализуем только вывод спрайта алмаза:

import { App } from '../system/App';

export class Diamond {
    constructor(x, y) {
        this.sprite = App.sprite("diamond");
        this.sprite.x = x;
        this.sprite.y = y;
    }
}