Forum Academy Marketplace Showcase Pricing Features

Игра на bubble, возможно или нет?

Я решил поиграться с бабблом :). И так, ИГРА на bubble:

Если данный пост наберет хотя бы 10 лайков, тогда я распишу как реализовывал логику, какие плагины использовал.

Есть вопросы пишите

16 Likes

Начну обзор с установленных плагинов

12-11-2021 15-08-52

Все плагины бесплатные

Editing_Element_Position
Этот плагин использовался для изменение положения летающей тарелки.

Mouse & Keyboard Interactions
Этот плагин я использовал для отслеживания нажатия цифр на клавиатуре

Particles.js
Фон звездного неба

Random Number Generator
Рандомный генератор чисел

Немного пред истории.

В чате телеграм канала (https://t.me/bubble_is_chat) был задан вопрос - “кто пробовал создавать мини игры с анимацией, насколько это реализуемо в баббле, или если нереализуемо то есть ли возможность встроить флэш игры?
Мне стало интересно, и за два часа я набросал первый вариант, а потом еще за час подшаманил внешний вид и придал минимальную цель и законченность.
Вывод: На bubble можно делать минимальную интерактивность, увлекать пользователей игровыми процессами :slight_smile:

1. Фон
Фон состоит из группы - 001_Gr_Background (1)


у которой необходимо указать
ID Attribute = particles-js (2)
и элемент плагина particles (3)
Для запуска particles нужно добавить Event в WF

В настройках по умолчанию я уменьшил скорость и расстояние отрисовки линий.

2. Движок летающей тарелки.

  • Используемые состояния


    12-11-2021 23-14-44

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


    Для этой группы я установил ID Attribute = T001
    12-11-2021 23-21-41
    Этот атрибут нужен для возможности изменять положения на странице с помощью плагина Editing_Positio.

  • Добавляем на страницу элемент Editing_Positio (1), и настраиваем его параметры


    (2) - это ID Attribute группы летающей тарелки
    (3) - это ID Attribute родителя в нашем случае это страница. Я ей тоже задал ID.
    (4) - координаты летающей тарелки
    (5) - приращение/шаг изменения координаты по оси Y
    (6) - размеры летающей тарелки

  • Все это движется благодаря WF (1)


    Здесь каждую секунду происходит приращение координаты Y (2), если выполняются три условия. 1. Расстояние до земли >0. 2.Состояние Stop = no и 3. кол-во сбитых кораблей <5.

  • Еще нам нужны будут два параметра в URL
    WF при загрузке страницы


    Если num и v пустые мы их задаем. num - номер клавиши для выстрела v - скорость (приращение координаты Y)

  1. Что еще надо знать про летающую тарелку ?

12-11-2021 23-47-22

  • Летающую тарелку не видно когда она достигла земли и когда кол-во сбитых кораблей >=5

  • Когда состояние Stop = yes картинка тарелки меняется на взрыв.

  • Картинка летающей тарелки и взрыв гифки.

4. Земля и ее мощь :slight_smile:

  • Земля (1) - статическая картинка.

  • Лазер (2) - Shape

  • Текст (3) - который подсказывает какую кнопку нужно жать для выстрела

5. Выстрел.

Пользователь нажал 1 и если это цифра соответствует цифре выстрела (3) выполняется цепочка действий.

  1. анимация Shape


  2. Летающая тарелка останавливается и превращается во взрыв
    13-11-2021 00-28-11

  3. меняются состояния страницы на исходные

  4. Переходим на эту же страницу с новыми параметрами.
    13-11-2021 00-29-49
    В первом варианте я использовал генератор случайных чисел, но он в один момент стал показывать три цифры 3,6 и 9. Новый я не стал писать поэтому задал их в ручную.

  5. На остальных цифрах цепочка повторяется.

1 Like

Пишем вопросы, ставим лайки.