Определить изображение внутри круга - HTML5 Canvas Game

Question

Я работаю над HTML5-игрой, используя элемент canvas.

Я рисую такой кружок (пользователь может перемещать этот круг) :

ctx.arc(chomperX,chomperY,chomperRadius,0,Math.PI*2);

Я размещаю изображения бомб на холсте следующим образом:

ctx.drawImage(bombImg,bombX,bombY,15,15);

Цель состоит в том, чтобы пользователь мог двигаться"chomper" обведите изображение бомбы и съешьте его.Мои вопросы: как я могу обнаружить, что бомба находится внутри круга?Я пытаюсь сделать это путем вычисления расстояния от круга до изображения бомбы, но я получаю смешанные результаты.Вот как я получаю расстояние.

bx = bombX - chomperX;
by = bombY - chomperY;
bombDistance = Math.floor(Math.sqrt(bx * bx + by * by))
if (bombDistance < bombRadius + chomperRadius) { console.log("THE BOMB IS IN THE CIRCLE!"); }

Answer 1

Предполагая, что bombRadius меньше, чем chomperRadius,

bx = bombX - chomperX;
by = bombY - chomperY;
bombDistance = Math.sqrt(bx * bx + by * by);
if (bombDistance < chomperRadius - bombRadius) { console.log("THE BOMB IS IN THE CIRCLE!"); }