Теперь наш стик двигается, но его можно двигать вообще по всему экрану, а он должен двигаться в границах большого круга outer. Первое что приходит в голову, это просто добавить проверку: если дистанция от центра джойстика до позиции мыши меньше, только тогда двигаем курсор. Давайте так и сделаем.

onMouseDown(() => {
if (this.pos.dist(mousePos()) < outer.radius) {
thumb.pos = mousePos().sub(this.pos)
}
})

Разберём код. this.pos - это центр джойстика, dist() это метод для получения дистанции между векторами, по сути мы получаем длину отрезка между двумя точками. Подробнее в документации kaboomjs.com/#Vec2 . mousPos() всё так же позиция мыши, меньше чем outer.radius - radius это свойство, которе добавляется компонентом circle() подробнее kaboomjs.com/#Circle . Если мы сейчас запустим код, то джойстик будет работать и даже двигаться в границах внешнего круга, но совсем не так как мы бы хотели. В следующем посте мы это исправим.