Киев

Украина

Игра очень простая: один экран, на котором отрисовываются шарики, которые нужно перемещать.
При нажатии кнопки "Start" появляется определенное (в настройках) кол-во одноцветных (красные) шариков (диаметр и кол-во настраивается в настройках), они располагаются в центре сцены по определенному алгоритму (простому: каждый шарик выбирает себе рандомно два других и занимает позицию на середине расстояния между ними 1/2 * l и так происходит с каждым, пока все шарики не встанут на свои позиции, это процесс рекурсивный, т.к. пока все "не устаканятся" они будут двигаться, т.к. изменение позиции любого шарика вызывает изменение позиции "следящего" связанного с ним шарика и ему приходится смещаться чтобы удовлетворить основному правилу расположения на середине расстояния между 2мя шариками, с которыми он связан (при распределении в начале рандомно, но навсегда).

После того как шарики "успокоились" и заняли свои места (время зависит от кол-ва шариков), можно приступать собственно к игре. Помечается (кликом и тачем) один из шариков и он меняет свой цвет на синий, остальные остаются красными. И ставится точка на сцене куда его нужно переместить (тоже кликом или тачем) формируя полупрозрачную зону (заполненную окружность 30% прозрачности синего цвета, диаметр зоны берется из настроек).

Задача перемещая по одному шарику (тачем или удерживая левую кнопку мыши) выбрав один и перемещая его в другое положение (остальные пока не отпустить его не двигаются) и отпустив (снять палец с тача или кнопку мыши) все остальные опять начинают занимать правильные позиции по правилу находится на равном расстоянии от связанных с ним двух других, начиная с тех что были связаны с тем шариком, который мы только что переместили и по цепочке все остальные опять начинают перемещаться, что тоже может вызвать перемещение и смещенного нами шарика, но цель в конечном итоге такими изменениями привести синий шарик (который мы выбрали в начале) в синюю зону (окружность), причем его перемещать непосредственно (кликом, тачем) - НЕЛЬЗЯ, только через перемещение остальных шариков. Как только он (выбранный, синий) касается ее (целевой зоны) - игра останавливается, показываем Alert "You win" и можно заново нажать в настройках "Start"

При загрузке поле пустое, есть зона с  настройками (см. скриншоты).
В настройках есть следующие поля:

Count of balls: (3-1000)
Ball's diameter: (in pixels)
Target zone diameter: (in pixels)
Max distanse from "Partners": (in pixels)
и кнопка "Start"
нужно чтобы эти значения сохранялись между запусками (если это возможно через Cookies).

Размер сцены все свободное место в окне за исключением вертикальной части с Настройками. Оно масштабируется если менять размер окна, т.е. сдвигается в свободную зону (где нет шариков) и расстояния между шариками (всеми пропорционально сокращается если они ВСЕ не помещаются на экран (есть минимальное расстояние между шариками - их 2*diameter + 1 diameter) если окно сжалось что уже нельзя масштабировать, то его края просто будут перекрывать и не будет видно шариков, которые вне этой границы.

Еще момент, при начальном распределении шариков их нужно до "выбора двух партнеров" расположить в центре сцены (рандомно распределить), только чтобы не они не "налазили" друг на друга, чтобы их окружности не пересекались и тоже самое ограничение при любых перемещениях этих шариков - они не дают возможность пересечь окружность и подойти ближе чем их собственный диаметр.

Браузеры которые должны поддерживаться это Safari, Chrome, Firefox на десктопах и Android/iOS браузеры (последние мажорные версии). Плюс поддержка тачскрина как мышки.

Прикрепил скетчи (извиняюсь, там достаточно коряво нарисовано, но может помочь понять динамику)
Если будут вопросы - пишите.

Игра очень простая: один экран, на котором отрисовываются шарики, которые нужно перемещать.
При нажатии кнопки "Start" появляется определенное (в настройках) кол-во одноцветных (красные) шариков (диаметр и кол-во настраивается в настройках), они располагаются в центре сцены по определенному алгоритму (простому: каждый шарик выбирает себе рандомно два других и занимает позицию на середине расстояния между ними 1/2 * l и так происходит с каждым, пока все шарики не встанут на свои позиции, это процесс рекурсивный, т.к. пока все "не устаканятся" они будут двигаться, т.к. изменение позиции любого шарика вызывает изменение позиции "следящего" связанного с ним шарика и ему приходится смещаться чтобы удовлетворить основному правилу расположения на середине расстояния между 2мя шариками, с которыми он связан (при распределении в начале рандомно, но навсегда).

После того как шарики "успокоились" и заняли свои места (время зависит от кол-ва шариков), можно приступать собственно к игре. Помечается (кликом и тачем) один из шариков и он меняет свой цвет на синий, остальные остаются красными. И ставится точка на сцене куда его нужно переместить (тоже кликом или тачем) формируя полупрозрачную зону (заполненную окружность 30% прозрачности синего цвета, диаметр зоны берется из настроек).

Задача перемещая по одному шарику (тачем или удерживая левую кнопку мыши) выбрав один и перемещая его в другое положение (остальные пока не отпустить его не двигаются) и отпустив (снять палец с тача или кнопку мыши) все остальные опять начинают занимать правильные позиции по правилу находится на равном расстоянии от связанных с ним двух других, начиная с тех что были связаны с тем шариком, который мы только что переместили и по цепочке все остальные опять начинают перемещаться, что тоже может вызвать перемещение и смещенного нами шарика, но цель в конечном итоге такими изменениями привести синий шарик (который мы выбрали в начале) в синюю зону (окружность), причем его перемещать непосредственно (кликом, тачем) - НЕЛЬЗЯ, только через перемещение остальных шариков. Как только он (выбранный, синий) касается ее (целевой зоны) - игра останавливается, показываем Alert "You win" и можно заново нажать в настройках "Start"

При загрузке поле пустое, есть зона с  настройками (см. скриншоты).
В настройках есть следующие поля:

Count of balls: (3-1000)
Ball's diameter: (in pixels)
Target zone diameter: (in pixels)
Max distanse from "Partners": (in pixels)
и кнопка "Start"
нужно чтобы эти значения сохранялись между запусками (если это возможно через Cookies).

Размер сцены все свободное место в окне за исключением вертикальной части с Настройками. Оно масштабируется если менять размер окна, т.е. сдвигается в свободную зону (где нет шариков) и расстояния между шариками (всеми пропорционально сокращается если они ВСЕ не помещаются на экран (есть минимальное расстояние между шариками - их 2*diameter + 1 diameter) если окно сжалось что уже нельзя масштабировать, то его края просто будут перекрывать и не будет видно шариков, которые вне этой границы.

Еще момент, при начальном распределении шариков их нужно до "выбора двух партнеров" расположить в центре сцены (рандомно распределить), только чтобы не они не "налазили" друг на друга, чтобы их окружности не пересекались и тоже самое ограничение при любых перемещениях этих шариков - они не дают возможность пересечь окружность и подойти ближе чем их собственный диаметр.

Браузеры которые должны поддерживаться это Safari, Chrome, Firefox на десктопах и Android/iOS браузеры (последние мажорные версии). Плюс поддержка тачскрина как мышки.

Прикрепил скетчи (извиняюсь, там достаточно коряво нарисовано, но может помочь понять динамику)
Если будут вопросы - пишите.

Русин Михаил michael_r

Простая 2D игра на JavaScript