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

[lstk.kb]

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

Bubble - Visual Programming

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

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

[lstk.kb]

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

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

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

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

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

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

[lstk.kb]

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

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

[lstk.kb]

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

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

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

[lstk.kb]

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

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

  
  
  

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

  
  
  Для этой группы я установил ID Attribute = T001
  
  Этот атрибут нужен для возможности изменять положения на странице с помощью плагина 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)

[lstk.kb]

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

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

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

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

[lstk.kb]

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

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

• Лазер (2) - Shape

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

[lstk.kb]

5. Выстрел.

• С помощью плагина
  Mouse & Keyboard Interactions
  отслеживаем нажатие на клавиши 1,2,…9

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

1. анимация Shape
   

   
   
   
   

2. Летающая тарелка останавливается и превращается во взрыв
   

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

   

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

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

[lstk.kb]

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