Как заблокировать кнопку при пересечении элемента?

Question

[Norwood]

Есть квадрат. Внутри него круг. Каким образом можно заблокировать кнопку при касании круга любой стороны квадрата. Т.е., как только следующее перемещение круга должно привести к выходу за пределы квадрата, то эта кнопка должна быть disabled.
Сам код тут.

Answer 1

[Alex]

1. После каждого перемещения, нужно посчитать где будут проходить границы круга если нажать ещё раз. И если он выходит за рамки квадрата -- выключить кнопку
   
2. При изменении шага перемещения, нужно выполнить пересчет из пункта №1.
   

Но есть способ попроще. Вместо того, чтобы включать/выключать кнопки, можно определить максимальное/минимальные координаты для круга. И при каждом перемещении не позволять кругу выйти за установленные лимиты. Так он просто "упрётся" в край квадрата сколько не нажимай.

Comments

[Norwood]

Проблема в том, что квадрат, круг и шаг перемещения должен задавать пользователь.

[Alex]

Ну, так это и не важно. Устанавливайте границы на основе размеров квадрата и Круга.
Например для левой стороны примерно так:
Лимит равен половине диаметра.

circle.style.left = Math.max(circle.offsetLeft - step, circle.offsetWidth / 2) + 'px';

[Norwood]

Alex, благодарю! Буду разбираться!