Flying Coins (Canvas 2D Library)

Модульная JS-библиотека для анимации падающих монет. Позволяет создавать изолированные сцены и управлять эффектами (дождь, взрыв, вулкан) независимо друг от друга.

Установка

npm install flying-coins

Использование

1. Создание сцены

import { CoinScene, CoinRain, CoinVolcano } from 'flying-coins';

// Инициализация в контейнере
const container = document.getElementById('my-container');
const scene = new CoinScene(container, {
    coinSrc: 'path/to/coin.png', // Опционально: путь к изображению монеты
    bgTransparent: true           // Опционально: прозрачный фон (по умолчанию true)
});

2. Запуск эффектов

Дождь из монет (CoinRain):

const rain = new CoinRain({
    loops: 0,       // 0 = Бесконечно
    interval: 0.17, // Интервал появления монет (сек)
    immediate: true // Начать спавн сразу
});
scene.add(rain);

// Остановить позже
setTimeout(() => rain.stop(), 5000);

Вулкан / Фонтан (CoinVolcano):

const volcano = new CoinVolcano({
    x: 0.5,         // Позиция X (0.0 - 1.0)
    y: 1.0,         // Позиция Y (0.0 - 1.0, 1.0 = низ)
    count: 20,      // Количество монет в одном выбросе
    loops: 5,       // Количество выбросов
    interval: 0.2,  // Интервал между выбросами
    strength: 1,    // Сила выброса (высота)
    spread: 1,      // Разброс по ширине
});
scene.add(volcano);

Взрыв (CoinBurst):

const burst = new CoinBurst({
    count: 18,      // Количество монет
    strength: 1,    // Сила взрыва
    loops: 1        // Обычно 1 раз
});
scene.add(burst);

3. Управление

scene.remove(rain); // Удалить конкретный эффект
scene.clear();      // Удалить все эффекты и монеты, очистить экран
scene.destroy();    // Полностью уничтожить сцену и освободить ресурсы

4. Настройка внешнего вида

Изменить изображение монеты:

// Можно использовать любой URL изображения (png/jpg/svg)
scene.setCoinImage('https://example.com/my-custom-coin.png');

API Reference

Class CoinScene

Главный контроллер сцены.

• constructor(container, options)
  • container: DOM элемент для канваса.
  • options.coinSrc: URL изображения монеты (string).
  • options.bgTransparent: Прозрачный фон (boolean, default: true).
• Methods:
  • add(effect): Добавить и запустить эффект.
  • remove(effect): Остановить и удалить эффект.
  • clear(): Очистить все монеты и эффекты.
  • setCoinImage(url): Сменить текстуру монеты на лету.
  • destroy(): Удалить канвас и остановить анимацию.

Class CoinRain

Эффект падающего дождя.

• constructor(options)
  • options.loops: Кол-во циклов (0 = бесконечно).
  • options.interval: Интервал спавна (сек).
  • options.immediate: Спавнить ли первую порцию сразу (boolean).

Class CoinVolcano

Эффект выброса монет снизу (или из точки).

• constructor(options)
  • options.x, options.y: Координаты центра выброса (0.0-1.0).
  • options.count: Кол-во монет за цикл.
  • options.loops: Кол-во выбросов (0 = бесконечно).
  • options.interval: Время между выбросами.
  • options.strength: Множитель вертикальной скорости.
  • options.spread: Множитель горизонтального разброса.
  • options.size: Множитель размера монет.
  • options.thickness: Множитель толщины монет.

Class CoinBurst

Единовременный взрыв монет.

• constructor(options)
  • options.count: Кол-во монет.
  • options.strength: Сила разлета.
  • options.loops: Кол-во повторов (0 = бесконечно).

Лицензия

MIT