检测圆圈内的图像-HTML5画布游戏

Question

我正在使用canvas元素开发HTML5游戏。

我正在绘制一个像这样的圆（用户可以移动该圆）：

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

我像这样在画布上放置炸弹图像：

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

目标是使用户在炸弹图像上移动“切碎”圆并吃掉它。我的问题是，如何检测炸弹在圆圈内？我正在尝试通过计算从圆到炸弹图像的距离来做到这一点，但结果却不尽相同。这就是我的距离。

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!"); }